Jak zbudować wyskakujące okienko z interakcjami Divi 5 (bezpłatne pobieranie)

Wyskóry wyskakujące są doskonałym narzędziem do przyciągania uwagi i prowadzenia zaangażowania w Twojej witrynie. Niezależnie od tego, czy chcesz rozwinąć swoją listę e-mail, promować specjalną ofertę, czy prowadzić odwiedzających w kierunku konkretnej akcji, dobrze zaprojektowane wyskakujące okienko może coś zmienić. Wraz z wydaniem interakcji Divi 5 tworzenie niestandardowych, dynamicznych wyskakujących okienków nigdy nie było łatwiejsze.

W tym poście przeprowadzimy Cię przez tworzenie wyskakującego wyskakującego za pomocą funkcji interakcji Divi 5. Zanurzmy się!

Jakie są interakcje Divi 5?

Interakcje Divi 5 to nowa funkcja zintegrowana z konstruktorem wizualnym, zaprojektowanym w celu uczynienia stron internetowych bardziej dynamicznym i angażującym. Umożliwia tworzenie niestandardowych animacji i odpowiedzi w oparciu o działania użytkownika lub zdarzenia strony, takie jak kliknięcia, unosi lub przewijanie. W przeciwieństwie do statycznych projektów, interakcje umożliwiają tworzenie wyskakujących wyskakujących, przełączników, ruchów myszy i efektów przewijania, wszystkie ze znanym interfejsem Divi.

Subskrybuj nasz kanał YouTube

Kluczowe elementy interakcji Divi

Każda interakcja w Divi 5 składa się z trzech podstawowych elementów:

• Trigger: zdarzenie, które inicjuje interakcję, takie jak kliknięcie, najechanie lub element wchodzący lub wychodzący z rzutni.
• Efekt: Działanie, które występuje podczas aktywowania spustu, takie jak przełączanie widoczności, zastosowanie wstępnie ustawionego stylu lub zmiana atrybutu.
• Cel: specyficzny element dotknięty interakcją, który może być tym samym elementem, inna sekcja, wiersz, kolumna lub moduł na stronie zidentyfikowanej przez jego etykietę administratora.

Te elementy działają razem, umożliwiając tworzenie złożonych interakcji z prostym, bez kodu interfejsu.

Dlaczego powinieneś używać interakcji do tworzenia wyskakujących okienków

Interakcje Divi 5 oferują kilka zalet dla budowania wyskakujących okienków:

• Nie potrzebujesz żadnych wtyczek: w przeciwieństwie do tradycyjnych wyskakujących konstruktorów, interakcje Divi 5 są zbudowane bezpośrednio w wizualnym budowniczym, eliminując potrzebę wtyczek stron trzecich.
• Znajduje się w ramach Builder Visual: możesz budować wyskakujące okienki za pomocą znanego interfejsu, modułów i opcji stylizacji Divi, co ułatwia użytkownikom dowolnego poziomu umiejętności.
• Wszechstronne opcje i efekty: Połącz wyskakujące okienka z innymi interakcjami, takimi jak animacje oparte na przewijaniu lub efekty ruchu myszy, aby stworzyć unikalne, angażujące doświadczenia.
• Pełna kontrola: Dostosuj wyzwalacze, efekty i cele, aby stworzyć wyskakujące okienki dla konkretnych celów, wszystko bez kodu pisania.

Krok po kroku przewodnik po budowie wyskakującego okienka w Divi 5

Tworzenie wyskakującego okienka w Divi 5 jest proste, dzięki czemu dopasowanie istniejącego projektu witryny jest łatwe. W tej sekcji pokazamy, jak łatwo jest stworzyć wyskakujące okienko, aby dopasować jeden z naszych gotowych układów, pokazać, jak go stylizować, i ustawić interakcje, aby wyświetlić wyskakujące okienko z opóźnieniem czasowym.

1. Zainstaluj pakiet układu

W tym samouczku uprościmy rzeczy, zaczynając od jednego z naszych projektów paczek, a następnie budując wyskakujące okienko z tymi samymi stylami. Aby to zrobić, kliknij ikonę + w lewym górnym rogu wizualnego budownicza.

