Хотите разместить изображения рядом друг с другом в своем контенте WordPress??
Часто новички пытаются найти, как разместить два изображения рядом друг с другом в постах и страницах WordPress.
В этом пошаговом руководстве мы покажем, как легко разместить изображения рядом друг с другом в WordPress (без написания кода).
Использование редактора блоков для размещения изображений рядом друг с другом
Самый простой способ разместить изображения бок о бок — использовать редактор блоков WordPress.
В редакторе блоков есть специальный блок ‘Gallery’, который позволяет отображать изображения в строках и колонках.
Сначала вам нужно создать новый пост/страницу или отредактировать существующую, чтобы открыть редактор контента. Находясь внутри, нажмите на символ (+), чтобы добавить новый блок.
Далее вам нужно выбрать блок Галерея и добавить его на свою страницу. Вы можете найти блок Галерея в разделе Общие блоки или воспользоваться строкой поиска, чтобы быстро найти его.
Теперь вы можете легко добавлять изображения в блок галереи, перетаскивая их туда или используя кнопку Upload. Вы также можете выбрать изображения из медиатеки WordPress.
Как вы можете видеть, мы добавили 2 изображения в блок «Галерея». WordPress автоматически расположит их рядом друг с другом.
Что если вам нужно 3 изображения рядом друг с другом? Вот что произойдет, если мы добавим третье изображение. WordPress просто изменяет размеры других изображений, чтобы все 3 поместились рядом:
Если вы загрузите четвертое изображение, то WordPress разместит его под остальными.
Вы можете изменить количество изображений, которые WordPress должен разместить рядом в одной колонке.
Сначала нажмите на блок «Галерея», если он еще не выбран. В правой части экрана вы увидите настройки блока галереи.
Вы можете настроить количество столбцов на любое число от 1 до 4. Например, если вам нужны два изображения рядом, а под ними еще два, вы можете установить для параметра Columns значение 2.
Все просто!
Если вы хотите изменить расположение изображения в галерее, просто нажмите на него. Затем вы увидите стрелки, которые можно использовать для перемещения вперед или назад в галерее.
Вот готовая демонстрация галереи из нашего примера поста:
Использование плагина для размещения изображений бок о бок в WordPress
Если вы используете старый классический редактор WordPress, или если вы хотите создавать более сложные галереи, чем блок Галерея по умолчанию, то вам понадобится плагин галереи WordPress.
В рамках данного руководства мы будем использовать бесплатную версию Envira, но вы можете захотеть приобрести Pro-версию, чтобы получить мощные функции, такие как альбомы, слайд-шоу изображений и т.д.
Сначала вам нужно установить и активировать плагин Envira Gallery. Если вы не знаете, как это сделать, просто ознакомьтесь с нашим пошаговым руководством по установке плагина WordPress.
Далее вы можете перейти к разделу Галерея Envira » Добавить новую в вашей приборной панели WordPress.
Вам нужно будет дать название вашей галерее. Мы назвали нашу галерею «Пример галереи». Затем загрузите изображения, которые вы хотите использовать.
Вы можете либо перетащить их в поле загрузки, либо воспользоваться одной из кнопок «Выбрать файлы».
Вот как выглядят изображения после их загрузки:
Здесь вы можете указать название и alt-текст ваших изображений. Заголовок появляется под изображением, когда пользователь наводит на него курсор мыши.
Заголовок также отображается под изображением в режиме всплывающего окна лайтбокса, который мы рассмотрим чуть позже.
Чтобы отредактировать заголовок и alt-текст, нажмите кнопку Редактировать на изображении в галерее.
Затем вы можете изменить заголовок для своего изображения. По умолчанию будет указано имя файла изображения.
Вы также должны ввести текст alt, так как это полезно для SEO вашего WordPress сайта. Если ваш заголовок описывает изображение, то вы можете просто повторить его для текста alt.
Как только вы закончите, пожалуйста, убедитесь, что вы нажали кнопку «Сохранить метаданные», прежде чем нажать X, чтобы закрыть окно.
Чтобы добавить вашу галерею на сайт, вам сначала нужно опубликовать ее. Перейдите и нажмите кнопку «Опубликовать» в правой части экрана.
Теперь отредактируйте пост или страницу или создайте новую. В редакторе контента нажмите (+), чтобы добавить блок к посту, и выберите блок Envira Gallery. Вы можете найти ее в разделе «Общие блоки» или воспользоваться строкой поиска.
Затем вам нужно будет нажать на выпадающий список, чтобы выбрать вашу галерею.
Вы должны увидеть галерею на месте в вашем посте.
Вы можете настроить параметры в правой части экрана. Например, вы можете захотеть изменить расположение колонок или размер поля между изображениями.
Мы решили настроить нашу галерею так, чтобы она всегда отображалась в две колонки. Мы также добавили более широкие поля между изображениями.
Пользователь может нажать на изображение, чтобы увидеть полноразмерную версию в лайтбоксе. Они также могут прокручивать изображения с помощью лайтбокса.
Если вы хотите добавить больше изображений в свою галерею, то вы можете вернуться к ней, перейдя по ссылке Галерея Envira » Все галереи в вашей приборной панели WordPress. Просто нажмите на название вашей галереи, чтобы отредактировать ее.
Любые изменения, внесенные в галерею, будут отображаться везде, где вы разместили ее в постах, страницах или боковых панелях. Вам не нужно добавлять его снова.
Совет: Если вы используете классический редактор вместо редактора блоков, вы все равно можете использовать Envira Gallery.
Над классическим редактором вы увидите кнопку «Добавить галерею», которую можно использовать для добавления существующей галереи к вашему посту.
Вы также можете создать новую галерею, нажав кнопку «Добавить медиа», а затем «Создать галерею».
Мы надеемся, что это руководство помогло вам узнать, как размещать изображения рядом в WordPress. Вы также можете ознакомиться с нашим руководством по выравниванию изображений в блочном редакторе WordPress и нашим полным списком необходимых плагинов WordPress (выбор экспертов).
Источник: www.wpbeginner.com