5 стилей модуля заголовка Creative Divi, которых можно достичь с помощью встроенных настроек

Изначально модуль заголовка Divi может создавать поразительные дизайны заголовков с помощью всего лишь нескольких настроек. Это делает его чрезвычайно популярным модулем при разработке заголовков для вашего сайта в Divi. А немного нестандартно подумав, вы можете создавать действительно уникальные дизайны, используя только встроенные настройки (без настраиваемого CSS). Итак, для тех из вас, кто хочет изучить новые дизайны заголовков, я собираюсь показать вам 5 стилей модулей заголовков Divi, которые могут вас вдохновить.

Наслаждаться!

Краткий обзор 5 стилей модулей заголовков Divi

Стиль # 1: абстрактный градиент

Начать разработку стиля №1

Стиль # 2: тройная угроза

Начать разработку стиля # 2

Стиль # 3: закругленная рамка

Начать разработку стиля # 3

Стиль # 4: смешанный левша

Начать разработку стиля # 4

Стиль # 5: тип большого масштабирования

Начать разработку стиля # 5

Что нужно для начала

Для начала вам понадобится тема Divi. Я буду использовать Divi Builder для создания дизайнов в интерфейсе. Вам также понадобятся несколько изображений для завершения урока. Помните, что вы всегда можете импортировать изображения готового макета. Фактически, для этого урока я буду использовать изображения из пакета макетов компании по уборке, пакета макетов бизнес-тренера и пакета макетов веб-фрилансера.

Давайте начнем!

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

Стиль # 1: Абстрактный Гадиент

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

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

Обновите содержимое настроек заголовка, добавив новый заголовок и изображение заголовка.

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

Шрифт заголовка: Lato
Размер текста заголовка: 6vw
Цвет фона кнопки One: # 0c71c3
Ширина границы кнопки One: 0 пикселей
Пользовательское заполнение: 8vw сверху, 8vw снизу

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

Цвет фона: rgba (255,255,255,0)
Цвет фонового градиента слева: # 0096eb
Цвет фона градиента справа: rgba (255,255,255,0)
Тип градиента: радиальный
Радиальное направление: Внизу справа
Стартовая позиция: 25%
Конечная позиция: 0%

Сохранить настройки

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

Цвет фонового градиента слева: # 0096eb
Правый цвет градиента фона: # 007ea1
Тип градиента: радиальный
Радиальное направление: вверху слева
Стартовая позиция: 43%
Конечная позиция: 0%

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

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

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: rgba (150,210,210,0.2)
Высота верхнего разделителя: 8vw
Повторение по горизонтали верхнего делителя: 0,7x
Переворот верхнего разделителя: вертикальный

Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: rgba (150,210,210,0.2)
Высота нижнего разделителя: 10vw
Горизонтальное повторение нижнего делителя: 0,5x
Переворот нижнего разделителя: вертикальный

Вот и все! Ознакомьтесь с окончательным дизайном.

Стиль # 2: тройная угроза

Этот следующий стиль модуля заголовка divi включает три призыва к действию, включая две кнопки и значок прокрутки вниз. Соответствие значков кнопок и значка прокрутки помогает добиться симметричности дизайна. А разделители разделов создают красивый абстрактный треугольный дизайн, который ведет пользователя вниз по странице.

Создайте новый полноширинный раздел с полноширинным заголовком.

Затем обновите текст для заголовка, текста ссылки кнопки №1 и текста ссылки кнопки №2.

Затем обновите остальную часть дизайна следующим образом:

Цвет фона: # 1a1844
Ориентация текста и логотипа: по центру
Значок: см. Снимок экрана
Размер значка прокрутки вниз: 20 пикселей
Шрифт заголовка: Lato
Плотность шрифта заголовка: Heavy
Размер текста заголовка: 5vw (рабочий стол), 40px (планшет), 30px (смартфон)
Высота строки заголовка: 1,3 мкм
Цвет фона кнопки два: # fe4943
Ширина границы второй кнопки: 0 пикселей
Значок кнопки два: стрелка вправо (см. Снимок экрана)
Цвет фона кнопки One: # fe4943
Ширина границы кнопки One: 0 пикселей
Значок кнопки One: стрелка влево (см. Снимок экрана)
Расположение значка первой кнопки: слева
Пользовательские отступы: 10vw сверху, 10vw слева

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

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: rgba (255,255,255,0,3)
Высота верхнего разделителя: 45vw

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: rgba (255,255,255,0.1)
Высота верхнего разделителя: 45vw

