Как создать дизайн фона из матового стекла в Divi

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

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

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

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Как создать дизайн фона из матового стекла в Divi

Метод 1. Создание фона из матового стекла с помощью свойства CSS Backdrop-Filter.

В этом первом примере мы продемонстрируем самый простой способ создания дизайна фона из матового стекла с использованием свойства CSS backdrop-filter. Это просто, потому что нам нужна только строка CSS, чтобы получить желаемый результат. Обратной стороной является то, что в настоящее время существует несколько браузеров, которые не поддерживают фоновый фильтр (IE и Firefox).

Цель дизайна матового фона - не просто размыть фон целевого элемента, а размыть фон за элементом. Свойство backdrop-filter может сделать это, применив эффект фильтра размытия к элементу ниже (или позади) целевого элемента.

Вот как это сделать.

Добавление фонового изображения раздела

Сначала добавьте в раздел строку из одного столбца.

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

Добавление цвета фона строки и фильтра фона

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

• Цвет фона: rgba (255,255,255,0,3)

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

• Ширина: 90%
• Максимальная ширина: 900 пикселей
• Заполнение: 5% сверху, 5% снизу, 5% слева, 5% справа.

На вкладке «Дополнительно» добавьте следующий CSS-код к основному элементу:

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);

Это добавит фильтр размытия 10 пикселей к фону элемента. Обратите внимание, как эффект размывает фоновое изображение раздела, даже если к строке применен CSS. Вы можете увеличить или уменьшить степень размытия, изменив значение пикселя в CSS.

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

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

Затем вставьте следующий HTML-код в тело под текстовой вкладкой:

<h2>Frosted Glass Background</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

• Толщина шрифта текста: полужирный
• Цвет текста: # 33345b
• Размер текста текста: 16 пикселей
• Высота текстовой строки: 2em
• Шрифт заголовка 2: Poppins
• Толщина шрифта заголовка 2: полужирный
• Стиль шрифта заголовка 2: TT
• Выравнивание текста заголовка 2: по левому краю
• Цвет текста заголовка 2: # 33345b
• Размер текста заголовка 2: 70 пикселей (рабочий стол), 40 пикселей (планшет), 25 пикселей (телефон)
• Заголовок 2 Расстояние между буквами: 2 пикселя
• Высота строки заголовка 2: 1,3 м

Результат

Вот окончательный результат. Сказал вам, что это будет легко!

Метод 2: Создание фона из матового стекла с помощью параллаксных и многослойных модулей

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

Вот как это сделать.

Добавление раздела с фоновым изображением параллакса

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

Затем добавьте в раздел строку из одного столбца.

Задайте для раздела фоновое изображение с эффектом параллакса с помощью метода CSS:

• Использовать эффект параллакса: ДА
• Метод параллакса: CSS

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

Затем скопируйте текстовый модуль из первого раздела / примера выше и вставьте его в строку нового раздела.

Настройки столбца

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

• Заполнение: 10% сверху, 10% снизу, 10% слева, 10% справа.

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

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

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

Сначала мы добавим текстовый модуль, который будет служить слоем с размытым изображением.

Идите вперед и добавьте новый текстовый модуль под существующий текстовый модуль.

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

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

Затем добавьте то же фоновое изображение в текстовый модуль, используя тот же эффект параллакса CSS:

• Использовать эффект параллакса: ДА
• Метод параллакса: CSS

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

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

• Размытие: 10 пикселей

Теперь у нас есть размытая версия фонового изображения параллакса.

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

• Позиция: Абсолютная

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

• Ширина: 100%
• Высота: 100%

Теперь размытое изображение на месте, и мы видим, как появляется эффект матового стекла.

Добавление наложения размытого изображения с другим текстовым модулем

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

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

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

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

• Цвет фона: rgba (255,255,255,0,5)

На вкладке дизайна верните фильтр размытия к 0 пикселей.

Теперь посмотрим на окончательный результат.

Метод 3: Создание фона из матового стекла с использованием изображений реальных размеров и многослойных модулей

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

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

Дублировать предыдущий раздел

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

Обновить фон раздела

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

• Цвет фона: # 33345b

Обновить фон и заполнение столбца

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

• Фоновое изображение: фактический размер

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

• Заполнение: 10% сверху, 10% снизу, 15% слева, 15% справа

Обновить изображение модуля текста размытого изображения

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

• Использовать эффект параллакса: НЕТ
• Размер фонового изображения: фактический размер

Изменение размера и положения модулей размытого изображения и наложения текста

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

• Ширина: 80%
• Высота: 80%

Затем обновите местоположение абсолютного положения до центрированного:

• Расположение: по центру

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

Создание нескольких макетов столбцов с незначительными корректировками

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

Вот пример макета из двух столбцов.

Конечный результат

Вот окончательный результат всех примеров.

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

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

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

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