Gdy pojawi się okno dialogowe, wybierz układ Premade z dostępnych opcji.

Kliknij miniaturę pakietu uczenia się online , aby podkreślić dostępne strony.

Wybierz projekt strony docelowej i kliknij użyj tego układu , aby załadować go do wizualnego konstruktora.

Ostatnim krokiem w importowaniu pakietu układu jest wybór, czy importować ustawienia wstępne. Po dokonaniu wyboru kliknij przycisk Importuj.

2. Utwórz sekcję dla wyskakującego wyskakującego

Teraz, gdy pakiet układu jest importowany, musimy utworzyć nową sekcję dla naszego wyskakującego wyskakującego na dole strony. Przewiń na koniec strony i dodaj nową sekcję.

Kliknij ikonę, aby wstawić nowy wiersz. Wybierz drugą opcję w kolumnach przesunięcia .

3. Zaprojektuj wyskakujące okienko

Teraz możemy zacząć dodawać treść do naszego wyskakującego okienka. Gdy pojawi się moduł Wstaw lub okno dialogowe wiersza , kliknij, aby dodać moduł nagłówka .

Wprowadź „Chcesz 15% zniżki?” W polu nagłówka pod kartą zawartości.

Aby zachować spójność projektów na całej stronie, możesz użyć funkcji atrybutów Divi 5, aby skopiować ustawienia innego modułu nagłówka dla naszego wyskakującego wyskakującego wyskakującego. W sekcji bezpośrednio powyżej, najedź nad modułem nagłówka, kliknij prawym przyciskiem myszy i kliknij Atrybuty kopiuj .

Następnie, najedź nad modułem nagłówka, który właśnie utworzyliśmy, kliknij prawym przyciskiem myszy, wybierz wklej atrybuty , a następnie kliknij atrybuty wklejania tekstu . To wkleje style z drugiego modułu nagłówka, umożliwiając spójność projektowania.

Pod modułem nagłówka dodaj nowy moduł tekstowy .

Podobnie jak w przypadku modułu nagłówka, zlokalizuj moduł tekstowy w powyższej sekcji, kliknij prawym przyciskiem myszy i wybierz atrybuty kopiowania . Stamtąd kliknij nowy moduł tekstowy, dotknij atrybuty wklejania , a następnie wklej atrybuty projektu tekstu .

Możesz dodać tekst do pola tekstowego lub użyć Divi AI, aby go wygenerować dla Ciebie.

Następnie dodamy moduł opt-in e-mail pod modułem tekstowym.

Powyższa sekcja zawiera moduł opt-in e-mail, dzięki czemu możesz skopiować jego atrybuty i wkleić je do nowego e-maila, który dodaliśmy do naszego wyskakującego okienka.

Ostatnim krokiem jest dodanie obrazu do prawej kolumny naszego wyskakującego wyskakującego. Znajdź moduł obrazu i dodaj go do 2. kolumny naszego układu.

Prześlij obraz i dodaj go do modułu obrazu. W tym momencie sekcja powinna wyglądać podobnie do tego:

4. Utwórz przycisk Zamknij

Teraz, gdy projekt naszego wyskakującego jest na miejscu, musimy dodać nowy wiersz nad nim, aby dodać ikonę przycisku zamknięcia. Umożliwi to odwiedzającym zamknięcie wyskakującego okienka według ich wygody. Kliknij ikonę zieloną +, aby dodać nowy wiersz.

Gdy pojawi się okno dialogowe Wstaw wiersz , kliknij układ pojedynczej kolumny w równych kolumnach, aby dodać go do sekcji.

Kliknij, aby dodać moduł ikon do wiersza.

Wybierz ikonę Zamknij z dostępnych opcji. Można go łatwo zlokalizować, wpisując „Zamknij” w polu wyszukiwania nad listą ikon.

Przełącz na kartę Projekt i wprowadź następujące ustawienia konstrukcyjne:

• Kolor ikony: #5344B9
• Rozmiar ikony: 36px
• Wyrównanie: Racja

