Twórz eleganckie wyskakujące okna w WordPressie za pomocą wtyczki Popup Maker

Kreator wyskakujących okienek w WordPress

Z reguły dopracowuję wszystkie strony internetowe dla moich klientów za pomocą systemu blogowego WordPress. Wyjątkiem są strony, na których muszę tworzyć indywidualne programowanie w PHP - ale poza tym: wszystko w WordPressie. Jak wspomniałem poniżej, było kilka próśb od klientów o dodanie wyskakującego okienka do witryny, dlatego zacząłem szukać rozwiązań wyskakujących dla WordPress.

Aktualizacja 10.11.2021: dwie nowe rekomendacje

Artykuł jest nieco starszy, aw międzyczasie udało mi się zdobyć więcej doświadczenia z różnymi wtyczkami i usługami. Wtyczka Popup Maker jest nadal ok, ale z mojego punktu widzenia jest to podstawowe rozwiązanie, którego nie poleciłbym już bez zastrzeżeń. Wyskakujące okienka, które za jego pomocą projektujesz, nie są tak łatwe do „ładnego” zaprojektowania, jak w przypadku dwóch innych wtyczek lub usług, które chciałbym Ci teraz polecić.

GetSiteControl

Pierwsza to usługa, która nie ogranicza się do Wordpressa, ale w której możesz wybierać spośród wielu szablonów za pomocą super prostego kreatora, a następnie dostosować projekt, określając, na jakich stronach ma pojawiać się pop-up, jak często ma się pojawiać i jak to wywołać.

Po zakończeniu projektowania wyskakującego okienka instalujesz wtyczkę usługi na swojej stronie WordPress (wtyczka jest również nazywana „GetSiteControl”) i łączysz witrynę z usługą – gotowe.

Wada: Niestety usługa kosztuje miesięcznie lub rocznie - ale moim zdaniem jest absolutnie warta wydatku. Na przykład używam go do wyświetlania wyskakującego okienka newslettera na dole mojego bloga.

» przejdź do GetSiteControl

Elfi wzrok

Kolejną usługą, która jest również bardzo łatwa - ale niestety trochę droga - jest Elfi wzrok. Na tej stronie zespół programistów oferuje niezliczone rozszerzenia funkcjonalne dla WordPressa, w tym wyskakujące okienka.

Dzięki Elfsight jesteś również w bardzo łatwym w użyciu interfejsie i wybierasz spośród istniejących szablonów, które możesz następnie dostosować. Wszystkie rozszerzenia są bardzo dobrze przemyślane i pięknie zaprojektowane.

» na Elfsight

Wywołani pandemią korony, dwóch klientów szybko zapytało, czy mógłbym utworzyć dla nich wyskakujące okienko na stronie, które pokazywałoby odwiedzającym formularz, w którym nadal mogą korzystać z usług moich klientów.

Za pomocą wyskakującego okienka w prosty sposób poinformujesz odwiedzających witrynę o aktualnych procedurach w sytuacji kryzysu koronowego (fot. Sir Apfelot).
Za pomocą wyskakującego okienka w prosty sposób poinformujesz odwiedzających witrynę o aktualnych procedurach w sytuacji kryzysu koronowego (fot. Sir Apfelot).

TL; DR: Dla tych, którzy nie mają ochoty czytać wszystkich moich wyjaśnień: możesz znaleźć wtyczkę do tworzenia wyskakujących okienek, o której mówię, tutaj w kolekcji wtyczek WordPress na wordpress.org lub bezpośrednio na stronie dostawcy.

W rzeczywistości termin wyskakujące okienko nie jest całkiem właściwy, mimo że wszyscy używają go w ten sposób. W praktyce jest to tylko element nakładki, który unosi się nad resztą strony. Z drugiej strony wyskakujące okienko to niezależne okno przeglądarki, które jest otwierane przez skrypt, a następnie znajduje się na pierwszym planie.

Jednak „prawdziwe” wyskakujące okienka zostały zniesione wiele lat temu, ponieważ były masowo nadużywane do okien reklamowych. Każda przeglądarka samodzielnie przechwytuje teraz takie okna, aby nie denerwować użytkownika. Użytkownik zwykle widzi wtedy tylko informację, że strona próbowała otworzyć wyskakujące okienko.

Mamy więc do czynienia z oknem nakładkowym - nawet jeśli robimy to za pomocą wtyczki „Popup Maker”, która ma niewłaściwą nazwę.

