Модуль заголовка Divi готов к использованию для создания уникальных дизайнов заголовков с помощью всего нескольких настроек. Это делает его чрезвычайно популярным модулем при разработке заголовков для вашего сайта. Веб-сайт с Диви. А немного подумав, вы сможете создавать действительно уникальные дизайны, используя встроенные настройки (а не пользовательский CSS). Итак, для тех, кто хочет изучить новые дизайны заголовков, я покажу вам 3 стиля модулей заголовков Divi, которые могут вас вдохновить.
Обзор трех стилей модулей заголовков Divi
Стиль # 1: абстрактный градиент
Стиль # 2: тройная угроза
Стиль # 3: Округлая рамка
Что нужно для начала
Для начала вам понадобится Диви тема. Я буду использовать Divi Builder для создания рисунков в интерфейсе (публичная зона). Вам также понадобятся некоторые изображения для завершения урока. Не забывайте, что вы по-прежнему можете импортировать изображения из предопределенного макета. На самом деле, для этого урока я буду использовать изображения из пакета презентаций клининговой компании, пакета презентаций Business Coach и пакета веб-презентаций. Свободный художник.
Стиль # 1: абстрактный гаджет
Этот первый дизайн модуля заголовка Divi представляет собой простой и универсальный дизайн, в котором творчески используются градиентные фоны.
Для начала добавьте новый раздел полной ширины с модулем заголовка полной ширины.
Обновите содержимое настроек заголовка, добавив новый заголовок и изображение заголовка.
Затем обновите параметры проекта следующим образом:
Титул полиции: Лато
Размер текста заголовка: 6vw
Цвет фона кнопки 1: #0c71c3
Ширина одной границы кнопки: 0px
Пользовательская обивка: 8vw вверху, 8vw внизу
Прежде чем мы добавим фон раздела, нам сначала нужно сделать фон модуля заголовка прозрачным и задать ему собственный градиент, чтобы создать форму круга в правом нижнем углу. Вернитесь на вкладку Content и обновите фон следующим образом:
Цвет фона: rgba (255,255,255,0)
Левый градиент фона Цвет: #0096eb
Правый градиент фона Цвет: rgba (255,255,255,0)
Тип градиента:
Радиальное радиальное направление: внизу справа
Начальная позиция: 25%
Конечная позиция: 0%
Сохранить настройки
Затем нам нужно добавить наши фоновые рисунки в раздел, который будет за нашим модулем заголовка. Для этого откройте раздел настроек и обновите следующее:
Левый градиент фона Цвет: #0096eb
Правый градиент фона Цвет: #007ea1
Тип градиента: Радиальный
Радиальное направление: вверху слева
Начальная позиция: 43%
Конечная позиция: 0%
Творческий совет. Если вы ищете цвета, чтобы попробовать собственную затенение заголовка, я предлагаю вам удалить цвета, используемые в изображении / графике заголовка, которые вы можете использовать.
Чтобы добавить еще один тонкий элемент дизайна к нашему абстрактному фону, мы можем добавить разделитель верхней и нижней части. Для этого перейдите на вкладку Дизайн и добавьте следующие разделители:
Стиль верхнего разделителя: см. Снимок экрана
Цвет верхнего разделителя: rgba (150,210,210,0.2)
Высота сепаратора
upper: 8vw Повторение верха горизонтального разделителя: 0,7x
Отразить сверху разделителя: вертикально
Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: rgba (150,210,210,0.2)
Высота сепаратора
нижний: 10vw Нижний разделитель повторяется по горизонтали: 0,5x Переверните нижний разделитель
вертикальный
Вот и все! Посмотрите окончательный дизайн.
Стиль # 2: тройная угроза
Этот стиль модуля заголовка divi включает три призыва к действию, включая две кнопки и значок прокрутки вниз. Соответствие значков кнопок и значка прокрутки улучшает симметричный вид рисунка. А разделители разделов создают красивый абстрактный треугольный узор, который направляет пользователей в нижнюю часть страницы.
Создайте новый раздел полной ширины с заголовком полной ширины.
Затем обновите текст заголовка, текст ссылки кнопки 1 и текст ссылки кнопки 2.
Затем обновите остальную часть дизайна следующим образом:
Цвет фона: #1a1844
Ориентация текста и логотипа: Центр
Значок: см. Снимок экрана
Значок прокрутки вниз Размер: 20px
Титул полиции: Лато
Название Вес шрифта: тяжелый
Размер текста заголовка: 5vw (рабочий стол), 40px (планшет), 30px (смартфон)
Строка заголовка Высота снизу: 1.3em
Цвет фона кнопки 2: #fe4943
Ширина кнопки 2: 0px
Значок кнопки 2: стрелка вправо (см. Снимок экрана)
Цвет фона кнопки 1: #fe4943
Ширина кнопки 1 для границы: 0px
Кнопка 1: стрелка влево (см. Снимок экрана)
Расположение кнопок 1: слева
Пользовательские отступы: 10vw вверху, 10vw слева
Теперь все, что нам нужно сделать, это добавить разделители разделов, чтобы создать треугольный фоновый узор. Откройте настройки раздела и обновите следующие настройки дизайна:
Стиль
сепаратор
вверху: см. снимок экрана Цвет верхнего разделителя: rgba (255,255,255,0.3) Высота верхнего разделителя: 45vw
Стиль
сепаратор
вверху: см. снимок экрана Цвет верхнего разделителя: rgba (255,255,255,0.1) Высота верхнего разделителя: 45vw
Теперь давайте посмотрим на окончательный дизайн:
Стиль # 3: Округлая рамка
Этот округлый дизайн модуля заголовка divi - отличный способ создать фоновое изображение и содержимое заголовка, чтобы привлечь больше внимания к вашему призыву к действию. Все, что требуется, - это несколько корректировок радиуса границы вашего заголовка, некоторого поля тени и настраиваемого интервала.
Для начала создайте новый раздел полной ширины с заголовком полной ширины.
Начнем с обновления элементов содержимого заголовка, добавив заголовок, текст ссылки кнопки №1 и изображение логотипа.
Затем добавьте фоновое изображение, достаточно большое, чтобы покрыть высоту и ширину заголовка. Поскольку это округлый заголовок, попробуйте использовать изображение той же высоты и ширины (например, 1000 на 1000 пикселей).
Затем обновите остальные параметры проекта следующим образом:
Сохраните настройки.
Затем откройте раздел настроек, чтобы добавить цвет фона и интервал следующим образом:
Цвет фона: #000000
Пользовательские отступы: 5vw вверху, 5vw внизу
Теперь проверьте окончательный дизайн.
Это все, что касается этого урока по созданию 3 уникальных заголовков с помощью Divi. Если у вас есть какие-либо вопросы, не стесняйтесь задавать их в разделе комментариев.
