Как добавлять и выравнивать изображения в редакторе блоков WordPress (Гутенберг)

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

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

В этой статье мы покажем вам, как вы можете легко добавлять и выравнивать изображения в WordPress для создания красивых макетов контента.^

Выравнивание изображения в редакторе WordPress

Ранее WordPress использовал текстовую область с кнопками редактирования в качестве редактора по умолчанию. Одна конкретная проблема в старом редакторе была выравнивание изображения.

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

WordPress 5.0 представил новый редактор сообщений WordPress, который называется блок-редактор Гутенберга. Исправлено несколько проблем со старым редактором, включая проблемы с выравниванием изображений.

Давайте посмотрим, как вы можете легко добавлять и выравнивать изображения в новом редакторе, чтобы создавать красивые макеты для ваших сообщений и страниц.

Добавляйте и выравнивайте изображения в WordPress

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

Образ
Встроенное изображение
Галерея
СМИ и текст
Покрытие
Начнем с простого блока изображений.

Нажмите кнопку «Добавить новый блок» или введите / изображение в редакторе сообщений, чтобы вставить блок изображения.^

Вы увидите три кнопки внутри пустого блока изображения.

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

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

Как только вы выберете изображение, WordPress загрузит его в вашу медиатеку и вставит в блок изображения.^

Теперь вы заметите панель инструментов в верхней части вашего изображения и некоторые настройки блока изображения в правом столбце. Чтобы выровнять свое изображение, вы будете использовать панель инструментов, которая появляется в верхней части изображения.^

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

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

Выбор параметра «Широкая ширина» сделает ваше изображение шире, чем текстовая область, а параметр «Полная ширина» подтолкнет его к правому и левому краям экрана браузера.^

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

Много раз вам может понадобиться идеально выровнять изображение рядом с текстом. Редактор блоков WordPress делает это проще, добавив блок Media & Text.

Этот блок в основном добавляет область с двумя столбцами. Один столбец для изображений (медиа) и второй столбец для текстового содержимого.^

Просто загрузите свое изображение и затем добавьте текст, который вы хотите отобразить рядом с ним.^

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

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

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

Редактор постов WordPress также поставляется с блоком для добавления галерей изображений. Это позволяет легко отображать изображения в виде сетки строк и столбцов.

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

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

Функция галереи по умолчанию в WordPress довольно хорошая. Однако, если вы регулярно добавляете фотогалереи к своим постам и страницам в WordPress, подумайте об использовании плагина фотогалереи, такого как Envira Gallery.

Эти плагины дадут вам больше возможностей для выравнивания изображений в ваших фотогалереях, отображения их во всплывающем окне и изменения их стиля.

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

Самый простой способ отобразить два изображения рядом в посте WordPress – добавить оба изображения в блок «Галерея».^

Просто выберите макет с двумя столбцами для блока галереи, чтобы отобразить оба изображения рядом друг с другом. Вы также можете выбрать параметр «Обрезать миниатюру», чтобы убедиться, что оба изображения имеют одинаковый размер.

Больше способов добавлять и выравнивать изображения в WordPress

Помимо изображения, мультимедиа и текста, а также блока галереи вы также можете использовать блок «Обложка» для добавления изображения обложки.

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

Блок изображения обложки имеет те же параметры выравнивания, что и блок изображения. Вы можете добавить текст поверх изображения и выбрать цвет наложения в настройках блока. Самое приятное, что вы можете выбрать опцию «Фиксированный фон», которая создает эффект фона параллакса.^

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

До сих пор мы говорили о добавлении изображений непосредственно к вашим постам и страницам. А как насчет изображений со сторонних сайтов?

Редактор блоков также делает это простым. Он поставляется с встраиваемыми блоками для популярных сайтов социальных сетей, включая Instagram, Flickr, Imgur, Photobucket и другие.

Например, если вы хотите добавить фотографию в Instagram, просто добавьте блок Instagram в редактор сообщений и введите URL-адрес сообщения, которым вы хотите поделиться.^

WordPress автоматически загрузит пост Instagram и вставит его для вас. После этого вы сможете использовать параметры выравнивания на панели инструментов.^

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

Мы надеемся, что эта статья помогла вам научиться легко добавлять и выравнивать изображения в редакторе блоков WordPress. Вы также можете ознакомиться с нашим руководством о том, как оптимизировать изображения для ускорения WordPress.

Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас в Twitter и Facebook.