W Safari prawdziwe wyskakujące okienka są domyślnie tłumione — chyba że wyraźnie zezwolisz na to w witrynie. Nie ma to jednak wpływu na nasze wyskakujące okienko nakładki.
W Safari prawdziwe wyskakujące okna są domyślnie tłumione, chyba że wyraźnie zezwolisz na to w witrynie. Nie ma to jednak wpływu na nasze wyskakujące okienko nakładki.

Jeśli chodzi o wyskakujące wtyczki WordPress, istnieje ogromny wybór do wyboru. Wypróbowałem kilka wtyczek i nierzadko były to rozwiązania, które były darmowe jako wtyczka, ale dla działającej implementacji należy wykupić miesięczną subskrypcję z powiązanej usługi.

Z drugiej strony, wersje całkowicie darmowe są często wadliwe i nie otwierają się z jakiegoś nieznanego powodu, lub tylko dobrze wyglądają na pulpicie lub tablecie i wyświetlają się niepoprawnie na smartfonie – tj. bezużyteczne.

Popup Maker był pierwszą wtyczką, która oferowała wiele opcji ustawień, łatwość obsługi, bezpłatne użytkowanie i bezbłędną funkcjonalność. W związku z tym chciałbym to tutaj przedstawić jako rekomendację. znalazłeś to tutaj na stronie dostawcy.

Podstawowa wersja Popup Maker jest bezpłatna i oferuje już wystarczającą funkcjonalność, aby połączyć wyskakujące okienka z plikami cookie.
Podstawowa wersja Popup Maker jest bezpłatna i oferuje już wystarczającą funkcjonalność, aby połączyć wyskakujące okienka z plikami cookie.

wymagania dotyczące wdrożenia

Aby dotrzeć z wyświetlanym oknem do jak największej liczby odwiedzających, powinno ono pojawiać się nie tylko na stronie startowej, ale także na wszystkich podstronach, do których trafiają np. linki w Google.

Ważne było dla mnie również to, że wyskakujące okienko (konsekwentnie używam złej nazwy w pozostałej części tekstu) jest wyświetlane tylko raz dziennie i odwiedzającemu. W tym celu wtyczka musi ustawić plik cookie na jeden dzień. Plik cookie powinien być ustawiony już po otwarciu wyskakującego okienka, a nie tylko po jego zamknięciu - jeśli odwiedzający zeskoczą, nie zobaczą okna ponownie przy następnej wizycie.

Ostatnim życzeniem był projekt treści. Powinno być możliwe użycie zarówno prostego tekstu, jak i grafiki. Aby to zrobić, nakładka musi dobrze wyglądać zarówno na Macu, jak i na iPadzie i iPhonie – czyli musi być responsywna i dopasowywać się do urządzenia końcowego.

Wszystkie te rzeczy można zrobić za pomocą Kreator wyskakujący rozwiązać - nawet w darmowej wersji podstawowej.

Wyskakujące okienko zostało zaprojektowane w edytorze WYSIWYG, w którym można pracować z CSS i HTML lub tylko tekstem i obrazami.
Wyskakujące okienko zostało zaprojektowane w edytorze WYSIWYG, w którym można pracować z CSS i HTML lub tylko tekstem i obrazami.

Ustawienia we wtyczce

Chciałbym przedstawić Wam mój aktualny projekt klienta www.knowwau.com pokaż jakie ustawienia wprowadziłem we wtyczce. Moja klientka wyraziła na to zgodę i mam nadzieję, że w ramach podziękowania zdobędzie kilku odwiedzających ten artykuł.

Jeśli jesteś zainteresowany szkoleniem psów i chciałbyś sprawdzić niektóre z jej kursów online (ponieważ nie możesz teraz chodzić do szkół szkolenia psów) chciałbym udostępnić jej stronę internetową knowwau.com serdecznie polecam. Znajdziesz tam również wyskakujące okienko w akcji. ;-)

Wyzwalacz wyskakującego okienka

W ustawieniach wyzwalacza zawsze wybieram, aby okno otwierało się automatycznie po pół sekundy. Jednocześnie plik cookie jest ustawiany na jeden dzień, dzięki czemu odwiedzający widzi plik cookie tylko raz na 24 godziny.

Kierowanie w kreatorze wyskakujących okienek

Sekcja Kierowanie pozwala wybrać strony, na których ma się pojawić wyskakujące okienko. Istnieje wiele możliwości wyboru. Jeśli nic nie wybierzesz, baner pojawi się na wszystkich stronach.

 

