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

2 min


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



Что такое Cover Block?

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

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

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

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

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

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

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

Блок обложки в WordPress
Блок обложки в WordPress

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

Вставленный блок крышки
Вставленный блок крышки

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

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

Блок крышки с другими элементами
Блок крышки с другими элементами

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

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

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

Изменить выравнивание блока
Изменить выравнивание блока

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

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

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

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

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

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

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

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

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

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

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

Настройки размеров
Настройки размеров

Оверлей

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

Наложение сплошных цветов
Наложение сплошных цветов
Наложение цветов градиента
Наложение цветов градиента

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

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

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

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

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

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

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

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

Мета-поле GeneratePress Layout
Мета-поле GeneratePress Layout

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

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

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


0 Comments

Ваш адрес email не будет опубликован. Обязательные поля помечены *