Jak łatwo dodać modalne wyskakujące okienko w witrynie WordPress: samouczek w 3 krokach

Czy wiesz, że najnowsze badanie dot 2 miliardy modalnych wyskakujących okienek miało Czy współczynnik konwersji 9.28% znajduje się wśród 10% z czołówki?(1)

Tak. Wyskakujące okienka sprawiają, że odwiedzanie witryny jest przyjazne dla użytkownika i pomaga szybko pozyskać więcej zapisów na biuletyn. Wyskakujące okienka zmieniły się radykalnie pod względem wyglądu i działania. W rezultacie stają się one obecnie coraz bardziej popularne na nowoczesnych stronach internetowych niż kiedykolwiek.

Czy chcesz dodać okna dialogowe WP do swojej witryny i wykorzystać korzyści, jakie one oferują?

W takim razie ten blog jest dokładnie tym, czego potrzebujesz. To jedyny przewodnik, którego potrzebujesz, aby dowiedzieć się o modach wyskakujących okienek i jak łatwo dodać je do swojej witryny WordPress. 

Źródło: (1) Statystyki wyskakujących okienek: wnioski z analizy 2 miliardów przykładów wyskakujących okienek

Co to jest modalne wyskakujące okienko?

Modalne wyskakujące okienka są bardzo częste i jest bardzo mało prawdopodobne, że się z takim nie spotkałeś. Ale czy znasz definicje modalnego wyskakującego okienka? Spójrzmy.

Modal (zwany także oknem modalnym lub lightboxem) to element strony internetowej, który wyświetla się przed całą inną zawartością strony i dezaktywuje ją. Aby powrócić do głównej treści, użytkownik musi nawiązać kontakt z modułem, wykonując akcję lub zamykając go.

– Punkt centralny

Okna modalne różnią się od okien dialogowych starych modeli. W niemodalnych wyskakujących okienkach użytkownicy mają dostęp do całego okna, nawet gdy wyskakujące okienko jest włączone. Mogą więc zignorować wyskakujące okienko i kontynuować pracę.

Z drugiej strony nowe modalne wyskakujące okienko tworzy nowy „tryb” w postaci okna podrzędnego i wyłącza okno nadrzędne. W rezultacie użytkownik nie może pracować w oryginalnym oknie, dopóki nie podejmie jakiejś akcji lub nie zamknie modalnego wyskakującego okienka. 

Jaka jest korzyść? Zaletą jest to, że przykuwasz uwagę odwiedzającego Twoją witrynę, nawet jeśli trwa to sekundę lub dwie. A skupienie użytkownika na przekazie jest tym, czego potrzebujesz, prawda? 

Bo jeśli zobaczą, co masz do zaoferowania, zatrzymają się na dłużej niż sekundę, co zapewni Ci prowadzenie.

Dlaczego warto używać wyskakującego modalu w swojej witrynie WordPress

Większość ludzi uważa, że wyskakujące okienka są denerwujące. Oczywiście nie mam im tego za złe. Wchodzisz na stronę, aby wykonać swoją pracę i nagle pojawia się wyskakujące okienko i przerywa. Jest to z pewnością denerwujące. 

Ale będąc właścicielem firmy, musisz inaczej spojrzeć na wyskakujące okienko. Wierzcie lub nie, ale te irytujące wyskakujące okienka działają jak cud. Mody wyskakujące okazały się niezwykle skuteczne, szczególnie w przypadku gromadzenia leadów.

Zdaniem Sumoza pomocą wyskakującego okienka zebrali około 23 645 948 adresów e-mail w niecałe dwa lata. W wielu przypadkach współczynnik konwersji wzrósł aż do 50,2%! 

Jeśli więc chcesz ulepszyć swoją listę e-mailową i przyspieszyć współczynnik konwersji, modalny pop jest dla Ciebie, ponieważ są to sprawdzone magnesy prowadzące.

Co więcej, moduły są proste i elastyczne i nie trzeba odsyłać użytkowników na inną stronę, aby dokończyć akcję. Więcej potencjalnych klientów i lepsze doświadczenie użytkownika. Dlatego nigdy nie myśl, że modały są bezużyteczne lub martwe i zacznij z nich korzystać już dziś.

Typowe zastosowania okna modalnego w nowoczesnym projektowaniu stron internetowych

Moduły modalne są bardzo skuteczne, gdy chcesz, aby odwiedzający witrynę podjęli jakieś działanie lub zauważyli jakąś ważną wiadomość. Niektóre z typowych zastosowań okna modalnego w projektowaniu stron internetowych obejmują:

• Pokaż wiadomość powitalną
• Zbieraj e-maile i leady do subskrypcji newslettera
• Forma loginu
• Wyświetl komunikat ostrzegawczy przed podjęciem działań
• Wyświetl politykę dotyczącą plików cookie
• Wyświetlaj multimedia, takie jak galeria zdjęć (produkt) lub wideo itp.  
• Do formularzy wieloetapowych dla lepszego doświadczenia użytkownika.