Теперь посмотрим на окончательный дизайн:

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

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

Откройте настройки страницы в Divi Builder и добавьте следующий CSS

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

Теперь посмотрим на дизайн на мобильном телефоне.

Стиль # 3: закругленная рамка

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

Для начала создайте новый полноширинный раздел с полноразмерным заголовком.

Во-первых, давайте обновим элементы содержимого для заголовка, добавив заголовок, текст ссылки кнопки №1 и изображение логотипа.

Затем добавьте фоновое изображение, достаточно большое, чтобы покрыть высоту и ширину заголовка. Поскольку это будет закругленный заголовок, попробуйте использовать изображение той же высоты и ширины (например, 1000 на 1000 пикселей).

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

Сохранить настройки.

Затем откройте настройки раздела, чтобы добавить цвет фона и интервал следующим образом:

Цвет фона: # 000000
Пользовательское заполнение: 5vw сверху, 5vw снизу

Теперь посмотрим на окончательный дизайн.

Смешанный левша

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

Давайте начнем.

Сначала создайте новый полноширинный раздел с полноразмерным заголовком.

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

Добавьте фоновое изображение с фокусом изображения справа.

Цвет фона градиента слева: rgba (0,0,0,0.54)
Цвет фона градиента справа: rgba (255,255,255,0)
Направление градиента: 90 градусов
Радиальное направление: Внизу справа
Стартовая позиция: 50%
Конечная позиция: 0%
Поместите градиент над фоновым изображением: ДА

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

Откройте настройки заголовка и обновите содержимое, добавив в него заголовок, текст ссылки кнопки №1 и темный логотип.

Теперь измените цвет фона на белый.

Затем обновите следующее:

Плотность шрифта заголовка: Ультра полужирный
Цвет текста заголовка: # 000000
Размер текста заголовка: 8vw
Высота строки заголовка: 1,1 мкм
Кнопка ОДИН размер текста: 2.7vw
Кнопка One Цвет текста: # 000000
Ширина границы кнопки One: 0.2em
Цвет границы кнопки One: # edf000
Плотность шрифта: Ультра полужирный
Ширина: 50% (компьютер, планшет и смартфон)
Режим наложения: Экран

Вот окончательный дизайн.

Стиль # 5: тип большого масштабирования

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

Для начала создайте новый полноширинный раздел с полноразмерным заголовком.

В настройках полноразмерного заголовка обновите следующее:

Название: Консультация
Текст подзаголовка: Услуги
Кнопка №1 Текст ссылки: Начать сейчас

Удалите текст по умолчанию в поле содержимого.

Затем добавьте светлое изображение логотипа.

Затем мы собираемся увеличить максимальную ширину по умолчанию для нашего контейнера заголовка, чтобы создать больше горизонтального пространства для вашего заголовка. Для этого перейдите на вкладку «Дополнительно» и добавьте следующий CSS в «Контейнер заголовка»:

width: 100% ;
max-width: 100% ;

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

Добавьте фоновое изображение.
Ориентация текста и логотипа: по центру
Шрифт заголовка: Cuprum
Толщина шрифта заголовка: полужирный
Стиль шрифта заголовка: TT
Цвет текста заголовка: #bfbfbf
Размер текста заголовка: 10vw
Интервал между заглавными буквами: 0,1 м
Шрифт подзаголовка: Cuprum
Выравнивание текста подзаголовка: по правому краю (это помогает центрировать текст с межбуквенным интервалом)
Размер текста подзаголовка: 3vw
Межбуквенный интервал подзаголовка: 7.8vw
Ширина границы кнопки One: 0 пикселей
Шрифт кнопки One: Cuprum
Button One Icon: см. Снимок экрана

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

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

Ширина содержимого: 80%;

Несмотря на то, что это меньше, чем 100% по умолчанию, изменение параметра переопределит значение по умолчанию и отрегулирует с помощью пользовательского CSS, который мы добавили ранее.

Наконец, добавьте тень блока, чтобы завершить дизайн:

Box Shadow: см. Снимок экрана
Сила размытия тени коробки: 0 пикселей
Сила распространения тени коробки: 60 пикселей

Теперь посмотрим на окончательный результат.

Превратите их в полноэкранные заголовки!

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

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

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

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

Я с нетерпением жду вашего ответа в комментариях ниже.

Ваше здоровье!