Понимание разницы между триггерами, эффектами и целями в Divi 5

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

Что такое триггеры, эффекты и цели?

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

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

Когда вы настроите взаимодействие, Divi попросит вас заполнить все три части:

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

Триггер - это то, что начинается

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

Сама, спусковой крючок ничего не делает. Это нужен ответ.

Эффект - это то, что происходит

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

Наконец, вам нужно решить, где применить эффект.

Цель - это то, что меняется

Цель - это просто элемент, который меняется при сжигании триггера. Напоривание является широко используемым взаимодействием, но оно влияет только на сам элемент. Другими словами, элемент, который начал взаимодействие (триггер), также является элементом, который изменяется (цель).

Например, зависание над столбцом может сделать ту же шкалу столбца, поскольку это также цель.

Это держало все ограниченное одним элементом. Вы все еще можете настроить вещи таким образом в Divi 5, но вы больше не ограничитесь этим.

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

Как они работают вместе

Теперь, когда мы видели каждую часть самостоятельно, настоящая сила приходит, когда вы соединяете их в цепь:

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

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

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

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

Узнайте все о взаимодействиях Divi 5

Формула в Divi 5

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

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

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

• Событие триггера: нажмите (мы решили, что событие будет запускать, когда пользователь нажимает кнопку)
• Действие эффекта: показать элемент (скрытая контактная форма)
• Целевой модуль: раздел (контакт) - это метка, назначенная в раздел контакта.

Затем установите ссылку на якорь, чтобы открыть раздел контактов. Сначала откройте настройки раздела контактной формы и перейдите на вкладку «Дополнительно» . Под CSS ID & Classes , установите ID CSS : контакт.

Затем перейдите в настройки кнопки и введите #Contact в поле URL -адреса кнопки .

Наконец, установите начальное состояние формы в скрытое так, чтобы оно появилось только при запуска. Откройте настройки раздела контактной формы, перейдите на вкладку «Усовершенствованные» , и в разделе «Визиб » выберите точки останова, в которых вы хотите скрыть.

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

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

Попробуйте взаимодействия в Divi 5 сегодня

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

Вот несколько мини -подсказок, чтобы получить катание:

• Мышь входит в раздел, делая его кнопку тонким масштабированием
• Нажатие на кнопку «Контакт» показывает заправленную форму
• Мышь оставить на карте сбрасывает наклон
• Загрузка страницы исчезает на изображении героя, затем заголовок через мгновение

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