Jak otworzyć wyskakujące okienko po kliknięciu przycisku za pomocą Elementora? [2022]

Zastanawiasz się, jak atrakcyjna będzie Twoja witryna dla odwiedzających, jeśli wyskakujące okienko zostanie otwarte po kliknięciu przycisku ? Jeśli potrzebujesz takiego interaktywnego przycisku, który otwiera wyskakujące okienko, istnieje wiele sposobów w najpopularniejszym narzędziu do tworzenia stron internetowych, Elementorze . Dzisiaj pokażemy Ci, jak łatwo stworzyć oszałamiające wyskakujące okienko za pomocą kliknięcia przycisku bez kodowania.

5 najlepszych przypadków użycia przycisku z wyskakującym okienkiem Elementor

Rzućmy okiem na to, jakie korzyści będziesz czerpać, otwierając modalne wyskakujące okienko Elementora po kliknięciu przycisku, zanim zaczniemy samouczek. Zasadniczo ten rodzaj interaktywnego wyskakującego okienka modalnego jest używany w kampaniach marketingowych witryn internetowych . Oprócz tego istnieje również wiele wszechstronnych przypadków użycia wyskakującego okienka po kliknięciu przycisku. Oto 5 najczęstszych przypadków użycia wyskakującego okienka modalnego.

1. Do przechwytywania potencjalnych klientów dla biznesu

Aby sprawnie prowadzić biznes i rozwijać firmę, potrzebujesz leadów. Dzięki pielęgnowaniu leadów możesz przekształcić ich w swoich stałych klientów. A strona internetowa to najlepsze medium do pozyskiwania leadów. Jeśli sprawisz, że wyskakujące okienko otworzy się po kliknięciu przycisku, możesz łatwo zbierać nazwiska potencjalnych klientów , numery telefonów, e-maile i inne szczegóły.

2. Odbieranie subskrypcji e-mail

Zwykle, jeśli dodasz podstawowy przycisk do zbierania subskrypcji e-mail, przeniesie on użytkowników do nowej strony internetowej. Zamiast tego możesz zrobić wyskakujące okienko po kliknięciu przycisku, dzięki czemu użytkownicy nie będą musieli opuszczać bieżącej strony internetowej. Ta praktyka zaskakująco zwiększa Twoją subskrypcję e-mail liczyć płynnie.

3. Promocje marketingowe i wyprzedaże

Gdy prowadzisz promocje marketingowe w swojej witrynie, wyskakujące okienko otwiera się po kliknięciu przycisku, co może nadać witrynie interaktywny wygląd i zwiększyć sprzedaż . Możesz dodawać obrazy, formularze, specjalne kupony rabatowe itp. w jednym wyskakującym okienku Elementora. Nie powodując niechcianej witryny wraz z sekcjami promocyjnymi, możesz zastąpić ją wyskakującym okienkiem otwieranym po kliknięciu przycisku.

4. Udostępnianie ekscytujących ogłoszeń

Jeśli planujesz ogłosić wielkie wydanie lub inne ekscytujące ogłoszenia i promocje, wyskakujące okienko otwiera się po kliknięciu przycisku może być najlepszym sposobem. To nada Twojej witrynie oszałamiający wygląd i możesz ozdobić ją wirtualnym konfetti i innymi świątecznymi dekoracjami. Co więcej, jeśli planujesz ogłosić jakąś ważną wiadomość „wkrótce”, wyskakujące okienko otwiera się po kliknięciu przycisku, co może pomóc w stworzeniu buzza .

5. Użyj jako blokady treści

Jeśli masz witrynę wielofunkcyjną, może zaistnieć potrzeba wprowadzenia ograniczeń dotyczących treści ze względu na wiek, członkostwo, subskrypcję i wiele innych. Jeśli udostępniasz treści z ograniczeniami bezpośrednio w sekcji witryny, z pewnością zmniejszy to liczbę kliknięć na akcję. Zamiast tego możesz stworzyć atrakcyjne wyskakujące okienko, które otwiera się natychmiast po kliknięciu przycisku.

Dlaczego Elementor jest najlepszą platformą do tworzenia wyskakujących okienek na przycisku?

