Jak tworzyć wyskakujące okienka w WordPressie za pomocą Gutenberga

Czy kiedykolwiek przeglądałeś internet i nagle zostałeś powitany przez wyskakujące okienko? Wyskakujące okienko, które pojawia się z nakładką, gdy odwiedzasz stronę internetową. 

Czasami te wyskakujące okienka mogą być super pomocne, oferując Ci przydatne informacje lub świetne oferty. Albo mogą wydawać się trochę irytujące i nachalne.

Jednak z punktu widzenia właściciela witryny, wyskakujące okienka okazały się skutecznym narzędziem przyciągania uwagi, promowania ofert i generowania potencjalnych klientów.

Dlatego kluczowe jest tworzenie odpowiednich okienek pop-up, które przyciągną uwagę użytkownika, a jednocześnie go nie zirytują.

Aby Ci w tym pomóc, przeprowadzimy Cię przez każdy etap konfiguracji skutecznych wyskakujących okienek dostosowanych do celów Twojej witryny. Pod koniec tego przewodnika będziesz mieć najłatwiejszy sposób tworzenia wyskakujących okienek, które nie tylko przyciągają uwagę, ale także poprawiają doświadczenie użytkownika.

Czym jest wyskakujące okienko na stronie internetowej?

Popupy to małe okna, które pojawiają się na stronie internetowej, zazwyczaj jako nakładka, aby przyciągnąć uwagę użytkownika. Okna te mogą zawierać różne formy treści, takie jak reklamy promocyjne, oferty subskrypcji, powiadomienia lub wezwania do działania. 

Popupy często wymagają interakcji, takiej jak wejście na stronę lub wyjście z niej, kliknięcie przycisku, aby je zamknąć lub wypełnienie formularza. Są zaprojektowane tak, aby wyróżniać się na tle reszty strony i zachęcać do natychmiastowego zaangażowania.

Kiedy ludzie zazwyczaj korzystają z okien pop-up na swoich stronach internetowych?

Popupy są najczęściej używane do osiągania konkretnych celów związanych z zaangażowaniem użytkownika i konwersją. Oto kilka typowych scenariuszy, w których ludzie używają popupów na swoich stronach internetowych:

• Do przechwytywanie leadów Lub zbuduj listę e-mailową z subskrypcją.
• Promuj ekskluzywne oferty, rabaty i oferty ograniczone czasowo.
• Zapowiadaj nowe produkty, funkcji lub głównych aktualizacji.
• Aby zapewnić ważne ogłoszenia aby ostrzec odwiedzających. 
• Poproś gości o załóż konto na stronie internetowej.
• Do zbierać opinie Lub przeprowadzać ankiety wśród publiczności.
• Pokazywać zgoda na pliki cookie Lub Polityka prywatności powiadomienie.
• Kieruj użytkowników do zarejestruj się na wydarzenia, webinariów lub warsztatów.

Tego rodzaju strategiczne wykorzystanie okienek pop-up pomaga zwiększyć zaangażowanie użytkowników i konwersję, ale ważne jest, aby wdrażać je rozważnie, aby nie zakłócać korzystania z witryny.

Jak tworzyć wyskakujące okienka WordPress w Gutenbergu

Przejdźmy teraz do sedna tego przewodnika, który wyjaśni, jak dodać wyskakujące okienko w WordPressie za pomocą edytora bloków Gutenberga.

Domyślny edytor Gutenberg nie zawiera kreatora wyskakujących okienek. Musisz więc wybrać wtyczkę WordPress popup dla edytora bloków. W tym samouczku użyliśmy wtyczki GutenKit.

GutenKit to wtyczka do edytora bloków który jest dostarczany z Popup Builder zaprojektowanym specjalnie dla Gutenberga. Dzięki temu popup builderowi tworzenie popupów w Gutenbergu jest teraz łatwiejsze niż kiedykolwiek.

