10 забавных способов использования модуля Divider с новыми опциями Divi

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

Sneak Peek

Одна из лучших особенностей этого руководства - то, что мы не будем использовать какой-либо дополнительный CSS (или какой-либо код в этом отношении). Во всех примерах, которые мы будем создавать, будут использоваться только те параметры, которые включены в модуль Divider. Давайте кратко рассмотрим разделители, которые мы построим, прежде чем я покажу вам, как создавать каждый шаг за шагом:

10 забавных способов использования модуля Divider с новыми опциями Divi

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

Создать многоразовый раздел

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

Создать новую страницу

Начните с создания новой страницы на панели управления WordPress, включения Divi Builder и открытия Visual Builder.

Создать раздел с трехколонным рядом

Когда вы перейдете на новую страницу, создайте стандартный раздел и используйте строку из трех столбцов в этом стандартном разделе. Мы использовали '# f4f4f4' в качестве цвета фона раздела.

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

Затем добавьте первый текстовый модуль в первый столбец строки. Откройте настройки, введите текст, который должен отображаться, и перейдите на вкладку «Дизайн». На вкладке «Дизайн» внесите следующие изменения в подкатегорию «Текст»:

• Шрифт текста: лобстер
• Размер шрифта текста: 35
• Цвет текста: # 000000
• Высота текстовой строки: 1,7 мкм
• Ориентация текста: по центру

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

После того, как вы добавили первый текстовый модуль, вы можете добавить еще один прямо под ним. Добавьте текст, который хотите отобразить, и перейдите на вкладку «Дизайн». На вкладке "Дизайн" убедитесь, что внесены следующие изменения:

• Шрифт текста: Roboto
• Размер шрифта текста: 14
• Высота текстовой строки: 1,7 мкм
• Ориентация текста: по центру

Клонировать текстовые модули и разместить в двух других столбцах

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

Перед началом работы

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

Примечание. Для каждого из разделителей вам необходимо включить параметр «Показать разделитель» на вкладке «Содержимое».

1. Размытый треугольник

Настройки модуля первого делителя

Вкладка Content

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

• Первый цвет: # e09900
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: линейный
• Направление градиента: 176 градусов
• Стартовая позиция: 13%
• Конечная позиция: 31%

Вкладка "Дизайн"

Перейдите на вкладку «Дизайн» и убедитесь, что к подкатегории «Размер» применимы следующие параметры:

• Вес разделителя: 0
• Высота: 25 пикселей
• Ширина: 35%
• Выравнивание модуля: по центру

Прокрутите ту же вкладку вниз и используйте следующие настройки анимации в подкатегории Анимация:

• Стиль анимации: слайд
• Повтор анимации: один раз
• Направление анимации: центр
• Продолжительность анимации: 1200 мс
• Интенсивность анимации: 80%

Настройки модуля второго делителя

Вкладка Content

На вкладке содержимого единственное, что вам нужно сделать, это изменить первый цвет градиента на «# 0c71c3».

Вкладка "Дизайн"

Затем вам нужно добавить задержку анимации 250 мс в подкатегорию «Анимация».

Настройки модуля третьего делителя

Вкладка Content

Измените первый цвет градиента на «# 8300e9» для последнего разделителя.

Вкладка "Дизайн"

Задержка анимации, которую вам нужно добавить в подкатегорию «Анимация» последнего делителя, составляет «500 мс».

2. Цветная тень

Настройки модуля первого делителя

Вкладка Content

Используйте следующие настройки градиентного фона на вкладке Content:

• Первый цвет: # e09900
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: линейный
• Направление градиента: 180 градусов
• Стартовая позиция: 0%
• Конечная позиция: 72%

Вкладка "Дизайн"

Первое, что вам нужно сделать на вкладке «Дизайн», - это изменить цвет разделителя на «# 000000».

В подкатегории «Стили» на той же вкладке используйте «Сплошной» в качестве стиля разделителя и «Верх» в качестве положения разделителя.

