Как добавить заголовок в WordPress? Используйте WordPress Customizer или блок Cover, чтобы настроить изображение заголовка.

Как добавить заголовок в WordPress? Используйте WordPress Customizer или блок Cover, чтобы настроить изображение заголовка.

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

Подлинное изображение заголовка

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

Изображение заголовка WordPress
Наиболее часто используемый тип заголовка — изображение заголовка в верхней части веб-сайта.

Как редактировать заголовок в настройщике WordPress

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

  • Непосредственно из админки WP просто перейдите к Появление -> Настроить
  • Во внешнем интерфейсе, если вы вошли в систему, нажмите «Настроить» на верхней панели.

Настройщик включает в себя все основные настройки внешнего вида вашей текущей активной темы. Поэтому, где найти настройки изображения заголовка, зависит от вашей активной темы. В теме Citadela вы можете добавлять и редактировать изображение заголовка в Настройка --> Появление --> Фон заголовка.

Добавить заголовок через Customizer
Добавление заголовка через Customizer

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

Независимо от того, какое изображение заголовка вы выберете, вы можете настроить его в соответствии со своими потребностями. Интересного эффекта можно добиться с помощью функции «Повтор изображения заголовка». Вы можете настроить следующие параметры:

  • Плитка
  • Плитка по горизонтали
  • Плитка по вертикали
  • Нет повтора (если вы не хотите повторять изображение)
Включена функция повтора изображения заголовка
Мозаичный эффект изображения заголовка

Другие настройки в WordPress — Размер изображения в шапке

Другой вариант, как отредактировать заголовок и настроить изображение, — установить подходящий размер. Размер изображения заголовка имеет следующие три параметра:

  • Оригинал - он сохранит исходный размер изображения
  • Крышка - загруженное изображение будет изменено, чтобы соответствовать размеру из стороны в сторону, изображение также может быть обрезано по размеру
  • Содержать - размер изображения заголовка будет скорректирован таким образом, чтобы было видно все изображение
3 варианта размера изображения заголовка
Посмотрите, как заголовок может выглядеть по-разному в зависимости от его размера — исходный, обложка и размер содержимого.

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

Блок обложки, который работает как заголовок

Как мы уже упоминали в начале этой статьи, есть несколько способов редактирования шапки в редакторе WordPress. В дополнение к использованию Customizer вы также можете использовать один из основных блоков WordPress, называемый блоком Cover. Так какая разница?

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

Где использовать защитный блок

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

Изображение обложки в качестве изображения заголовка в блоге
Сообщение в блоге с изображением заголовка, добавленным через блок обложки

Заголовок главной страницы

Блок обложки также можно использовать вместо шапки сайта, если вы хотите добиться оригинального вида. Поскольку блок «Обложка» предоставляет различные параметры выравнивания, вы можете установить его по ширине содержимого или сделать его полной ширины. Заголовок во всю ширину можно также использовать в качестве большого фонового изображения. Но не забудьте отключить заголовок страницы в теме Citadela. Этот шаг необходим, если вы хотите использовать блок обложки в качестве шапки сайта.

Заголовок как фоновое изображение полной ширины
Заголовок на всю ширину главной страницы

Как создать заголовок с помощью блока Cover

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

Нажмите на знак «+» в верхней панели или знак «+» в любом месте содержимого. После этого просто найдите блок Cover.

Добавьте блок Обложки, нажав на «+»
Добавление блока крышки с помощью «+»

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

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

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

Название заголовка

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

Название в шапке изображения
Название в шапке изображения

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

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

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

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

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

Используя Focal Point Picker, вы можете выбрать, какая часть изображения будет отображаться в заголовке. Вы можете работать с изображением еще дальше. Например, вы можете установить цвет наложения и прозрачность фона. Обе настройки помогут вам внести последние штрихи в ваш заголовок. Если вы используете блок обложки внутри сообщения в блоге, используя правильную цветовую схему и прозрачность, вы можете добавить желаемую атмосферу к своему сообщению. Будьте осторожны с этими настройками, так как текст заголовка должен быть хорошо виден.

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

Делаем шапку видео

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

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

Каков ваш опыт работы с заголовками? Вы уже пробовали блок Cover для создания заголовка? Вы предпочитаете классическую шапку сайта с помощью настройщика WordPress? Дайте нам знать в комментариях ниже.