Как использовать новую структуру столбцов Divi для создания потрясающих переходов между секциями

Каждую неделю мы предоставляем вам новые бесплатные пакеты макетов Divi, которые вы можете использовать в своем следующем проекте. Для одного из пакетов макетов мы также расскажем о сценарии использования, который поможет вам вывести свой веб-сайт на новый уровень.

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

Давайте приступим к делу!

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

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

Используйте целевую страницу пакета макетов визажиста Divi

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

Раздел Переход # 1

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

Найдите

Откройте целевую страницу пакета макетов визажиста с помощью Divi Visual Builder. Затем добавьте новый обычный раздел прямо под разделом героя:

Интервал

Удалите все интервалы по умолчанию для вашего раздела следующим образом:

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел со следующей структурой столбцов:

Размеры

Увеличьте также ширину ряда:

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 0

Интервал

Затем удалите верхнее и нижнее отступы по умолчанию:

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Фильтр

Чтобы строка была более яркой, увеличьте насыщенность в настройках фильтра:

• Насыщенность: 200%

Добавить модуль разделителя №1 в столбец 1

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

Чтобы создать первый квадрат в нашем дизайне, мы собираемся добавить модуль разделителя в столбец 1. Отключите параметр «Показать разделитель».

Градиентный фон

Затем добавьте градиентный фон в модуль Divider:

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: rgba (176,182,219,0,34)

Интервал

Чтобы создать квадрат, измените значения Интервал:

• Верхнее поле: -120 пикселей
• Верхний отступ: 120 пикселей
• Нижний отступ: 120 пикселей

Клонировать модуль разделителя и поместить в столбец 2

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

Изменить градиентный фон

В этот дубликат нужно внести некоторые изменения, начиная с градиентного фона:

• Цвет 1: rgba (228,237,234,0,58)
• Цвет 2: rgba (255,255,255,0)

Изменить интервал

Также измените настройки интервала. Это увеличит расстояние между этим модулем делителя и модулем в первом столбце.

• Верхнее поле: 142 пикселя
• Верхний отступ: 120 пикселей
• Нижний отступ: 120 пикселей

Клонируйте модуль разделения # 1 дважды и поместите в столбцы 3 и 5

Клонируйте фиолетовый разделительный модуль дважды и поместите дубликаты в столбцы 3 и 5.

Клонируйте модуль делителя №2 и поместите в столбец 4

Клонируйте также зеленый разделительный модуль и поместите его в столбец 4.

Скрыть модуль разделителя в столбцах 3, 4 и 5 на планшете и телефоне

Откройте модуль разделителя в столбце 3

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

Скрыть на планшете и телефоне

Перейдите на вкладку «Дополнительно» и отключите модуль на телефоне и планшете.

Копировать стили видимости

Нам также нужно скрыть разделители в столбцах 4 и 5. Чтобы ускорить процесс, скопируйте настройки видимости разделителя в столбце 3:

Вставить стили видимости

И вставьте их в разделительные модули в столбцах 4 и 5.

Раздел Переход # 2

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

Найдите

Чтобы создать второй переход раздела, добавьте сюда новый раздел:

Верхний разделитель

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

• Стиль разделителя: найти в списке
• Цвет разделителя: #ffffff
• Высота разделителя: 236 пикселей
• Переворот разделителя: вертикальный
• Расположение разделителей: поверх содержимого раздела

Нижний разделитель

Аналогичным образом добавьте нижний разделитель:

• Стиль разделителя: найти в списке
• Цвет разделителя: #ffffff
• Высота разделителя: 236 пикселей
• Расположение разделителей: поверх содержимого раздела

Интервал

Затем измените настройки интервала:

• Верхнее поле: 100 пикселей
• Нижнее поле: 100 пикселей
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

Пора добавить строку в новый раздел! Выберите следующую структуру столбцов:

Размеры

Не добавляя никаких модулей, откройте настройки ряда и измените ширину:

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Удалите также все стандартные верхние и нижние отступы:

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить модуль разделителя №1 в столбец 1