Na stronach internetowych istnieje wiele sposobów tworzenia wyskakujących okienek po kliknięciu przycisku w WordPress. Jednym ze sposobów, aby to zrobić, jest niestandardowe kodowanie lub zatrudnienie ekspertów. Jeśli nie znasz się na technologii, tworzenie kodów lub zatrudnianie ekspertów może kosztować cię fortunę. Ale kiedy używasz Elementora – najpopularniejszego narzędzia do tworzenia witryn WordPress, możesz to zrobić bez kodowania .

Aby utworzyć wyskakujące okienko, które otwiera się po kliknięciu przycisku, możesz to zrobić po prostu przeciągając i upuszczając , bez konieczności kodowania. Co więcej, za pomocą kreatora Elementor Popup tworzenie wyskakujących okienek po kliknięciu przycisku jest tak proste, że możesz je stworzyć samodzielnie. Elementor zapewnia nieograniczone opcje dostosowywania i personalizacji. Dopasowując to do wartości marki Twojej witryny, możesz utworzyć dowolny rodzaj wyskakującego okienka, które natychmiast otworzy się po kliknięciu przycisku.

Samouczek bez kodu: jak otworzyć modalne wyskakujące okienko Elementor po kliknięciu przycisku?

Przejdźmy teraz do samouczka i zacznij otwierać wyskakujące okienko po kliknięciu przycisku. Przed rozpoczęciem tworzenia wyskakującego okienka Elementor wystarczy minuta koncentracji 5 i wykonanie tego prostego samouczka krok po kroku.

Krok 1: Zacznij korzystać z Elementora PRO

Jeśli planujesz utworzyć wyskakujące okienko modalne, które otwiera się po kliknięciu przycisku za pomocą Elementora, musisz uzyskać Elementor PRO . Dzięki wyjątkowej funkcji Elementor PRO, Elementor Popup Builder , możesz natychmiast tworzyć wyskakujące okienka, które otwierają się po kliknięciu przycisku. Elementor ma wszechstronne plany cenowe, zaczynające się od 49 USD . Po uzyskaniu wtyczki Elementor PRO zainstaluj ją i aktywuj w swojej witrynie WordPress.

Krok 2: Utwórz szablon za pomocą narzędzia Elementor Popup Builder

Teraz czas na stworzenie szablonu wyskakującego okienka po kliknięciu przycisku. Aby to zrobić, przejdź do pulpitu WordPress, przejdź do Szablony → Popup . Klikając kartę, natychmiast przeniesie Cię do kreatora wyskakujących okienek Elementor. Następnie kliknij przycisk „Dodaj nowe wyskakujące okienko” . Pojawi się wyskakujące okienko. Tam Typ szablonu jest automatycznie wybierany jako wyskakujące okienko. Jeśli chcesz, możesz nadać szablonowi nazwę, a następnie kliknąć przycisk „Utwórz szablon” .

Następnie zostaniesz przekierowany do Biblioteki szablonów Elementor . Istnieje ponad 100 kolekcji popup dostępnych w różnych kategoriach. W oparciu o wymagania dotyczące witryny WordPress wybierz odpowiedni szablon wyskakującego okna Elementor. Kliknij szablon, aby uzyskać krótki podgląd. Następnie kliknij przycisk „Wstaw” , aby wyświetlić modalne wyskakujące okienko po kliknięciu przycisku.

Krok 3: Skonfiguruj i spersonalizuj szablon wyskakujący

Następnie panel edytora Elementor otworzy się ze wszystkimi opcjami konfiguracji po lewej stronie. Stamtąd możesz łatwo dostosować wyskakujące okienko po kliknięciu przycisku. Możesz zachować modalne wyskakujące okienko z Boxed lub Full Width . Podobnie możesz skonfigurować modalną wysokość wyskakującego okienka, odstęp między kolumnami, pozycję kolumny, wyrównanie w pionie, przepełnienie, znaczniki HTML i wiele innych. Różne rodzaje szerokości oferują różne rodzaje konfiguracji.

