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

add_modal_popup_in_wordpress

Czy wiesz, że najnowsze badanie dot 2 miliardy modalnych wyskakujących okienek miało Konwersja 9.28%w rankingu wśród najlepszych 10%?

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 także dodać moduły do swojej witryny i wykorzystać korzyści, jakie ma ona do zaoferowania?

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. 

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

  • Iść do  Zestaw elementów  > Widżety > Włącz Moda wyskakująca> Kliknij Zapisz zmiany
włącz wyskakujący widget ElementsKit Modalne wyskakujące okienko WordPress Modalne wyskakujące okienko Elementor
Włącz widget modalny

Krok 2: Dodaj moduł modalny 

  • Wyszukaj wyskakujący moduł, przeciągnij i upuść widżet w sekcji, w której chcesz, aby pojawił się Twój Modal.
przeciągnij i upuść modalne wyskakujące okienko, jak dodać wyskakujące okienko w wordpress
Przeciągnij i upuść widget

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ć
zmień tekst przycisku przełącznika
Zmień tekst przycisku przełącznika
  • Żeby zmienić tytuł I podtytuł iść do Treść > nagłówek i zmień opcje za pomocą własnego tekstu.
zmień tryb tytułu i podtytułu
Zmień tytuł i podtytuł
  • Żeby zmienić treść treści, rozwiń sekcję treści i edytować tekst.
edytuj modalne wyskakujące okienko z tekstem treści
Zmień tekst treści
  • Iść do Treść > Stopka > Przycisk > Wezwanie do działania i zmień etykietę CTA oraz adres URL
zmień tekst CTA i modalne wyskakujące okienko adresu URL
Zmień wezwanie do działania i adres URL
  • Na koniec kliknij Aktualizacja zapisać.

Zrobione. Teraz kliknij przycisk podglądu, aby zobaczyć wyniki.

podgląd modalny
Zapowiedź

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

Dodatkowe ustawienia dla modalu

wyskakujące okienko modalne ustawień dodatkowych
Dodatkowe ustawienia

Przyjrzyjmy się teraz dodatkowym ustawieniom modalnym, 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. 

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

Teraz wiesz, jak zmieniać tekst, położenie, animację i robić wiele więcej, aby dostosować okno modalne w WordPress. Ale nadal wygląda to trochę nudno, prawda? Podobnie jak każde inne modalne wyskakujące okienko WordPress.

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
włącz szablon Elementskit elementor popup modal builder elementor modal
Włącz szablon
  • 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.

wideo w modalnym wyskakującym okienku WordPress modalny Elementor jak dodać wyskakujące okienko w wordpress
Podgląd modalu z wideo
Pobierz gif ElementsKit

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

Nie masz czasu na stworzenie projektu od podstaw? Bez obaw. Kreator wyskakujących okienek ElementsKit udostępnia wiele wbudowanych sekcji, za pomocą których możesz tworzyć atrakcyjne moduły, aby wyróżnić swój przekaz widzowi.

Modalne wyskakujące okienko WordPress Wyskakujące modalne Elementor
Otwórz sekcję widżetów ElementsKit

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ć
wstaw gotową sekcję autorstwa ElementsKit do modalnego wyskakującego okienka WordPress elementor modal
Wyszukaj i wstaw
  • Po włożeniu możesz zmiana kolor obrazu, tekstu lub tła zgodnie z Twoimi preferencjami i aktualizacja.

A oto efekt końcowy!

Wyskakujące okienko modalne elementor z predefiniowaną sekcją wyskakującego okienka ElementsKit WordPress
Podgląd modalu z gotową sekcją

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.
Wyskakujące okienko modalne elementor z formularzem kontaktowym 7 Wyskakujące okienko WordPress
Modal Z Podglądem Formularza Kontaktowego 7

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 modalnego wyskakującego okienka WordPress

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

Jak utworzyć wyskakujące okienko w wordpress bez wtyczki?

Możesz utworzyć modalne wyskakujące okienko WordPress bez wtyczki, używając niestandardowego kodu lub motywów obsługujących funkcjonalność modalną. Jednak użycie modalnej wyskakującej wtyczki WordPress, np. ElementsKit, upraszcza proces i zapewnia dodatkowe funkcje.