Фоновый цвет

Затем добавьте модуль разделителя в первый столбец. Откройте его настройки и добавьте цвет фона:

• Цвет фона: rgba (176,182,219,0,34)

Цвет разделителя

Также измените цвет разделителя:

• Цвет разделителя: #ffffff

Стиль разделителя

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

• Стиль разделителя: Двойной

Вес разделителя

Вес разделителя должен быть следующим:

• Вес разделителя: 18 пикселей

Интервал

И последнее, но не менее важное: увеличьте размер модуля разделителя с помощью настраиваемого заполнения:

• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей

Клонировать модуль разделителя и поместить в столбец 2

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

Изменить цвет фона

Соответственно измените цвет фона этого дубликата:

• Цвет фона: # e4edea

Клонируйте модуль делителя №1 и поместите в столбцы 3 и 5

Продолжите, дважды клонировав фиолетовый разделительный модуль и поместив дубликаты в столбцы 3 и 5.

Клонируйте модуль делителя №2 и поместите в столбец 4

Клонируйте также зеленый разделительный модуль и поместите дубликат в столбец 4.

Скрыть модуль разделителя в столбцах 3, 4 и 5 на планшете и телефоне

Скрыть на планшете и телефоне

Мы собираемся сделать то же самое, что и в первом примере перехода между разделами. Откройте настройки модуля разделителя в столбце 3 и скройте его на телефоне и планшете.

Копировать стили видимости

Скопируйте эти стили видимости.

Вставить стили видимости

И вставьте их в разделительные модули в столбцах 4 и 5.

Раздел Переход # 3

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

Найдите

Чтобы добавить последний переход раздела на вашу страницу, добавьте здесь новый раздел:

Верхний разделитель

Откройте настройки раздела и добавьте верхний разделитель:

• Стиль разделителя: найти в списке
• Цвет разделителя: #ffffff
• Высота разделителя: 150 пикселей
• Расположение разделителей: поверх содержимого раздела

Нижний разделитель

Добавьте нижний рядом:

• Стиль разделителя: найти в списке
• Цвет разделителя: #ffffff
• Высота разделителя: 150 пикселей
• Переворот разделителя: вертикальный
• Расположение разделителей: поверх содержимого раздела

Интервал

Затем перейдите к настройкам Spacing и внесите некоторые изменения:

• Верхнее поле: 100 пикселей
• Нижнее поле: 100 пикселей
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

Строка, которая нам понадобится в этом разделе, имеет следующую структуру столбцов:

Размеры

Не добавляя никаких модулей, откройте настройки строки и увеличьте ширину вашей строки:

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Удалите все стандартные верхние и нижние отступы следующим образом:

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить модуль разделителя №1 в столбец 1

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

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

Фоновый цвет

Вместо этого добавьте цвет фона к разделителю:

• Цвет фона: rgba (176,182,219,0,34)

Интервал

Увеличьте размер модуля, используя верхнее и нижнее отступы:

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей

Клонировать модуль разделителя и поместить в столбец 2

Изменить цвет фона

Клонируйте модуль разделителя в первом столбце и поместите дубликат во второй. Откройте его настройки и измените цвет фона:

• Цвет фона: rgba (228,237,234,0,58)

Клонируйте модуль делителя №1 и поместите в столбцы 3 и 5

Клонируйте фиолетовый разделительный модуль дважды и поместите его в столбцы 3 и 5.

Клонируйте модуль делителя №2 и поместите в столбец 4

Клонируйте также зеленый разделительный модуль и поместите дубликат в столбец 4.

Скрыть модуль разделителя в столбцах 3, 4 и 5 на планшете и телефоне

Скрыть на планшете и телефоне

Скройте разделительный модуль в столбце 3 на планшете и телефоне.

Копировать стили видимости

Скопируйте эти стили видимости.

Вставить стили видимости

И вставьте их в модуль разделителя в столбцы 4 и 5, и все готово!

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

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

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

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