Как добавить и выровнять изображение в Gutenberg

Изображения оживляют посты и страницы WordPress-сайта, делая его более привлекательным. Но иногда возникает проблема с их добавлением выравниванием.

Новый редактор WordPress (Gutenberg) решает эту проблему. Подробно рассмотрим, как в нем легко добавлять и выравнивать изображения для создания красивых макетов контента.

Как добавлять и выравнивать картинки

Новый редактор содержит следующие блоки, которые вы можете использовать для добавления изображений в посты и страницы WordPress:

  • Изображение,
  • Обложка,
  • Галерея,
  • Медиа и Текст.

Рассмотрим первый блок.

Нажмите кнопку Добавить блок или кликните по “+” в контенте, выберите блок Изображение.

Добавление блока Изображение в Gutenberg

Внутри пустого блока появятся три кнопки.

Блок Изображение

Вы можете загрузить новую картинку, выбрать из Медиабиблиотеки или вставить URL-адрес файла изображения.

Затем нажмите кнопку Загрузить и выберите изображение, которое вы хотите загрузить с вашего компьютера.

Как только фото будет добавлено, появятся панель инструментов в верхней части изображения и некоторые настройки блока в правом столбце.

Настройка изображения в блоке Изображение

Чтобы выровнять фото, используйте верхнюю панель кнопок.

Инструменты выравнивания в блоке Изображение

Доступны параметры выравнивания:

  • по левому краю,
  • по центру,
  • по правому,
  • по ширине содержимого,
  • по всей ширине.

Если картинка меньше по ширине, то выравнивание по левому/правому краю приведет к появлению текста рядом. Если ее выровнять по центру, будет отображаться в отдельной строке без текста с обеих сторон.

Выравнивание по центру в блоке Изображение

Выбор значения По ширине содержимого растянет изображение на всю ширину текстовой области. Параметр На всю ширину подтолкнет его к правому и левому краям экрана браузера.

Выравнивание на всю ширину в блоке Изображение

Как идеально выровнять изображение рядом с текстом

Часто бывает нужно идеально выровнять изображение рядом с текстом. Для этого новый редактор имеет блок Медиа и Текст. Он добавляет область с двумя столбцами. В первом вставляется фото, а в другом – текстовое содержимое.

Блок Медиа и Текст

Тут слева нужно добавить картинку, а справа вставить текст.

После этого появятся дополнительные параметры для блока. Вы можете сделать весь блок шире или на всю ширину, а также поменять местами фото и текст.

Выравнивание изображения автоматически подстраивается под высоту текста в следующем столбце.

Изменение положения элементов в блоке Медиа и Текст

Как выровнять изображения галереи

В Гутенберг для этого используется блок Галерея, который отображает картинки в виде сетки строк и столбцов.

Блог Галерея

Имеет аналогичные параметры выравнивания на панели инструментов.

Вы можете выровнять весь блок галереи по левому краю, по центру или справа, а также сделать широким или всю на ширину строки.

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Задать вопрос