Как добавить изображение обложки в WordPress с помощью Gutenberg

Приветствуем вас! WordPress 5.0 был выпущен с новым блочным редактором Gutenberg и множеством интересных функций. Одним из них является блок «Обложка». Эта функция запутала большинство пользователей, потому что она очень похожа на опцию Featured Image, которая была в WordPress начиная с версии 2.9.

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

Добавление изображения обложки в Гутенберге

Итак, создаем новый пост или редактируем существующий. Нажимаем на знак «+», чтобы добавить новый блок. Находим блок «Обложка», нажимаем на него.

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

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

Нажимаем на надпись «Введите заголовок», чтобы он исчез, и добавляем свой собственный заголовок.

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

У заголовка также есть своя мини-панель инструментов, где вы можете сделать его жирным или курсивом, или добавить ссылку, зачеркивание.

В правой боковой панели находятся настройки блока:

Фиксированный фон — если вы включите его, он добавит эффект параллакса к изображению. Изображение остается фиксированным, а содержимое прокручиваться при прокрутке.

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

Непрозрачность фона — регулирует прозрачность цвета. Чем выше значение, тем менее прозрачным оно будет.

Если установить непрозрачность 100, изображение обложки не будут видны вообще, только цвет. Если вы установите непрозрачность на 0, у вас не будет никакого цвета поверх изображения обложки.

Дополнительный класс CSS — вы можете добавить уникальный класс CSS, чтобы вносить изменения в блок «Обложка» с помощью пользовательского кода CSS.

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

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

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

Они уникальны и лучше, чем обычные картинки постов, потому что у них есть опция полной ширины, и у вас есть возможность добавить на них текстовое наложение. Ну что у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!