Ostatnim krokiem jest przesunięcie wiersza powyżej dwupolumnowego wiersza zawierającego treść naszego wyskakującego wyskakującego. Użyj widoku warstw, aby zmienić wiersze do właściwej kolejności. Będąc tam, zmień nazwę sekcji na wyskakujące okienko .

5. Dostosuj ustawienia sekcji

Przed utworzeniem naszych interakcji musimy upewnić się, że wyskakujące okienko jest odpowiednio rozmiarowe dla szerokości przeglądarki. Nie chcemy, aby było to wyskakujące okienko pełnej szerokości, więc przejdź do projektu, aby wprowadzić pewne korekty. Rozwiń menu rozwijane, aby ujawnić ustawienia.

W polu szerokości wprowadź 80% dla szerokości. Następnie ustaw opcję wyrównania sekcji na środku .

Pod granicą ustawiaj promień graniczny 10px.

Dodamy również Shadow, aby nasze wyskakujące wyskakujące wyskakujące resztę treści. Znajdź menu rozwijane po pudełku i rozwinąć je. Pod Box Shadow wybierz Preset 1 .

Na koniec przejdź do karty zawartości , aby dodać kolor dla tła naszej wyskakującej sekcji.

6. Utwórz interakcję, aby wyświetlić wyskakujące okienko

Po wprowadzeniu projektu możemy ustawić nasze interakcje. Ustawimy naszą sekcję wyskakującą, aby wyświetlić 5 sekund po wylądowaniu użytkownika na stronie. Przejdź do zaawansowanej karty sekcji i zlokalizuj menu rozwijane interakcje . Kliknij + Dodaj interakcję , aby rozpocząć.

Wybierz ładowanie z dostępnych opcji. To ustawienie pozwoli pojawić się wyskakujące okienko na obciążeniu strony.

Gdy pojawi się okno dialogowe Edytuj interakcję , wprowadź następujące ustawienia i kliknij Zapisz :

• Etykieta administracyjna: interakcja wyskakna
• Wydarzenie wyzwalające: załaduj
• Działanie efektu: Pokaż element
• Moduł docelowy: sekcja (wyskakujące okienko)
• Opóźnienie czasowe: 5 sekund

Następnie musimy dodać interakcję naszego przycisku zamknięcia. Wybierz moduł ikon w pierwszym rzędzie naszej sekcji wyskakującej. Przejdź do karty Advanced, kliknij + Dodaj interakcję i wprowadź następujące ustawienia i zapisz:

• Etykieta administracyjna: Zamknij wyskakujące okienko
• Wydarzenie wyzwalające: kliknij
• Działanie efektu: przełącz widoczność
• Moduł docelowy: sekcja (wyskakujące okienko)
• Opóźnienie czasowe: 0

7. Przetestuj i udoskonal wyskakujące okienko z konfigurowalnymi responsywnymi punktami Divi 5

Przed przejściem do ostatniego kroku dobrym pomysłem jest użycie konfigurowalnych responsywnych punktów przerwania Divi 5, aby wyskakować wyskakujące na wszystkich rozmiarach ekranu. W Divi 5 do wyboru jest teraz 7 punktów przerwania.

Domyślnie tylko trzy są włączone. Posiadanie 7 pozwala przetestować wyskakujące okienko na większej liczbie punktów przerwania, zapewniając bezproblemową wrażenia użytkownika z dowolnym rozmiarem ekranu. Aby umożliwić wszystkie 7, kliknij menu elipsy w górnej części paska administratora. Stamtąd włącz wszystkie punkty przerwania, włączając je.

Nowy system układu FlexBox Divi 5 pozwala łatwo wprowadzać zmiany, aby wyskakować wyskakujące na dowolnym urządzeniu. Na przykład możesz użyć pola struktury kolumny Divi 5, aby zmienić liczbę kolumn wyświetlanych na mniejszych urządzeniach. Ta opcja układa zawartość na urządzeniach mobilnych za pomocą jednego kliknięcia.

8. Ustaw opcje wyświetlania