Kiedy nie używać modalnych wyskakujących okienek?

Należy unikać używania modalnych wyskakujących okienek w sytuacjach, w których mogą one zakłócać wygodę użytkownika, na przykład na urządzeniach mobilnych z małymi ekranami lub podczas krytycznych interakcji użytkownika, takich jak procesy realizacji transakcji. 

Czy używanie modalnych wyskakujących okienek jest szkodliwe dla SEO?

Modalne wyskakujące okienka same w sobie nie wpływają bezpośrednio na SEO, ale ich wdrożenie może wpłynąć na wygodę użytkownika i rankingi wyszukiwania. Dlatego powinieneś upewnić się, że wyskakujące okienka nie są nachalne i zaprojektowane zgodnie z wytycznymi Google dotyczącymi reklam pełnoekranowych, aby uniknąć negatywnych konsekwencji dla SEO.

Jaka jest najlepsza modalna wtyczka wyskakująca WordPress?

ElementsKit jest zalecany jako potężna i bogata w funkcje modalna wtyczka wyskakująca WordPress. Zapewnia szereg opcji dostosowywania, szablonów i kompatybilność z różnymi narzędziami do tworzenia stron, co czyni go popularnym wyborem wśród użytkowników WordPress.

Pobierz gif ElementsKit

Zakończyć

Gratulacje! Teraz wiesz, jak tworzyć moduły wyskakujących okienek Elementor za pomocą pliku Dodatek do Elementora, twórz wyskakujące okienka z formularzami kontaktowymi i dostosowuj witrynę WordPress bez wysiłku, korzystając z łatwej wtyczki do tworzenia wyskakujących okienek ElementsKit Pro i narzędzia do tworzenia stron Elementor.

Nie zatrzymuj się tutaj. Eksperymentuj dalej, na ile sposobów możesz wykorzystać wyskakujący moduł WordPress w swojej witrynie. A jeśli potrzebujesz pomocy przy tworzeniu wyskakujących okienek WordPress przy użyciu ElementsKit, zostaw komentarz poniżej.

Aby dowiedzieć się więcej szczegółów i przeczytać więcej blogów na temat wtyczek WordPress, dołącz do naszej społeczności na Facebook I Świergot. Jeśli wolisz samouczki wideo, zasubskrybuj nasz Kanał Youtube.


Uwagi

  1. Awatar Steve
    Steve'a

    Powinna istnieć możliwość utworzenia modalu wyskakującego za pomocą linku zakotwiczającego tekst.
    Następnie można tego użyć z prostymi linkami tekstowymi i ikonami itp.
    Osobiście nie chcę klikać przycisku ani obrazu, chciałbym po prostu kliknąć łącze tekstowe i wyskakuje modal.

    1. Awatar Dipa Shaha
      Dipa Shaha

      Steve,
      Mam nadzieję, że masz się dobrze. Niestety, nie mamy obecnie opcji, której szukasz.
      Ale oprócz przycisku i obrazu mamy także przełącznik czasu, który sprawia, że wyskakujące okienko pojawia się po określonym czasie, który możesz ustawić ręcznie. Tego też możesz spróbować.
      Z radością witamy wszelkie nowe pomysły. Jeśli chcesz skorzystać z tej funkcji, możesz poprosić o nią, korzystając z tego linku https://wpmet.com/plugin/elementskit/roadmaps/

  2. Awatar Quint
    Kwinta

    Czy poprzez kliknięcie jednego przycisku można uruchomić wiele modułów? Na przykład po kliknięciu przycisku dwa moduły są renderowane obok siebie lub w pionie (w zależności od rozmiaru okna), a użytkownik jest proszony o wybranie przycisku w projektach modalnych jednego lub dwóch modalnych – na przykład A/B. Pomysł polega na zarządzaniu czasem uwagi/humorem poprzez prezentowanie informacji/wizualizacji w małych kawałkach.

    1. Awatar Dipa Shaha
      Dipa Shaha

      Drogi Quincie
      Niestety, żądana funkcja jest niedostępna. Możesz jednak poprosić o tę funkcję. Zespół ElementsKit zawsze chętnie otrzymuje sugestie dotyczące funkcji.
      Możesz poprosić o tę funkcję, korzystając z tego linku https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Dziękuję

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *