Все, что вам нужно знать о взаимодействиях Divi 5

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

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

Давай доберемся до этого.

Что такое взаимодействие Divi 5?

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

Подписаться на наш канал на YouTube

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

Основные компоненты взаимодействия Divi 5

В основе взаимодействия Divi 5 лежит три ключевых компонента, которые работают вместе, чтобы воплотить ваши дизайны в жизнь:

Триггерные события

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

Доступные триггеры включают:

• Нажмите : пользователь нажимает кнопку, изображение или другой элемент, чтобы запустить взаимодействие.
• Мышь ввода/выход: пользователь зависает или оставляет элемент.
• Viewport Enter/Exit: элемент входит или выходит из видимой области экрана в качестве пользовательских прокруток.
• Загрузка: взаимодействие начинается, когда страница загружается, с необязательной временной задержкой.

Например, вы можете запустить всплывающее окно через 5 секунд после загрузки страницы или оживить элемент, когда пользователь прокручивает.

Эффект действий

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

• Видимость переключения: переключает элемент между видимым и скрытым.
• Показать/скрыть элемент: делает элемент видимым или скрытым.
• ПРЕДУПРЕЖДЕНИЕ ПРЕДУПРЕЖДЕНИЯ: включает или выключен предустановка для элемента дизайна с возможностью заменить существующую предустановку.
• Добавьте предустановку: используется для добавления класса предустановки в элемент. Вы также можете заменить существующие пресеты.
• Удалите предустановку: используйте для удаления предустановленного стиля из элемента.
• Атрибут переключения: добавляет или удаляет атрибут HTML элемента, например, класс CSS или CSS ID.
• Добавить атрибут: это добавляет конкретное значение атрибута HTML, где в настоящее время не существует.
• Удалить атрибут: удаляет любой атрибут, применяемый к элементу.
• Переверните cookie: добавляет или удаляет ценность cookie. Например, вы можете установить файл cookie, когда появляется всплывающее окно, и установить его на появление только после использования настройки состояния Divi 5.
• Добавьте cookie: добавляет значение cookie, которое вы можете определить в браузер пользователя.
• Удалите cookie: удаляет ранее указанный cookie.
• Прокрутите элемент: позволяет плавно прокручивать страницу, привлекая целевой элемент.
• Зеркальное движение мыши: позволяет вам установить движение, которое следует за движениями мыши пользователя. Варианты включают в себя перевод, масштаб, непрозрачность, наклон или вращение. Вы также можете настроить чувствительность движения.

Нацеливаться на модуль

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

Ключевые особенности взаимодействия Divi 5

Взаимодействие Divi 5 выделяется его удобным и универсальным набором функций:

• Нет кодового интерфейса: настраивайте триггеры, эффекты и цели через интуитивно понятный интерфейс на вкладке Advanced Element без использования CSS или JavaScript.
• Разнообразные типы взаимодействия: Создайте всплывающие окна для захвата свинца, переключатели для часто задаваемых вопросов, затухание, вызванные свитками для секций героев или эффекты, подобные параллаксу, для портфелей.
• Легкая производительность: встроенный непосредственно в Divi 5, взаимодействия устраняют необходимость в сторонних плагинах, уменьшая раздувание участка и улучшая время нагрузки.
• Динамические комбинации триггеров: комбинируйте несколько триггеров, например, событие прокрутки с задержкой времени, для сложных взаимодействий, таких как всплывающее окно, которое появляется после того, как пользователь прокручивает страницу.
• Адаптивный дизайн: настраивайте настройки рабочего стола, планшета и мобильных устройств, используя настраиваемые отзывчивые точки останова Divi 5.

Как получить доступ и использовать взаимодействие Divi 5

Создание взаимодействия в Divi 5 является простым, благодаря ее интеграции в визуальном строителе. Следуйте этим простым шагам, чтобы начать:

Начните с открытия страницы в Divi 5. Выберите модуль, строку, столбец или раздел, в который вы хотите добавить взаимодействие. Например, выберите модуль изображения на вашей странице.

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

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

• Триггер событие: вход мыши
• Действие эффекта: зеркальное движение мыши
• Целевой модуль: изображение
• Задержка времени: 0
• Тип движения: перевести
• Чувствительность: 10

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

Далее мы создадим взаимодействие преобразования на столбце. Нажмите на + Добавить взаимодействие еще раз. Введите следующие настройки, чтобы создать взаимодействие:

• Административная метка: наклонный столб
• Триггер событие: вход мыши
• Действие эффекта: зеркальное движение мыши
• Целевой модуль: столбец
• Задержка времени: 0
• Тип движения: наклон
• Чувствительность: 30

После ввода настройки ваше взаимодействие должно выглядеть так:

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

Ваша страница появится на новой вкладке, что позволяет вам предварительно просмотреть и проверить ваше взаимодействие.

Типы взаимодействий, которые вы можете создать

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

Добро пожаловать всплывающее окно для новых посетителей

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

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