Poniżej przedstawiono krok po kroku proces tworzenia wyskakującego okienka Gutenberg w edytorze WordPress.

Zainstaluj i aktywuj wtyczkę WordPress popup dla Gutenberga

Aby zainstalować GutenKit Popup Builder, musisz mieć zainstalowaną wtyczkę edytora bloków GutenKit na swojej stronie internetowej. Oto wymagane wtyczki i motywy, aby płynnie używać popup builder na swojej stronie internetowej.

☑️Wymagane wtyczki:

• GutenKit Wersja darmowa
• Lub, Wersja GutenKit Pro

☑️ Temat: Motyw Hello Blocks lub dowolnego motywu blokowego WordPress.

Po zainstalowaniu wtyczki GutenKit przejdź do GutenKit > Moduły. Znajdź Kreator wyskakujących okienek i kliknij zainstalować przycisk. Po aktywowaniu Popup Builder jesteś gotowy, aby zacząć budować WordPress popups w Gutenberg dla swojej witryny WordPress.

Projektuj wyskakujące okienka dla WordPressa, używając dowolnego bloku Gutenberga

Teraz przejdź do GutenKit > Wyskakujące okienko i kliknij Utwórz nowe okno podręczne aby otworzyć edytor, w którym utworzysz wyskakujące okienko.

Następnie możesz użyć bloku do zbudowania wyskakującego okienka w edytorze.

Dzięki GutenKit Popup Builder możesz wykorzystać dowolne bloki Gutenberga do zaprojektowania własnego wyskakującego okienka. 

Możesz użyć ponad 65 bloków GutenKit i ponad 18 modułów, aby zaprojektować nowoczesne i wyrafinowane okno pop-up dla swojej witryny.

Obejmuje to bloki takie jak nagłówki, akapity, przyciski, obrazy, a nawet filmy, które można dodać do wyskakującego okienka, dzięki czemu jest ono w dużym stopniu dostosowywalne. 

Twórz wyskakujące okienka Gutenberga przy użyciu wstępnie zaprojektowanych szablonów

Z drugiej strony, zamiast zaczynać od zera, możesz zaoszczędzić czas i wysiłek, korzystając z gotowych projektów. Dzięki ponad 500 wzorom i szablonom dostępnym w bibliotece szablonów GutenKit możesz szybko tworzyć profesjonalnie wyglądające wyskakujące okienka w ciągu kilku minut.

Aby zaimportować gotowe projekty

1. Edytor popup builder dla Gutenberga.
2. Kliknij na biblioteka szablonów przycisk.
3. Wybierz wzór z biblioteki.

Następnie możesz zmienić zawartość i dostosować style, aby dopasować je do swojej kampanii. To szybki i bezproblemowy sposób na uruchomienie oszałamiających wyskakujących okienek!

Użyj inteligentnych warunków, aby wyświetlać wyskakujące okienka Gutenberga na swojej stronie internetowej

Masz elastyczność wyboru stron, na których chcesz, aby pojawiały się Twoje wyskakujące okienka. Po prostu przejdź do edytora bloków wyskakujących okienek, a na karcie „Treść” zobaczysz opcję o nazwie „Warunki”. 

Stamtąd wystarczy kliknąć  + Dodaj warunek przycisk i ustaw reguły, gdzie chcesz, aby wyświetlało się Twoje okno popup. To takie proste!

Za pomocą kreatora wyskakującego okienka GutenKit można ustawić warunki uwzględniania i wykluczania.

• Uwzględnij warunek: Dzięki warunkom Uwzględnij możesz dodać wyskakujące okienka do całej witryny, określonych stron lub stron archiwum.
• Wyklucz warunek: Możesz określić, gdzie na Twojej stronie nie będą wyświetlane wyskakujące okienka, stosując warunki wykluczenia.

Oto jak możesz wyświetlać wyskakujące okienka na swojej stronie internetowej, stosując inteligentne warunki:

