Wszystko, co musisz wiedzieć o interakcjach Divi 5

Jeśli chcesz przyciągnąć odwiedzających dynamicznymi wyskakującymi, przełączającymi efektami bez wtyczki lub niestandardowego CSS, pokochasz jedno z najnowszych publicznych wersji Divi 5 Public Alpha. Interakcje w Divi 5 pozwalają użytkownikom Divi tworzyć angażujące, interaktywne elementy w wizualnym budowniczym. W tym poście zanurzymy się we wszystkim, co musisz wiedzieć o interakcjach Divi 5, eksplorując jego funkcje, kilka wskazówek i aplikacji rzeczywistych, aby pomóc Ci zapoznać się z funkcją.

Ważna uwaga: Divi 5 jest obecnie publicznie alfa i zoptymalizowany dla nowych stron internetowych. Nie zalecamy migracji istniejących witryn Divi 4 ze względu na ciągły rozwój i potencjalne problemy z kompatybilnością ze starszymi modułami. Bądź na bieżąco z aktualizacjami, ponieważ Divi 5 zbliża się do pełnego wydania!

Przejdźmy do tego.

Jakie są interakcje Divi 5?

Interakcje Divi 5 to konstruktor wszystkiego, który pozwala tworzyć interaktywne elementy dla Twojej witryny bezpośrednio w ramach budowniczego wizualnego. Ta funkcja znacznie więcej niż tylko wyskakujący konstruktor umożliwia tworzenie szeregu niestandardowych interakcji, od wyskakujących animacji wywołanych przewijaniem, wszystko bez dotykania linii kodu.

Subskrybuj nasz kanał YouTube

Bezproblemowo zintegrowane z zaawansowaną kartą dowolnego modułu, kolumny, wiersza lub sekcji, interakcje oferują nieograniczoną elastyczność w budowaniu angażujących, zorientowanych na użytkownika doświadczeń.

Podstawowe elementy interakcji Divi 5

W sercu interakcji Divi 5 znajdują się trzy kluczowe elementy, które współpracują, aby ożywić twoje projekty:

Wydarzenia wyzwalające

Wyzwalacze to wydarzenia, które inicjują interakcję. Przykłady obejmują działania użytkownika, takie jak kliknięcie przycisku lub unoszenie się na obrazie, zdarzenia oparte na przewijaniu, takie jak dotarcie do określonego punktu na stronie, lub wyzwalacze oparte na czasie, jak opóźnienie po załadowaniu strony.

Dostępne wyzwalacze obejmują:

• Kliknij : Użytkownik kliknie przycisk, obraz lub inny element, aby uruchomić interakcję.
• Mysz Enter/Exit: Użytkownik unosi się lub pozostawia element.
• Rzutnik Enter/Exit: Element wchodzi lub wychodzi z widocznego obszaru ekranu, gdy użytkownik przewija.
• Ładuj: Interakcja rozpoczyna się, gdy strona się załaduje, z opcjonalnym opóźnieniem czasowym.

Na przykład możesz wyzwolić wyskakującą 5 sekund po załadowaniu strony lub ożywienia elementu, gdy użytkownik przewiduje.

Działania o efekcie

Po aktywacji spustu efekty określają, co się stanie. Opcje obejmują wyświetlanie lub ukrywanie elementów, animowanie z zanikaniem, skalami, rotacją lub stosowaniem ustalonych przejść do spójnej stylizacji.

• Widoczność przełączania: przełącza element między widocznym a ukrytym.
• Pokaż/Ukryj element: Uwaga lub ukryty element.
• Toggle Preset: Włącza lub wyłącza ustawienie lub wyłączanie elementu projektowego z możliwością wymiany istniejącego ustawienia.
• Dodaj ustawienie wstępne: Służy do dodania klasy ustalonej w stylu do elementu. Możesz także zastąpić istniejące ustawienia wstępne.
• Usuń ustawienie wstępne: Użyj, aby usunąć wstępnie ustawiony styl z elementu.
• Toggle Atrybut: Dodaje lub usuwa atrybut HTML elementu, jak klasa CSS lub identyfikator CSS.
• Dodaj atrybut: Dodaje to określoną wartość atrybutu HTML, w której obecnie nie istnieje.
• Usuń atrybut: Usuń dowolny atrybut zastosowany do elementu.
• Przełącz ciastko: Dodaje lub usuwa wartość ciasteczka. Na przykład możesz ustawić plik cookie, gdy pojawi się wyskakujące okienko i ustawić je na pojawianie się tylko raz za pomocą ustawień warunków Divi 5.
• Dodaj ciastko: Dodaj wartość cookie, którą możesz zdefiniować do przeglądarki użytkownika.
• Usuń ciastko: Usuń wcześniej określony plik cookie.
• Przewiń do elementu: Pozwala na płynne przewijanie strony, wprowadzając element docelowy.
• MURROR MUSH MOUSH: pozwala ustawić ruch, który następuje po ruchach myszy użytkownika. Opcje obejmują tłumaczenie, skalę, krycie, przechylenie lub obracanie. Możesz także dostosować wrażliwość ruchu.

