Interakcje dla Divi 5 (wyskakujące okienka, przełączniki, efekty myszy i więcej)

Dzisiaj cieszymy się, że możemy wydać interakcje Divi 5, solidny system tworzenia interaktywnych elementów, takich jak wyskakujące okienka i przełączniki, oraz efekty kreatywnych przewijanych i opartych na myszy.

To nie jest pop-up konstruktor; To cokolwiek konstruktora . Utwórz spust, przypisz efekt, wybierz cel i ożywiaj niestandardowe interakcje. Możesz zrobić tak wiele niesamowitych rzeczy z tym systemem i nie mogę się doczekać, aby pokazać ci, jak to działa, więc wskoczmy.

Sprawdź poniższy film, aby zobaczyć nową funkcję w akcji.

Zbuduj własne interaktywne elementy

Zauważysz nową grupę interakcji na zakładce zaawansowanej wszystkich elementów. Kliknięcie przycisku Dodaj interakcję otworzy edytor interakcji, w którym można skonfigurować wyzwalacz, efekt i cel.

Spust inicjuje interakcję, na przykład podczas klikania lub unoszenia się. Efekt zdarza się, gdy interakcja jest uruchamiana, taka jak widoczność przełączania, ustawiona lub atrybut, a celem jest dotknięty element na stronie.

Przykłady interakcji

Zanim przejdę głębiej w te ustawienia, pozwól, że pokażę ci kilka przykładów, co mogą osiągnąć interakcje.

Przykład 1: Budowanie okienka

W poniższym przykładzie wideo użyłem interakcji, aby stworzyć wyskakujące okienko.

Dodałem spust rzutowy do sekcji, który stosuje efekt widoczności przełączania do mojego wyskakującego okienka. Sekcja wprowadza mój rzutek, wywołując widoczność wyskakującego okienka i przesuwa się w użyciu ustawień animacji Divi.

Ponadto moduł ikony w wyskakującym okienku ma interakcję opartą na kliknięciu, która przełącza widoczność na wyskakującym okienku, aby go zamknąć. Możesz stworzyć dowolny rodzaj wyskakującego lub pływającego sztandaru!

Przykład 2: Budowanie przełącznika

W poniższym przykładzie wideo użyłem interakcji do przełączania miesięcznych i rocznych tabel cenowych.

Dodałem dwie interakcje do rządu, aby przełączyć widoczność przemiennych rocznych i miesięcznych sekcji cenowych. Następnie dodałem jeszcze dwa interakcje, aby przełączyć widoczność dwóch modułów ikon, co daje użytkownikowi dodatkową informację zwrotną po kliknięciu.

Przykład 3: Przejście między ustawieniami wstępnymi

Jednym z najpotężniejszych efektów jest ustawiony efekt przełączania. Ponieważ ustawienia wstępne umożliwiają zmodyfikowanie ustawień elementu, nie ma ograniczeń co możesz zrobić. Gdy spust zmienia ustawienie wstępne na elemencie docelowym, może go przekształcić na wiele sposobów.

W poniższym przykładzie wideo skonfigurowałem dwie interakcje, aby dodać i usunąć ustawienie wstępne w wierszu, gdy wchodzi i wychodzi z rzutni. Podstawowe ustawienie wstępne zmienia kolor i skalę tła wiersza i dodaje cień po pudełku, przyciągając uwagę użytkowników, gdy przewijają stronę!

Przykład F: Efekty ruchu myszy

Efekty oparte na ruchach myszy systemów interakcji to świetna zabawa.

W poniższym przykładzie wideo. Dodałem kilka interakcji do sekcji bohatera, ukierunkowane na różne elementy z efektami opartymi na ruchu myszy różnych wrażliwości.

Interakcje uruchamiają myszy, stosując krycie, ruch i przechylenie na elementy, które zmieniają się w miarę poruszania się mojej myszy. Dodałem również interakcję do modułu przycisku, który przełącza ustawienie wstępne, aby zmienić styl konturu kwadratowego.

Możliwości są nieograniczone!

Mógłbym kontynuować różne przykłady i jestem podekscytowany, aby zobaczyć, co wymyślisz.

Patrząc na edytora interakcji bardziej, możesz zobaczyć dodatkowe efekty, z którymi jeszcze nie wspomniałem, takie jak przełączanie atrybutów, plików cookie i przewijanie do elementów.