Pokaż wyskakujące okienka Gutenberga na całej stronie internetowej

Aby wyświetlić okno podręczne na wszystkich stronach swojej witryny, 

👉 Krok 1: Dodaj nowy warunek dla wyskakujących okienek.

👉 Krok 2: Wybierz warunek „Uwzględnij”.

👉 Krok 3: Wybierz opcję „Cała witryna”, aby wyświetlać wyskakujące okienko na każdej stronie.

Wyłącz wyświetlanie wyskakujących okienek na określonych stronach

Mogą zdarzyć się sytuacje, gdy nie chcesz, aby wyskakujące okienka pojawiały się na niektórych stronach. Możesz to zrobić za pomocą Wykluczać warunki. 

👉 Krok 1: Dodaj nowy warunek dla wyskakujących okienek.

👉 Krok 2: Wybierz warunek „Wyklucz”.

👉 Krok 3: Wybierz „Pojedynczy”.

👉 Krok 4: Wybierz stronę, na której chcesz wykluczyć wyświetlanie wyskakujących okienek.

Wyświetlaj wyskakujące okienka tylko na określonych stronach

Jeśli zależy Ci na bardziej ukierunkowanych kampaniach, możesz wyświetlać wyskakujące okienka na niektórych stronach swojej witryny.

👉 Krok 1: Dodaj nowy warunek dla wyskakujących okienek.

👉 Krok 2: Wybierz warunek „Uwzględnij”.

👉 Krok 3: Wybierz „Pojedynczy”.

👉 Krok 4: Wybierz stronę, na której chcesz wyświetlić wyskakujące okienko.

Poza tym, aby mieć pewność, że wyskakujące okienko nie pojawi się na innych stronach, możesz dodać wyklucz waruneki zaznacz całą witrynę, aby ograniczyć wyświetlanie wyskakującego okienka na całej stronie.

Wyskakujące okienka WordPress na stronach archiwum

Możesz również wyświetlać wyskakujące okienka na dowolnej stronie archiwum WordPress, ustawiając warunek. W tym celu Dodaj warunek > Dołącz > Archiwum > Wybierz archiwum strona.

Z drugiej strony, jeśli chcesz zapobiec wyświetlaniu wyskakujących okienek na określonej stronie archiwum, możesz ustawić warunek wykluczenia. Wystarczy wykonać te same kroki: W tym celu Dodaj warunek > Wyklucz > Archiwum > Wybierz archiwum strona.

Zdecyduj, jak i kiedy uruchamiać wyskakujące okienka Gutenberga

Masz pełną kontrolę nad tym, jak wyskakujące okienka pojawiają się na stronach Twojej witryny. Możesz zdecydować, czy wyskakujące okienka pojawią się po załadowaniu strony, zamiarze wyjścia lub po interakcji.

W kreatorze wyskakujących okienek GutenKit możesz wybrać sposób, w jaki wyskakujące okienka będą się uruchamiać na Twojej stronie internetowej. Treść > Otwarte wydarzenia w edytorze bloków..

Pomaga to w tworzeniu różnych typów wyskakujących okienek w Gutenbergu. Oto rodzaje wyskakujących okienek WordPress w Gutenbergu możesz projektować przy użyciu GutenKit Popup Builder.

1. Okienka wejściowe

• Spust: Uruchamiane natychmiast po załadowaniu strony w przeglądarce użytkownika.
• Zamiar: Angażuje użytkowników od razu po wejściu na stronę internetową.
• Przypadek użycia: Wita użytkowników zniżką, ogłoszeniem wydarzenia lub natychmiastową prośbą o subskrypcję.

💡 Jak wyzwolić? Wybierz zdarzenie Open jako „Podczas ładowania strony”

2. Okienka pop-up z zamiarem wyjścia

• Spust: Aktywowane, gdy użytkownik zamierza zamknąć kartę lub przeglądarkę.
• Zamiar: Przechwytuje użytkowników zanim opuszczą witrynę.
• Przypadek użycia: Oferuje zniżkę, subskrypcję newslettera lub ofertę specjalną.