Продолжайте прокрутку вниз и внесите следующие изменения в подкатегорию «Размер»:

• Вес разделителя: 2
• Высота: 20 пикселей
• Ширина: 70%
• Выравнивание модуля: по центру

И, наконец, используйте следующие настройки параметров для подкатегории Анимация:

• Стиль анимации: отскок
• Повтор анимации: один раз
• Направление анимации: центр
• Продолжительность анимации: 2000 мс

Настройки модуля второго делителя

Вкладка Content

Измените первый цвет градиента фона градиента на «# 0c71c3».

Вкладка "Дизайн"

В подкатегории «Анимация» добавьте «350 мс» к параметру «Задержка анимации».

Настройки модуля третьего делителя

Вкладка Content

Сделайте то же самое с третьим разделителем, но используйте вместо него цвет # 8300e9.

Вкладка "Дизайн"

И, наконец, добавьте задержку анимации «700 мс».

3. Градиентная серия

Настройки модуля первого делителя

Вкладка Content

Для первого разделителя используйте следующие настройки градиентного фона:

• Первый цвет: # 0970a0
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: линейный
• Направление градиента: 119 градусов
• Стартовая позиция: 0%
• Конечная позиция: 86%

Вкладка "Дизайн"

На вкладке «Дизайн» выберите цвет разделителя «#FFFFFF».

Затем внесите следующие изменения в подкатегорию «Стили»:

• Стиль разделителя: твердый
• Положение разделителя: вертикально по центру

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

• Вес разделителя: 3
• Высота: 10 пикселей
• Ширина: 25%
• Выравнивание модуля: слева

Добавьте «15 пикселей» к нижнему отступу в подкатегории «Интервал».

И, наконец, используйте следующие настройки для подкатегории Анимация:

• Стиль анимации: слайд
• Повтор анимации: один раз
• Направление анимации: влево
• Продолжительность анимации: 2000 мс
• Интенсивность анимации: 100%

Настройки модуля второго делителя

Вкладка Content

Настройки градиентного фона для второго разделителя немного отличаются:

• Первый цвет: # 0970a0
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 0%
• Конечное положение: 100%

Вкладка "Дизайн"

В подкатегории Размер измените Выравнивание модуля на центр.

Наконец, централизуйте направление анимации.

Настройки модуля третьего делителя

Вкладка Content

Третий разделитель также содержит еще один градиентный фон:

• Первый цвет: rgba (255,255,255,0)
• Второй цвет: # 0970a0
• Тип градиента: линейный
• Направление градиента: 119 градусов
• Стартовая позиция: 14%
• Конечное положение: 100%

Вкладка "Дизайн"

Мы собираемся внести те же изменения, что и во второй разделитель, но использовать правую часть вместо центра.

4. Катящийся круг

Настройки модуля первого делителя

Вкладка Content

Начните с применения следующих настроек градиентного фона:

• Первый цвет: # e09900
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 20%
• Конечная позиция: 21%

Вкладка "Дизайн"

Первое, что вам нужно сделать на вкладке «Дизайн», - это использовать цвет «# 000000» для разделителя.

Затем выберите «Сплошной» в качестве стиля разделителя и «Вертикально по центру» в качестве положения разделителя.

Двигаясь дальше, внесите следующие изменения в подкатегорию Sizing:

• Вес разделителя: 2
• Высота: 50 пикселей
• Ширина: 40%
• Выравнивание модуля: по центру

Наконец, для подкатегории Анимация потребуются следующие настройки:

• Стиль анимации: ролл
• Повтор анимации: один раз
• Направление анимации: центр
• Продолжительность анимации: 1500 мс
• Задержка анимации: 850 мс
• Интенсивность анимации: 60%

Настройки модуля второго делителя

Вкладка Content

Измените первый цвет градиента на «# 0c71c3».

Вкладка "Дизайн"

И измените задержку анимации на «0 мс».

Настройки модуля третьего делителя

Вкладка Content

Для последнего разделителя вам нужно только изменить цвет фона первого градиента на «# 8300e9».