Na przykład możesz użyć efektów atrybutów, aby zmienić klasy CSS elementu, ID lub cokolwiek innego.

Wersja jeden interakcji obsługuje następujące efekty:

• Widoczność przełączania - automatycznie przełącza element między stanami widocznymi i ukrytymi.
• Pokaż element - sprawia, że ​​ukryty element jest widoczny.
• Ukryj element - sprawia, że ​​widoczny element jest ukryty.
• Toggle Preset - Włącza wstępne/wyłączane ustawienie dla elementu, z opcjonalną wymianą istniejących ustawień.
• Dodaj ustawienie wstępne - stosuje klasę w stylu wstępnym do elementu, z opcjonalnym wymianą istniejących ustawień wstępnych.
• Usuń Preset - Usuwa klasę w stylu wstępnym z elementu.
• Atrybut Toggle - Dodaje lub usuwa specyficzną wartość atrybutu HTML elementu, taką jak klasa CSS i ID.
• Dodaj atrybut - dodaje określoną wartość atrybutu HTML do elementu, jeśli już nie istnieje.
• Usuń atrybut - usuwa określoną wartość atrybutu HTML z elementu.
• Przełącz ciastko - dodaj lub usuń wartość ciasteczka z ciasteczka. Na przykład ustaw plik cookie, gdy wyskakujące okienko jest śledzące, gdy użytkownik zobaczył wyskakujące okienko. Następnie użyj opcji warunków Divi, aby ukryć wyskakujące okienko podczas przyszłych wizyt strony dla tego użytkownika.
• Dodaj ciastko - dodaje wartość ciasteczka i ciasteczka, którą zdefiniujesz do przeglądarki gościa.
  Zdejmij ciastko - usuń określone ciastko.
• Przewiń do elementu - płynnie przewija stronę, aby wprowadzić element docelowy.
• MURROR MURO MOUSK - sprawia, że ​​element docelowy podąża za ruchem myszy w elemencie spustowym przy użyciu różnych typów ruchu (tłumaczenie, skala, krycie, pochylenie lub obracanie) z regulowaną czułość.

Wypróbuj Divi 5 już dziś

Interakcje dla Divi 5 są dziś dostępne i jest to jedna z wielu funkcji przybywających w tym roku do Divi.

Możesz śledzić, gdy przejdziemy do ostatecznej wersji Divi 5 i później, z aktualizacjami co dwa tygodnie. W zależności od priorytetów możesz teraz użyć Divi 5, aby zbudować nowe witryny lub poczekać, aż dodamy więcej funkcji, co jest dla Ciebie najlepsze.

Jak opisano w oryginalnym wielofazowym harmonogramie wydania Divi 5, publiczna alfa Divi 5 jest jak „Divi 5 Lite”. Brakuje mu kilku funkcji i może nie być odpowiedni dla istniejących stron internetowych, ale jest gotowy do użycia na nowych stronach internetowych, jeśli wolisz doświadczenie od Divi 4.

Chcemy, żebyś spróbował, a jeśli go kochasz, użyj go; Kiedy wszyscy to uwielbiają, sprawimy, że to oficjalne.

Czy próbowałeś względnych kolorów?

Jeśli go przegapiłeś, niedawno wydaliśmy względne kolory dla Divi 5, czyniąc Divi wyraźnym liderem w zarządzaniu kolorami i zaawansowanym systemie kolorów. Pozwala tworzyć matematycznie piękne systemy kolorów oparte na zmiennych z zagnieżdżonymi relacjami kolorami za pomocą HSL. Nie chcesz spać w tej funkcji.

Obejrzyj ten film, aby uzyskać wszystkie szczegóły.

Więcej aktualizacji Divi 5 jest w drodze

2025 to rok Divi 5 . Żmudna praca jest za nami. Zbudowaliśmy super szybkie fundament, a teraz nadszedł czas, aby Divi powrócił.

Jeśli jesteś tu po powrót Divi, wyświadcz nam ogromną przysługę i daj nam znać, polubiając ten film i pozostawiając komentarz. Wiele znaczy dla nas widzieć, jak dopingujesz Divi, i konieczne jest karmienie algorytmu i rozpowszechnianie informacji.

Nie zapomnij śledzić nas na YouTube i zasubskrybuj biuletyn Divi, aby nigdy nie przegapić aktualizacji. Do zobaczenia wkrótce na kolejne ogłoszenie o funkcji Divi 5, które obiecuję, że będzie tuż za rogiem.