Edytor motywów kreatora wyskakujących okienek

Możesz wybierać między różnymi motywami i zmieniać je w edytorze motywów. Tutaj możesz na przykład ustawić przezroczystość tła lub zmienić odległości i rozmiar okna. Zostawiłem wszystko tak, jak jest i ustawiłem tylko przezroczystość na 80%. Reszta jest już optymalna do wyświetlania na komputerach stacjonarnych i urządzeniach mobilnych.

Przycisk zamykania kreatora wyskakujących okienek

We wtyczce znajduje się osobny obszar do dostosowywania przycisku „Zamknij”. Dzięki temu możesz zdecydować, gdzie pojawi się przycisk, jaki ma kolor i jaki ma tekst.

Przetestuj wyskakujące okienka z klientami

Oczywiście, pracując nad popupem, nie chcesz, aby każdy odwiedzający był konfrontowany z pracami konstrukcyjnymi. Z tego powodu zawsze ustawiam wyzwalacz tak, aby wyskakujące okienko pojawiało się tylko w przypadku błędów 404. Więc jeśli wywołasz adres URL, który nie istnieje w witrynie. Aby to zrobić, po prostu dołącz „/ abc” lub coś podobnego do domeny i wywołaj ten adres URL.

Aby uniknąć tego, że wyskakujące okienko można testować tylko raz dziennie, zawsze używam okna incognito lub okna prywatnego, ponieważ w tych oknach przeglądarki nie są przechowywane żadne pliki cookie, a wyskakujące okienko jest wyświetlane raz po raz.

Do testów celuję w strony 404, a następnie otwieram brakującą podstronę w oknie prywatnej przeglądarki.
Do testów celuję w strony 404, a następnie otwieram brakującą podstronę w oknie prywatnej przeglądarki.

O zamiarze wyjścia i inne specjalności

Jeśli chcesz utworzyć wyskakujące okienko On Exit Intent - tj. wyskakujące okienko, które otwiera się, gdy użytkownik przesunie wskaźnik myszy poza okno przeglądarki - to niestety musisz mieć subskrypcję na Usługa tworzenia wyskakujących okienek Rezerwa. Ceny (247 USD rocznie) są tam dość wysokie, więc wolałabym w tym miejscu szukać alternatywy.

Ceny Popup Maker - jeśli nie poradzisz sobie z funkcjami darmowej wersji podstawowej - nie są pozbawione. Ale wtyczka jest naprawdę funkcjonalna i niezawodna.
Ceny Popup Maker - jeśli nie poradzisz sobie z funkcjami darmowej wersji podstawowej - nie są pozbawione. Ale wtyczka jest naprawdę funkcjonalna i niezawodna.

Jeśli jednak zarabiasz na swoim blogu i chcesz zapłacić za kompleksowe narzędzie do wyskakujących okienek, które łączy prostą obsługę i czyste wyskakujące okienka, nadal możesz rzucić okiem na subskrypcje Kreatora wyskakujących okienek.

Moje wskazówki i porady dotyczące technologii i Apple

Podobał Ci się artykuł i czy instrukcje na blogu Ci pomogły? Wtedy byłbym szczęśliwy, gdybyś bloga poprzez stałe członkostwo będzie wspierać.

