Как создать заголовки с блоком обложки в WordPress?

Прошло несколько лет после того, как редактор блоков Gutenberg заменил классический редактор WordPress. Многие пользователи по-прежнему не хотят использовать Gutenberg из-за изменения рабочего процесса публикации контента. Однако у Гутенберга есть много блоков, которые можно использовать для создания красивых макетов, не полагаясь на плагины компоновщика страниц. Обложка — один из таких блоков, который меньше всего используется и понимается пользователями. В этой статье мы объясним, как создать заголовок с блоком обложки на сайте WordPress. Мы надеемся, что после прочтения этой статьи вы начнете использовать блок обложки в редакторе Гутенберга.

Что такое Cover Block?

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

Как использовать блок крышки?

Есть два способа использовать блоки обложки для создания разделов:

• Блок обложки с фоновым изображением — подходит для заголовков героев
• Блок обложки с цветом фона — подходит для вставки в качестве призыва к действию между содержимым публикации.

Давайте подробно объясним оба варианта.

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

Сначала щелкните значок + в области содержимого и добавьте блок «Обложка».

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

Убедитесь, что у вас есть полноразмерное изображение с ограниченной высотой, чтобы оно подходило для заголовка. Нажмите кнопку «Загрузить» и загрузите изображение заголовка в медиа-библиотеку. Добавьте заголовок, абзац и блоки кнопок и отредактируйте свой контент. Ниже представлен реальный блок обложки, и, как вы можете видеть, все эти блоки будут плавать на фоне основного изображения.

Заголовок для вашего заголовка

Краткое описание блока обложки для пояснения некоторых деталей …

Выберите блок, чтобы просмотреть всплывающую панель инструментов.

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

Точно так же вы можете щелкнуть значок «Изменить выравнивание», чтобы выбрать полную или широкую ширину для вашего заголовка.

Блок крышки с цветом

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

Это прикрытие

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

Настройка блока обложки

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

• Настройки медиа
• Габаритные размеры
• Оверлей
• Продвинутый

Изучите WordPress: Просмотрите более 300 бесплатных руководств по WordPress.

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

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

Вы можете просто нажать на кнопку «Очистить медиа», чтобы удалить изображение и сохранить только настройки фона.

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

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

Оверлей

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

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

Фиксированный градиент фона

Блок обложки с фиксированным фоновым изображением с наложением цвета градиента

Расширенные настройки

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

Гутенберг также упрощает вашу задачу, предлагая два образца обложки, по одному для фонового изображения и цвета фона.

• Щелкните значок + в верхнем левом углу редактора и перейдите в раздел «Узоры».
• В раскрывающемся списке выберите «Заголовки».
• Щелкните блок, чтобы вставить его в свою статью.

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

Создание макетов с помощью блока обложки

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

Многие темы, такие как GeneratePress, предлагают в редакторе мета-поле для настройки макета. Однако вам необходимо связаться с разработчиком вашей темы, если ваша тема не поддерживает эти настройки.

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

Когда ваш макет будет готов, вы можете просто скопировать и вставить блоки любого сайта WordPress.

Заключительные слова

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