Как создать липкую фоновую маску с Divi

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

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Создайте дизайн в Divi

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

Фоновая картинка

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

• Размер фонового изображения: обложка

Интервал

Перейдите на вкладку дизайна раздела и удалите все верхние и нижние отступы по умолчанию в настройках интервала.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Переполнения

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

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

Добавить строку №1

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

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

Размеры

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

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Удалите также все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Фильтры

Мы также добавляем в эту строку режим наложения. Этот режим наложения поможет нам создать маску позже в этом уроке.

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

Индекс Z

Чтобы эта строка оставалась ниже второй строки, которую мы добавим в раздел, мы изменяем индекс z на вкладке «Дополнительно».

• Индекс Z: 9

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

Далее мы откроем настройки столбца.

Фоновый цвет

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

• Цвет фона: #ffffff

Основной элемент CSS

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

height: 100vh;

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

Оставьте поле содержимого пустым

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

Фоновый цвет

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

• Цвет фона: # 0b3835

Размеры

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

• Ширина:
  • Рабочий стол: 20vw
  • Планшет и телефон: 70vw
• Рост:
  • Рабочий стол: 30vh
  • Планшет и телефон: 10vh

Интервал

Мы также добавляем верхний запас.

• Верхняя маржа: 3vh

Граница

И мы добавим закругленные углы.

• Все углы: 15 пикселей

Добавить строку №2

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

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

Размеры

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

• Ширина: 100%
• Максимальная ширина: 100%

Индекс Z

Увеличьте также z-индекс строки. Это поможет гарантировать, что содержимое строки останется поверх предыдущей.

• Индекс Z: 12

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

Добавить контент H2

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

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

Настройте параметры текста H2 следующим образом:

• Шрифт заголовка 2: Playfair Display
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 0b3835
• Размер текста заголовка 2:
  • Рабочий стол: 150 пикселей
  • Планшет и телефон: 45 пикселей
• Высота строки заголовка 2: 1,2 м

Размеры

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

• Максимальная ширина: 980 пикселей
• Выравнивание модуля: по центру

Интервал

Включите также некоторую отрицательную верхнюю маржу.

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

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

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

Выравнивание кнопок

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 15 пикселей
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей

• Шрифт кнопки: Montserrat
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

Мы также добавляем некоторые настраиваемые значения полей и отступов в настройки интервала.

• Нижнее поле: 60vh
• Верхний отступ: 15 пикселей
• Нижний отступ: 15 пикселей
• Отступ слева: 40 пикселей
• Отступ справа: 40 пикселей

2. Примените липкие эффекты

Открытый ряд №1

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

Применить липкие параметры

Перейдите на вкладку «Дополнительно» и примените следующие закрепленные настройки:

• Липкая позиция: придерживаться верха
• Нижний предел липкости: раздел
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

Параметры закрепления текстового модуля

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

Липкий размер

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

• Ширина липкости: 80vw
• Липкая высота: 90vh

Продолжительность перехода

И последнее, но не менее важное: перейдите на вкладку «Дополнительно» и увеличьте продолжительность перехода. Вот и все!

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

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

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

Рабочий стол

Мобильный

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

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

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