3 способа создания полноширинных секций в WordPress

Jumbotron – один из популярных компонентов фреймворка Bootstrap. Он позволяет создавать разделы с героями и заголовками в полную ширину, которые будут привлекать пользователей. Создать такой полноширинный jumbotron в WordPress непросто. Для WordPress доступно множество плагинов для создания страниц, которые предлагают такую ​​функцию. Однако эти плагины будут использовать тяжелый JavaScript и снижать скорость вашего сайта.

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

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

Создание полноширинных секций в WordPress

Существует три различных способа создания полноразмерных или широких разделов в WordPress с помощью редактора Gutenberg.

  1. Использование группового блока
  2. Выравнивание изображений по полной или широкой ширине
  3. Блок обложки для заголовков героев

1. Блок группы Гутенберга

WordPress представил Гутенберга версией 5.0. Это редактор блоков, на который вы можете положиться вместо плагинов для построения страниц. С новыми выпусками в редактор добавляются новые блоки. Групповой блок был добавлен в редактор в версии 5.3. Поэтому убедитесь, что у вас версия 5.3 или новее, чтобы создавать разделы с полной шириной с помощью редактора Gutenberg.

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

Секция полной ширины

Группировка блоков с помощью группы

Первый шаг – вставить заголовок и блок абзаца и добавить свой контент. Теперь, удерживая клавишу Shift, выберите два блока с помощью мыши. Щелкните значок «Группа» и преобразуйте два блока в группу.

Группировать несколько блоков
Группировать несколько блоков

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

Связанный: Как создать страницу параллакса CSS полной ширины с помощью jumbotron Bootstrap?

Создание полной ширины

Теперь, когда вы сгруппировали два блока, щелкните значок «Изменить выравнивание» в блоке «Группировать». Выберите вариант «Полная ширина». Если вам нужно, выберите «Широкая ширина», чтобы создать широкую секцию вместо полной ширины.

Применить полную ширину
Применить полную ширину

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

Изменение цвета фона

Выбрав блок «Группировать», посмотрите на доступные параметры на правой боковой панели. Групповой блок имеет два варианта настройки для изменения цвета и добавления расширенного класса CSS.

Настройки группового блока
Настройки группового блока

Настройте цвет текста и фона для полноширинного раздела.

Добавить цвет фона в раздел группы
Добавить цвет фона в раздел группы

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

Настройка полной ширины секции

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

  • Используйте разделительный блок, чтобы добавить верхнее и нижнее пространство для вашего блока.
  • В качестве альтернативы вы можете использовать блок столбцов, чтобы иметь достаточные поля и отступы. Также легко перетащить несколько элементов в макеты столбцов, чтобы продемонстрировать раздел во всю ширину.
  • Наконец, если два вышеуказанных параметра не работают, вы можете использовать расширенные настройки CSS, как описано ниже.

Добавление фонового изображения в полноразмерную секцию

На данный момент групповой блок не предлагает вариант фонового изображения. Однако вы можете легко добавить, используя настраиваемую опцию CSS. Сначала добавьте два настраиваемых класса CSS в раздел «Дополнительно» блока «Группы». Назовем эти классы fullwidthsection и bgimage.

Добавить собственные классы CSS
Добавить собственные классы CSS

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

.fullwidthsection {
минимальная высота: 400 пикселей;
прикрепление фона: исправлено;
размер фона: обложка;
фоновая позиция: 50% 50%;
}

.bgimage {
background-image: url («https://img.webnots.com/2017/05/parallax.jpg»);
}

Вам необходимо добавить собственный код CSS в раздел «Внешний вид> Настройка> Дополнительные CSS».

Добавить собственный CSS
Добавить собственный CSS

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

Секция полной ширины с фоновым изображением
Секция полной ширины с фоновым изображением

2. Полная ширина и ширина с элементами

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

Элементы полной ширины
Элементы полной ширины

Помните, что дополнительные параметры выравнивания будут доступны только для определенных блоков, таких как изображение. Вы не увидите эти параметры для таких блоков, как абзац. Если вы не видите параметры полной / широкой ширины для изображения, возможно, ваша тема не поддерживает эти функции. Не беспокойтесь, вы можете добавить приведенный ниже код в файл functions.php, чтобы включить полную / широкую ширину для поддерживаемых блоков.

add_theme_support('align-wide');

3. Использование блока крышки

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

Блок обложки в узорах
Блок обложки в узорах

Повторное использование секций полной ширины

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

Секция полной ширины WordPress
Секция полной ширины WordPress

Последнее слово

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

Похожие записи

Добавить комментарий

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