Взаимодействия для Divi 5 (всплывающие окна, переключатели, эффекты мыши и многое другое)

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

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

Проверьте следующее видео, чтобы увидеть новую функцию в действии.

Создайте свои собственные интерактивные элементы

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

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

Примеры взаимодействия

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

Пример 1: Построение всплывающего окна

В примере видео я использовал взаимодействия для создания всплывающего окна.

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

Кроме того, модуль значков во всплывающем окне имеет взаимодействие на основе кликов, которое переключает видимость во всплывающем окне, чтобы закрыть его. Вы можете создать любой тип всплывающего или плавающего баннера!

Пример 2: строительство переключения

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

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

Пример 3: Переход между пресетами

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

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

Пример F: эффекты движения мыши

Эффекты, основанные на мышиных движениях, очень веселые.

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

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

Возможности бесконечны!

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

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

Например, вы можете использовать эффекты атрибута для изменения классов CSS элемента, ID или чего -либо еще.

Версия первой из взаимодействий поддерживает следующие эффекты:

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

Попробуйте Divi 5 сегодня

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

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

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

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

Вы пробовали относительные цвета?

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

Посмотрите это видео для всех деталей.

Больше обновлений Divi 5 в пути

2025 год - год Divi 5 . Утомительная работа позади нас. Мы построили супер-фанат, и теперь пришло время для Диви, чтобы вернуться.

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

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