Как создать главы раздела, используя новые параметры дизайна Divi

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

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

Результат

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

Раздел Глава Стиль # 1

Раздел Глава Стиль # 2

Раздел Глава Стиль # 3

Раздел Глава Стиль # 4

Как создать главы раздела, используя новые параметры дизайна Divi

Подпишитесь на наш канал Youtube

Раздел Глава Стиль # 1

Параметры строки

Начните с добавления строки из двух столбцов на страницу, над которой вы работаете, и выбора выравнивания левой строки на вкладке «Дизайн».

Прокрутите ту же вкладку вниз и убедитесь, что вы выбрали «0 пикселей» для верхнего, правого, нижнего и левого отступов. Причина, по которой мы это делаем, - сделать строку как можно меньше, чтобы она не занимала много места в разделе.

Модуль делителя

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

Перейдите на вкладку «Дизайн» и используйте «# 000000» в качестве цвета разделителя.

Затем откройте подкатегорию «Стили» и выберите «Пунктирный» в качестве стиля разделителя и «Верх» в качестве положения разделителя.

Затем убедитесь, что к подкатегории «Размер» применимы следующие параметры:

• Вес разделителя: 3 пикселя
• Высота: 23 пикс.
• Ширина: 62%
• Выравнивание модуля: слева

Первый текстовый модуль

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

• Первый цвет: rgba (96,150,193,0,16)
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 51%
• Конечная позиция: 51%

Затем перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Текст»:

• Шрифт текста: Счастливая обезьяна
• Размер шрифта текста: 53 (компьютер и планшет), 25 (телефон)
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Откройте подкатегорию «Размер», выберите ширину «40%» и выберите «Выравнивание модуля по центру».

Последнее, что нужно этому текстовому модулю, - это следующие настраиваемые поля и отступы:

• Верхнее поле: -40 пикселей
• Верхний отступ: 40 пикселей
• Отступ справа: 50 пикселей
• Нижний отступ: 40 пикселей
• Отступ слева: 50 пикселей

Второй текстовый модуль

Добавьте еще один текстовый модуль со следующими настройками подкатегории Text:

• Шрифт текста: Аримо
• Размер шрифта текста: 19 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Прокрутите ту же вкладку вниз, используйте ширину «97%» и включите опцию выравнивания модуля по центру.

Наконец, добавьте также верхнее поле «-15 пикселей».

Третий текстовый модуль

Последний текстовый модуль главы раздела имеет следующие настройки подкатегории Текст:

• Шрифт текста: Аримо
• Стиль шрифта текста: полужирный
• Размер шрифта текста: 19 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: по центру

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

Последнее, что вам нужно сделать для этого раздела, - это добавить верхнее поле «-20 пикселей».

Раздел Глава Стиль # 2

Параметры строки

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

Откройте подкатегорию «Интервал» и назначьте «0px» верхнему, правому, нижнему и левому отступу.

Модуль делителя

Добавьте модуль разделителя в столбец справа и включите параметр «Показать разделитель».

Мы собираемся использовать следующий градиентный фон для разделителя:

• Первый цвет: rgba (132,132,132,0,61)
• Второй цвет: rgba (224,43,32,0,86)
• Тип градиента: линейный
• Направление градиента: 180 градусов
• Стартовая позиция: 43%
• Конечное положение: 100%

Перейдите на вкладку «Дизайн» и выберите «rgba (0,0,0,0.26)» в качестве цвета разделителя.

Затем используйте «Solid» в качестве стиля разделителя и «Top» в качестве позиции разделителя.

Затем откройте подкатегорию «Размер» и примените следующие настройки:

• Вес разделителя: 3 пикселя
• Высота: 11 пикселей
• Ширина: 68%
• Выравнивание модуля: справа

Первый текстовый модуль

Первый текстовый модуль имеет следующие настройки подкатегории Text:

• Шрифт текста: Cantata One
• Размер шрифта текста: 100 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1,7 мкм
• Ориентация текста: вправо

Откройте подкатегорию Spacing и используйте следующие настраиваемые поля и отступы:

• Верхнее поле: -95 пикселей
• Верхний отступ: 40 пикселей
• Отступ справа: 50 пикселей
• Нижний отступ: 40 пикселей
• Отступ слева: 50 пикселей

Второй текстовый модуль

Добавьте еще один текстовый модуль и используйте вместо него следующие параметры подкатегории Text:

• Шрифт текста: Аримо
• Размер шрифта текста: 20 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Затем добавьте верхнее поле «-50 пикселей».

Третий текстовый модуль

Третий и последний текстовый модуль в этом примере имеет следующие параметры подкатегории Text:

• Шрифт текста: Lobster Two
• Размер шрифта текста: 43 пикс.
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Наконец, добавьте верхнее поле «-30 пикселей».

Раздел Глава Стиль # 3

Параметры строки

