Как создать яркие заголовки разделов для вашего следующего проекта Divi

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

Давайте приступим к делу!

Предварительный просмотр

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

Начнем творить!

Добавить новый регулярный раздел

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

Продолжите, добавив строку, используя следующую структуру столбцов:

Фоновый цвет

Затем откройте настройки строки и добавьте цвет фона для всей строки:

• Цвет фона: # f9f9f9

Столбец 1 градиентный фон

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

• Цвет 1: # 0031c4
• Цвет 2: # 00aeff
• Столбец 1 Направление градиента: 125 градусов

Размеры

Также измените интервал вашего ряда, чтобы он занимал всю ширину экрана.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Наконец, измените настройки Spacing в соответствии с различными размерами экрана:

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ сверху столбца 2: 200 пикселей.
• Отступ нижнего столбца 2: 200 пикселей
• Отступ слева для столбца 2: 350 пикселей (рабочий стол), 50 пикселей (планшет и телефон).
• Колонка 2, отступ справа: 50 пикселей.

Добавить текстовый модуль заголовка раздела в столбец 1

Настройки текста H2

Теперь, когда все настройки строк установлены, мы можем приступить к добавлению модулей. Начнем с первого столбца. Здесь нам понадобится только текстовый модуль. После добавления содержимого H2 в поле Content измените настройки текста H2:

• Толщина шрифта заголовка 2: Ультра полужирный
• Стиль шрифта заголовка 2: прописные
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2: 150 пикселей
• Высота строки заголовка 2: 1,25 м
• Заголовок 2 Текстовая тень Длина по вертикали: -0,55 м
• Цвет тени текста заголовка 2: rgba (0,255,255,0.25)

Интервал

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

• Верхнее поле: 325 пикселей (рабочий стол), 150 пикселей (планшет и телефон)
• Нижнее поле: 325 пикселей, -120 пикселей (планшет), -110 пикселей (телефон)
• Правое поле: -100% (рабочий стол), 0 пикселей (планшет и телефон)

Фильтр

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

• Режим наложения: наложение

Добавить модуль текста заголовка в столбец 2

Настройки текста H3

Перейдем ко второму столбцу. Здесь первый модуль, который нам понадобится, - это текстовый модуль заголовка. После добавления содержимого H3 измените настройки текста H3:

• Толщина шрифта заголовка 3: полужирный
• Цвет текста заголовка 3: # 00aeff
• Размер текста заголовка 3: 60 пикселей
• Интервал между буквами заголовка 3: -3px

Интервал

Создайте немного места, добавив нижнее поле:

• Нижнее поле: 50 пикселей

Добавить модуль разделителя в столбец 2

Цвет разделителя

Второй модуль, который нам понадобится, - это Divider Module. Откройте настройки цвета и измените цвет, чтобы он соответствовал цветовой палитре дизайна:

• Цвет разделителя: # 00ffff

Размеры

Затем измените настройки размера:

• Высота: 56 пикселей
• Ширина: 75%

Добавить текстовый модуль описания в столбец 2

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

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

• Размер текста: 17 пикселей
• Высота текстовой строки: 1,3 м
• Ориентация текста: по ширине

Размеры

Затем измените настройки размера:

• Размеры: 70% (компьютер), 100% (планшет и телефон)

Интервал

Добавьте немного места под этим модулем, используя также нижнее поле:

• Нижнее поле: 50 пикселей

Добавить модуль кнопок в столбец 2

Настройки кнопок

Последний модуль, который нам понадобится в этом столбце, - это кнопочный модуль. После добавления CTA измените настройки кнопки:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 17 пикселей
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 00aeff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей
• Расстояние между буквами кнопки: -1px
• Плотность шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

И чтобы придать кнопке более чистый вид, мы также добавим отступ:

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

Коробка Тень

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

• Сила размытия тени коробки: 54px
• Сила распространения тени коробки: -8 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Раздел клонирования

Изменить все копии

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

Изменить цвет фона строки

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

• Цвет фона: #efefef

Изменить градиентный фон столбца 1

Затем выберите другой градиентный фон.

• Цвет 1: # 5f00a8
• Цвет 2: # 9000ff

Изменить цвет тени заголовка раздела

Мы также сопоставляем цвет тени текста с нашей новой цветовой палитрой:

• Цвет тени текста заголовка 2: rgba (255,0,255,0.24)

Изменить настройки интервала заголовка раздела

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

• Правое поле: -110% (ПК)

Изменить цвет текста модуля текста заголовка

Затем измените цвет текста текстового модуля заголовка в столбце 2.

• Цвет текста заголовка 3: # 9000ff

Изменить цвет разделителя

Точно так же сделайте так, чтобы цвет разделителя соответствовал дизайну.

• Цвет: # ff00ff

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

В завершение вам нужно изменить цвет фона модуля кнопок.

• Цвет фона кнопки: # 9000ff

Предварительный просмотр

Теперь, когда мы прошли все шаги, давайте в последний раз посмотрим на конечный результат на экранах разных размеров:

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

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