💡 Jak wyzwolić? Wybierz zdarzenie Open jako „Zamiar wyjścia na stronie”

3. Okienka pop-up wyzwalane przewijaniem

• Spust: Uruchamiane przez użytkownika, który przewija stronę w dół.
• Zamiar: Oferuje ofertę promocyjną lub prosi o opinię po tym, jak użytkownik zapoznał się z określoną częścią strony.
• Przypadek użycia: Promuje dodatkową zawartość, formularz rejestracyjny lub ofertę ograniczoną czasowo.

💡 Jak wyzwolić? Wybierz zdarzenie Open jako „Przewinięta strona”.

Następnie ustaw „Postęp przewijania strony aby zdecydować, w którym momencie pojawi się wyskakujące okienko, gdy użytkownik przewija stronę w dół.

4. Okienka podręczne informujące o braku aktywności użytkownika

• Spust: Gdy użytkownik jest nieaktywny przez określony czas.
• Zamiar: Ponownie zaangażuj użytkowników, którzy przez pewien czas nie odwiedzali witryny.
• Przypadek użycia: Przypomina użytkownikom o specjalnych ofertach, zachęca ich do podjęcia działania lub sugeruje produkty, które mogli zostawić w koszyku.

💡 Jak wyzwolić? Wybierz zdarzenie Open jako „Po bezczynności”.

Teraz ustaw Czas nieaktywności użytkownika w ciągu kilku sekund decydujesz, kiedy pojawi się wyskakujące okienko po tym, jak użytkownik przestanie być aktywny.

5. Okienka pop-up po kliknięciu

• Spust: Aktywowane poprzez interakcję użytkownika z sekcją na stronie.
• Zamiar: Wyświetla treść, gdy użytkownik kliknie określony element strony (np. przycisk lub obraz).
• Przypadek użycia: Często używany do podawania szczegółów produktu, przesyłania dodatkowych formularzy lub odtwarzania filmów wideo.

💡 Jak wyzwolić? Wybierz zdarzenie Open jako „Kliknij selektor niestandardowy”.

Teraz dodaj Klasa selektora dla sekcji. 

Dzięki różnym typom okienek pop-up WordPress dostępnych w Gutenbergu możesz swobodnie wybierać format najlepiej odpowiadający Twoim celom i poprawiający doświadczenia użytkowników, dzięki czemu Twoja witryna będzie bardziej angażująca i skuteczna w przyciąganiu uwagi oraz zwiększaniu konwersji.

Zaplanuj aktywację wyskakującego okienka dla swojej kampanii

Czasami będziesz używać wyskakujących okienek, aby promować kampanie na swojej stronie internetowej. Teraz te kampanie mają określoną datę i godzinę uruchomienia. Więc musisz dopasować ten dokładny czas, aby aktywować wyskakujące okienko.

Możesz to zrobić za pomocą Zaawansowane zasady. 

➡️ Krok 1: Przełącz przycisk na „włączone”, aby „Zaplanuj datę i godzinę”.

➡️ Krok 2: Ustaw Czas kiedy chcesz aktywować wyskakujące okienko.

➡️ Krok 3: Wybierz Data rozpoczęcia kampanii pop-up.

Dlaczego warto wybrać GutenKit Popup Builder dla WordPressa?

The GutenKit Popup Builder wyróżnia się jako najlepszy wybór do tworzenia wyskakujących okienek w WordPressie ze względu na bezproblemową integrację z edytorem bloków Gutenberga, oferując intuicyjne i wysoce konfigurowalne doświadczenie dla użytkowników. Oto dlaczego jest to doskonałe rozwiązanie dla witryn WordPress:

✅ Bezproblemowa integracja z Gutenbergiem:

GutenKit jest stworzony specjalnie dla Gutenberga, co oznacza, że możesz projektować i zarządzać wyskakującymi okienkami, używając tego samego interfejsu opartego na blokach, który już znasz. Eliminuje to potrzebę zewnętrznych konstruktorów wyskakujących okienek lub kodowania, usprawniając cały proces i umożliwiając spójne doświadczenie.

✅ Wstępnie zaprojektowane szablony do szybkiej konfiguracji:  

   GutenKit zawiera różnorodne profesjonalnie zaprojektowane szablony popup, które można łatwo dostosować do stylu Twojej marki. Te szablony oszczędzają czas i wysiłek, oferując punkt wyjścia dla tych, którzy nie chcą budować popupów od podstaw, ale nadal chcą mieć dopracowany, nowoczesny design.

✅ Zaawansowane zasady wyświetlania: 

Dzięki GutenKit masz pełną kontrolę nad tym, kiedy i gdzie pojawiają się Twoje wyskakujące okienka. Możesz ustawić dokładne warunki wyświetlania w oparciu o to, na których stronach chcesz wyświetlić wyskakujące okienko. 

Dzięki temu masz pewność, że Twoje wyskakujące okienka będą wyświetlane w najbardziej optymalnych momentach, zwiększając zaangażowanie użytkowników bez nachalności.

✅ Wiele opcji wyzwalania:

GutenKit oferuje wiele opcji wyświetlania okienek pop-up, na przykład podczas ładowania strony, po upływie określonego czasu, podczas przewijania lub gdy użytkownik zamierza opuścić stronę. 

Możesz także uruchamiać wyskakujące okienka, gdy użytkownicy wchodzą w interakcję z określonymi elementami. Dzięki temu masz pełną kontrolę nad ścieżką użytkownika.

✅ Elastyczna personalizacja

Narzędzie GutenKit Popup Builder umożliwia szeroką personalizację wyskakujących okienek, od animacji i stylów po typografię i kolory. 

Możesz nawet dodać niestandardowy kod CSS dla bardziej zaawansowanego stylu, dzięki czemu Twoje wyskakujące okienka będą pasować do unikalnego projektu i marki Twojej witryny.

✅ Responsywny i zoptymalizowany pod kątem urządzeń mobilnych 

Popupy utworzone za pomocą GutenKit są w pełni responsywne i przyjazne dla urządzeń mobilnych, co zapewnia, że Twoje popupy będą wyglądać świetnie na każdym urządzeniu. Możesz dostosować wygląd za pomocą animacji wejścia i wyjścia, stylów tła, kolorów nakładki i nie tylko.

✅ Lekki i zorientowany na wydajność 

W przeciwieństwie do wielu innych wtyczek typu pop-up, GutenKit jest lekki i zoptymalizowany pod kątem wydajności. 

Oznacza to, że nie musisz martwić się o wyskakujące okienka spowalniające działanie Twojej witryny, co jest kluczowe zarówno dla wygody użytkownika, jak i dla SEO.

Podsumowanie

Postępując zgodnie z tymi krokami, będziesz w stanie łatwo tworzyć i wyświetlać wyskakujące okienka na swoich stronach WordPress. Dzięki GutenKit Popup Builder możesz łatwo zintegrować dynamiczne wyskakujące okienka ze swoją stroną WordPress, co pozwoli Ci skutecznie komunikować się z odbiorcami. 

Skorzystaj z porad zawartych w tym przewodniku i zacznij eksperymentować z różnymi strategiami wyświetlania okienek pop-up, aby maksymalnie wykorzystać potencjał swojej witryny!

Podobnie jak Popup Builder, GutenKit zawiera ponad 65 bloków, ponad 18 modułów i ponad 500 gotowych projektów, aby zapewnić Ci zaawansowane doświadczenie kreatora stron w edytorze bloków Gutenberga. Zainstaluj więc GutenKit już dziś i zacznij budować swoją wymarzoną witrynę w WordPressie.