Wymieniłem tylko kilka z wielu sposobów wykorzystania modalu w projektowaniu stron internetowych. Gdy już wiesz, jak tworzyć niestandardowe wyskakujące okienka w WordPress, znajdziesz różne sposoby wykorzystania ich w swojej witrynie w celu uzyskania optymalnych wyników. 

Więc zacznijmy.

Konfiguracja, której potrzebujesz, aby zacząć

Zakładam, że masz zainstalowany WordPress na swojej stronie. Poza tym będziesz potrzebować narzędzia do tworzenia stron i wyskakującej wtyczki WordPress, aby utworzyć modalność w swojej witrynie:

1. Elementora (Darmowa wersja)
2. Zestaw elementów (zarówno w wersji darmowej, jak i profesjonalnej)

Elementor to darmowy program do tworzenia stron, a ElementsKit to jedna z najlepszych modalnych wtyczek wyskakujących WordPress.

Zakończono instalację? teraz wszystko jest gotowe do utworzenia niestandardowego wyskakującego okienka WordPress po kliknięciu w WordPress! Rozpocznijmy teraz główny proces.

Jak dodać modalne wyskakujące okienko w WordPressie w 3 krokach w Elementorze za pomocą ElementsKit

Jeśli uważasz, że dodanie wyskakującego okienka do witryny WordPress jest trudne, przygotuj się na zaskoczenie. Wykonaj poniższe kroki i z łatwością utwórz modalne wyskakujące okienko Elementora w wp. To najłatwiejszy samouczek dotyczący dodawania wyskakujących okienek w WordPress.

Krok 1: Włącz modalny widżet wyskakujący

Po zainstalowaniu wtyczek ElementsKit możesz włączyć Elementor Modal Popup widget z pulpitu WordPress

• Iść do  Zestaw elementów  > Widżety > Włącz Moda wyskakująca> Kliknij Zapisz zmiany

Krok 2: Dodaj widżet WP Modal Popup 

• Wyszukaj wyskakujący moduł, przeciągnij i upuść widżet w sekcji, w której chcesz, aby pojawił się Twój Modal.

Krok 3: Skonfiguruj ustawienia, aby zakończyć

Kliknij ikonę Edytuj w wyskakującej sekcji, aby przejść do opcji edycji.

• Aby zmienić tekst przycisku, przejdź do Treść > Przycisk przełączania > Etykieta I edytować

• Żeby zmienić tytuł I podtytuł iść do Treść > nagłówek i zmień opcje za pomocą własnego tekstu.

• Żeby zmienić treść treści, rozwiń sekcję treści i edytować Tekst do utworzenia wyskakującego komunikatu WordPress.

• Iść do Treść > Stopka > Przycisk > Wezwanie do działania i zmień etykietę CTA oraz adres URL za pomocą ElementsKit, narzędzia do tworzenia niestandardowych okienek pop-up.

• Na koniec kliknij Aktualizacja zapisać.

Gotowe. Teraz kliknij przycisk podglądu, aby zobaczyć wyniki i sprawdzić, jak wygląda Twoje okno popup WordPress:

Dobrze zrobiony! Utworzyłeś modalne wyskakujące okienko Elementora.

Dodatkowe ustawienia dla modalu

Przyjrzyjmy się teraz dodatkowym ustawieniom modalu, które możesz dostosować:

Układ:

Rozwiń opcję układu, aby zmienić typ przełącznika, pozycję wyskakującego okienka i opcję wyświetlania wyskakującego okienka.

Typ przełącznika:

Nie musisz koniecznie mieć modułu modalnego, który uruchamia się, gdy ktoś kliknie przycisk. ElementsKit oferuje 2 dodatkowe opcje do wyboru oprócz przycisku

Obraz: Możesz wybrać dowolny niestandardowy obraz o dowolnym rozmiarze zamiast przycisku jako przełącznika dla modalu. Aby wybrać niestandardowy obraz 

• Przejdź do Treści > Typ przełącznika > Wybierz Obraz
• Przejdź do opcji Obraz przełączający > Wybierz obraz, rozmiar obrazu i wyrównanie

Czas: Możesz także ustawić modal tak, aby uruchamiał się po określonym czasie bez żadnej akcji ze strony użytkownika. Na przykład, aby ustawić wyświetlanie modalu po 3 sekundach

• Przejdź do Treści > Typ przełącznika > Czas
• Dodaj czas w Przełącz po (w sekundy)

Typ pokazu wyskakującego:

Masz dwie opcje typu pokazu w wyskakującym okienku: Modalny i Slajd.

