Pierwsze wyskakujące okienka powstały na podstawie scenariusza wymyślonego przez Ethana Zukermana dla witrynyzakwaterowanie swojej strony internetowej na platformie Tripod na początku lat 90. Użytkownicy narzekali na liczbę reklam, które umieścił w witrynie, dlatego zdecydował się umieścić banery na osobnej stronie, która otwierała się, gdy użytkownik uzyskał dostęp do strony.
Ten mały fragment kodu nadal nie był prawdziwym wyskakującym okienkiem, jak widać na każdej stronie internetowej, ale od tego się wszystko zaczęło. Na nowoczesnych stronach internetowych wyskakujące okienka są używane do różnych celów, nie tylko do reklam. Formularze kontaktowe, ostrzeżenia dotyczące polityki prywatności i sugestie dotyczące subskrypcji są również często przedstawiane jako wyskakujące okienka.
Są dwie rzeczy, które denerwują użytkowników, jeśli chodzi o wyskakujące okienka: kiedy rzucają się na ciebie, gdy ich nie chcesz; a kiedy jego wygląd różni się całkowicie od stylu strony. Te dwa problemy pojawiają się, gdy używasz wtyczek, które nie wydają się być najwyższej jakości.
Największy problem większości wtyczek, z których korzystają nowi programiści tworzenie pop upów jest brak kontroli nad wynikającym komunikatem. Możesz jednak uniknąć wszystkich tych problemów, jeśli użyjesz Elementora do stworzyć stronę internetową.
Dwie niesamowite wtyczki, stworzone specjalnie dla Elementora Page Builder, pomagają tworzyć wyskakujące okienka dowolnego typu, kształtu i stylu – Elementor Popup Builder et JetPopup. Ponieważ oba są wykonane z tego samego ciała co Elementor, jedynym pytaniem, które należy zadać, jest wybrana z tych wtyczek. Aby pomóc Ci w podjęciu tej decyzji, dokonam dokładnego przeglądu obu i możesz porównać ich zalety i wady. Więc chodźmy !
Pobierz i zainstaluj
Nie jest to najważniejsze kryterium przy wyborze wtyczki, której chcesz użyć, ale aby ją wypróbować, musisz ją najpierw zdobyć. Dlatego mam zamiar zacząć od samego początku i nakreślić proces, aby to osiągnąć - cenę, nakład pracy i prostotę procesu konfiguracji.
Kreator wyskakujących okienek
Ta wtyczka została stworzona przez zespół Elementora. Moglibyśmy więc nazwać go jego prawdziwym „dzieckiem”. To ostatnia aktualizacja Elementora, wydana w styczniu 2019 roku, aby zaspokoić potrzeby klientów. Jednak nie jest dostępny dla użytkowników darmowej wersji Elementora.
Popup Builder jest zawarty w profesjonalnym planie subskrypcji. Tak więc, aby mieć możliwość tworzenia wyskakujących okienek, musisz najpierw mieć Elementor Pro. Najprostszy plan cenowy, który pozwala korzystać ze wszystkich różnorodnych funkcji Elementora dla jednej strony internetowej, kosztuje 49 USD rocznie. A więc od pierwszych kroków (zakup Elementora Pro), oto algorytm do uzyskania Popup Builder:
- Kup Pro Elementora Page Builder.
- Przejdź do swojego konta osobistego i pobierz wtyczkę.
- Przejdź do pulpitu nawigacyjnego swojej witryny, Wtyczki> Dodaj nową, kliknij przycisk „Prześlij wtyczkę” i wybierz odpowiedni plik .zip.
- Po zakończeniu instalacji aktywuj wtyczkę za pomocą klucza licencyjnego.
- Oto Kreator wyskakujących okienek znajdujący się na karcie Szablony> Wyskakujące okienka.
To trochę długa droga, ale dzięki Popup Builder otrzymujesz również ogromną kolekcję różnych elementów z Elementora, takich jak widżety, szablony i inne dodatkowe narzędzia.
Kreator wyskakujących okienek
JetPopup
„Rodzina” wtyczek Jet zawiera już więcej artykułów 10, a JetPopup jest jednym z nich. Został starannie stworzony specjalnie dla Elementora i zwiększa liczbę dostępnych narzędzi. Ta wtyczka to t
W pełni kompatybilny z darmowymi i płatnymi wersjami. Nie musisz więc dokonywać żadnych dodatkowych zakupów. JetPopup kosztuje 15 USD, a gdy już go zdobędziesz, możesz go używać tylko w jednej witrynie. Jeśli potrzebujesz go do więcej niż jednego projektu, możesz kupić wtyczkę na licencji programisty (będzie to kosztować 45 USD) i używać jej w pięciu witrynach. Algorytm pobierania wtyczki jest nieco prostszy:
- Kup wtyczkę w portalu TemplateMonster. Zostanie pobrany na komputer.
- Przejdź do pulpitu nawigacyjnego swojej witryny, Wtyczki> Dodaj nową, kliknij przycisk „Prześlij wtyczkę” i wybierz odpowiedni plik .zip.
- Po zakończeniu instalacji aktywuj wtyczkę.
- Voila! Po otwarciu menu dostosowywania Elementor (klikając przycisk „Edytuj za pomocą Elementor”) w lewym menu widżetu znajdziesz sekcję JetPopup.
Tworzenie wyskakujących okienek
Teraz, gdy narzędzia są już dostępne i gotowe, mogę spróbować utworzyć wyskakujące okienko z obydwoma wtyczkami i przekonać się, jak prosta i zrozumiała jest ta funkcja. Następnie utworzę podstawowe wyskakujące okienko i przyjrzę się opcjom dostosowywania Popup Builder i JetPopup.
Kreator wyskakujących okienek
W Pro Elementor wyskakujące okienka są wykonywane niezależnie od stron witryny. Aby zmienić wygląd witryny, otwórz stronę, którą chcesz dostosować, kliknij przycisk „Edytuj za pomocą Elementora” i wprowadź zmiany. Aby jednak tworzyć (a następnie edytować) wyskakujące okienka, należy przejść do opcji Szablony> Wyskakujące okienka i nacisnąć przycisk „Dodaj nowe wyskakujące okienko”.
W otwartym oknie musisz wybrać szablon, który utworzysz (tak, możesz tworzyć szablony nie tylko dla wyskakujących okienek, ale także dla stron i innych elementów) i nadać mu nazwę.
Po naciśnięciu przycisku „Utwórz szablon” nastąpi przekierowanie do menu personalizacji Elementor. Łatwiej jest dostosować istniejący element, budując go od podstaw. Dlatego najpierw zostaniesz poproszony o wybranie odpowiedniego modelu.
Wybrałem jeden z modeli wyświetlanych na górze listy bibliotek. Zaraz po dokonaniu wyboru trafisz do obszaru roboczego Elementora, do którego prawdopodobnie jesteś przyzwyczajony. Opcje personalizacji znajdują się na pasku bocznym po lewej stronie ekranu. Masz tutaj trzy zakładki.
Karta „Ustawienia” umożliwia zmianę układu wyskakującego okienka, zmianę nazwy modelu i podgląd. Na karcie „Styl” możesz dostosować projekt - zmieniać kolory, czcionki, obrazy i obramowania. Karta „Zaawansowane” zawiera również zestaw dodatkowych suwaków; na przykład zapobiegają zamykaniu wyskakującego okienka za pomocą klucza ESC.
Jak widać - nic nieoczekiwanego, jeśli korzystałeś wcześniej z Elementora, nie napotkasz żadnych problemów z tą wtyczką. Oto szczegółowy film, który wyjaśnia, jak utworzyć wyskakujące okno za pomocą Popup Builder:
JetPopup
Ta wtyczka dodaje również nową kartę do pulpitu nawigacyjnego WordPress a przy jego pomocy wyskakujące okienka są również tworzone niezależnie od stron. Gotowe wyskakujące okienka są również przechowywane w zakładce o nazwie „Biblioteka wyskakujących okienek”. Aby utworzyć nowe wyskakujące okienko, możesz nacisnąć przycisk „Dodaj” na wstępnie zdefiniowanym szablonie lub przejść do JetPopup> Dodaj nowe wyskakujące okienko, nadaj szablonowi nazwę i naciśnij „Edytuj za pomocą Elementora”.
Pole pracy różni się nieco od normy, ponieważ tworzysz teraz mniejsze okno. W menu po lewej stronie możesz dodać dowolny element do wyskakującego okienka.
Wtyczka JetPopup dodaje pojedynczy element do menu widżetu - kontekstowy przycisk akcji. Pozwala to na zdefiniowanie typu akcji, która nastąpi, gdy użytkownik naciśnie przycisk.
Otwieranie ustawień z wyskakującego okienka nie jest naprawdę oczywiste. Musisz kliknąć przycisk konserwacji u dołu menu. Menu ustawień jest dość podobne do tego w Popup Builder, ale są tylko dwie zakładki dostosowywania. „Ustawienia ogólne” pozwalają zdefiniować efekt animacji, zmienić nazwę modelu lub określić warunki. Na karcie „Styl” możesz zmienić układy, kolory, obrazy, czcionki i obramowania.
JetPopup ma nieco mniej oczywistą funkcjonalność, ale rekompensuje to szczegółowymi i przydatnymi samouczkami wideo.
wyzwalacze
Aby być użytecznym i nie denerwować odwiedzających, wyskakujące okienka muszą pojawiać się we właściwym czasie. Warunki, w których wyświetlane jest wyskakujące okienko, nazywane są „wyzwalaczami”. Im bardziej szczegółowe warunki są dostępne, tym bardziej elastyczna jest wtyczka wyskakująca. Precyzja jest bardzo ważna, jeśli nie chcesz, aby użytkownik opuścił witrynę po wyświetleniu wyskakującego okna formularza subskrypcji.
Kreator wyskakujących okienek
Ta wtyczka pomaga zdefiniować niezbędne warunki tuż po dostosowaniu wyskakującego okna. Po naciśnięciu przycisku „Publikuj” zobaczysz okno, w którym możesz zdefiniować warunki (na których stronach będzie wyświetlane to okienko wyskakujące), wyzwalacze (kiedy zostanie wyświetlone okno podręczne) i reguły zaawansowane.
Popup Builder ma sześć wyzwalaczy, takich jak wyświetlanie po jednym przewinięciu i kliknięciu, oraz siedem zaawansowanych reguł, takich jak wyświetlanie po określonej liczbie sesji lub wyświetlanie na niektórych urządzeniach. Wyzwalacze i zaawansowane reguły mają proste przełączniki suwakowe, a ustawienie dowolnych parametrów będzie bardzo szybkie.
JetPopup
Wszystkie wyzwalacze, warunki i zdarzenia otwarcia są zgrupowane razem w parametrach. Po kliknięciu przycisku konserwacji otwierasz zakładki ustawień i możesz natychmiast ustawić wyzwalacze. Możesz ustawić procent strony po przewinięciu, menu kontekstowe do wyświetlenia lub liczbę sekund, po których użytkownik zobaczy komunikat.
Okno można wyświetlić tylko raz lub za każdym razem, gdy użytkownik wykona określone czynności (nie bardzo go polecam - nie ucieszy użytkowników). Możesz również bardzo dokładnie wybrać, które posty lub strony będą wyświetlane w tym konkretnym wyskakującym okienku. Ogólnie rzecz biorąc, ta wtyczka jest dość elastyczna i umożliwia wyświetlanie wyskakujących okienek z dużą precyzją.
pozycjonowanie
Użytkownicy z pewnością nie będą w stanie uniknąć okien wyskakujących bezpośrednio ze środka ekranu, ale odwracają one uwagę odwiedzających od strony internetowej i mogą być naprawdę irytujące. Nie wszystkie wyskakujące okienka powinny być umieszczone pośrodku, wąska wstążka u góry będzie mniej widoczna, ale może być znacznie bardziej skuteczna. Oznacza to, że musisz kontrolować położenie okna i mieć możliwość poruszania się po ekranie.
Kreator wyskakujących okienek et JetPopup podziel ekran na dziewięć sektorów i pozwól na umieszczenie wyskakującego okienka w dowolnym z nich. Pozycjonowanie jest definiowane wzdłuż skali lewa-prawa i góra-dół. Nie jest zbyt elastyczny, ale wystarczy na wyskakujące okienko.
Efekty animacji
Sposób, w jaki okno przesuwa się (toczy lub przeskakuje) na stronie jest bardzo ważny. Jeśli okno porusza się zbyt szybko lub zbyt wolno, nie będzie to skuteczne. Podskakiwanie, łaskotanie i drżenie również powinny być używane z dużą precyzją. Efekty animacji sprawiają, że witryna jest bardziej dynamiczna, ale mogą też zepsuć całe wrażenie.
Kreator wyskakujących okienek ma 36 typów animacji wejściowych, w tym różne typy przesuwania, rozwijania, powiększania, odbijania i obracania w różnych kierunkach. Wszystko to, wraz z czasem trwania animacji, można znaleźć w sekcji „Układ” na karcie Ustawienia.
Wtyczka zawiera 13 rodzajów animacji JetPopup, w tym zanikanie, pionowe odwracanie, różne slajdy, odbijanie i powiększanie. Znajdziesz je w sekcji „Ustawienia” na karcie Ustawienia.
modele
W niektórych przypadkach chcesz stworzyć wyskakujące okienko o określonej strukturze i dokładnie wiedzieć, jak powinno wyglądać. Ale to raczej rzadka okazja; znacznie częściej nie masz pojęcia, jakie elementy powinien zawierać Twój popup. Tutaj przydają się szablony. Nawet jeśli nie używasz żadnej ze wstępnie skonfigurowanych próbek, ich przetwarzanie może zapewnić dobry przegląd. I oczywiście dostosowywanie gotowego produktu jest znacznie szybsze i łatwiejsze niż budowanie go od zera.
Kreator wyskakujących okienek dodano kategorię do biblioteki modeli Elementora. Jak powiedziałem wcześniej, możesz to zobaczyć na początku nowego procesu tworzenia wyskakującego okienka. Asortyment szablonów wyskakujących okienek jest wystarczająco duży; istnieje ponad 100 pozycji. W lewym górnym rogu rozwijane narzędzie do sortowania kategorii pozwala przyspieszyć wyszukiwanie. Kategorie są zrozumiałe i znalezienie wyskakującego okienka nie zajmie dużo czasu.
JetPopup posiada również ogromną bibliotekę szablonów. Wszystkie z nich są przechowywane na karcie Biblioteka kontekstowa i mają przydatne funkcje, takie jak przycisk podglądu i licznik użycia. Dostępnych jest więcej opcji sortowania, listę można skonfigurować tak, aby wyświetlała określony typ modeli, a następnie umieszczać ją w dowolnej kolejności; na przykład w zależności od daty utworzenia. Nie mogę podać dokładnej liczby dostępnych modeli, ale zdecydowanie jest ich ponad 100.
Tabela porównawcza
| Elementor Popup Builder | JetPopup | |
| Cena | $ 45 | $ 15 |
| modele | 100 + | 100 + |
| wyzwalacze | Wyzwalacze 6, zaawansowane reguły 7 | Otwarte zdarzenia 5 z dodatkowymi parametrami |
| Animatio | Typy 36 | Typy 13 |
| Poradniki | dokumentacja | dokumentacja, samouczki wideo 9 |
JetPopup vs Kreator wyskakujących okienek
Wnioski
Nie mogę powiedzieć, która z tych dwóch wtyczek jest lepsza; ocenianie ich jest zbyt skomplikowane. Każdy przypadek i każda osoba ma własne wymagania dotyczące wyboru wtyczek. Myślę, że powinieneś sam to zdefiniować - który z tych dwóch będzie dla Ciebie najlepszy? Życzę powodzenia w dodawaniu niesamowitego wyskakującego okienka do Twojej witryny!
