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

2 min


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

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

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

Добавление и правильное выравнивание изображений в WordPress

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

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

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

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

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

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

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

  • Образ
  • Встроенное изображение
  • Галерея
  • СМИ и текст
  • Покрытие

Начнем с простого блока изображений.

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

Добавление нового графического блока в редакторе сообщений WordPress

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

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

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

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

Параметры изображения в редакторе сообщений WordPress

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

Кнопки выравнивания изображения в редакторе сообщений WordPress

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

  • Выровнять по левому краю
  • Центр выравнивания
  • Выровнять право
  • Широкая Ширина
  • Полная ширина

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

Выровнять изображение по центру в WordPress

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

Создание изображения во всю ширину в WordPress

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

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

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

Медиа и текстовый блок в редакторе постов WordPress

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

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

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

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

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

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

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

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

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

Выровняйте изображения галереи в редакторе сообщений WordPress

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

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

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

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

Отображение двух изображений рядом в постах и ​​страницах WordPress

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

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

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

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

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

Добавление изображения обложки в пост WordPress

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

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

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

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

Добавление изображений Instagram в постах и ​​страницах WordPress

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

Instagram вставлять в WordPress

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

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

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

Пост «Как добавлять и выравнивать изображения в редакторе блоков WordPress» (Гутенберг) впервые появился на WPBeginner.


0 Comments

Добавить комментарий