5. Кронштейн

Настройки модуля первого делителя

Вкладка Content

Используйте следующие настройки градиентного фона:

• Первый цвет: # e0d1b1
• Второй цвет: # e09900
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 36%
• Конечное положение: 100%

Вкладка "Дизайн"

Убедитесь, что цвет разделителя такой же, как и цвет фона раздела. В данном случае это '# f4f4f4'.

Прокрутите вкладку «Дизайн» и используйте «Пунктирная» в качестве стиля разделителя и «Верх» в качестве позиции разделителя.

Примените следующие настройки к подкатегории Размер:

• Вес разделителя: 100
• Высота: 18 пикселей
• Ширина: 60%
• Выравнивание модуля: по центру

Вам также необходимо добавить «15 пикселей» к верхнему, правому и левому отступу.

Наконец, используйте следующие настройки анимации:

• Стиль анимации: Zoom
• Повтор анимации: один раз
• Направление анимации: центр
• Продолжительность анимации: 1000 мс
• Интенсивность анимации: 80%

Настройки модуля второго делителя

Вкладка Content

Измените цвета градиентного фона на «# 87acc1» и «# 0c71c3».

Вкладка "Дизайн"

Затем измените продолжительность анимации на «1300 мс» и задержку анимации на «250 мс».

Настройки модуля третьего делителя

Вкладка Content

В третьем разделителе используются цвета градиента «# c9a4e8» и «# 8300e9».

Вкладка "Дизайн"

Измените продолжительность анимации на «1300 мс», а задержку анимации на «500 мс».

6. Двойные линии

Настройки модуля первого делителя

Вкладка Content

Примените следующие настройки градиентного фона:

• Первый цвет: # e09900
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: линейный
• Направление градиента: 179 градусов
• Стартовая позиция: 0%
• Конечная позиция: 45%

Вкладка "Дизайн"

Выберите «# 000000» в качестве цвета разделителя.

В подкатегории «Стили» используйте «Двойной» в качестве стиля разделителя и «По центру по вертикали» в качестве положения разделителя.

Двигаясь дальше, используйте следующие настройки для подкатегории Sizing:

• Вес разделителя: 5
• Высота: 25 пикселей
• Ширина: 35%
• Выравнивание модуля: слева

Наконец, используйте следующие настройки анимации:

• Стиль анимации: ролл
• Повтор анимации: один раз
• Направление анимации: влево
• Продолжительность анимации: 1000 мс
• Интенсивность анимации: 50%

Настройки модуля второго делителя

Вкладка Content

Измените первый цвет градиента на «# 0c71c3».

Вкладка "Дизайн"

Затем используйте другую анимацию для второго разделителя:

• Стиль анимации: Затухание
• Повтор анимации: один раз
• Продолжительность анимации: 1400 мс

Настройки модуля третьего делителя

Вкладка Content

Для третьего разделителя используйте «# 8300e9» в качестве первого цвета фона градиента.

Вкладка "Дизайн"

Единственное, что вам нужно изменить на вкладке «Дизайн», - это направление анимации, которое в данном случае «Правильно».

7. Мост

Настройки модуля первого делителя

Вкладка Content

Начните с присвоения фону '# 8300e9'.

Вкладка "Дизайн"

Продолжайте использовать цвет фона раздела в качестве цвета разделителя, в данном случае это '# f4f4f4'.

Затем используйте «Пунктирный» в качестве стиля разделителя и «Верх» в качестве положения разделителя.

В подкатегории «Размер» используйте следующие параметры:

• Вес разделителя: 15
• Высота: 7 пикселей
• Ширина: 70%
• Выравнивание модуля: слева

Нам также понадобятся специальные отступы:

• Верхний отступ: 7 пикселей
• Правый отступ: -7 пикселей
• Отступ слева: -7 пикселей

Используемая нами анимация имеет следующие настройки:

• Стиль анимации: слайд
• Повтор анимации: один раз
• Направление анимации: влево
• Продолжительность анимации: 800 мс
• Задержка анимации: 400 мс
• Интенсивность анимации: 30%

