Divi , популярная тема WordPress, известна своими универсальными модулями, которые позволяют дизайнерам и разработчикам веб-сайтов легко создавать потрясающие макеты. Среди впечатляющего арсенала модулей модуль Divi Divider выделяется как уникальный инструмент, который позволяет пользователям создавать привлекательные разделители. В этом сообщении блога мы углубимся в увлекательный мир градиентных разделителей и узнаем, как вы можете использовать модуль Divi Divider для улучшения своих проектов. Мы более подробно рассмотрим, как работают градиентные разделители, и предоставим вам вдохновляющие примеры, которые разбудят ваше творчество.
Предварительный просмотр
Вот предварительный просмотр того, как наш градиентный дизайн будет выглядеть в конце.
Как создать разделители градиента с помощью модуля Divi Divider
Существует несколько способов создания разделителя с использованием модуля Divi Divider. По умолчанию модуль отображает линию в качестве разделителя. Однако можно деактивировать эту строку и использовать настройки фона модуля для создания разделителя, который можно настроить с помощью различных параметров фона, таких как цвета, градиенты, изображения и т. д. Вместо отображения фактического разделителя мы сосредоточимся на стилизации контейнера разделителя, чтобы создать разделитель с уникальным стилем.
Скрыть разделитель
Процедура проста. Сначала добавьте модуль «Разделитель» в свой макет, а затем на вкладке «Содержимое» скройте разделитель.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчас
Разделитель фона
Затем выберите тип фона, который вы хотите использовать, в меню «Настройки фона» на вкладке «Содержимое». В этом посте мы сосредоточимся на параметрах фонового градиента.
Добавьте размер и интервал
Чтобы создать стильный разделитель практически любого размера и формы, используйте параметры «Размер» и «Интервал» на вкладке «Дизайн», чтобы отрегулировать высоту и ширину контейнера разделителя. Чтобы создать желаемый размер, используйте ширину и высоту, максимальную ширину и максимальную высоту, выравнивание модуля, а также верхнее и нижнее отступы.
Добавить радиус границы
Чтобы дополнительно стилизовать фигуру, добавьте параметры границы, например «Радиус границы». Углы можно регулировать вместе или по отдельности, создавая интересные формы. Для особого дизайна вы можете дополнительно добавить ширину границы, стили и т. д.
Градиентный делитель
Мы будем использовать целевую страницу из бесплатного пакета макетов Home Baker , включенного в Divi, для нашего первого градиентного разделителя. Обложки этого пакета макетов имеют коричневые градиенты и мощные темные контуры. Мы повторим это с нашим градиентом, используя цветовую палитру пакета макетов. Для нашей первой иллюстрации мы будем использовать модуль «Разделитель», который уже присутствует в главном разделе. Это простой вариант, но он оказывает большое визуальное воздействие. Вот макет до того, как мы добавили модуль «Разделитель» для справки.
Видимость
Выберите «Нет» для параметра «Показать разделитель» в разделе «Параметры видимости» модуля «Разделитель».
- Разделитель шоу: Нет
Градиент
Выберите вкладку «Градиент фона», прокрутив вниз до пункта «Фон». Для этого мы добавим пять остановок градиента. Будут использоваться значения по умолчанию для других параметров градиента. Параметры для каждой остановки градиента перечислены ниже.
- Первая остановка градиента: 0px, #dcc087.
- Вторая остановка градиента: 16 пикселей, #e6b060.
- Третья остановка градиента: 22px, #f19d33.
- Четвертая точка градиента: 31px, #f49826.
- Пятая остановка градиента: 48 пикселей, #3b261e.
В качестве единицы градиента следует использовать пиксели. Оттенки, которые мы искали, теперь доступны. Осталось только оптимизировать размер.
- Единица градиента: Пиксели
Размеры
После этого выберите вкладку «Дизайн». Установите 100% для ширины в разделе «Размер». Для всех трех размеров устройства высота должна быть установлена на 40 пикселей. Модульное закрытие сохранит ваши настройки.
- Ширина: 100%
- Высота: 40 пикселей
Окончательный просмотр
Теперь у нас есть окончательный предварительный просмотр нашего градиентного дизайна в действии.
Конечные мысли
На этом мы завершаем обсуждение использования модуля Divi Divider для создания градиентных разделителей. Чтобы создать собственные разделители градиента, используйте опцию градиента в модуле «Разделитель». Мы можем создавать градиентные разделители различных размеров и форм, используя параметры угла границы, интервала и размера. Мы можем разработать отличительные градиентные разделители, которые будут выделяться из толпы, используя всего лишь несколько основных вариантов.
