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.

But from a website owner’s point of view, popups have turned out as a powerful way to capture attention, promote offers, and generate leads.

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

To help you with this, we will walk you through each step of setting up effective popups tailored to your website’s goals. By the end of this guide, you’ll have the easiest way to create popups that not only attract attention but also enhance user experience.

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.

These strategic uses of popups help enhance user engagement and conversion, but it’s essential to implement them thoughtfully to avoid disrupting the user experience.

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ć button. With the Popup Builder activated you’re all set to start building WordPress popups in Gutenberg for your WordPress site.

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

On the other hand, instead of starting from scratch, you can save time and effort by using the ready designs.  With over 500+ patterns and templates available in GutenKit’s Template Library, you can quickly create professional-looking popups in just minutes.

Aby zaimportować gotowe projekty

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

After that, you can change the content and customize styles to align with your campaign. It’s a fast and hassle-free way to get stunning popups up and running!

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

You have the flexibility to choose which pages you’d like your popups to appear on. Just head over to the popup block editor, and under the “Content” tab, you’ll see an option named “Conditions.” 

Stamtąd wystarczy kliknąć  + Dodaj warunek button and set the rules for where you want your popup to be displayed. It’s that easy!

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

There might be times when you don’t want popups to appear on certain pages. You can do it with 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

If you’re aiming for more focused campaigns, you might want to display popups on certain pages of your website.

👉 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 is built specifically for Gutenberg, meaning you can design and manage popups using the same block-based interface you’re already familiar with. This eliminates the need for external popup builders or coding, streamlining the entire process and allowing for a cohesive experience.

✅ 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.