Настройки модуля второго делителя

Вкладка Content

Для второго разделителя измените фон на '# 0c71c3'.

Вкладка "Дизайн"

Мы также будем использовать другую анимацию:

• Стиль анимации: Zoom
• Повтор анимации: один раз
• Направление анимации: центр
• Продолжительность анимации: 800 мс
• Интенсивность анимации: 30%

Настройки модуля третьего делителя

Вкладка Content

Третий разделитель будет использовать «# 8300e9» в качестве цвета фона.

Вкладка "Дизайн"

Анимация для третьего разделителя также немного отличается:

• Стиль анимации: Zoom
• Повтор анимации: один раз
• Направление анимации: вправо
• Продолжительность анимации: 800 мс
• Задержка анимации: 400 мс
• Интенсивность анимации: 30%

8. Элегантность

Настройки модуля первого делителя

Вкладка Content

Начните с добавления следующего градиентного фона к первому разделителю:

• Первый цвет: # 000000
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 20%
• Конечная позиция: 20%

Вкладка "Дизайн"

Используйте для разделителя цвет # 8300e9.

Затем используйте «Пунктирный» в качестве стиля разделителя и «Вертикально по центру» в качестве положения разделителя.

Нам также понадобится верхний отступ размером 40 пикселей.

И анимация со следующими настройками:

• Стиль анимации: отскок
• Повтор анимации: один раз
• Направление анимации: вниз
• Продолжительность анимации: 1000 мс

Настройки модуля второго делителя

Вкладка "Дизайн"

Для второго разделителя измените цвет на «# 0c71c3».

В анимацию тоже нужно внести некоторые изменения:

• Направление анимации: центр
• Продолжительность анимации 1500 мс

Настройки модуля третьего делителя

Вкладка "Дизайн"

Третий разделитель будет использовать в качестве цвета «# 8300e9».

И будет иметь направление анимации «Вверх».

9. Тонкость

Настройки модуля первого делителя

Вкладка Content

Выберите следующие настройки для градиентного фона:

• Первый цвет: # 8300e9
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 0%
• Конечная позиция: 38%

Вкладка "Дизайн"

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

• Вес разделителя: 0
• Высота: 4 пикселя
• Ширина: 100%

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

• Стиль анимации: отскок
• Повтор анимации: один раз
• Направление анимации: вверх
• Продолжительность анимации 1800 мс

Настройки модуля второго делителя

Вкладка Content

Для второго разделителя измените цвет фона первого градиента на «# 0c71c3».

Настройки модуля третьего делителя

Вкладка Content

Сделайте то же самое с третьим разделителем, но используйте вместо него фиолетовый цвет '# 8300e9'.

10. Свечение

Настройки модуля первого делителя

Вкладка Content

Используйте следующие настройки градиентного фона для последней серии разделителей:

• Первый цвет:
• Второй цвет:
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 0%
• Конечная позиция: 38%

Вкладка "Дизайн"

Также выберите цвет фона раздела в качестве цвета разделителя, в данном случае это «# f4f4f4».

Затем используйте «Пунктирный» в качестве стиля разделителя и «По центру по вертикали» в качестве положения разделителя.

В подкатегории «Размер» используйте следующие параметры:

• Вес разделителя: 70
• Высота: 20 пикселей
• Ширина: 100%

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

• Стиль анимации: Затухание
• Повтор анимации: один раз
• Продолжительность анимации: 1800 мс
• Задержка анимации: 800 мс

Настройки модуля второго делителя

Вкладка Content

Для второго разделителя измените цвет фона второго градиента на «# 0c71c3».

Вкладка "Дизайн"

И добавьте задержку анимации 250 мс.

Настройки модуля третьего делителя

Вкладка Content

Для последнего разделителя измените цвет фона второго градиента на «# 8300e9».

Вкладка "Дизайн"

И в заключение установите для параметра «Задержка анимации» значение «0 мс».

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от VikiVector / shutterstock.com