12 odpowiedzi na „Wstaw eleganckie wyskakujące okienka w Wordpressie za pomocą wtyczki Popup Maker”

  1. Korzystałem też z Popup Maker (w darmowej wersji podstawowej) i jestem w zasadzie zadowolony z możliwości. Przy okazji dziękuję za wskazówki, jak poradzić sobie z „pracami budowlanymi” z wtyczką – wcześniej o tym nie pomyślałem… i w związku z tym dałem niektórym odwiedzającym stronę kilka wglądów w postęp prac nad wdrożeniem…

    To, co nie wydaje mi się jednak tak przekonujące, to opcje formatowania tekstu wyskakującego. O ile widzę do tej pory, odległości między akapitami lub od nagłówka do tekstu nie mogą być zmieniane za pomocą standardowych opcji formatowania (i praktycznie nie istnieją). W szczególności tekst zawsze wisi bezpośrednio pod nagłówkiem.

    Jednak przy odrobinie wiedzy na temat CSS możesz sformatować całość dość indywidualnie - poza dostarczonymi motywami - po znalezieniu klas i/lub identyfikatorów używanych przez wtyczkę (np. za pomocą własnego "inspektora") przeglądarki, a następnie zatwierdzi zmiany do niestandardowego CSS witryny w zapleczu WP. Na przykład typografię i kolory można dostosować, jeśli to cenisz, ale oczywiście ogólne aspekty projektowe, takie jak marginesy itp.

    1. Cześć Piotr! Tak, przy drobnych korektach musisz znać trochę CSS, aby wyglądało to fantazyjnie. Ale w zasadzie standardowy szablon jest już użyteczny. Widziałem znacznie bardziej makabryczne wyskakujące okienka z innymi wtyczkami. :D

    1. Jen Kleinholz

      Witaj Tomaszu! Nawet jeśli byłoby to technicznie możliwe, nie umieszczałbym dwóch wyskakujących okienek przed gośćmi. Jest to niezwykle irytujące i nie powinno mieć pozytywnego wpływu na czas spędzony na Twojej stronie. Co porabiasz? Może istnieje bardziej eleganckie rozwiązanie?

    1. Witaj Sophie! Obecnie nie używam już skryptu, ponieważ nie używam żadnych wyskakujących okienek na mojej stronie. Za każdy plik cookie musisz uzyskać zgodę użytkownika i z tego powodu radzę sobie bez wszystkiego, co jest możliwe.

  2. Całość wkomponowałem dość dobrze, ale rozmiar pop-upu nie dopasowuje się do urządzeń mobilnych. Czy jest na to mała sztuczka?
    Z góry dzięki

    1. Jen Kleinholz

      Cześć Laura! Tak, sztuczka polega na tym, że tworzysz dwa wyskakujące okienka. Jeden dla komputerów stacjonarnych i jeden dla mniejszych wyświetlaczy. Przynajmniej ja tak to zawsze rozwiązywałem.

  3. Kolejny mały dodatek do PopUp Maker: użyłem go na stronie WP i - kiedy temat stał się ponownie ostry w zeszłym roku - miałem poważne problemy z przesyłaniem żądań z tej witryny do Google Fonts (RODO!).
    Okazało się, że wtyczka POM najwyraźniej używała czcionek Google „samodzielnie” i oczywiście nie można temu zaradzić żadnymi ustawieniami motywu WP itp. Wydaje mi się, że pamiętam, że wtyczka OMGF, która w przeciwnym razie może być przydatna do wyłączania zapytań Google, również tutaj nie zadziałała.
    Po skonfigurowaniu wyskakującego okienka POM przydatne może być sprawdzenie połączeń sieciowych, aby zobaczyć, czy witryna żąda czcionek Google.

    1. Jen Kleinholz

      Cześć Piotr! Wtyczka ma teraz przycisk, którego można użyć do dezaktywacji czcionek Google. Ale wtyczka OMGF to wciąż świetna historia. Mam też wiele witryn klienckich, które chcą pozbyć się czcionek Google.

      1. Cześć Jens, dzięki za informacje! „Wtedy” działało mi to na nerwy, dopóki nie dowiedziałem się, że niechciane czcionki Google weszły do ​​​​gry za pośrednictwem PopUp Maker… Dobrze, że najwyraźniej wielu programistów rozpoznało teraz problem dla nas, użytkowników z UE, a ci z UE oferują opcję wspomniano, aby wyłączyć to połączenie za pomocą ustawienia.
        Jednak już przełączyłem się na „Hustle” jako wyskakującą wtyczkę, co również bardzo mi się podoba.

        I tak, OMGF jest często przydatną wtyczką do swoich celów, nawet w darmowej wersji - ale to zależy od sposobu, w jaki czcionki Google są zintegrowane z motywem lub wtyczkami, niezależnie od tego, czy są rozpoznawane przez OMGF i przechowywane lokalnie mogą się stać. Niestety, w przypadku niektórych starszych witryn i motywów WP w ogóle nie działało.
        Jednak wersja płatna jest pod tym względem znacznie skuteczniejsza – o czym można przeczytać tu i tam.

        1. Jen Kleinholz

          Tak, od razu dostałem „nieograniczoną” wersję Pro. Kiedyś nie udało jej się usunąć czcionek Google, ale programista pracował nad tym przez 2 dni i rozwiązał problem. Wniosek: super wtyczka i super wsparcie!

Napisz komentarz

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

Na blogu Sir Apfelot znajdziesz porady, instrukcje i recenzje produktów Apple, takich jak iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini i Mac Studio.

Promocje
Zakupy
  •  
  •