Как использовать блок обложки WordPress

Блок обложки WordPress интересен. Он позволяет размещать изображение, видео или сплошной цвет на заднем плане и добавлять блоки содержимого на передний план. Это означает, что вы можете размещать блоки поверх других блоков. У него больше возможностей, чем у большинства блоков. Знание того, как использовать Cover Block, может значительно улучшить дизайн вашего веб-сайта.

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

Как добавить обложку в свой пост или страницу

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

Вы также можете ввести / cover и нажать Enter или выбрать блок.

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

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

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

Вы также можете выбрать один из предварительно выбранных цветов для фона.

Цвет можно использовать как наложение на ваши изображения.

Настройки и параметры защитного блока

Блок обложки имеет две области с настройками и параметрами. Первая - это панель инструментов обложки. Во-вторых, параметры блока обложки на правой боковой панели.

Панель инструментов крышки

Щелчок в любом месте блока обложки открывает его панель инструментов.

Изменение типа или стиля блока крышки

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

Перетащите или переместите

Возьмите инструмент перетаскивания (6 точек), чтобы перетащить блок куда хотите. Инструмент «Перемещение» позволяет щелкать стрелки, чтобы переместить блок или текст в содержимом.

Выравнивание

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

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

Изменить позицию содержимого

Это выбирает расположение содержимого. Он открывает сетку 3 × 3 с точками. При выборе точки содержимое перемещается в это место на изображении.

Переключить на полную высоту

Это устанавливает изображение на полную высоту, а не изменяет его размер.

Применить двухцветный фильтр

Выберите двухцветный из предварительно выбранных вариантов. Один применяется к теням, а другой - к светлым.

Выберите цвет на ползунке, чтобы настроить его.

Выберите цвет под ползунком, чтобы выбрать предварительно выбранный цвет.

Заменять

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

Параметры

Варианты крышки блока включают:

Скрыть дополнительные настройки - скрывает правую боковую панель.

Копировать - копирует блок обложки, чтобы вы могли вставить его в любом месте своей страницы или публикации.

Дублировать - создает копию блока обложки и помещает ее под оригинал.

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

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

Переместить в - позволяет перемещать блок, перемещая синюю линию вверх или вниз с помощью клавиш со стрелками. Нажмите Enter, и ваш блок переместится на синюю линию.

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

Группа - добавьте блок в группу, чтобы вы могли настроить их как единое целое.

Удалить блок - удаляет блок.

Содержимое блока обложки

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

Выбрать обложку

Это закроет панель инструментов содержимого и откроет панель инструментов Cover Block.

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

Измените размер изображения, перетащив кружок внизу изображения.

Настройки блока крышки

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

Стили

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

Интервал

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

Настройки мультимедиа

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

В этом примере показан фиксированный фон. Изображение остается на месте во время прокрутки текста, создавая эффект параллакса.

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

Габаритные размеры

Укажите высоту в пикселях, введя ее в поле. Это работает так же, как инструмент перетаскивания внизу изображения.

Оверлей

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

Вы также можете выбрать собственный цвет. Откроется палитра цветов, в которой вы можете подобрать цвет в окне, выбрать цветовую шкалу с помощью ползунка или ввести шестнадцатеричный, RGB или HSL-коды.

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

Передовой

Дополнительно включает два поля. Первый вариант - привязка HTML. Это обеспечивает специальный веб-адрес только для Cover Block. Второй - это поле для добавления дополнительных классов CSS. Это позволяет вам создавать собственный CSS для стилизации вашего блока. Выбранный стиль также отображается в этом поле.

Советы и рекомендации по эффективному использованию защитного блока

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

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

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

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

Преобразуйте блок в группу, если хотите контролировать цвет границы.

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

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

Используйте фиксированный фон, чтобы создать эффект параллакса.

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

Часто задаваемые вопросы о блоке крышки

Что такое блок крышки?

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

Что отличает его от других блоков?

Он может содержать другие блоки. Вы можете добавить другие блоки на передний план. Создает параллакс, узоры и т. Д.

Можно ли его трансформировать в другие блоки?

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

Для чего это можно использовать?

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

Заключение

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

Ждем вашего ответа. Вы используете блок крышки? Расскажите нам о своем опыте в комментариях.

Лучшее изображение через fourSage / shutterstock.com