• Административная метка: всплывающее окно
• Триггер событие: загрузка
• Действие эффекта: шоу -элемент
• Целевой модуль: раздел (всплывающее окно)-Обязательно назовите свой раздел перед созданием взаимодействия
• Задержка времени: 5 секунд

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

• Метка администратора: кнопка закрытия
• Триггер событие: нажмите
• Действие эффекта: скрыть элемент
• Целевой модуль: раздел (всплывающее окно)
• Задержка времени: 0

Чтобы контролировать размещение вашего всплывающего окна, используйте настройки позиции Divi 5. На вкладке «Дополнительно» найдите раскрывающееся меню позиции и установите положение на фиксированное . Оттуда выберите место, которое вы хотели бы, чтобы всплывающее окно появилось на странице. В этом примере у нас есть его в центр . Это также хорошая идея, чтобы установить индекс Z , чтобы всплывающее окно появилось над всем остальным на странице, как 99999 .

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

Переключить видимость элемента

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

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

• Административный ярлык: Show Services
• Триггер событие: нажмите
• Действие эффекта: шоу -элемент
• Целевой модуль: раздел (раскрыть услуги)
• Задержка времени: 0

Затем установите ссылку на якорь, чтобы открыть раздел. Откройте настройки кнопки и введите #Services в поле URL -адреса кнопки на вкладке Content.

Нажмите раздел «Функции» под кнопкой и перейдите на вкладку «Дополнительно». Установите якорь, добавив службы в поле CSS ID в меню CSS ID & Classe.

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

Эффекты движения мыши

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

Вам нужно сначала создать взаимодействие для заголовка, чтобы выполнить это взаимодействие. Введите следующие настройки на вкладке «Расширенные изображения»:

• Административный ярлык: анимированный заголовок
• Триггер событие: вход мыши
• Действие эффекта: зеркальное движение мыши
• Целевой модуль: текст
• Задержка времени: 0
• Тип движения: наклон
• Чувствительность: 30

Когда настройки введены, они должны выглядеть как снимок экрана ниже.

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

• Метка администратора: наклон столбца
• Триггер событие: вход мыши
• Действие эффекта: зеркальное движение мыши
• Целевой модуль: столбец
• Задержка времени: 0
• Тип движения: наклон
• Чувствительность: 50

После завершения ваши настройки должны выглядеть похоже на скриншот ниже.

На основе настроек взаимодействия

Вы можете использовать взаимодействия Divi 5 вместе с пресетами для создания эффектов либо с помощью MouseOver или ViewPort, или с триггерами Ext Exit. Например, если вы хотите продемонстрировать раздел на вашей странице, изменив цвет фона или добавив стиль тени границы, вы можете использовать взаимодействия для этого. В приведенном ниже примере цвет фона, ширина и граница изменяются, когда пользователь колеблется над разделом.

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

Как только ваши пресеты создаются, вы можете использовать взаимодействия для переключения изменений на прокат. Начните с создания первого взаимодействия со следующими настройками:

• Метка администратора: желтый фон
• Триггер событие: вход мыши
• Действие эффекта: переключить предустановку
• Целевой модуль: раздел (ценообразование)
• Задержка времени: 1 секунда
• ПРЕДУПРЕТНАЯ: Желтый фон

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

• Административная метка: зеленый фон
• Триггерное событие: выход мыши
• Действие эффекта: переключить предустановку
• Целевой модуль: раздел (ценообразование)
• Задержка времени: 0
• ПРЕДУПРЕТНАЯ: Зеленая предустановка

Преимущества использования взаимодействий Divi 5

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

1. Плагинов не требуется

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

Например, вместо того, чтобы полагаться на всплывающий плагин, взаимодействие Divi 5 обрабатывает все в визуальном строителе, обеспечивая более скудную кодовую базу и более плавную пользовательскую работу. Это также означает меньше обновлений для управления и снижения рисков конфликтов плагина, что делает ваш сайт более надежным.

2. Это удобно

Взаимодействия Divi 5 разработаны интуитивно, требуя лишь нескольких кликов для создания взаимодействий. Новички могут быстро понять основы, и разработчики Pro могут погрузиться в сложные комбинации, не написав ни одной строки кода.

Настройки взаимодействий аккуратно организованы на вкладке Advanced Emong Element, с четкими метками и мощностью инструментов, которые проводят вас через весь процесс. Например, для настройки всплывающего окна требуется несколько кликов, чтобы выбрать триггер и эффект, что позволяет любому использовать любому.

3. Свобода настроить

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

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

4. Усовершенствованное вовлечение пользователей

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

Практические советы для начала работы

Чтобы максимально использовать взаимодействие Divi 5, подходите к нему стратегически, чтобы обеспечить оптимальные результаты. Вот несколько советов, которые помогут вам пройти через процесс:

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

Поднять свой сайт с помощью взаимодействий Divi 5

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

Готовы начать работу? Загрузите последнюю Divi 5 Alpha и погрузитесь в взаимодействие, чтобы создать всплывающие окна, переключенный контент, эффекты прокрутки и многое другое. Краткое примечание: Divi 5 готов к новым веб -сайтам, но мы еще не рекомендуем использовать его на существующих сайтах.

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