Celować w moduł

Cel jest elementem, który wpływa interakcja, taki jak moduł, wiersz, kolumna lub cała sekcja. Możesz celować w sam element lub inny element na stronie, oferując elastyczność w tworzeniu złożonych interakcji.

Kluczowe cechy interakcji Divi 5

Interakcje Divi 5 wyróżniają się dla przyjaznego dla użytkownika i wszechstronnego zestawu funkcji:

• Brak interfejsu kodu: Skonfiguruj wyzwalacze, efekty i cele za pośrednictwem intuicyjnego interfejsu na karcie zaawansowanej dowolnego elementu bez użycia CSS lub JavaScript.
• Różnorodne typy interakcji: Utwórz wyskakujące okienka do przechwytywania ołowiu, przełączniki dla FAQ, spustowe zwalniane z przewijaniem sekcji bohaterów lub efekty myszy przypominające paralaks dla portfeli.
• Lekka wydajność: Wbudowana bezpośrednio w Divi 5, interakcje eliminują potrzebę wtyczek stron trzecich, zmniejszając wzdęcia w miejscu i poprawić czas obciążenia.
• Dynamic Trigger Combinations: Połącz wiele wyzwalaczy, takich jak zdarzenie przewijania z opóźnieniem czasowym, w przypadku wyrafinowanych interakcji, takich jak wyskakujące okienko, które pojawia się po przewijaniu strony przez użytkownika.
• Responsive Design: Dostosuj interakcje komputerowe, tabletu i mobilne za pomocą dostosowywanych responsywnych punktów przerwania Divi 5.

Jak uzyskać dostęp do interakcji Divi 5

Tworzenie interakcji w Divi 5 jest proste dzięki jego integracji w ramach budowniczego wizualnego. Wykonaj te proste kroki, aby rozpocząć:

Zacznij od otwarcia strony w Divi 5. Wybierz moduł, wiersz, kolumnę lub sekcję, do której chcesz dodać interakcję. Na przykład wybierz moduł obrazu na swojej stronie.

Przejdź do karty Advanced i kliknij rozwijanie rozwijania interakcji . Kliknij stamtąd przycisk + Dodaj interakcję .

Chcemy stworzyć efekt przechylania/przekształcenia myszy dla naszego obrazu. Aby to zrobić, będziemy musieli utworzyć dwie interakcje - jedną dla obrazu, a drugą dla kolumny zawierającej obraz. Zacznij od nadania interakcji nazwy w etykiecie administratora , a następnie wprowadź następujące ustawienia:

• Wydarzenie wyzwalające: Enter myszy
• Działanie efektu: Muro Myszy lustrzane
• Moduł docelowy: obraz
• Opóźnienie czasowe: 0
• Typ ruchu: Tłumacz
• Wrażliwość: 10

Po wprowadzeniu wszystkich ustawień kliknij przycisk Zapisz interakcję , aby kontynuować.

Następnie utworzymy interakcję transformacji w kolumnie. Kliknij ponownie + dodaj interakcję. Wprowadź następujące ustawienia, aby utworzyć interakcję:

• Etykieta administracyjna: Kolumna przechylania
• Wydarzenie wyzwalające: Enter myszy
• Działanie efektu: Muro Myszy lustrzane
• Moduł docelowy: kolumna
• Opóźnienie czasowe: 0
• Typ ruchu: Pochylenie
• Wrażliwość: 30

Po wprowadzeniu ustawień interakcja powinna wyglądać tak:

Użyj przycisku podglądu , aby wyświetlić interakcję.

