Хотели бы вы придать другое измерение своему сайт с фоновой маской Divi Липкий?
Липкие варианты Divi позволяют создавать множество различных дизайнов для ваших веб-сайтов. Сегодняшний учебник добавляет список вещей, которые вы можете сделать. Надеюсь, это поможет пробудить ваш творческий потенциал.
Мы покажем вам, как создать липкую фоновую маску.
В этом уроке сочетаются закрепленные параметры Divi с режимами наложения фильтров.
обследование
Прежде чем углубиться в этот урок, давайте быстро взглянем на результат на разных размерах экрана.
офис
Мобильный телефон
Создайте дизайн в Divi
Добавить новый раздел
Фоновое изображение
Начните с добавления нового раздела на страницу, над которой вы работаете.
- Загрузите фоновое изображение по вашему выбору.
- Размер фонового изображения : Обложка
расстояние
Переключитесь на вкладку «Конструктор сечения» и удалите настройки интервала по умолчанию ниже:
- Отступы (сверху и снизу): 0 пикселей
Переливы
Затем скрыть переполнения раздела во вкладке Фильтр.
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
Добавьте строку №1
Структура колонны
Продолжите, добавив новую строку, используя следующую структуру столбцов:
калибровка
Не добавляя никаких модулей, откройте настройки линии и соответствующим образом измените параметры размеров:
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Также удалите все поля по умолчанию.
- Отступы (сверху и снизу): 0 пикселей
Фильтры
Мы также добавляем к этой линии режим наложения. Этот режим наложения поможет нам создать маску позже в этом уроке.
- Режим наложения: Экран
Z-индекс
Чтобы убедиться, что эта строка остается ниже второй строки, которую мы добавим в раздел, мы изменим z-индекс на вкладке Фильтр.
- Индекс Z: 9
Параметры столбца
Далее мы откроем настройки столбца.
Фоновый цвет
Мы используем полностью белый цвет фона.
- Цвет фона: #ffffff
CSS основной элемент
Мы также добавляем значение высоты к основному элементу во вкладке Фильтр.
height: 100vh;
Добавьте в строку модуль «Текст».
Оставьте область содержимого пустой
Когда вы закончите с настройками строки, добавьте текстовый модуль в ее столбец.
Покиньте территорию содержание пустой. Вместо этого мы используем этот модуль для создания фигуры, которая показывает часть фонового изображения раздела.
Фоновый цвет
Мы собираемся использовать более темный цвет фона для этого модуля.
- Цвет фона: #0b3835
калибровка
Далее мы получим доступ к вкладке Проект и измените параметры размера следующим образом:
- Ширина:
- Рабочий стол: 20vw
- Планшет и телефон: 70 vw
- Высота:
- Рабочий стол: 30vh
- Планшет и телефон: 10vh
расстояние
Мы также добавляем верхнее поле.
- Поле (сверху): 3vh
Граница
И мы собираемся включить закругленные углы.
- Закругленные углы: 15 пикселей
Добавить строку 2
Структура колонны
Продолжите, добавив еще одну строку в раздел, используя следующую структуру столбцов:
калибровка
Откройте настройки линии и внесите следующие изменения в опции Калибровка следующий:
- Ширина: 100%
- Максимальная ширина: 100%
Z-индекс
Также увеличьте z-индекс строки. Это поможет гарантировать, что содержание линии остается выше предыдущей линии.
- Z-индекс: 12
Добавьте в строку модуль «Текст».
Добавить контент H2
Пришло время добавлять модули, начиная с первого модуля Text, содержащего содержание H2 на ваш выбор.
Настройки текста H2
Настройте параметры текста H2 следующим образом:
- Шрифт: Дисплей Playfair
- Выравнивание текста: по центру
- Цвет текста: #0b3835
- Размер:
- Рабочий стол: 150 пикселей
- Планшет и телефон: 45 пикселей
- Высота строки: 1,2 см
калибровка
Затем перейдите к настройкам размера и примените следующие настройки:
- Максимальная ширина: 980 пикселей
- Модуль выравнивания: Центр
расстояние
Также включите отрицательное верхнее поле.
Добавьте в строку модуль «Кнопка».
Добавить содержимое к кнопке
Следующий и последний модуль, который нам нужен в этом ряду, — это модуль Button. Добавьте содержимое по вашему выбору.
Выравнивание кнопок
Перейти на вкладку Проект модуля и изменить выравнивание кнопки.
- Выравнивание кнопок: по центру
Настройки кнопок
Далее переходим в настройки кнопки и применяем следующие стили:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 15px
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: #000000
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 100 пикселей
- Шрифт кнопки: Монтсеррат
- Вес шрифта кнопки: полужирный
- Стиль шрифта: ТТ
расстояние
Мы также добавляем пользовательские значения полей и отступов в настройки интервалов.
- Поле (нижнее): 60vh
- Отступы (сверху и снизу): 15 пикселей
- Отступы (слева и справа): 40 пикселей
Применение липких эффектов
Открытая линия №1
Теперь, когда мы создали основу нашего дизайна, пришло время применить липкие стили. Откройте настройки первой строки.
Применить липкие параметры
Перейти на вкладку Фильтр и примените следующие постоянные настройки:
- Липкая позиция: Придерживайтесь верхней части
- Нижний липкий предел: Раздел
- Смещение от окружающих липких элементов: ДА
- Переход по умолчанию и липкие стили: ДА
Параметры закрепления текстового модуля
Теперь, когда линия закреплена, мы можем применить стили к текстовому модулю внутри линии. Откройте настройки модуля.
Липкий размер
Затем перейдите к настройкам размера и примените следующие значения размера:
- Ширина (липкая): 80 vw
- Высота (липкая): 90vh
Время перехода
Наконец, перейдите на вкладку Фильтр и увеличить продолжительность перехода.
- Продолжительность перехода: 500 мс
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
офис
Скачайте DIVI прямо сейчас!!!
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы еще раз показали вам, как проявить творческий подход с помощью липких опций Divi.
В частности, мы показали вам, как комбинировать настройки фильтра Divi и фиксированные параметры.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
