Как творчески комбинировать фоны строк и столбцов с новыми параметрами Divi

Опубликовано: 2017-10-02

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

Результат

Если вы будете следовать этому руководству шаг за шагом, вы сможете добиться следующего результата:

градиент

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

Перейти на Visual Builder

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

градиент

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

Первое, что нам нужно сделать, это создать новый стандартный раздел. Все строки, которые мы будем создавать и комбинировать друг с другом, будут частью этого раздела. Чтобы создать эффект тени блока на строках, мы добавим следующий градиентный фон раздела:

Первый цвет: rgba (61,65,86,0,59)
Второй цвет: # f7f7f7
Тип градиента: радиальный
Радиальное направление: снизу
Стартовая позиция: 31%
Конечная позиция: 76%

градиент

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

Следующее, что нам нужно сделать, это добавить в раздел строку из одного столбца. Эта строка будет представлять следующую часть нашего конечного результата:

градиент

Настройки строк и столбцов

Сделать строку полной шириной

Идите вперед и сделайте строку полной ширины на вкладке «Дизайн».

Настройки фона строки

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

Первый цвет: # 3d4156
Второй цвет: rgba (114,81,114,0.91)
Тип градиента: линейный
Направление градиента: 180 градусов
Стартовая позиция: 0%
Конечная позиция: 65%

Загрузите фоновое изображение (в данном случае узор) и выберите «Умножить» в качестве наложения фонового изображения.

Настройки фона столбца

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

Первый цвет: rgba (255,255,255,0,15)
Второй цвет: rgba (214,44,104,0)
Тип градиента столбца: линейный
Направление градиента столбца: 161deg
Начальная позиция в столбце: 43%
Конечное положение столбца: 43%

Интервал

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

Сверху: 20 пикселей
Справа: 30 пикселей
Слева: 30 пикселей

И некоторые дополнения к вашему столбцу:

Сверху: 200 пикселей
Внизу: 200 пикселей

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

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

Шрифт текста: Playfair Display
Размер шрифта текста: 77 пикселей (рабочий стол), 64 (планшет), 51 (телефон)
Цвет текста: # f7f7f7
Высота текстовой строки: 1,7 (рабочий стол), 1 м (планшет и телефон)

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

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

градиент

Прокрутите эту же вкладку вниз и используйте rgba (114,57,114,0.91) в качестве цвета фона.

градиент

Перейдите на вкладку «Дизайн» и выберите цвет разделителя «# 3d4156».

градиент

Откройте подкатегорию «Стили» и используйте «Solid» в качестве стиля разделителя и «Top» в качестве позиции разделителя.

градиент

Затем назначьте подкатегории Размеры:

Вес разделителя: 11 пикселей
Высота: 23 пикс.
Ширина: 0%
Выравнивание модуля: слева

градиент

И последнее, но не менее важное: добавьте левый отступ 48% к параметру Custom Padding. градиент