Как создать градиентные разделители с помощью модуля Divi Divider

Опубликовано: 2023-06-07

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

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

Оглавление

1 превью
- 1.1 Пример первого градиентного разделителя рабочего стола
- 1.2 Пример первого делителя телефонного градиента
- 1.3 Пример второго градиентного разделителя рабочего стола
- 1.4 Пример второго делителя телефонного градиента
- 1.5 Пример третьего градиентного разделителя рабочего стола
- 1.6 Пример третьего делителя телефонного градиента
2 Как создать градиентные разделители с помощью модуля Divi Divider
- 2.1 Скрыть разделитель
- 2.2 Фон разделителя
- 2.3 Добавление размера и интервала
- 2.4 Добавить радиус границы
3 примера градиентного делителя
- 3.1 Пример первого градиентного делителя
- 3.2 Второй пример градиентного делителя
- 3.3 Третий пример градиентного делителя
4 результатов
- 4.1 Пример первого градиентного разделителя рабочего стола
- 4.2 Пример первого делителя телефонного градиента
- 4.3 Пример второго градиентного разделителя рабочего стола
- 4.4 Пример второго делителя телефонного градиента
- 4.5 Пример третьего градиентного разделителя рабочего стола
- 4.6 Пример третьего делителя телефонного градиента
5 заключительных мыслей

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

Пример первого градиентного разделителя рабочего стола

Разделитель градиента телефона, пример 1

Пример второго градиентного разделителя рабочего стола

Пример второго делителя телефонного градиента

Пример третьего градиентного разделителя рабочего стола

Пример третьего делителя градиента телефона

Как создать градиентные разделители с помощью модуля Divi Divider

Есть несколько способов создать разделитель с помощью Divi's Divider Module. По умолчанию модуль отображает разделительную линию. Мы можем отключить это и использовать настройки фона модуля, чтобы создать разделитель, который мы можем стилизовать с помощью параметров фона модуля. Это включает в себя цвета, градиенты, изображения и т. д. Вместо того, чтобы показывать разделитель, мы стилизуем контейнер разделителя и создадим стилизованный разделитель.

Скрыть разделитель

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

Как создать градиентные разделители с помощью модуля Divi Divider

Фон разделителя

Затем выберите тип фона, который вы хотите отображать, в настройках фона на вкладке «Содержимое». В этом посте мы сосредоточимся на настройках фонового градиента.

Как создать градиентные разделители с помощью модуля Divi Divider

Добавить размеры и интервалы

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

Как создать градиентные разделители с помощью модуля Divi Divider

Добавить радиус границы

Добавьте параметры границы, например «Радиус границы», чтобы придать фигуре дополнительный стиль. Вы можете отрегулировать углы вместе или по отдельности, чтобы создать интересные формы. Вы также можете добавить ширину границы, стили и т. д., чтобы создать уникальный дизайн.

Как создать градиентные разделители с помощью модуля Divi Divider

Примеры градиентных разделителей

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

Пример первого разделителя градиента

Для нашего первого градиентного разделителя мы будем использовать целевую страницу из бесплатного пакета Home Baker Layout Pack, доступного в Divi. Графическое изображение в этом пакете макетов имеет четкие темные очертания с резкими градиентами, все в оттенках коричневого. Мы воспроизведем это с помощью нашего градиента, используя цвета из набора макетов.

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

Для справки, вот макет до того, как мы добавим модуль делителя.