Aby Twoje wyskakujące okienko wyświetlały prawidłowe wyświetlanie, musimy dostosować widoczność, pozycjonowanie i indeks Z. Pozwoli to wyświetlić wyskakujące okienko tam, gdzie chcesz, ukryć go, aż nadejdzie czas na wyświetlenie i upewnij się, że pojawi się powyżej reszty treści strony.

Przejdź do karty Advanced dla sekcji wyskakującej. Znajdź menu rozwijane widoczność . Kliknij, aby wyłączyć sekcję we wszystkich widokach (telefon, tablet i pulpit).

Następnie kliknij menu rozwijane pozycji. Ustaw pozycję na naprawienie i wybierz pochodzenie przesunięcia. Na koniec dodaj Index z 99999, aby upewnić się, że wyskakujące wyświetlacze powyżej reszty treści strony.

Po wdrożeniu wszystkich ustawień zapisz stronę i podgląd w innej karcie. Wyskakujące okienko powinno wyświetlić się w 5 sekund po załadowaniu strony. Powinieneś także być w stanie zamknąć wyskakujące okienko za pomocą utworzonej przez nas interakcji.

Zaawansowane opcje dostosowywania wyskakujące

Interakcje Divi 5 pozwalają przenieść wyskakujące okienko na wyższy poziom z zaawansowanymi funkcjami, takimi jak warunki wyświetlania, łączenie efektów, a nawet używanie DIVI AI do generowania wyskakujących wyskakujących wysuw. Spójrzmy na kilka sposobów, aby Twoje wyskakujące okienka będą bardziej rozwinięte bez konieczności niestandardowych fragmentów CSS lub JavaScript.

Warunki wyświetlania

Możesz użyć opcji warunków Divi, aby pokazać wyskakujące okienko na podstawie zachowań użytkowników, takich jak role użytkowników. Na przykład możesz pokazać wyskakujące okienko tylko w celu zarejestrowania użytkowników, aby zachęcić do rejestracji.

Możesz także włączyć warunki do wyświetlania wyskakującego wyskakującego na podstawie wizyt strony. Na przykład należy wyłączyć wyskakujące okienko, jeśli konkretny użytkownik już odwiedził stronę. Możesz również ustawić go na wyświetlanie tylko wtedy, gdy użytkownik nie odwiedził strony. Może to być przydatne dla odwiedzających, którzy znajdują Twoją witrynę za pośrednictwem innej strony i kliknij stronę główną.

Łączyć efekty

Możesz ulepszyć wyskakujące okienko o animacje oparte na przewijaniu lub efekty ruchu myszy. Można je dodać jako dodatkowe interakcje, wybierając dodatkowe wyzwalacze i efekty. Interakcje można łączyć i nie ma ograniczeń dla liczby, którą możesz utworzyć. Na przykład możesz łatwo zastosować interakcję na obrazie w naszym wyskakowaniu za pomocą efektów ruchu myszy.

Integracja Divi AI

Przyspiesz proces projektowania za pomocą Divi AI do wygenerowania układu. Możesz poinstruować Divi AI, aby utworzył określone sekcje, w tym takie, które możesz przekonwertować na wyskakujące okienko. W poniższym przykładzie poprosiliśmy Divi AI o utworzenie układu trenera biznesowego, wraz z sekcją CTA, możemy zmienić się w wyskakujące okienko.

Najlepsze praktyki dla skutecznych wyskakujących okienków

Aby zapewnić, że wyskakujące okienko poprawia wrażenia użytkownika i napędza wyniki, rozważ te najlepsze praktyki:

1. Utrzymuj przyjazne dla użytkownika

Unikaj natrętnych wyskakujących wyskakujących wyskakujących opóźnień, między 5 a 10 sekundami, zamiast natychmiastowych wyzwalaczy. Daje to użytkownikom czas na zaangażowanie się w treść przed monitem. Zbyt wcześnie uruchomienie wyskakujące okienko może się rozpraszać, powodując, że użytkownicy zamykają wyskakujące okienko i potencjalnie przegapić promocję, rejestrację biuletynu lub inne ważne działania, które chcesz podjąć.

Ustaw opóźnienie w okienku, aby uniknąć utraty zaangażowania użytkowników.

