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

В этом руководстве по Divi мы покажем вам, как создавать красивые переходы между разделами, используя только встроенные параметры Divi.

Разделы являются основой всего контента, которым вы делитесь на своем веб-сайте. Каждый раздел представляет собой главу, и переход от одного раздела к другому является частью процесса повествования. Сделав этот переход как можно более плавным, вы подчеркнете сообщение, которое вы пытаетесь сформулировать. Чтобы помочь вам в этом, мы собираемся показать вам, как вы можете создавать красивые переходы между разделами для вашего следующего проекта веб-сайта.

Sneak Peek

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

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

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

Восстановить разделы

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

Создать первый раздел

Начните с создания первого стандартного раздела и выбора строки с полной шириной.

Настройки раздела

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

Первый текстовый модуль

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

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

Второй текстовый модуль

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

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

Кнопочный модуль

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

Затем откройте подкатегорию «Кнопка», включите параметр «Использовать пользовательские стили для кнопки» и выберите «20» в качестве размера текста кнопки.

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

• Первый цвет: # 2b87da
• Второй цвет: # 29c4a9
• Тип градиента: линейный
• Направление градиента: 162 градуса
• Стартовая позиция: 0%
• Конечное положение: 100%

Создать второй раздел

Добавьте еще один стандартный раздел, но вместо этого выберите строку из трех столбцов.

Настройки раздела

Второй раздел также будет использовать отступы 300 пикселей для верха и низа.

Модуль Blurb

Затем мы собираемся добавить модуль Blurb в первый столбец строки. После того, как вы определились с текстом, который хотите отобразить, прокрутите вкладку «Содержимое», включите параметр «Использовать значок» и выберите значок.

Как только вы это сделаете, перейдите на вкладку «Дизайн» и используйте следующие настройки для подкатегории значков:

• Цвет значка: # 515151
• Размещение изображения / значка: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 55 пикселей

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

• Шрифт заголовка: Comfortaa
• Выравнивание текста заголовка: по центру
• Размер шрифта заголовка: 18

И, наконец, это настройки для подкатегории основного текста:

• Шрифт тела: Comfortaa
• Выравнивание основного текста: по центру
• Размер шрифта основного текста: 14
• Высота линии корпуса: 1,7 эм

Клонировать модуль Blurb

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

1. По всей диагонали

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

Настройки градиентного фона в первом разделе

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

• Первый цвет: #dddddd
• Второй цвет: # f7f7f7
• Тип градиента: линейный
• Направление градиента: 183 град.
• Стартовая позиция: 85%
• Конечная позиция: 70,05%

Настройки градиентного фона второй части

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

• Первый цвет: # f7f7f7
• Второй цвет: #dddddd
• Тип градиента: линейный
• Направление градиента: 183 град.
• Стартовая позиция: 85%
• Конечная позиция: 69.05%

Удалить верхнюю обивку второй секции

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

2. Встретимся на полпути

Следующий пример, которым мы хотели бы поделиться, - очень элегантный, в котором используются два противоположных градиентных фона. Используя этот эффект, кажется, что разделы следуют друг за другом.

Настройки градиентного фона в первом разделе

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

• Первый цвет: rgba (255,255,255,0)
• Второй цвет: rgba (224,43,32,0.07)
• Тип градиента: радиальный
• Радиальное направление: вверху слева
• Стартовая позиция: 60%
• Конечная позиция: 50%

Настройки градиентного фона второй части

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

• Первый цвет: rgba (255,255,255,0)
• Второй цвет: rgba (224,43,32,0,33)
• Тип градиента: радиальный
• Радиальное направление: Внизу справа
• Стартовая позиция: 58%
• Конечная позиция: 50%

3. Фьюжн

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

Настройки градиентного фона в первом разделе

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

• Первый цвет: rgba (12,113,195,0.19)
• Второй цвет: rgba (255,255,255,0,39)
• Тип градиента: радиальный
• Радиальное направление: внизу слева
• Стартовая позиция: 50%
• Конечная позиция: 50%

Настройки градиентного фона второй части

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

• Первый цвет: rgba (224,43,32,0,17)
• Второй цвет: rgba (255,255,255,0,39)
• Тип градиента: радиальный
• Радиальное направление: вверху справа
• Стартовая позиция: 50%
• Конечная позиция: 50%

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

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

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

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

• Первый цвет: rgba (12,113,195,0.19)
• Второй цвет: rgba (224,43,32,0,17)
• Тип градиента: линейный
• Направление градиента: 92 град.
• Стартовая позиция: 43%
• Конечная позиция: 62%

4. Обратный

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

Настройки градиентного фона в первом разделе

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

• Первый цвет: # f2f2f2
• Второй цвет: rgba (104,153,193,0,58)
• Тип градиента: радиальный
• Радиальное направление: Внизу справа
• Стартовая позиция: 7,9%
• Конечная позиция: 7,9%

Настройки градиентного фона второй части

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

• Первый цвет: rgba (104,153,193,0,58)
• Второй цвет: # f2f2f2
• Тип градиента: радиальный
• Радиальное направление: вверху справа
• Стартовая позиция: 8%
• Конечная позиция: 8%

5. Указатели

Пятый пример выглядит немного чище и минималистичнее, чем другие. Вы можете воспринимать переход двумя способами, видя либо указатели, либо круги (или и то, и другое).

Настройки градиентного фона в первом разделе

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

• Первый цвет: # f4f4f4
• Второй цвет: #ffffff
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 88%
• Конечная позиция: 88,05%

Настройки градиентного фона второй части

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

• Первый цвет: rgba (43,135,218,0)
• Второй цвет: rgba (12,113,195,0,43)
• Тип градиента: радиальный
• Радиальное направление: снизу
• Стартовая позиция: 87%
• Конечная позиция: 87%

6. Головоломка

В последнем примере определенно создается ощущение, что секции принадлежат друг другу.

Настройки градиентного фона в первом разделе

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

• Первый цвет: rgba (160,181,193,0,46)
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 56,3%
• Конечная позиция: 43%

Настройки градиентного фона второй части

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

• Первый цвет: rgba (242,242,242,0)
• Второй цвет: rgba (160,181,193,0,46)
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 56%
• Конечная позиция: 40%

Изменить заполнение первого раздела

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

Удалить верхнюю обивку второй секции

Наконец, мы собираемся удалить и верхнюю обивку второй секции.

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

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

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

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