Pozycja wyskakującego okienka: 

Możesz umieścić wyskakujące okienko w dowolnym miejscu okna. Dostępne opcje stanowisk do wyboru to:

• Lewy górny
• Górne centrum
• W prawym górnym rogu
• Środkowa lewica
• Centrum
• Środkowa prawica
• Na dole po lewej
• Dolny środek
• Prawy dolny

Wyskakujące okienko: 

Rozwiń opcję wyskakującą, aby wybrać szerokość i minimalna wysokość. Tutaj również masz taką możliwość pokaż lub ukryj the ikonę zamykania, nagłówek i stopkę. Możesz również wyregulować położenie poziome i pionowe i dodaj animacja zgodnie z Twoim życzeniem.

Narzuta: 

Jeśli nie chcesz zmuszać użytkownika do kliknięcia modalu w celu jego zamknięcia, włącz opcję Zamknij wyskakujące okienko po kliknięciu nakładki opcja. W ten sposób użytkownik może kliknąć w dowolnym miejscu okna, aby zamknąć modal.

Zamknij ikonę: 

Tutaj możesz zmienić położenie ikony zamykania. Możesz ustawić wyskakujące okienko w prawym górnym rogu, wyskakujące okienko w lewym górnym rogu, okno w prawym górnym rogu, okno w lewym górnym rogu. Można także zmieniać położenie pionowe i poziome. Co więcej, możesz wybrać dowolną ikonę z biblioteki lub użyć obrazu SVG jako ikony.

Nagłówek:

Oprócz zmiany tytułu i podtytułu możesz także pokazać lub ukryć rozdzielacz.

Stopka:

Rozwiń opcję stopki, aby zmienić etykietę, wariant i wyrównanie przycisków stopki. Możesz także ukryć je, jeśli chcesz, stąd. 

Oto masz! Teraz możesz używać nowoczesnych, angażujących wyskakujących okienek na swojej stronie internetowej.

Aby uzyskać więcej szczegółów, przeczytaj dokumentację ElementsKit Popup Modal widget dla Elementora.

Jak dodać niestandardowy projekt w Elementorze Modal za pomocą narzędzia do tworzenia wyskakujących okienek ElementsKit

Teraz wiesz, jak zmienić tekst, pozycję, animować i zrobić wiele więcej, aby dostosować okno modalne w WordPressie. Ale nadal wygląda trochę nudno, prawda? Tak jak każde inne okno modalne WordPress Elementor.

Jeśli możesz dodać niestandardowy obraz, film lub inny widżet do okna modalnego, tak jak stronę, byłoby wspaniale. Za pomocą ElementsKit możesz dodać dowolny niestandardowy projekt do swojego modelu.

Postępuj zgodnie z instrukcjami, aby łatwo stworzyć żądany niestandardowy projekt w trybie modalnym:

• Przejdź do opcji Treść > Treść > Włączyć coś Włącz szablon
• Kliknij przycisk modalny, a po otwarciu modalu kliknij przycisk opcję edycji otworzyć obszar widżetów

• Po otwarciu obszaru widżetów możesz to zrobić szukaj dla dowolnego widgetu > przeciągnij i upuść > aktualizacja Do ratować.

Na przykład, jeśli chcesz dodać wideo, wyszukaj wideo w obszarze widżetów, a następnie przeciągnij i upuść, aby dodać swój model i zaktualizować. Teraz wideo powinno pojawić się w oknie modalnym.

Użyj gotowych sekcji ElementsKit, aby uzyskać piękny modal

Nie masz czasu, aby stworzyć projekt okna podręcznego od podstaw? Nie martw się. Konstruktor okien podręcznych ElementsKit oferuje wiele wbudowanych sekcji, które możesz wybrać, aby tworzyć angażujące okna podręczne, aby podkreślić swój komunikat dla widza.

Aby skorzystać z wbudowanych widżetów z ElementsKit, wykonaj poniższe kroki:

• Kliknij na opcję edycji na modalu  otworzyć obszar widżetów
• Kliknij przycisk EK, aby otworzyć kolejne okno widżetów z gotowymi sekcjami.

• Przejdź do > Sekcje > Wybierać sekcję, którą lubisz > Wstawić

• Po włożeniu możesz zmiana kolor obrazu, tekstu lub tła zgodnie z Twoimi preferencjami i aktualizacja.

A oto efekt końcowy!

ElementsKit oferuje ponad 60 widżetów i ponad 500 gotowych sekcji. Dowiedz się więcej o ElementsKit i jak je wykorzystać do ulepszenia swojej witryny internetowej.

Dodaj formularz kontaktowy 7 w trybie modalnym za pomocą ElementsKit

Jak powiedziałem wcześniej, moduły skutecznie zwiększają liczbę subskrypcji biuletynu i gromadzą dane użytkowników. Ale w tym celu musisz dodać formularz kontaktowy w swoim modalu, prawda? 