В третьем примере мы собираемся использовать строку из двух столбцов со следующим градиентным фоном столбца 1:

• Первый цвет: # edf000
• Второй цвет: rgba (255,255,255,0)
• Столбец 1 Тип градиента: линейный
• Столбец 1 Направление градиента: 139 градусов
• Столбец 1 Начальная позиция: 11%
• Конечная позиция в столбце 1: 36%

Перейдите на вкладку «Дизайн» и выберите «Выравнивание левого ряда».

Еще раз, мы собираемся использовать «0px» для верхнего, правого, нижнего и левого полей.

Модуль делителя

Теперь добавьте модуль разделителя в левый столбец и включите параметр «Показать разделитель».

Откройте подкатегорию Background и используйте следующий градиентный фон:

• Первый цвет: # 4b61af
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: линейный
• Направление градиента: 161 град.
• Стартовая позиция: 18%
• Конечная позиция: 38%

Откройте вкладку «Дизайн» и выберите цвет разделителя «# 000000».

В подкатегории «Стили» используйте «Solid» в качестве стиля разделителя и «Top» в качестве позиции разделителя.

Затем убедитесь, что к подкатегории «Размер» применимы следующие параметры:

• Вес разделителя: 6 пикселей
• Высота: 100 пикселей
• Ширина: 70%
• Выравнивание модуля: слева

Первый текстовый модуль

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

• Первый цвет: rgba (131,0,233,0,58)
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: линейный
• Направление градиента: 151 град.
• Стартовая позиция: 20%
• Конечная позиция: 40%

Перейдите на вкладку Дизайн и используйте следующие настройки подкатегории Текст:

• Шрифт текста: Poiret One
• Стиль шрифта текста: полужирный
• Размер шрифта текста: 69 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1,7 мкм
• Ориентация текста: по центру

Откройте подкатегорию «Размер», используйте ширину «70%» и выберите выравнивание левого модуля.

Наконец, используйте следующие настраиваемые поля и отступы:

• Верхнее поле: 124 пикселя
• Верхний отступ: 60 пикселей
• Нижний отступ: 150 пикселей
• Отступ слева: 50 пикселей

Второй текстовый модуль

Продолжайте и добавьте еще один текстовый модуль со следующими настройками подкатегории Text:

• Шрифт текста: Аримо
• Размер шрифта текста: 20 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Откройте подкатегорию «Размер», выберите ширину «80%» и выберите «Выравнивание левого модуля».

Наконец, добавьте верхнее поле «-150 пикселей».

Третий текстовый модуль

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

• Шрифт текста: Аримо
• Стиль шрифта текста: полужирный
• Размер шрифта текста: 20 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Откройте подкатегорию «Размер», используйте ширину «80%» и выберите «Выравнивание левого модуля».

Наконец, выберите верхнее поле «-20 пикселей» и нижнее поле «50 пикселей».

Раздел Глава Стиль # 4

Параметры строки

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

Затем откройте подкатегорию «Интервал» и назначьте «0 пикселей» верхнему, правому, нижнему и левому отступу.

Первый текстовый модуль

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

• Первый цвет: rgba (255,255,255,0)
• Второй цвет: # 92d84b
• Тип градиента: линейный
• Направление градиента: 55 градусов
• Стартовая позиция: 25%
• Конечное положение: 100%

Затем перейдите на вкладку Дизайн и убедитесь, что применяются следующие параметры подкатегории Текст:

• Шрифт текста: Cantata One
• Размер шрифта текста: 220 (компьютер и планшет), 100 пикселей (телефон)
• Цвет текста: # f2f2f2 (соответствует цвету фона раздела)
• Высота текстовой строки: 1,7 мкм
• Ориентация текста: вправо

Откройте подкатегорию «Размер», используйте ширину «82%» и выберите правильное выравнивание модуля.

Наконец, используйте следующие пользовательские отступы:

• Сверху: 60 пикселей
• Справа: 50 пикселей
• Внизу: 60 пикселей
• Слева: 50 пикселей

Второй текстовый модуль

Добавьте еще один текстовый модуль и используйте следующие настройки в подкатегории «Текст»:

• Шрифт текста: Аримо
• Размер шрифта текста: 20 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: вправо

Откройте подкатегорию «Размер», выберите ширину «39%» и выберите «Выравнивание модуля по центру».

Наконец, добавьте «-130 пикселей» к верхнему полю.

Третий текстовый модуль

Последний текстовый модуль в этом примере главы имеет следующие настройки подкатегории Text:

• Шрифт текста: Танцевальный сценарий
• Размер шрифта текста: 45 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: вправо

Откройте подкатегорию «Размер», выберите ширину «50%» и выберите «Выравнивание модуля по центру».

И последнее, но не менее важное: выберите верхний отступ «-30 пикселей», и все готово!

Последние мысли

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от Kwok Design / shutterstock.com