Изображения — это отличный способ улучшить ваш сайт WordPress.com. Вы можете загрузить на ваш сайт наиболее распространенные файлы изображений. В этом руководстве рассказывается о разных способах добавления изображений на ваш сайт.
В этом руководстве
С изображениями можно совершать множество различных действий, поэтому мы разбили это руководство на несколько страниц.
- Загрузка изображений — вся информация о том, как загружать изображения со своего компьютера, из Интернета или библиотеки медиафайлов в свои записи или на страницы.
- Настройки изображений — добавление заголовка или подписи к изображениям. Указывает, где найти основные сведения о вашем изображении, например постоянную ссылку, размеры изображения и тип файла.
- Редактирование изображений — изображение перевернуто, слишком большое или слишком маленькое? Легко исправить. Это руководство поможет обрезать, повернуть и масшта��ировать изображения.
- Галереи и слайд-шоу — покажите свои изображения в виде галереи или слайд-шоу.
- Оптимизация изображений — если перед вставкой изображений уменьшить размер файла, то их загрузка и отображение страниц станут происходить быстрее.
- Устранение неполадок с загрузкой изображений — ваши изображения не загружаются? Вот несколько советов, чтобы все заработало!
- Устранение неполадок с размытыми изображениями — узнайте, почему изображения на вашем сайте могут отображаться размытыми, даже если качество оригинального загруженного фото хорошее.
- Поиск бесплатных изоражений и других медиафайлов — вашему сайту нужны общедоступные изображения или изображения, лицензированные для свободного использования с сохранением условий? Вот несколько рекомендаций по поиску.
Вот несколько практических примеров, демонстрирующих различные варианты показа изображений с помощью блоков. В зависимости от темы, которая используется на сайте, изображения будут выглядеть по-разному, поэтому поэкспериментируйте на своем сайте!
Все изображения любезно предоставлены бесплатной библиотекой фотографий Pexels.
Блок «Изображение» служит для добавления одиночных изображений. Он минималистичен, но в сочетании с блоком «Столбцы» позволяет творчески подойти к оформлению, как показано в теме Coutoire.
Стиль по умолчанию
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-618491.jpeg?w=688)
Стиль с закругленными углами
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-618491.jpeg?w=688)
Блок «Обложка» лучше всего использовать с темами, допускающими показ во весь ��кран. Он отлично смотрится в темах Dalston, Alves и Maywood.
Блок позволяет использовать фиксированный фон, наложение с градиентом и различные стили отображения.
Фиксированный фон ВКЛ.
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-3992516.jpeg)
Фиксированный фон ВЫКЛ.
Наложение градиентов с эффектами волнистого края сверху или снизу
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg)
Блок галереи позволяет легко добавить несколько фотографий и автоматически красиво их расположить.
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2426226.jpeg?w=688)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2607832.jpeg?w=688)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-1685818.jpeg?w=688)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-513799.jpeg?w=688)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-3567166.jpeg?w=688)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2434267.jpeg?w=688)
Блок «Слайд-шоу» отлично подходит, когда нужно поделиться фотографиями, не занимая при этом слишком много места на странице или в записи. Посмотрите, как он представлен в теме Rivington.
В приведенном ниже примере используется опция автовоспроизведения. Подробнее обо всех остальных опциях можно узнать в руководстве по блоку «Слайд-шоу».
С помощью блока «Медиа и текст» можно располагать надписи рядом с изображениями и видеороликами.
Он оснащен удобной опцией для вертикальной группировки мультимедийных материалов и текста на мобильных устройствах.
Вот примеры его творческого использования в темах Exford и Barnsbury.
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-3278769.jpeg)
«Если книга, которую вы хотите прочитать, еще не написана, то напишите ее сами».
Тони Моррисон
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/mediatextblock_stackonmobilelarge.png)
Слева видно, как содержимое будет представлено на мобильном устройстве при использовании опции вертикальной группировки.
По умолчанию мультимедийные материалы показываются сверху.
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/mobile-media-n-text-1.png?w=486)
Блок «Сравнение изображений» позволяет разместить два изображения рядом (или друг над другом) и с помощью ползунка указать различия между ними.
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/05/undraw_camping_noc8.png)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/05/undraw_camping_noc8-1.png)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/05/undraw_camping_noc8.png)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/05/undraw_camping_noc8-1.png)
Блок «Плиточная галерея» включает в себя опцию закругленных углов и может использоваться в четырёх различных стилях.
- Плитка (мозаика)
- Круглые плитки
- Квадратные плитки
- Столбцы из плиток
Это способ не только позволяет творчески подходить к показу изображений, но и может стать отличным дополнением к блоку «Слайд-шоу», как это показано в теме Rivington.
Плитка (мозаика)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-1487154.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-3527542.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/stained-glass-spiral-circle-pattern-161154.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096578.jpeg)
Круглые плитки
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-1487154.jpeg?resize=1223%2C1223)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-3527542.jpeg?resize=1253%2C1253)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/stained-glass-spiral-circle-pattern-161154.jpeg?resize=1250%2C1250)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg?resize=1253%2C1253)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096578.jpeg?resize=1253%2C1253)
Квадратные плтики с опцией закругленных углов
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-1487154.jpeg?resize=1223%2C1223)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-3527542.jpeg?resize=1253%2C1253)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/stained-glass-spiral-circle-pattern-161154.jpeg?resize=1250%2C1250)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg?resize=1253%2C1253)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096578.jpeg?resize=1253%2C1253)
Столбцы из плиток
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-1487154.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-3527542.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/stained-glass-spiral-circle-pattern-161154.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg)
![](https://cdn.statically.io/img/en-support.files.wordpress.com/2020/08/pexels-photo-2096578.jpeg)