Twoja strona pojawi się w nowej karcie, która umożliwia podgląd i przetestowanie interakcji.

Rodzaje interakcji, które możesz stworzyć

Oto kilka praktycznych przykładów pokazujących wszechstronność interakcji Divi 5, wraz z wyzwalaczami, efektami i zastosowaniem w świecie rzeczywistym.

Witamy okienko dla nowych odwiedzających

Pop-upy świetnie nadają się do zachęcania odwiedzających do zapisania się na biuletyny, promocje lub wydarzenia. Dzięki interakcjom Divi 5 możesz stworzyć powitalne wyskakujące okienko, które pojawia się po załadowaniu strony.

Aby utworzyć tę interakcję, musisz utworzyć sekcję dla swojego wyskakującego wyskakującego i przypisać następujące ustawienia:

• Etykieta administracyjna: wyskakujące okienko
• Wydarzenie wyzwalające: załaduj
• Działanie efektu: Pokaż element
• Moduł docelowy: sekcja (wyskakujące okienko)-Pamiętaj, aby nazwać sekcję przed utworzeniem interakcji
• Opóźnienie czasowe: 5 sekund

Musimy również stworzyć interakcję, aby zamknąć wyskakujące okienko. Najłatwiejszym sposobem jest dodanie modułu ikon do prawego górnego rogu sekcji wyskakującego i przypisanie następujących ustawień:

• Etykieta administracyjna: przycisk Zamknij
• Wydarzenie wyzwalające: kliknij
• Działanie efektu: Ukryj element
• Moduł docelowy: sekcja (wyskakujące okienko)
• Opóźnienie czasowe: 0

Aby kontrolować umieszczenie okienka, użyj ustawień pozycji Divi 5. Na karcie Advanced zlokalizuj menu rozwijane i ustaw pozycję na naprawienie . Stamtąd wybierz lokalizację, którą chcesz pojawić na stronie na stronie. W tym przykładzie mamy go na środku . Dobrym pomysłem jest również ustawienie indeksu Z , aby wyskakujące okienko pojawiło się ponad wszystko na stronie, jak 99999 .

Ostatnim krokiem jest ustawienie widoczności wyskakującego wyskakującego na wszystkie urządzenia. Aby to zrobić, przejdź do karty Advanced , przewiń do menu rozwijanego widoczności i przełącz wszystkie opcje, aby ukryć wyskakującą sekcję na wszystkich urządzeniach.

Przełącz widoczność elementu

Przełączniki idealnie nadają się do tworzenia składanych sekcji treści, takich jak FAQ, menu akordeonowe, tabele cenowe lub usługi. Umożliwiają użytkownikom rozszerzenie lub zawalenie zawartości za pomocą kliknięcia, utrzymując stronę w czystości i interaktywnym. Na przykład możesz ujawnić pełną listę usług, które są widoczne dopiero po kliknięciu przycisku.

Aby stworzyć ten efekt, ustawisz interakcję na przycisku, który chcesz ustawić jako wyzwalacz dla swojej sekcji. Wprowadź następujące ustawienia interakcji:

• Etykieta administracyjna: Pokaż usługi
• Wydarzenie wyzwalające: kliknij
• Działanie efektu: Pokaż element
• Moduł docelowy: sekcja (Usługi ujawniają)
• Opóźnienie czasowe: 0

Następnie ustaw link Anchor, aby otworzyć sekcję. Otwórz ustawienia przycisku i wprowadź #Services w polu URL Link przycisku karty zawartości.

Kliknij sekcję funkcji pod przyciskiem i przejdź do karty Advanced. Ustaw kotwicę, dodając usługi do pola ID CSS w menu CSS ID & Classes.

Podczas pobytu na karcie Advanced musisz także ustawić widoczność sekcji na ukrycie, tak jak zrobiliśmy to z naszym wyskakującym okienkiem.

Efekty ruchu myszy

Interakcje Divi 5 pozwala tworzyć dynamiczne efekty ruchu myszy, gdy użytkownik unosi się nad elementem projektowym. Na przykład możesz połączyć interakcje, aby stworzyć efekt pochylenia na nagłówku i kolumnie nadrzędne.

Musisz stworzyć interakcję na nagłówek, aby zrealizować tę interakcję. Wprowadź następujące ustawienia na karcie zaawansowanej obrazu:

• Etykieta administracyjna: animowany nagłówek
• Wydarzenie wyzwalające: Enter myszy
• Działanie efektu: Muro Myszy lustrzane
• Moduł docelowy: tekst
• Opóźnienie czasowe: 0
• Typ ruchu: Pochylenie
• Wrażliwość: 30

Po wprowadzeniu ustawień powinny wyglądać jak zrzut ekranu poniżej.

Następnie ustaw interakcję w kolumnie zawierającej nagłówek za pomocą następujących ustawień:

• Etykieta administracyjna: Pochylenie kolumny
• Wydarzenie wyzwalające: Enter myszy
• Działanie efektu: Muro Myszy lustrzane
• Moduł docelowy: kolumna
• Opóźnienie czasowe: 0
• Typ ruchu: Pochylenie
• Wrażliwość: 50

Po zakończeniu ustawienia powinny wyglądać podobnie do zrzutu ekranu poniżej.

Interakcje oparte na ustalonych

Możesz użyć interakcji Divi 5 wraz z ustawieniami wstępnymi, aby tworzyć efekty z wyzwalaczami Enter/Exit rzutni myszy lub rzutni. Na przykład, jeśli chcesz zaprezentować sekcję na swojej stronie, zmieniając kolor tła lub dodając styl cienia granicznego, możesz użyć interakcji. W poniższym przykładzie zmieniają się kolor tła, szerokość i granica, gdy użytkownik unosi się nad sekcją.

Aby stworzyć ten efekt, najpierw musisz utworzyć ustawienie wstępne, aby pokazać sekcję przed i po myszy. W tym przykładzie stworzyliśmy dwa - jeden z litym żółtym tłem, a drugi z różnymi efektami i zielonym tłem.

Po utworzeniu ustawień wstępnych możesz użyć interakcji do przełączania zmian na zawisie. Zacznij od utworzenia pierwszej interakcji z następującymi ustawieniami:

• Etykieta administracyjna: żółte tło
• Wydarzenie wyzwalające: Enter myszy
• Działanie efektu: Przełącz ustawienie wstępne
• Moduł docelowy: sekcja (wycena)
• Opóźnienie czasowe: 1 sekunda
• Preset: Żółte tło

Następnie utwórz drugą interakcję dla myszy, wprowadzając następujące ustawienia:

• Etykieta administracyjna: zielone tło
• Wydarzenie wyzwalające: wyjście myszy
• Działanie efektu: Przełącz ustawienie wstępne
• Moduł docelowy: sekcja (wycena)
• Opóźnienie czasowe: 0
• PRESET: Green Preset

Korzyści z korzystania z interakcji Divi 5

Interakcje Divi 5 oferują potężne, usprawnione podejście do budowania stron internetowych, zapewniając szereg zalet, które sprawiają, że jest to wyjątkowa funkcja dla użytkowników Divi. Oto głębsze spojrzenie na to, dlaczego ta funkcja jest tak pomocnym dodatkiem do Divi 5:

1. Nie wymaga wtyczek

Ponieważ interakcje Divi 5 są zintegrowane z rdzeniem Divi, eliminuje to potrzebę wtyczek stron trzecich do tworzenia wyskakujących wysuw i innych interakcji. To rodzime podejście zmniejsza liczbę skryptów działających w Twojej witrynie, co prowadzi do szybszego czasu ładowania i lepszych wskaźników wydajności.

Na przykład, zamiast polegać na wyskakującej wtyczce, interakcje Divi 5 obsługują wszystko w ramach budowniczego wizualnego, zapewniając szczuplejszą bazę kodową i płynniejsze wrażenia użytkownika. Oznacza to również mniej aktualizacji do zarządzania i niższym ryzykiem konfliktów wtyczek, dzięki czemu Twoja witryna jest bardziej niezawodna.

2. Jest przyjazny dla użytkownika

Interakcje Divi 5 są zaprojektowane intuicyjnie, wymagając tylko kilku kliknięć w celu utworzenia interakcji. Początkujący mogą szybko zrozumieć podstawy, a profesjonalni programiści mogą zanurzyć się w złożonych kombinacjach bez pisania jednej linii kodu.

Ustawienia interakcji są starannie zorganizowane w zaawansowanej zakładce dowolnego elementu, z przezroczystymi etykietami i podpowiedziami prowadzącymi przez cały proces. Na przykład konfigurowanie wyskakujące wyskakujące wymaga kilku kliknięć, aby wybrać spust i efekt, ułatwiając każdemu użycie.