Ponadto zawsze zawieraj wyraźny, łatwo zidentyfikowany przycisk zamknięcia, aby użytkownicy mogli odrzucić wyskakujące wyskakujące wrażenia i utrzymać pozytywne przeglądanie.

2. Optymalizuj pod kątem wydajności

Optymalizacja wydajności ma kluczowe znaczenie dla skutecznych wyskakujących okienków. Aby szybko utrzymać czas ładowania, zminimalizować ciężkie animacje lub duże, nieoptymalizowane obrazy. Wybierz skompresowane obrazy i ogranicz złożone efekty, aby zapewnić brakujące, bezproblemowe wrażenia, szczególnie dla użytkowników na wolniejszych połączeniach lub urządzeniach mobilnych. Takie podejście poprawia satysfakcję użytkownika i wspiera lepsze wskaźniki zaangażowania i konwersji.

3. Projektowanie wyskakujące okienka z myślą o standardach dostępności

Dostępność to kolejny kluczowy rozważanie w uczynieniu wyskakującego wyskakującego uwzględnienia dla wszystkich użytkowników. Zawsze dodawaj opisowy tekst Alt do obrazów, aby pomóc czytnikom ekranu, zapewnić wysoki kontrast między tekstem a tłem w celu czytelności, i użyj rozmiarów czcionek 16px lub większych, aby pomieścić użytkowników z zaburzeniami wizualnymi.

Praktyki te pomagają zapewnić, że wyskakujące okienko jest dostępne dla zróżnicowanej publiczności, dostosowując się do standardów dostępności sieci.

4. Testuj na wszystkich rozmiarach ekranu

Na koniec dokładnie przetestuj wyskakujące okienko na wszystkich rozmiarach ekranu, aby zapewnić spójne wrażenia na wszystkich urządzeniach. Wykorzystaj konfigurowalne responsywne punkty przerwania Divi 5, aby Twoje wyskakujące wyskakujące wyglądanie i funkcje są przeznaczone na komputery stacjonarne, tablety i smartfony.

Zwróć szczególną uwagę na przycisk zamknięcia, aby upewnić się, że działa tak, jak powinien, a tekst jest czytelny na mniejszych ekranach. Dodatkowo sprawdź odstępy, rozmiar i układ w razie potrzeby, aby zapewnić wypolerowany, profesjonalny wygląd.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a my wysyłamy Ci e -mailem kopię pakietu układu Ultimate Divi Landing Page, a także ton innych niesamowitych i bezpłatnych zasobów, wskazówek i wskazówek. Śledź dalej, a będziesz mistrzem Divi w krótkim czasie. Jeśli jesteś już subskrybowany, po prostu wpisz swój adres e -mail poniżej i kliknij Pobierz, aby uzyskać dostęp do pakietu układu.

POBIERAĆ

Udało ci się zasubskrybować. Sprawdź swój adres e -mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układu Divi!

Stwórz wyskakujące okienki z interakcjami Divi 5

Funkcja interakcji Divi 5 sprawia, że tworzenie wyskakującego wyskakującego jest łatwe, umożliwiając budowanie niestandardowych, zaangażowanych projektów bezpośrednio w wizualnym budowniczym. Łączenie wyzwalaczy, efektów i celów pozwala budować wyskakujące okienka, które przyciągają uwagę i napędzają konwersje, jednocześnie bezproblemowe dopasowanie projektu witryny. Przeglądaj inne funkcje, takie jak grupy modułów i zagnieżdżone wiersze, aby stworzyć jeszcze bardziej dynamiczne układy wyskakujące.

Czy jesteś gotowy, aby spróbować Divi 5? Pobierz najnowszą publiczną alfa Divi 5, eksperymentuj z interakcjami i podziel się swoimi przemyśleniami w sekcji komentarzy poniżej. Podziel się z nami swoimi kreacjami w naszych kanałach mediów społecznościowych i odwiedź nasz blog, aby uzyskać więcej samouczków, korzystając z innowacyjnych funkcji Divi 5. Z niecierpliwością czekamy na to, co tworzysz!