Nie panikuj, nie będziesz potrzebować kolejnej wtyczki wyskakującej WordPress, aby dodać formularz kontaktowy w wyskakującym oknie. Wtyczka ElementsKit WordPress to uniwersalna wtyczka do tworzenia wyskakujących okienek.

Postępuj zgodnie z poniższą instrukcją, aby dodać popularny formularz kontaktowy 7 do modalu za pomocą wtyczki do tworzenia wyskakujących okienek ElementsKit.

Zanim wykonasz te kroki, upewnij się, że utworzyłeś formularz kontaktowy na Twojej stronie internetowej za pomocą Formularza kontaktowego 7, Kreator stron Elementor i ElementsKit.

Możesz także obejrzeć poniższy samouczek wideo, aby utworzyć formularz kontaktowy.

Zacznijmy.

• Iść do Treść > Treść > Włączyć coś Włącz szablon
• Kliknij na opcję edycji otworzyć obszar widżetów
• Szukaj Formularz kontaktowy, przeciągnij i upuść w sekcji, do której chcesz ją dodać.
• Zwiększać opcja stylu pod formularzem kontaktowym 7
• Wybierz z gotowe forma i aktualizacja.

Tutaj masz modalne wyskakujące okienko z formularzem kontaktowym, aby zwiększyć swoją listę e-mailową.

Czy wiesz, że możesz stworzyć niestandardowy widget bez posiadania głębokiej wiedzy na temat kodowania? Sprawdź jak zbudować niestandardowy widget z łatwością bez żadnego kodu przy użyciu ElementsKit.

Skuteczne wskazówki dotyczące dodawania wyskakującego okienka modalnego WordPress Elementor

Modalne wyskakujące okienka WordPress mogą znacznie zwiększyć zaangażowanie użytkowników, przekazywać ważne wiadomości i zachęcać odwiedzających do określonych działań. Tu są 7 skutecznych wskazówek dotyczących wdrażania efektownych modalnych wyskakujących okienek w witrynie WordPress.

1️⃣ Wybierz niezawodną wtyczkę

Wybierz dobrze utrzymaną wtyczkę modalną WordPress, taką jak Elementor” lub „ElementsKit”, aby utworzyć okno modalne na swojej stronie internetowej.

2️⃣ Zdefiniuj jasne cele

Jasno opisz cel modalnego wyskakującego okienka WordPress, niezależnie od tego, czy chodzi o zbieranie e-maili, promowanie ofert czy przekazywanie ważnych informacji.

3️⃣ Czas jest kluczowy

Użyj wyzwalaczy, takich jak opóźnienie czasowe, głębokość przewijania lub zamiar wyjścia, aby wyświetlić wyskakujące okienko we właściwym momencie. Pomoże to uniknąć natychmiastowych przerw w ładowaniu strony.

4️⃣ Responsywność mobilna

Upewnij się, że Twoje modalne wyskakujące okienko WordPress jest przyjazne dla urządzeń mobilnych, aby zapewnić pozytywne wrażenia na różnych urządzeniach.

5️⃣Projektowanie pod kątem doświadczenia użytkownika

Projektuj zwięzłe, atrakcyjne wizualnie modalne wyskakujące okienka WordPress z treścią wysokiej jakości. Dołącz łatwo dostępną opcję zamknięcia wyskakującego okienka dla użytkowników niezainteresowanych treścią.

6️⃣ Testy A/B w celu optymalizacji

Wdrażaj testy A/B, aby udoskonalić modal w WordPressie, tworząc odmiany i identyfikując elementy najskuteczniejsze dla odbiorców.

7️⃣ Przestrzeganie Regulaminu dotyczącego prywatności

Upewnij się, że Twoje modalne wyskakujące okienko WordPress jest zgodne z przepisami dotyczącymi prywatności, w tym przejrzystą komunikacją dotyczącą Twojej polityki prywatności i uzyskaniem wyraźnej zgody na gromadzenie danych.

Często zadawane pytania

Zakończyć

Gratulacje! Teraz wiesz, jak tworzyć okna dialogowe Elementor w WordPressie za pomocą Dodatek do Elementora. Twórz wyskakujące okienka formularza kontaktowego i dokonuj wszelkich dostosowań w witrynie WordPress bez wysiłku, korzystając z łatwej w użyciu wtyczki do tworzenia wyskakujących okienek, ElementsKit Pro i Elementor Page builder.

Nie zatrzymuj się tutaj. Eksperymentuj dalej, na ile sposobów możesz użyć okna dialogowego WordPress popup na swojej stronie internetowej. A jeśli potrzebujesz pomocy w budowaniu okienek WordPress popup przy użyciu ElementsKit, zostaw komentarz poniżej.