Как создать красивый размытый фон с Divi

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

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

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

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

Рабочий стол

Мобильный

Загрузите макет размытых фонов БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Подход

• Мы добавляем три разных модуля в один столбец; два модуля изображений и один модуль CTA
• Первое изображение сохраняет свой первоначальный вид
• Второе изображение будет размытым и увеличится в размере.
• Мы также улучшим цвета, поиграв с другими настройками фильтров, которые включены в модуль изображения.
• Модуль CTA будет перекрывать модуль размытого изображения и использовать его в качестве фона.
• Чтобы убедиться, что размытие и увеличение размера модуля изображения № 2 не превышают контейнер столбца, мы собираемся скрыть переполнение столбца.

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

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

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

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

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

Структура столбца

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размеров на вкладке дизайна.

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

Столбец 2 Переполнение

Перейдите на вкладку «Дополнительно» и скройте переполнение столбца 2, используя одну строку кода CSS. Это поможет нам убедиться, что ничто не выходит за пределы контейнера столбца. Это станет особенно важным, когда мы начнем преобразовывать модуль изображения в размытый фон и увеличивать его размер.

overflow: hidden;

Столбец 3 Переполнение

Проделайте то же самое с третьим столбцом.

overflow: hidden;

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

Добавить копию H2

Пора начинать добавлять модули, начиная с текстового модуля в первом столбце. Введите содержание H2 по вашему выбору.

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

Перейдите на вкладку дизайна и измените настройки текста H2.

• Шрифт заголовка 2: Poppins
• Цвет текста заголовка 2: # 232323
• Размер текста заголовка 2: 40 пикселей

Интервал

Также добавьте настраиваемое верхнее поле.

• Верхняя маржа: 9vw

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

Видимость

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

• Показать разделитель: Да

Линия

Перейдите на вкладку дизайна и измените цвет линии.

• Цвет линии: # 000000

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

Добавить содержимое

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

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: легкий
• Размер текста: 17 пикселей
• Высота текстовой строки: 2,1 м

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

Добавить копию

Следующий и последний модуль, который нам нужен в столбце 1, - это кнопочный модуль. Введите какую-нибудь копию по вашему выбору.

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

Перейдите на вкладку дизайна и задайте стиль кнопке в настройках кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 20 пикселей
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: # f4f4f4
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Поппинс
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхнее поле: 20 пикселей
• Нижнее поле: 20 пикселей
• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Добавить модуль изображения №1 в столбец 2

Загрузить 1: 1 изображение

Переходим ко второй колонке! Здесь первый модуль, который нам нужен, - это модуль изображения. Загрузите изображение с соотношением сторон 1: 1. Это означает, что ваше изображение должно быть идеальным квадратом (ширина должна равняться высоте).

Размеры

Перейдите на вкладку дизайна и включите опцию Force Fullwidth.

• Принудительная полная ширина: Да

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

Загрузить 1: 1 изображение

Второй модуль, который нам нужен в столбце 2, - это еще один модуль изображения. Мы снова используем изображение с соотношением сторон 1: 1.

Размеры

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

• Принудительная полная ширина: Да
• Высота: 320 пикселей

Интервал

Создайте перекрытие между этим и предыдущим модулями, добавив отрицательное верхнее поле.

• Верхнее поле: -100 пикселей

Фильтры

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

• Насыщенность: 200%
• Яркость: 145%
• Контрастность: 117%
• Размытие: 40 пикселей

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

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

• Справа: 180%
• Внизу: 180%

Добавить модуль CTA в столбец 2

Добавить содержимое

Следующий и последний модуль, который нам нужен во втором столбце, - это модуль CTA. Введите какую-нибудь копию по вашему выбору.

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

Перейдите к настройкам ссылки и добавьте URL-адрес ссылки кнопки, чтобы кнопка отображалась в дизайне.

Удалить цвет фона

Удалите также цвет фона.

• Использовать цвет фона: нет

Настройки текста заголовка

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

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Poppins
• Размер текста заголовка: 40 пикселей
• Интервал между заголовками: -1px

Настройки основного текста

Измените также настройки основного текста.

• Шрифт основного текста: Poppins
• Толщина основного шрифта: Light
• Высота линии тела: 2.2em

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

Наряду с кнопками настроек.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 20 пикселей
• Цвет текста кнопки: #ffffff
• Цвет градиента 1: rgba (244,244,244,0,4)
• Цвет градиента 2: rgba (255,255,255,0)
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Поппинс
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

• Верхнее поле: 50 пикселей
• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Интервал

И последнее, но не менее важное: создайте перекрытие между этим модулем и размытым фоном, добавив отрицательное верхнее поле. Мы также оставляем пробелы слева и справа от модуля.

• Верхнее поле: -250 пикселей
• Левый отступ: 2vw
• Правое заполнение: 2vw

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

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

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

Изменить изображение

Измените изображение в модуле изображения №1.

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

Изменить изображение

Сделайте то же самое для второго модуля изображения в столбце.

Изменить настройки фильтров

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

• Насыщенность: 180%
• Яркость: 102%
• Контрастность: 117%
• Размытие: 35 пикселей

Изменить дублирующийся модуль CTA

Изменить копию

Продолжите, изменив содержимое модуля CTA.

Изменить фон градиента кнопки

Вместе с первым цветом градиента кнопки, и все готово!

• Цвет градиента 1: rgba (244,244,244,0,15)

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

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

Рабочий стол

Мобильный

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

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

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.