Aby dostosować zawartość modalnego wyskakującego okienka, po prostu kliknij tekst, obraz lub przyciski. Po lewej stronie natychmiast otworzy się panel edycji. Możesz łatwo zmienić zawartość wyskakującego okienka, rodzinę czcionek itp. Dodaj także wiele sekcji wyjściowych wiadomości e-mail, wysokość przycisku, szerokość, kolor, tekst i wiele innych. Dostępna jest opcja ustawiania działań po przesłaniu, zarządzania zgłoszeniami, dodawania niestandardowej treści wiadomości e-mail, adresu e-mail odbiorcy, identyfikatora e-mail nadawcy itp. Po wprowadzeniu wszystkich zmian kliknij przycisk „Opublikuj” .

Krok 4: Skonfiguruj warunki i wyzwalacze

Możesz skorzystać z wyskakującego okienka po kliknięciu przycisku dla całej witryny WordPress lub wybranych stron. Możesz również dołączyć lub wykluczyć wyskakujące okienko Elementor z wybranych stron. Wszystkie te konfiguracje dostępne są w zakładce „Stan” .

Na karcie „Wyzwalacze” musisz ustawić, kiedy chcesz, aby wyskakujące okienko otwierało się po kliknięciu przycisku. Ponieważ chcemy wyświetlić podgląd wyskakującego okienka za pomocą kliknięcia przycisku, przełącz, aby włączyć „Po kliknięciu” . Z „Zaawansowanych reguł” możesz skonfigurować warunki, takie jak komu pokazać wyskakujące okienko, pokazać po przybyciu formularza i wiele innych. Następnie kliknij przycisk „Zapisz i zamknij” . W ten sposób możesz łatwo utworzyć szablon wyskakujący Elementor. Następnie wróć do pulpitu WordPress.

Krok 4: Dodaj przycisk Elementora tam, gdzie potrzebujesz

Teraz otwórz stronę, na której chcesz ustawić wyskakujące okienko po kliknięciu przycisku. Jeśli chcesz utworzyć nową stronę, przejdź do Strony → Dodaj nową . w tym samouczku połączymy wyskakujące okienko z przyciskiem Elementor. Przeciągnij i upuść przycisk Elementor na swojej stronie.

Spersonalizuj wygląd przycisku, tekst itp., aby dostosować go do koloru marki Twojej witryny. Następnym krokiem jest połączenie przycisku z wyskakującym okienkiem. Aby to zrobić, kliknij „Typ dynamiczny” w polu „Link” , wybierz Popup z akcji . Następnie kliknij ikonę „Ustawienia” obok wyskakującego okienka i wybierz wcześniej utworzony szablon wyskakującego okienka. Otóż ​​to!

Ostatnie spojrzenie na wyskakujące okienko otwiera się po kliknięciu przycisku Elementor

W ten sposób możesz łatwo utworzyć wyskakujące okienko po kliknięciu przycisku. Po dokonaniu innych dostosowań opublikuj stronę. Teraz do podglądu, aby sprawdzić, jak wyskakujące okienko otwiera się po kliknięciu przycisku.

Jeśli chcesz użyć tego samego przycisku dla różnych stron, a następnie Kopiuj i Wklej przycisk do nowej strony internetowej. Możesz także skopiować skrót do szablonu wyskakującego elementu Elementor i używać go w dowolnym miejscu, w którym chcesz dodać wyskakujące okienko po kliknięciu przycisku.

Bonus za niezbędne dodatki dla użytkowników Elementora

Essential Addons For Elementor to najpotężniejsza biblioteka Elementor z ponad 1 milionem aktywnych użytkowników i ponad 85 unikalnymi widżetami. Widżet Creative Button ma bardziej uniwersalny wygląd i uniwersalną użyteczność dla klientów. Jeśli używasz widżetu przycisku Essential Addons, to w podobny sposób, jak przycisk Elementor, możesz łatwo otworzyć wyskakujące okienko po kliknięciu przycisku.

Elementor ułatwił tworzenie stron internetowych. Podobnie jak wyskakujące okienko otwiera się po kliknięciu przycisku, możesz tworzyć bardziej oszałamiające i wszechstronne funkcje na swojej witrynie WordPress. Oto koniec tego samouczka. Jeśli uznałeś ten samouczek za pomocny, nie zapomnij podzielić się nim z innymi.

Daj nam znać, w jaki sposób tworzysz wyskakujące okienko po kliknięciu przycisku za pomocą Elementora w naszej społeczności na Facebooku . Zasubskrybuj także nasz blog , aby być na bieżąco z tego rodzaju samouczkami, poradami i wskazówkami.