Как создать замену изображения при прокрутке с помощью Divi

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО для макета с эффектом прокрутки изображения.

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

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

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

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

СКАЧАТЬ

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

1. Создайте структуру элемента

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

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

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

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

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

Размеры

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

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

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

Интервал

Затем откройте настройки столбца 1 и измените значения интервала для разных размеров экрана.

• Верхний отступ: 50 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Отступ снизу: 50 пикселей (рабочий стол), 120% (планшет), 140% (телефон)

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

Интервал

Также добавьте отступы ко второму столбцу.

• Верхняя обивка: 12vw
• Нижняя обивка: 12vw
• Левое заполнение: 5vw
• Правое заполнение: 5vw

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

Загрузить изображение с прозрачным фоном

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

Фоновый цвет

Затем перейдите к настройкам фона и измените цвет фона.

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

Размеры

Затем включите опцию «Force Fullwidth» в настройках размера.

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

Интервал

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

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

Модуль клонирования изображения 3x

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

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

Измените изображение в каждом дублирующем модуле изображения.

Изменить цвета фона

И сопоставьте новые изображения с цветом фона по вашему выбору.

• Цвет фона 1: # ffda60
• Цвет фона 2: # e6674d
• Цвет фона 3: # b4ff99

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

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

Переходим ко второму столбцу. Здесь первый модуль, который нам нужен, - это текстовый модуль, содержащий некоторый контент H2.

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

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

• Шрифт заголовка 2: Антон
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 4vw (рабочий стол), 8vw (планшет), 10vw (телефон)
• Высота строки заголовка 2: 1,4 em

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

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

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

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

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

• Шрифт текста: Open Sans
• Размер текста: 0.9vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)
• Высота текстовой строки: 2.6em

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

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

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

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

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

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

• Шрифт кнопки: Антон

Интервал

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

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

2. Применение эффектов прокрутки к изображениям.

Модуль изображения №1: постепенное появление и исчезновение

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

• Включить постепенное появление и исчезновение: Да
• Начальная непрозрачность: 100%
• Средняя непрозрачность: 100% (от 0% до 39%)
• Конечная непрозрачность: 0% (при 40%)
• Триггер эффекта движения: середина элемента

Модуль изображения # 2: постепенное появление и исчезновение

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

• Включить постепенное появление и исчезновение: Да
• Начальная непрозрачность: 0% (при 40%)
• Средняя непрозрачность: 100% (от 40% до 49%)
• Конечная непрозрачность: 0% (при 50%)
• Триггер эффекта движения: середина элемента

Модуль изображения № 3: нарастание и исчезновение

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

• Включить постепенное появление и исчезновение: Да
• Начальная непрозрачность: 0% (при 50%)
• Средняя непрозрачность: 100% (от 50% до 59%)
• Конечная непрозрачность: 0% (при 60%)
• Триггер эффекта движения: середина элемента

Модуль изображения # 4: нарастание и исчезновение

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

• Включить постепенное появление и исчезновение: Да
• Начальная непрозрачность: 0% (при 60%)
• Средняя непрозрачность: 100% (от 60% до 100%)
• Конечная непрозрачность: 100%

3. Добавьте настройки положения к первому изображению и разверните ко всем изображениям в столбце.

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

Теперь, чтобы изображения появлялись друг за другом во время прокрутки, нам нужно разместить модули изображений друг над другом, используя параметры положения Divi. Откройте первый модуль изображения, перейдите на вкладку «Дополнительно» и используйте абсолютное положение.

• Позиция: Абсолютная
• Расположение: вверху слева

Расширить настройки положения на все изображения в столбце

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

• Кому: Все изображения
• На всем протяжении: в этой колонке

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

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

Рабочий стол

Мобильный

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

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

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