Zrozumienie różnicy między wyzwalaczami, efektami i celami w Divi 5

Nowe interakcje Divi 5 wykorzystują prosty model - wyzwalacz, efekt, cel. Oddziel to, co się zaczyna, co się stanie i jakie zmiany, a możesz stworzyć jasny, skoordynowany ruch w całym układzie. W tym poście wyjaśnimy każdą część, pokażemy, jak pasują do siebie i przejdziemy przez szybki przykład, który możesz ponownie wykorzystać. Przejdźmy do tego!

Co to są wyzwalacze, efekty i cele?

Interakcje w Divi 5 są zbudowane z trzech ruchomych części, które działają razem. Wyzwalacz wprowadza rzeczy w ruch, efekt decyduje, jak wygląda odpowiedź, a cel określa, który element się zmienia.

Subskrybuj nasz kanał YouTube

Po skonfigurowaniu interakcji Divi poprosi cię o wypełnienie wszystkich trzech części:

Zrozumienie każdej roli osobno ułatwi zobaczenie, jak łączą się z jednym kompletnym systemem.

Rozpoczyna się wyzwalacz

Każda interakcja zaczyna się od działania początkowego zwanego spustem. Jest to pierwszy krok, jaki użytkownik podejmuje, na przykład kliknięcie myszy, najeżdżanie na lub ładowanie strony, które inicjuje akcję. Na przykład przeniesienie myszy na kartę cenową ustawia łańcuch w ruch.

Samotny spust nic nie robi. Potrzebuje odpowiedzi.

Efekt jest tym, co się dzieje

Po wystrzeleniu spustu, efekt następuje. W tym miejscu decydujesz o reakcji, takiej jak przechylenie, blaknięcie, skala, rozmycie lub dowolna mieszanka ruchów. Wyobraź sobie lekko skalowanie tej samej karty cenowej i dodając głębszy cień, gdy kursor się nad nim unosi - to efekt.

Na koniec musisz zdecydować, gdzie zastosować efekt.

Cel to takie zmiany

Cel jest po prostu elementem, który zmienia się, gdy wyzwalacz strzela. Unoszenie się jest powszechnie stosowaną interakcją, ale wpływa tylko na sam element. Innymi słowy, element, który rozpoczął interakcję (spust), jest również element, który zmienia (cel).

Na przykład unoszenie się nad kolumną może stanowić tę samą skalę kolumny, ponieważ jest to również cel.

To utrzymało wszystko ograniczone do jednego elementu. Nadal możesz w ten sposób ustawić rzeczy w Divi 5, ale nie jesteś już do tego ograniczony.

Teraz spust i cel mogą być inne, co daje znacznie większą kontrolę. Na przykład, gdy kursor wchodzi do sekcji, przycisk skaluje się, mimo że nie był dotknięty. W takim przypadku przycisk jest celem.

Jak pracują razem

Teraz, gdy widzieliśmy każdą część samodzielnie, prawdziwa moc przychodzi, gdy podłączysz je do łańcucha:

• Pożary wyzwalające: odwiedzający robi coś w rodzaju klikania, przeniesienia myszy, wchodzenia, opuszczenia lub ładowania strony.
• Efekt określa : decydujesz, jaki rodzaj reakcji wizualnej lub ruchu do pokazania.
• Zastosuje się cel: ta zmiana ląduje na wybranym elemencie.

Pomyśl o tym jak okablowanie obwodu. Przełącznik odwraca się, prąd płynie, żarówka się rozświetla.

W Divi 5 możesz podłączyć ten obwód w dowolny sposób. Watchowiec na kolumnie może przechylić swój przycisk. Ładunek strony może zniknąć w obrazie bohatera. Pojedyncze kliknięcie może jednocześnie aniować kilku modułów, dzięki czemu sekcja jest skoordynowana.

To wtedy interakcje przestają czuć się jak ładniejszy zawód i zaczynają działać jak język projektowy. Nie utknąłeś już z jednym elementem reagującym na siebie. Możesz łańcuch, zataczanie się i rozpowszechniać odpowiedzi, aby podłączyć cały układ.

Dowiedz się wszystkiego o interakcjach Divi 5

Formuła w Divi 5

Piękno interakcji Divi 5 polega na tym, że nie są one przypadkowymi dodatkami. Śledzą wyraźną formułę: wyzwalacz → Efekt → Cel. Budowanie nawet złożonych interakcji staje się proste i spójne, gdy zobaczysz to jako powtarzalny wzór.

Załóżmy tę formułę w praktyce, aby pokazać, jak pracują razem. W tym przykładzie utwórzmy formularz kontaktowy, który pojawia się na ekranie, gdy użytkownik kliknie przycisk.

Aby stworzyć ten efekt, ustawisz interakcję na przycisku, którego chcesz użyć jako wyzwalacza. Wybierz te ustawienia:

• Wydarzenie wyzwalające: kliknij (zdecydowaliśmy, że zdarzenie uruchomi się, gdy użytkownik kliknie przycisk)
• Działanie efektu: Pokaż element (ukryty formularz kontaktowy)
• Moduł docelowy: Sekcja (kontakt) to etykieta przypisana do sekcji kontaktowej.

Następnie ustaw link Anchor, aby otworzyć sekcję kontaktową. Najpierw otwórz ustawienia sekcji formularza kontaktowego i przejdź do karty Advanced . W CSS ID i klasy ustaw CSS ID : Kontakt.

Następnie przejdź do ustawień przycisku i wprowadź #Contact w polu URL przycisku łącza .

Na koniec ustaw stan początkowy formularza na ukryty, aby pojawił się tylko po uruchomieniu. Otwórz Ustawienia sekcji formularza kontaktowego, przejdź do zakładki Advanced i w ramach Visib Ility wybierz punkty przerwania, w których chcesz go ukryć.

Teraz to sprawdź. Kliknij przycisk i pojawia się ukryta sekcja kontaktowa.

Ten prosty przepływ (kliknij → Pokaż → Formularz kontaktowy) to ten sam wzór, który ponownie wykorzystasz dla wyskakujących wyskakujących, przełączników, delikatnych ujawnień na obciążeniu lub łączonych animacjach w sekcji. Gdy pomyślisz o spustu, efektu i celu, możliwości otwierają się szybko.

Wypróbuj interakcje w Divi 5 już dziś

Masz wzór. Teraz spraw, aby działało na prawdziwej stronie. Otwórz układ testu i zbuduj jeden mały efekt interakcji, który możesz zakończyć za dziesięć minut. Wybierz coś, czego faktycznie użyłbyś na stronie klienta.

Oto kilka mini podpowiedzi, aby się toczyć:

• Myszka wchodzi do sekcji, dzięki czemu jest subtelna skala przycisku
• Kliknięcie przycisku „kontakt” ujawnia formularz schwytany
• Pozostaw myszy na karcie resetuje przechylenie
• Ładowanie strony zanika na obrazie bohatera, a następnie nagłówek później

Daj nam znać w komentarzach, jeśli użyłeś jeszcze funkcji interakcji Divi 5 i co o tym myślisz!