3. swoboda dostosowywania

Elastyczność interakcji Divi 5 i ich rozległe ustawienia - wyzwalacze, efekty i cele - pozwalają tworzyć unikalne doświadczenia dla odwiedzających witrynę. Możesz mieszać wiele wyzwalaczy, takich jak połączenie opartego na przewijaniu Enter Enter z opóźnieniem czasowym, aby stworzyć wyrafinowane interakcje, takie jak baner promocyjny, który zanika po przewijaniu użytkownika w połowie strony.

Możliwość ukierunkowania dowolnego modułu, wiersza, kolumny lub sekcji oznacza, że możesz zastosować efekty dokładnie w razie potrzeby, niezależnie od tego, czy animuje pojedynczego przycisku, czy przekształca całą sekcję bohatera.

4. Ulepszone zaangażowanie użytkowników

Elementy interaktywne zwiększają zaangażowanie użytkowników, dzięki czemu strony są bardziej wciągające i responsywne. Interakcje Divi 5 pomagają utrzymać odwiedzających w Twojej witrynie, zachęcając do interakcji, takich jak klikanie przełączników w celu ujawnienia alternatywnych wyceny lub wyzwalanie wyskakujących wyskakujących okienek do przechwytywania ołowiu. Na przykład strona internetowa restauracji mogłaby użyć animacji wywołanej przewijaniem, aby ujawnić sekcję menu.

Praktyczne wskazówki dotyczące rozpoczęcia pracy

Aby w pełni wykorzystać interakcje Divi 5, podejdź do niego strategicznie, aby zapewnić optymalne wyniki. Oto kilka wskazówek, które poprowadzą Cię przez ten proces:

• Rozpocznij prosty: Zacznij od prostych interakcji, takich jak wyskakujące okienka lub przełączniki, aby zapoznać się z funkcją przed rozwiązaniem zaawansowanych efektów, takich jak animacje ruchu myszy lub animacje z wieloma wyzwalaczami.
• Użyj pola etykiet administratora: Etykietowanie interakcji i elementów jest kluczowe, szczególnie na złożonych stronach z wieloma sekcjami. Dodanie nazwy do pola etykiety administratora na karcie Content każdego modułu pozwala utrzymać uporządkowanie i łatwe rozpoznanie odpowiedniego elementu docelowego.
• Użyj ustawień wstępnych: ustawienie wstępne Divi 5 świetnie nadaje się do oszczędzania czasu i utrzymania spójności między interakcjami. Presety pozwalają na zdefiniowanie stylów wielokrotnego użytku, takich jak zanikająca animacja lub przejście kolorów, i zastosowanie ich do wielu elementów.
• Dokładnie przetestuj: zawsze podgląd swoich interakcji za pomocą funkcji podglądu Divi 5, aby wykonywać wszelkie problemy przed opublikowaniem. Możesz także użyć konfigurowalnych responsywnych punktów przerwania Divi 5, aby przetestować sposób zachowania interakcji na wszystkich urządzeniach.

Podnieś swoją stronę internetową o interakcje Divi 5

Interakcje Divi 5 to idealna funkcja do tworzenia angażujących, interaktywnych elementów bez kodu w celu zwiększenia wrażenia użytkownika witryny. Od wyskakujących okienków prowadzących do wywołanych przewijaniem animacji, które ożywiają twoje projekty, ta funkcja pozwala każdemu budować dynamiczne, profesjonalne strony internetowe bez dotykania linii kodu. Jego lekka integracja i różnorodne opcje spustowe sprawiają, że jest to niezbędne narzędzie do nowoczesnego projektowania stron internetowych.

Gotowy do rozpoczęcia? Pobierz najnowszą alfa Divi 5 i zanurz się w interakcjach, aby tworzyć wyskakujące wyskakujące okienki, przełączane treści, efekty przewijania i wiele innych. Szybka uwaga: Divi 5 jest gotowy na nowe witryny, ale nie zalecamy jej używania na istniejących stronach.

Komentuj poniżej lub skontaktuj się z naszymi kanałami mediów społecznościowych, aby podzielić się z nami swoimi dziełami. Chcielibyśmy je zobaczyć!