Historia wykorzystanuia okienek popup zaczyna się w latach 90-tych, gdy Ethan Zukerman postanowił umieścić wszystkie banery reklamowe na osobnej stronie, która otwierała się, gdy użytkownik wchodził na witrynę. I chociaż wykorzystany do tego kawałek kodu nadal nie był prawdziwym okienkiem popup, właśnie z niego wszystko się zaczęło.
Na nowoczesnych stronach okienka popup są używane do różnych celów, nie tylko do reklamowych. Formularze kontaktowe, ostrzeżenia o naruszeniu zasad prawnych i sugestie subskrypcji są często tworzone w formie popup'ów.
Jeżeli mówimy o popup'ach istnieją dwie rzeczy, które denerwują użytkowników w nich najbardziej: kiedy wskakują, gdy ich nie chcesz; i kiedy wygląd okienek całkowicie różni się od ogólnego stylu witryny. Oba te problemy pojawiają się, gdy do tworzenia okienek pop-up są wykorzystywane niejakościowe wtyczki.
Największym problemem większości początkujących programistów podczas tworzenia pop-up'ów jest brak kontroli nad utworzonym komunikatem. Jednak można uniknąć tych wszystkich problemów, jeśli korzystasz z kreatora stron Elementor. Istnieją dwie genialne wtyczki, stworzone specjalnie dla kreatora Elementor, które pomagają tworzyć okienka pop-up każdego rodzaju, kształtu i stylu - Popup Builder i JetPopups. Jedynym pytaniem będzie - którą z tych nich wybrać? Aby pomóc Ci w podjęciu decyzji, postanowiliśmy porónać ich funkcje, zalety i wady.
Pobieranie i isntalacja
Nie jest to najważniejsze kryterium wyboru wtyczki do użycia, ale aby ją wypróbować, musisz ją najpierw pobrać. Dlatego zacznę od samego początku i opiszę proces ich uzyskania - ceny, wymagania i proces instalacji.
Popup Builder
Ta wtyczka została stworzona przez zespół Elementor. Jest to najświeższa aktualizacja Elementora, wprowadzona w styczniu 2019 roku w celu zaspokojenia potrzeb klientów. Jednak nie jest dostępna dla użytkowników darmowej wersji kreatora Elementor, skorzystaj z niej mogą tylko użytkownicy wersji PRO. Tak więc, aby uzyskać opcję tworzenia wyskakujących okienek, musisz najpierw kupić Elementor PRO. Najprostszy plan taryfowy, który pozwala korzystać z całej gamy narzędzi do kreatora Elementor na jednej stronie kosztuje $49/rok. Więc, aby uzyskać wtyczkę Popup Builder trzeba:
- Kupić wersję PRO kreatora stron Elementor.
- Przejść do swojego osobistego konta i pobrać wtyczkę.
- Przejść do panelu admina witryny, sekcji Wtyczki > Dodaj nową, kliknąć przycisk "Prześlij wtyczkę" i wybrać plik .zip ze wtyczką.
- Po zakończeniu instalacji aktywować wtyczkę za pomocą klucza licencyjnego.
- Gotowe, a Popup Builder znajduje się na karcie Szablony> Popups.
Dzięki narzędziu Popup Builder zyskujesz także ogromny zestaw różnych elementów do kreatora Elementor, takich jak dodatkowe widżety, szablony i inne narzędzia.
JetPopups
"Rodzina" wtyczek Jet liczy już ponad 10 pozycji, a wtyczka JetPopups jest jedną z nich. Została opracowana specjalnie aby uzupełnić podstawowe funkcje kreatora Elementor i jest zgodna z zarówno płatnymi, jak i darmowymi iwersjami buildera. Wtyczka JetPopups kosztuje $15 i po zakupie może być wykorzystana tylko na jednej stronie. Jeśli chciałbyś skorzystać z tej wtyczki na więcej niż jednym projekcoe, możesz kupić wtyczkę na Licencji deweloperskiej za $45 i wykorzystać ją na pięciu stronach www. Algorytm uzyskiwania wtyczki jest nieco prostszy:
- Kup wtyczkę z TemplateMonster marketplace. Zostanie pobrana na Twój komputer.
- Przejdźdo panelu admina witryny, sekcji Wtyczki > Dodaj nową, kliknij przycisk "Prześlij wtyczkę" i wybierz plik .zip ze wtyczką.
- Po zakończeniu instalacji aktywuj wtyczkę.
- Voila! Po otwarciu menu dostosowania w kreatorze Elementor (należy kliknąć przycisk "Edytuj za pomocą Elementor") znajdziesz sekcję JetPopups w lewym menu widżetu.
Tworzenie popup'ów
Teraz, gdy narzędzia są już pobrane i zainstalowane, możemy zacząć tworzenie okienek po-up z pomocą tych wtyczek. Utworzę podstawowy popup i pokażę na jego podstawie wszystkie dostępne opcje dostosowywania we wtyczkach Popup Builder i JetPopups.
Popup Builder
W kreatorze stron elementor w wersji PRO wyskakujących okienkach Pro Elementora są tworzone osobno ze stron internetowych. Aby edytować wygląd strony, otwórz stronę wymagającą dostosowania, kliknij przycisk "Edytuj za pomocą elementu" i wykonaj stylizację. Aby utworzyć (a następnie edytować) wyskakujące okienka, przejdź do sekcji Szablony > Popups i kliknij przycisk "Dodaj nowy popup".
W otwartym oknie trzeba wybrać, który szablon chciałbyś utworzyć (tak, możesz tworzyć szablony nie tylko dla wyskakujących okienek, ale także dla stron i innych elementów) i nazwać go.
Po naciśnięciu przycisku "Utwórz szablon" zostaniesz przekierowany do menu dostosowania. Ponieważ łatwiej jest dostosować istniejący element, aniż tworzyć go od zera, dlatego przede wszystkim kreator zaproponuje Ci wybór odpowiedniego wstępnie zaprojektowanego szablonu.
Wybrałam jeden z szablonów wyświetlanych w górnej części listy biblioteki. Zaraz po dokonaniu wyboru zostaniesz przekierowany do obszaru robiczego kreatora Elementor, do którego prawdopodobnie już zwykłeś. Opcje dostosowywania są umieszczone w menu po lewej stronie ekranu. Dostępne są trzy zakładki. Zakładka "Ustawienia" pozwala zmienić układ wyskakującego okienka, zmienić nazwę szablonu i zrobić podgląd. Na karcie "Styl" możesz dostosować projekt - zmieniać kolory, fonty, zdjęcia i obramowania. Zakładka "Zaawansowane" jest wyposażona w zestaw dodatkowych ustawień, które pomogą Ci lepiej kontrolować popup.
Jak widzisz, wszystko jest dość proste, jeśli już pracowałeś w kreatorem Elementor, nie będziesz miał żadnych problemów z tą wtyczką. W poniższym wideo pokazano jak utworzyć popup z pomocą wtyczki Popup Builder:
JetPopups
Ta wtyczka też dodaje nową kartę do panelu admina strony WordPress, a popup są również tworzone oddzielnie od stron. Gotowe popup'y są również przechowywane w zakładce o nazwie "Biblioteka popup'ów". Aby utworzyć nowe wyskakujące okienko, trzeba nacisnąć przycisk "Dodaj" na gotowym szablonie, lub przejść do sekcji JetPopups > Dodaj nowy popup, potem nazwać nowy szablon i naciśnąć "Edytuj za pomocą kreatora Elementor".
Obszar roboczy wygląda nieco inaczej niż standardowy, ponieważ tworzysz teraz mniejsze okno. Z menu po lewej stronie możesz dodać dowolny element do okienka popup.
Wtyczka JetPopups dodaje do menu widżetów tylko jeden element - Przycisk akcji Popup. Pozwala on zdefiniować rodzaj akcji, która nastąpi po naciśnięciu przycisku przez użytkownika.
Aby otworzyć ustawienia okna popup trzeba kliknąć przycisk zarządzania w dołu menu. Menu ustawień jest bardzo podobne do tego, które posiada wtyczka Popup Builder, ale posiada ona tylko dwie karty dostosowywania. "Ustawienia ogólne" pozwalają zdefiniować efekt popup animacji, zmienić nazwę szablonu lub ustawić warunki. Na karcie "Styl" można zmieniać układy, kolory, obrazy, fonty i obramowania.
Wtyczka JetPopups ma nieco ograniczoną funkcjonalność, ale rekompensuje to szczegółowymi i przydatnymi tutorialami wideo. Oto pierwszy z dziewięciu filmów opisujących szczegóły użycia wtyczki:
Trigger'y
Aby być użytecznym i nie denerwować odwiedzających stronę, popup'y muszą pojawiać się we właściwym czasie. Warunki wyświetlania popup'ów są nazywane "trigger'ami". Im bardziej szczegółowe są dostępne warunki - tym bardziej elastyczna jest wtyczka do tworzenia popup'ów. Dokładność jest bardzo ważna, jeśli nie chcesz, aby odwiedzający strony opuścił ją wraz po pojawieniu się popup'apa z formularzem subskrypcyjnym.
Popup Builder
Ta wtyczka pomaga ustawić niezbędne warunki zaraz po zakończeniu dostosowywania popup'a. Po naciśnięciu przycisku "Opublikuj" zobaczysz okno, w którym możesz zdefiniować warunki (na jakich stronach pojawi się wyskakujące okienko), trigger'y (kiedy zostanie wyświetlone okno popup) i niestandardowe reguły. Wtyczka Popup Builder oferuje sześć trigger'ów, takich jak pokaz na przewijaniu i pokaz po kliknięciu, oraz siedem niestandardowych reguł, takich jak pokaz po określonej liczbie sesji lub pokaz na niektórych konkretnych urządzeniach. Trigger'y i niestandardowe reguły mają proste suwaki-przełączniki, z pomocą których można bardzo szybko można dodać wszystkie potrzebne ustawienia.
JetPopups
Wszystkie trigger'y, warunki i zdarzenia otwarcia są zebrane w ustawieniach. Po kliknięciu przycisku zarządzania otwierasz karty ustawień i możesz ustawić trigger'y. Możesz określić liczbę sekund, po upływie których użytkownik zobaczy wiadomość, czy popup będzie wyświetlany jednorazowo lub za każdym razem, gdy użytkownik wykona określone działanie (zdecydowanie nie polecam włączać tą opcję, ponieważ takie popup'y są denerwujące dla użytkowników). Możesz także bardzo wybrać posty lub strony, na których będzie wyświetlane konkretne wyskakujące okienko. Ogólnie rzecz biorąc, ta wtyczka jest dość elastyczna i pozwala wyświetlać wyskakujące okienka na różne sposoby.
Pozycjonowanie
Użytkownicy na pewno nie będą mogli uniknąć okien popup, które wyskakują na środek ekranu, ale warte jest pamiętać, że takie popup'y odciągają uwagę od zawartości witryny i są naprawdę denerwujące. Nie każde okienko popup należy umieścić w środku ekranu. Naprzykład, wąska wstążka w górnej części strony będzie mniej widoczna, ale może być znacznie bardziej skuteczna. Oznacza to, że potrzebujesz kontroli nad położeniem okna.
Zarówno Popup Builder, jak i JetPopups dzielą ekran na dziewięć sektorów i pozwalają umieścić okienko wyskakujące w dowolnym z nich. Pozycjonowanie definiuje się wzdłuż skali lewej i prawej oraz górnej.
Efekty animacyjne
Sposób, w jaki popup pojawia się na stronie jest bardzo ważny. Jeśli okno porusza się zbyt szybko lub zbyt wolno - nie będzie ono skuteczne. Efekty animacyjne sprawiają, że strona staje się bardziej dynamiczna, ale mogą też zrujnować całe wrażenie od pop-up'a.
Popup Builder ma 36 efektów animacyjnych, w tym różne rodzaje przesuwania, rozwijania, powiększania, odbijania i obracania. Wszystko to wraz z czasem trwania animacji można znaleźć w sekcji "Układ" zakładki Ustawienia.
Wtyczka JetPopups jest wyposażona w 13 efaktów animacyjnyche. Znajdziesz je w sekcji "Ustawienia" na karcie Ustawienia.
Szablony
W niektórych przypadkach gdy potrzebujesz popup'ów o określonej strukturze i dokładnie wiesz, jak powinni wyglądać. Ale znacznie częściej nie masz żadnego pojęcia, jakie elementy powinny zawierać wyskakujące okienka. Wtedy warte jest aby skorzystać z gotowych szablonów. W dodatku, dostosowywanie wstępnie zaprojektowanego popup'a jest znacznie szybsze i łatwiejsze niż tworzenie go od zera.
Popup Builder dodaje kategorię do biblioteki szablonów Elementora. Jak już mówiłam, możesz ją zobaczyć na samym początku tworzenia nowego popup. Asortyment szablonów popup'ów jest wystarczająco duży; istnieje ponad 100 pozacji. W lewym górnym kącie znajduje się narzędzie do sortowania kategorii, dzięki czemu możesz przyspieszyć wyszukiwanie. Kategorie są zrozumiałe i wybór potrzebnego popup'a nie zajmie zbyt wiele czasu.
Wtyczka JetPopups ma również ogromną bibliotekę szablonów. Wszystkie są przechowywane w zakładce Biblioteka popup'ów i mają takie funkcje, jak przycisk podglądu i licznik zużycia. Istnieje więcej opcji sortowania, lista może być ustawiona tak, aby pokazywała określony typ szablonów, a następnie można je umieścić w dowolnej kolejności; na przykład zgodnie z datą utworzenia. Nie mogę podać dokładnej liczby dostępnych szablonów, ale z pewnością jest ich więcej niż 100.
Tabela porównawcza
| Popup Builder | JetPopups | |
| Cena | $45 | $15 |
| Szablony | 100+ | 100+ |
| Triggery | 6 trigger'ów, 7 niestandardowych zasad | 5 zdarzeń otwartych z dodatkowymi ustawieniami |
| Efekty animacyjne | 36 typów | 13 typów |
| Tutoriale | dokumentacja | dokumentacja, 9 wideo tutoriali |
Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: JetPopups or Popup Builder: Which One do you Choose?.
* * *
Nie mogę powiedzieć, która z tych dwóch wtyczek jest lepsza. Każdy przypadek i każda osoba ma własne wymagania dotyczące wyboru wtyczek. Myślę, że powinieneś samodzielnie podjąć ostateczną decyzję w wyboerz jednej z tych dwóch wtyczek.