Как объединить параметры фона изображения и тени с помощью Divi

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

Первый пример

Рабочий стол

Мобильный

Второй пример

Рабочий стол

Мобильный

Третий пример

Рабочий стол

Мобильный

Четвертый пример

Рабочий стол

Мобильный

Как объединить параметры фона изображения и тени с помощью Divi

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

Первый пример

Теперь, когда мы показали вам, чего можно ожидать от этого поста, давайте посмотрим, как можно воссоздать следующий пример с помощью всего нескольких шагов в Divi и без дополнительного кода CSS:

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

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

Добавьте строку из двух столбцов в стандартный раздел и выберите «rgba (12,113,195,0.11)» в качестве цвета фона столбца 1.

Интервал

Затем перейдите на вкладку «Дизайн». Добавьте 200 пикселей к верхнему полю и 150 пикселей к нижнему отступу первого столбца.

Добавить модуль изображения в первый столбец (настольный компьютер и планшет)

Размеры

Затем добавьте модуль изображения в первый столбец созданной вами строки. Этот модуль изображения будет применяться только к настольным компьютерам и планшетам. Первое, что вам нужно сделать, это изменить ширину на «94%».

Интервал

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

Коробка Тень

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

• Горизонтальное положение тени блока: 80 пикселей
• Положение прямоугольной тени по вертикали: 80 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 6 пикселей
• Цвет тени: rgba (173,173,173,0.79)
• Положение тени коробки: внешняя тень

Видимость

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

Модуль клонирования изображения (телефон)

Большинство настроек, которые мы использовали для настольной и планшетной версии Image Module, одинаковы и для мобильной версии. Вот почему мы собираемся клонировать модуль изображения и внести некоторые дополнительные изменения, которые будут соответствовать экрану мобильного телефона.

Изменить тень коробки

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

• Горизонтальное положение тени блока: 33 пикселя
• Положение прямоугольной тени по вертикали: 78 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 6 пикселей
• Цвет тени: rgba (173,173,173,0.79)
• Положение тени коробки: внешняя тень
  

Видимость

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

Второй пример

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

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

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

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

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

Размеры

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

Интервал

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

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

Интервал

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

Коробка Тень

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

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

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

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

Третий пример

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

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

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

Добавьте строку из одного столбца и выберите «rgba (193,145,163,0,6)» в качестве цвета фона первого столбца.

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

Градиентное фоновое изображение

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

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

Граница

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

• Использовать границу: Да
• Цвет границы: # 000000
• Ширина границы: 3 пикселя
• Стиль границы: сплошной

Размеры

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

• Рабочий стол: 85%
• Планшет и телефон: 100%

Интервал

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

• Левое поле: 80 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Отступ сверху, справа, снизу и слева: 30 пикселей

Коробка Тень

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

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

Четвертый пример

И наконец; последний пример, который мы покажем вам, как воссоздать, выглядит так:

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

Начните с добавления строки из двух столбцов. Эта строка, в отличие от предыдущих примеров, которые мы рассмотрели в этом посте, не требует дополнительных настроек.

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

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

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

• Первый цвет: rgba (255,255,255,0)
• Второй цвет: rgba (92,0,158,0.46)
• Тип градиента: линейный
• Направление градиента: 138 градусов
• Стартовая позиция: 55%
• Конечная позиция: 55%

Интервал

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

• Показать пространство под изображением: Да
• Отступ справа: 30 пикселей
• Нижний отступ: 30 пикселей

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

Фоновый цвет

Продолжите, добавив еще один модуль изображения прямо под предыдущим и используйте rgba (96,96,96,0.42) в качестве цвета фона.

Интервал

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

• Показать пространство под изображением: Да
• Верхнее поле: -250 пикселей (рабочий стол), -150 (планшет), -100 (телефон)
• Правое поле: -150 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Левое поле: 150 пикселей
• Верхний отступ: 30 пикселей
• Отступ слева: 30 пикселей

Коробка Тень

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

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 2 пикселя
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 24 пикселя
• Цвет тени: # e2e2e2
• Положение тени коробки: внешняя тень

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

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

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

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