[Ad_1]
Пойдем.
обследование
Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат на экранах разных размеров.
офис
Мобильный телефон
Скачать макет БЕСПЛАТНО
Чтобы получить бесплатный макет, вам нужно сначала загрузить их, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на нашу рассылку Divi Daily, используя форма ниже. Как новый подписчик, вы будете получать еще больше преимуществ Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже в списке, просто введите свой адрес электронной почты ниже и нажмите «Загрузить». Вы не будете «переподписаны» или получите дополнительные электронные письма.
Начнем воссоздавать!
Добавьте 2 раздела заполнителя
Добавить новый раздел
Начните с добавления раздела-заполнителя на страницу, над которой вы работаете.
калибровка
Откройте настройки раздела и измените высоту в настройках размеров.
Клонировать раздел
Клонируйте раздел один раз. В результате на вашей странице остается два раздела-заполнителя. Эти разделы-заполнители помогут вам увидеть окончательный эффект после прохождения руководства. На действующем веб-сайте разделы-заполнители будут заменены обычными разделами, которые вы используете на всей странице.
Добавить новый раздел между разделами-заполнителями
После того, как разделы-заполнители будут на месте, добавьте новый раздел между разделами-заполнителями.
Фоновый цвет
Откройте настройки раздела и используйте белый цвет фона.
- Цвет фона: #ffffff
расстояние
Перейдите на вкладку дизайна раздела и измените значения верхнего и нижнего отступов соответственно:
- Верхняя обивка: 10vh
- Нижняя обивка: 10vh
Добавить строку # 1
Структура столбца
Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строки, перейдите к настройкам размеров и измените максимальные значения ширины и ширины.
- Ширина: 100%
- Максимальная ширина: 100%
Добавить текстовый модуль в столбец
Добавить копию
Единственный модуль, который нам нужен для этой строки, - это текстовый модуль. Добавьте копию по вашему выбору.
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
- Шрифт текста: Montserrat
- Толщина шрифта текста: Ультра полужирный
- Стиль шрифта текста: прописные.
- Цвет текста: # fff2ea
- Размер текста: 11vw
- Высота текстовой строки: 1 см
- Выравнивание текста: по центру
Добавить строку # 2
Структура столбца
Добавьте в раздел еще одну строку, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера следующим образом:
- Использовать нестандартную ширину желоба: Да
- Ширина желоба: 2
- Ширина: 90%
- Выравнивание линии: по центру
Добавьте модуль изображения в столбец
Загрузить изображение
Добавьте модуль изображения в столбец строки. Загрузите изображение по вашему выбору.
Alignement
Перейдите на вкладку дизайна модуля и соответствующим образом измените выравнивание изображения:
калибровка
Затем перейдите к настройкам размеров и установите полную ширину модуля.
Добавить модуль кнопки в столбец
Добавить копию
Следующий и последний модуль, который мы добавим в столбец, - это кнопочный модуль. Используйте копию по вашему выбору.
Выравнивание кнопок
Перейдите на вкладку Дизайн и измените выравнивание кнопки.
Настройки кнопок
Затем стилизуйте кнопку следующим образом:
- Использовать собственные стили для кнопки: Да
- Размер текста кнопки: 16 пикселей
- Цвет текста кнопки: # 000000
- Цвет фона кнопки: #ffffff
- Ширина границы кнопки: 0 пикселей
- Расстояние между буквами кнопки: 2 пикселя
- Шрифт кнопки: Montserrat
- Толщина шрифта кнопки: полужирный
- Стиль шрифта кнопки: прописные
расстояние
Также используйте пользовательские значения отступов в настройках интервала.
- Верхний отступ: 20 пикселей
- Нижний отступ: 20 пикселей
- Левый отступ: 5%
- Правый отступ: 5%
Добавить абсолютное позиционирование в строку 1
После того, как вы закончите вторую строку, вернитесь к строке №1. Откройте настройки строки, перейдите на вкладку «Дополнительно» и сделайте раздел абсолютным. При этом строка и текстовый модуль внутри будут помещены под строкой, содержащей модуль изображения.
- Позиция: Абсолютная
- Расположение: Центр
Склонируйте строку №1 и поместите дубликат под строкой №2.
Чтобы текстовый модуль отображался над изображением, нам понадобится еще одна строка с более высоким значением z-index. Клонируйте первый ряд и поместите дубликат под вторым рядом.
Применить эффекты к строке 3
Увеличить индекс Z
Откройте повторяющуюся строку и измените z-индекс на вкладке «Дополнительно».
Изменить цвет текста
Откройте текстовый модуль в строке и измените цвет текста.
Применить режим наложения к линии
Затем откройте настройки строки и измените режим наложения в настройках фильтров.
Используйте эффект прокрутки в текстовом модуле в строке №3
Добавьте эффект плавного появления и исчезновения
Завершите руководство, повторно открыв текстовый модуль, перейдя к эффектам прокрутки и включив эффект постепенного появления и исчезновения. Вот и все!
- Включить плавное появление и исчезновение: Да
- Начальная непрозрачность: 0%
- Средняя непрозрачность: 0% (до 26%)
- Окончательная непрозрачность: 100% (при 28%)
- Триггер эффекта движения: середина элемента
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
офис
Мобильный телефон
Заключительные мысли
В этой статье мы показали вам, как проявить творческий подход с помощью встроенных эффектов прокрутки Divi. В частности, мы показали вам, как перемешивать прокручивающуюся копию. Сначала кажется, что копия находится под изображением. После прокрутки копия появляется над изображением и сливается с изображением. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, обязательно подпишитесь на нашу Новостную рассылку по электронной почте и на наш Канал YouTube чтобы вы всегда были одним из первых, кто узнает и воспользуется этим бесплатным контентом.
[Ad_2]
