Использование новых настроек фильтра столбцов Divi для создания потрясающих эффектов наложения

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

Давайте приступим к делу!

Предварительный просмотр

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

Рабочий стол

Мобильный

Загрузите макет Column Blend Modes Layout БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету режимов наложения столбцов, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Начнем воссоздавать!

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

Добавить новый раздел с строкой из 3 столбцов

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

Расстояние между секциями

Откройте настройки раздела и отрегулируйте интервал.

• Левое и правое поле: 3vw
• Отступ сверху и снизу: 84 пикселя

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

Фон

Перед добавлением каких-либо модулей мы собираемся изменить настройки строки. Начните с добавления цвета фона.

• Цвет фона: средний серый # c4c4c4

Затем загрузите фоновое изображение и смешайте цвет фона с изображением, используя режим наложения.

• Смешивание фонового изображения: умножение

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Удалите также отступы строк по умолчанию.

• Отступ сверху и снизу: 0 пикселей

Коробка Тень

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

• Тень коробки: первый вариант

Видимость

Настройте индекс Z на вкладке видимости.

• Z-индекс: 1

Столбец стиля 1

Введите настройки первого столбца.

Фильтры

Примените режим наложения экрана к столбцу на вкладке фильтров.

• Режим наложения: Экран

Масштаб преобразования при наведении

Войдите в группу опций преобразования и измените настройки масштаба преобразования при наведении.

• Масштаб преобразования: 105% по осям x и y

Видимость

Откройте вкладку видимости столбца и настройте параметры переполнения.

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Переходы

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

• Продолжительность перехода: 500 мс

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

Каждый столбец содержит три текстовых модуля. Добавьте первый текстовый модуль в столбец 1 с некоторым содержимым H2 по вашему выбору и настройте параметры следующим образом.

Фон

Примените к фону цветовой градиент.

• Фон: Градиент
• Первый цвет градиента: # 5498ff
• Второй цвет градиента: # 16fff3
• Направление градиента: 235 градусов
• Стартовая позиция: 37%

Интервал

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

• Верхняя и нижняя обивка: 6vw
• Левый и правый отступ: 3vw

Текст заголовка

Введите настройки текста заголовка и задайте соответствующий стиль для текста H2:

• Толщина шрифта заголовка 2: Ультра полужирный
• Стиль шрифта заголовка 2: TT
• Цвет текста заголовка 2: черный #oooooo
• Размер текста заголовка 2:
  • Рабочий стол: 5vw
  • Таблетка: 11vw
  • Телефон: 13vw
• Высота строки заголовка 2:
  • Рабочий стол: 4.3vw
  • Таблетка: 9vw
  • Телефон: 10.5vw

Фильтры

Переходим к настройкам фильтров и добавляем режим наложения экрана.

• Режим наложения: Экран

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

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

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

Фон

Добавьте белый цвет фона.

• Цвет фона: белый #fffffff

Текст

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

• Шрифт текста: Монтсеррат
• Выравнивание текста: по ширине
• Цвет текста: темно-серый # 333333
• Размер текста:
  • Рабочий стол: 0.8vw
  • Таблетка: 2vw
  • Телефон: 2.5vw
• Расстояние между буквами в тексте: -0.04vw
• Высота текстовой строки:
  • Рабочий стол: 2.7vw
  • Таблетка: 5.5vw
  • Телефон: 6vw

Интервал

Также отрегулируйте настройки интервала, чтобы вокруг текста оставалось пустое пространство.

• Верхняя и нижняя поля: 0.5vw
• Верхняя и нижняя обивка:
  • Рабочий стол: 5vw
  • Планшет + телефон: 15vw
• Левое заполнение: 5vw
• Правый отступ:
  • Рабочий стол: 5vw
  • Планшет + телефон: 25vw

Фильтры

И последнее, но не менее важное: примените режим наложения экрана на вкладке фильтров.

• Режим наложения: Экран

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

Чтобы завершить дизайн столбца, добавьте третий текстовый модуль с некоторой копией CTA. Мы используем весь этот модуль как кнопку.

Стилизуйте модуль следующим образом:

Добавить ссылку

Добавьте ссылку по вашему выбору в настройках ссылки. Как только кто-то щелкнет в любом месте модуля, он будет перенаправлен в другое место.

Фон

Настройте градиент фона, чтобы он соответствовал первому текстовому модулю.

• Фон: Градиент
• Первый цвет фонового градиента: # 5498ff
• Второй цвет градиента фона: # 16fff3
• Направление градиента: 235 градусов

Текст

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

• Шрифт текста: Монтсеррат
• Толщина шрифта текста: толстый
• Стиль шрифта текста: подчеркнутый
• Цвет подчеркивания текста: белый #ffffff
• Цвет текста: черный # 000000
• Размер текста:
  • Рабочий стол: 1.5vw
  • Таблетка: 3.3vw
  • Телефон: 4vw
• Высота текстовой строки: 1em

Интервал

Отрегулируйте настройки интервала, чтобы текст лучше помещался в модуле.

• Верхняя и нижняя обивка:
  • Рабочий стол: 2vw
  • Таблетка: 6vw
  • Телефон: 9vw
• Левый отступ: 3vw

Дублировать 1-й столбец дважды

После того, как вы заполнили первый столбец, откройте настройки строки и удалите второй и третий столбцы. Затем дважды продублируйте первый столбец. Конечно, нам нужно будет внести некоторые изменения в модули в столбцах 2 и 3.

Столбец 2 / Текстовый модуль 1 Фон

• Первый цвет градиента фона: # c870ff
• Второй цвет градиента фона: # ff355a

Столбец 2 / Текстовый модуль 2 Box Shadow

• Box Shadow: Шестой вариант
• Сила размытия тени коробки: 20 пикселей
• Сила распространения тени коробки: 17 пикселей
• Цвет тени коробки: rgba (225,33,255,0.06)

Столбец 2 / Текстовый модуль 3 Фон

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

• Первый цвет градиента фона: # c870ff
• Второй цвет градиента фона: # ff355a

Столбец 3 / Текстовый модуль 1 Фон

К третьей колонке! Измените соответственно градиентный фон текстового модуля 1:

• Первый цвет градиента фона: # ff4800
• Второй цвет градиента фона: # fc9a2a

Столбец 2 / Текстовый модуль 3 Фон

• Первый цвет градиента фона: # ff4800
• Второй цвет градиента фона: # fc9a2a

Предварительный просмотр

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

Рабочий стол

Мобильный

Это обертка

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