Как творчески использовать тени Row Box Shadow с Divi

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

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

Результат

Рабочий стол

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

Мобильный

И вот так на мобильном телефоне:

Как творчески использовать тени Row Box Shadow с Divi

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

Формат заголовка

Первое, что вам нужно сделать, это выбрать правильный формат заголовка. Перейдите в панель управления WordPress> Настройка> Заголовок и навигация> Формат заголовка> и выберите «По центру» в качестве стиля заголовка .

Панель основного меню

Вернитесь в заголовок и навигация> Основная строка меню> и внесите следующие изменения:

• Скрыть изображение логотипа: включить
• Высота меню: 211
• Макс.высота логотипа: 30
• Размер текста: 16
• Расстояние между буквами: 2
• Шрифт: Lato Light
• Стиль шрифта: прописные
• Цвет текста: #FFFFFF
• Цвет активной ссылки: #FFFFFF
• Цвет фона: rgba (255,255,255,0)
• Цвет фона выпадающего меню: rgba (255,255,255,0)

Первый раздел

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

Раздел градиентный фон

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

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

Интервал

Переходим на вкладку «Дизайн». В подкатегории «Интервал» используйте «100 пикселей» для верхнего отступа и «200 пикселей» для нижнего отступа.

Строка в одну колонку

Строка градиентный фон

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

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

Столбец градиентный фон

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

• Первый цвет: rgba (237,217,0,0,77)
• Второй цвет: rgba (255,255,255,0)
• Тип градиента столбца: линейный
• Направление градиента столбца: 180 градусов
• Начальная позиция столбца: 0
• Конечное положение столбца: 100

Размеры

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

• Использовать нестандартную ширину: Да
• Специальная ширина: 27%

Интервал

Затем используйте «20 пикселей» для верхнего, правого, нижнего и левого полей Custom Padding строки.

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

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

• Шрифт текста: Arvo
• Размер шрифта текста: 98 пикселей
• Цвет текста: #FFFFFF
• Расстояние между буквами текста: 32 пикселя
• Высота текстовой строки: 1,4 мкм
• Ориентация текста: по центру

Второй раздел

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

Раздел градиентный фон

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

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

Интервал

Затем перейдите на вкладку «Дизайн» и добавьте «100 пикселей» к нижнему отступу.

Первая двухколоночная строка

Цвет фона строки

Добавьте первую строку из двух столбцов в этот новый раздел и используйте «#dddddd» в качестве цвета фона.

Столбец 1 градиентный фон

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

• Первый цвет: # 6ac922
• Второй цвет: # b6c1b2
• Столбец 1 Тип градиента: линейный
• Столбец 1 Направление градиента: 136 градусов
• Колонка 1: начальная позиция: 23%
• Конечное положение столбца 1: 100%

Цвет фона столбца 2

Прокрутите вниз и используйте «#dddddd» в качестве цвета фона столбца 2.

Размеры

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

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

Интервал

Подкатегории Spacing потребуются следующие отступы и поля:

• Отступ сверху, справа, снизу и слева: 0 пикселей
• Верхнее поле: -150 пикселей
• Отступ сверху столбца 1: 235 пикселей (рабочий стол), 0 пикселей (планшет и телефон).
• Отступ снизу столбца 1: 235 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Отступ сверху столбца 2: 150 пикселей.
• Отступ нижнего столбца 2: 150 пикселей

Коробка Тень

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

• Горизонтальное положение тени блока: -3px
• Вертикальное положение тени блока: -18 пикселей
• Сила размытия тени коробки: 77 пикселей
• Сила распространения тени коробки: 23 пикселя
• Цвет тени: rgba (0,0,0,0.3)

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

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

• Шрифт текста: Arvo
• Размер шрифта текста: 34 пикс.
• Цвет текста: # 7a7a7a
• Ориентация текста: по центру

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

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

• Шрифт текста: Lato Light
• Ориентация текста: по центру

Откройте подкатегорию «Размер», используйте ширину «75%» и выберите «Выравнивание модуля по центру».

Наконец, добавьте верхнее поле 50 пикселей.

Второй двухколоночный ряд

Цвет фона строки

Добавьте в раздел еще одну строку из двух столбцов и выберите цвет фона «# b99bc1».

Цвет фона столбца 1

Прокрутите вниз и выберите «#dddddd» в качестве цвета фона столбца 1.

Размеры

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

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

Интервал

Затем используйте следующий отступ:

• Отступ сверху, справа, снизу и слева: 0 пикселей
• Отступ сверху столбца 1: 150 пикселей (рабочий стол), 0 пикселей (планшет и телефон).
• Отступ снизу столбца 1: 50 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Отступ сверху столбца 2: 150 пикселей.
• Отступ нижнего столбца 2: 150 пикселей

Коробка Тень

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

• Горизонтальное положение тени блока: -4 пикселя
• Положение прямоугольной тени по вертикали: 24 пикселя
• Сила размытия тени коробки: 77 пикселей
• Сила распространения тени коробки: 23 пикселя
• Цвет тени: rgba (0,0,0,0.3)
• Положение тени коробки: внешняя тень

Первый модуль изображения в первом столбце

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

• Показать пространство под изображением: Да
• Верхнее поле: -500 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Правое поле: -50 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Левое поле: 200 пикселей (рабочий стол), 0 пикселей (планшет и телефон)

Откройте подкатегорию Box Shadow и используйте следующую box shadow:

• Горизонтальное положение тени блока: 2 пикселя
• Вертикальное положение тени блока: 2 пикселя
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 30 пикселей
• Цвет тени: rgba (255,255,255,0.68)
• Положение тени коробки: внешняя тень

Второй столбец изображения в первом столбце

Добавьте еще один модуль изображения в тот же столбец и используйте следующие поля:

• Верхнее поле: -50 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Правое поле: 100 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Нижнее поле: 30 пикселей
• Левое поле: 100 пикселей (рабочий стол), 0 пикселей (планшет и телефон)

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

• Горизонтальное положение тени блока: 2 пикселя
• Вертикальное положение тени блока: 2 пикселя
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 30 пикселей
• Цвет тени: rgba (255,255,255,0.68)
• Положение тени коробки: внешняя тень

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

Наконец, клонируйте два текстовых модуля из предыдущей строки и поместите их во второй столбец этой строки. Вам нужно будет изменить только одно; цвет текста. Откройте настройки каждого текстового модуля и измените цвет текста на «#FFFFFF».

Результат

Рабочий стол

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

Мобильный

И такой результат на мобильном телефоне:

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

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

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

Изображение Дмитрия Гужанина / shutterstock.com