Как добавить односторонние тени к элементам дизайна в Divi

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

Давайте начнем.

Sneak Peek

Вот краткий обзор дизайна макета FAQ, который мы создадим с использованием односторонних теней.

Начиная

Для начала вам нужно будет создать новую страницу. На панели управления WordPress перейдите на Страницы> Добавить новый. Затем дайте своей странице название и разверните визуальный конструктор. Выберите вариант «Выбрать готовый макет». Во всплывающем окне «Загрузить из библиотеки» найдите и выберите «Пакет макетов терапевта». Затем выберите макет страницы часто задаваемых вопросов терапевта и нажмите «Использовать этот макет».

Теперь вы готовы приступить к проектированию.

Часть 1: Организация макета

В этом готовом макете мы сосредоточим наше внимание на втором разделе, содержащем фиктивные вопросы внутри нескольких модулей переключения. Для начала изменим расположение столбцов в строке на три столбца (1/3 1/3 1/3).

Затем переместите все модули из столбца 2 в столбец 3, используя функцию Divi Multiselect. Для этого, удерживая нажатой клавишу «Command» (или «Control»), щелкайте каждый модуль в столбце 2, пока не будут выбраны все. Затем перетащите их в столбец 3.

Теперь нам нужно дать нашей строке немного больше места. Откройте настройки строки и обновите следующее:

Ширина: 80%
Ширина желоба: 2
Выровнять высоту столбца: ДА

Часть 2: Разработка модулей переключения

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

Затем обновите следующее:

Цвет текста открытого переключателя: #ffffff
Открыть переключатель Цвет фона: rgba (0,0,0,0)
Цвет текста закрытого переключателя: #ffffff
Цвет фона закрытого переключателя: rgba (0,0,0,0)

Цвет основного текста: #ffffff

Пользовательские отступы: 3vw сверху, 3vw снизу, 2vw слева, 2vw справа

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

Горизонтальное положение тени блока: -30 пикселей
Вертикальное положение тени блока: 0 пикселей
Сила размытия тени коробки: 40 пикселей
Сила распространения тени коробки: -35 пикселей
Цвет тени: rgba (0,0,0,0.4)

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

Сохранить настройки.

Теперь все ваши переключатели были обновлены с новым дизайном.

Однако мы хотим, чтобы тень блока переключателей в правом столбце располагалась с правой стороны (а не с левой). Чтобы изменить это, используйте Multiselect, чтобы выбрать все переключатели в правом столбце и открыть настройки элемента. Затем измените положение по горизонтали с -30 пикселей на 30 пикселей следующим образом:

Горизонтальное положение тени блока: 30 пикселей

Затем сохраните настройки.

Это заботится о наших модулях переключения с их уникальными односторонними тенями. Теперь нам нужно добавить аналогичные тени одностороннего блока к нашим столбцам.

Часть 3: Добавление односторонних теней к столбцам

Чтобы добавить односторонние тени к столбцам, нам нужно будет добавить несколько фрагментов CSS на расширенной вкладке настроек строки.

Откройте настройки строки и щелкните вкладку «Дополнительно». Внутри основного элемента столбца 1 добавьте следующий CSS:

box-shadow: 30px 0px 70px -45px rgba (0,0,0,0.4)

Если вы не знакомы с CSS, вы сможете распознать сходство кода с настройками модуля теневого блока, доступными в конструкторе Divi. В приведенном выше коде…

30px - значение для горизонтального положения
0px - значение вертикальной позиции
70 пикселей - значение силы размытия.
-45px - значение силы спреда
rgba (0,0,0,0.4) - цвет тени

Я дал тени поля столбца большую силу размытия, чем модули переключения, чтобы создать немного большую глубину.

Чтобы добавить тень левого поля в столбец 3, вам необходимо добавить следующий CSS в основной элемент столбца 3:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Опять же, единственная разница между этим CSS и CSS, используемым для столбца 1, - это отрицательное положение по горизонтали.

Часть 4: Добавление значков метки в столбец 2

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

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

Цвет значка: rgba (203,241,252,0,37)
Размер шрифта значка: 20vw
Пользовательское поле: нижнее 0 пикселей

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

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

Размер шрифта значка: 9vw
Ширина: 40%
Выравнивание модуля: справа
Специальная маржа: -2vw

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

Часть 5: Вертикальное центрирование модулей в столбце 2

Чтобы завершить дизайн, нам нужно центрировать значки рекламных объявлений в столбце 2 по вертикали, чтобы они оставались центрированным элементом дизайна для нашего макета. Для этого мы собираемся извлечь выгоду из использования Divi гибкости. Поскольку мы выбрали выравнивание высоты столбцов для нашей строки, мы можем использовать простой фрагмент CSS для центрирования всех модулей в столбце 2. Вы всегда можете узнать больше о том, как вертикально выровнять контент в Divi по своему усмотрению. Но пока откройте настройки строки и перейдите на вкладку «Дополнительно». Затем введите следующий CSS в основной элемент столбца 2:

margin: auto

Теперь все модули аннотации будут центрированы по вертикали в столбце 2.

Чтобы упростить работу глаз, поместите текст по центру на каждом из текстовых модулей, расположенных вверху столбца 1 и столбца 2. Затем добавьте фоновый градиент в раздел следующим образом:

Цвет фонового градиента слева: # 616ce1
Правый цвет градиента фона: # 3846e0

Вот и все. Теперь дизайн завершен.

Проверьте окончательный результат.

И обратите внимание, как тень блока расширяется и сжимается при открытии и закрытии переключателей.

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!