Twórz wyskakujące okienka Elementora w WooCommerce

Wszyscy jesteśmy wielkimi fanami WooCommerce. Konfiguracja i dostosowywanie są proste. Do pakietu dołączone są funkcje ułatwiające tworzenie dynamicznego i wydajnego sklepu e-commerce oraz zarządzanie nim.

Jednak tworzenie udanej strony e-commerce to coś więcej niż tylko dodawanie popularnych produktów. Wszystkie strony muszą być również atrakcyjne wizualnie. Im bardziej atrakcyjna wizualnie i przyjazna dla użytkownika witryna, tym większe prawdopodobieństwo przyciągnięcia większej liczby klientów.

• Konfiguracja wyskakującego okienka
• Możesz także tworzyć wyskakujące okienka za pomocą wizualnego kreatora w Elementorze
• Preferencje publikowania

Chociaż WooCommerce tworzy dla Ciebie koszyk na zakupy i stronę kasy podczas tworzenia witryny, Elementor czyni je bardziej atrakcyjnymi, dostosowując je.

Masz możliwość przeprojektowania ich lub rozpoczęcia od początku. Możesz powtórzyć ten proces dla wszystkich innych stron w swojej witrynie.

Tworząc ciepłą stronę z podziękowaniami i aktualizując strony Moje konto i Warunki świadczenia usług, możesz zdobyć serca i umysły swoich klientów.

Funkcja przeciągania i upuszczania Elementora w połączeniu z tym samouczkiem zapewni bezproblemowe tworzenie stron.

Po skonfigurowaniu sklepu wooCommerce możesz uczynić go bardziej atrakcyjnym dla odwiedzających i klientów. Dodanie wyskakujących okienek daje użytkownikowi kolejne wrażenie i nową chęć pozostania w Twoim sklepie.

 Aby utworzyć wyskakujące okienko, przejdź do Szablony > Wyskakujące okienka na pasku menu. Zostanie wyświetlona lista wszystkich wyskakujących okienek, a jeśli jeszcze ich nie utworzyłeś, zobaczysz coś podobnego do następującego:

Po kliknięciu Dodaj nowy POPUP (co jest dość oczywiste), zostaniesz poproszony o podanie jej nazwy, a następnie wybierz szablon z premade ex amp les wyświetlany. Dostępne są różne szablony do wielu celów; niektóre są odpowiednie do ogłoszeń, inne do promowania rabatu, inne są idealne do zachęcania użytkowników do zapisania się na coś. Istnieją nawet ex amp les ostrzeżenie dla użytkowników wykorzystania plików cookie i innych powiadomień PKBR. Jak tylko znajdziesz coś, co Ci się podoba, kliknij to, aby zobaczyć większy podgląd, a następnie naciśnij przycisk Wstaw.

Po kliknięciu tego przycisku zostaniesz przeniesiony do kreatora wyskakujących okienek w backendzie WordPress.

Jeśli pracowałeś z Elementorem w przeszłości, poczujesz się jak w domu dzięki interfejsowi, opcjom i sposobowi, w jaki wszystko jest dla Ciebie rozplanowane. Jest to zasadniczo ten sam proces, co tworzenie szablonów stron Elementora w WordPress.

Po prawej stronie ekranu znajduje się główne płótno, na którym wyświetlany jest podgląd tego, nad czym aktualnie pracujesz. Możesz edytować i dostosowywać każdy element indywidualnie, zaznaczając go i wybierając Edytuj > Edytuj elementy. Po zakończeniu zobaczysz elementy sterujące i preferencje wyświetlane na pasku bocznym po lewej stronie, wraz z opcją Opublikuj swoją pracę.

Konfiguracja wyskakującego okienka

 To wtedy powinieneś zobaczyć podgląd wyskakującego okienka – albo pustą planszę, albo wybrany szablon.

Ustawienia wyskakujące, zawsze otwarte domyślnie, pozwalają dostosować sposób działania samego wyskakującego płótna. Są to:

• To tutaj będziesz chciał spędzić najwięcej czasu, ponieważ możesz tam tworzyć różne typy wyskakujących okienek. Innymi słowy, dostosowując te ustawienia, będziesz mógł uzyskać następujące efekty:

• Wyskakujące okienka modalne to rodzaj okna modalnego.
• Wsuwki, paski powiadomień i tak dalej.

Ponadto możesz dostosować kilka innych ważnych ustawień.

W zakładce Ustawienia dostępne są następujące opcje :

• Zmień wysokość i szerokość obrazu.
• Zmień pionową lub poziomą orientację obiektu (dla ex amp le, można przymocować go do góry lub od dołu, aby utworzyć pasek powiadomień)
• Podejmij decyzję, czy chcesz używać nakładki (pozwala to na przykład na amp tła, gdy wyskakujące okienko jest aktywne)
• Wyłącz przycisk zamykania w przeglądarce.
• Dołącz animację wejścia.

Na karcie Styl możesz wykonywać następujące czynności :

• Możesz zmienić kolor tła, uczynić go gradientem lub użyć obrazu jako tła.
• Jeśli nakładka jest włączona, skonfiguruj ją.
• Jeśli masz włączony przycisk zamykania, musisz go skonfigurować.

Wreszcie, karta Zaawansowane zawiera kilka różnych ustawień importu, które umożliwiają wykonywanie takich czynności, jak:

• Wyświetl przycisk zamykania lub wyskakujące okienko automatycznie zamyka się po określonym czasie.
• Klikając nakładkę lub naciskając klawisz Escape, możesz uniemożliwić zamknięcie okna.

• Wyłącz możliwość przewijania strony w dół.
• Unikaj wielu wyskakujących okienek (jeśli kierujesz wiele wyskakujących okienek na tę samą stronę, zapobiegnie to zirytowaniu odwiedzających).

Aby zorientować się, jak te ustawienia wpłyną na wyskakujące okienko, oto jak wygląda zmiana pozycji w prawym dolnym rogu okna:

Zobacz, jak wyskakujące okienko jest teraz na stałe zamocowane w prawym dolnym rogu. Używając wyzwalacza przewijania w połączeniu z animacją wejścia, możesz uzyskać ładny, dyskretny efekt wsuwania.

Możesz także tworzyć wyskakujące okienka za pomocą wizualnego kreatora w Elementorze

Zaraz po ukończeniu podstawowych ustawień wyskakujących możesz zacząć projektować rzeczywistą zawartość wyskakującego okienka, przeciągając i upuszczając elementy do wizualnego interfejsu przeciągania i upuszczania.

Możesz użyć dowolnego widżetu Elementora, który zapewnia dużą kontrolę nad ostatecznym projektem. Widżet Formularz jest jedyną rzeczą, którą bezwzględnie musisz uwzględnić, ponieważ jest jedyną, która umożliwia utworzenie formularza zgody na pocztę e-mail.

Dzięki widżetowi Formularz masz pełną kontrolę nad polami, które chcesz zaoferować, a także nad tekstem i wyglądem przycisku przesyłania. Dla ex amp le:

Poza tym zdecydowanie radzę zapoznać się ze wszystkimi widżetami i opcjami projektowania Elementora.

Jak już wspomniano, masz dużą kontrolę nad wyglądem swojej witryny, a także masz dostęp do przydatnych widżetów, które mogą pomóc Ci zwiększyć współczynnik konwersji.

Preferencje publikowania

Kiedy będziesz zadowolony z tego, co stworzyłeś, będziesz chciał podzielić się tym ze światem. Po naciśnięciu przycisku OPUBLIKUJ otrzymasz serię pytań. Jako ilustracja:

Czy można określić warunki, na jakich ma się pojawiać wyskakujące okienko? Możesz wybrać strony, które chcesz uwzględnić lub wykluczyć z wyników wyszukiwania. Możesz mieć tyle warunków, ile chcesz.

Co zatem jest zdarzeniem, które powoduje pojawienie się wyskakującego okienka? Możesz wybrać, czy wyświetlać wyskakujące okienko natychmiast po załadowaniu strony, podczas przewijania lub gdy użytkownik przewija do określonego elementu, między innymi. Wszystkie te opcje mają swoje ustawienia, pozwalające na pełną personalizację.

Na koniec zobaczysz kilka zaawansowanych reguł, takich jak wyświetlanie wyskakującego okienka tylko powracającym odwiedzającym, wyświetlanie wyskakującego okienka tylko określoną liczbę razy lub być może wyświetlanie wyskakującego okienka tylko wtedy, gdy użytkownik jest skierowany do Twojej witryny z określonego URL. Jest jeszcze kilka. Te opcje mogą znacznie poprawić wrażenia użytkownika w wyskakującym okienku, umożliwiając zaprojektowanie go z prawdziwą integralnością i uwagą dla użytkowników.

Uzupełnij ustawienia w żądany sposób, a następnie kliknij ZAPISZ I ZAMKNIJ. Zostaniesz przeniesiony do amp obrazu tego, jak będzie wyglądało Twoje wyskakujące okienko po kliknięciu tego przycisku.

Wyskakujące okienka można dostosowywać, a także dodawać do nich zawartość dynamiczną.

Przenieś sprawy na wyższy poziom, dobrze? Do tego momentu wybraliśmy szablon i poprawiliśmy jedno lub dwa posiedzenia i to wszystko. Rozważ scenariusz, w którym chcemy jeszcze bardziej dostosować nasze wyskakujące okienko.

Wracamy do etapu DODAJ NOWE POPUP, gdzie możemy określić tytuł i ponownie wybrać szablon.

Następnie możemy go wybrać, dokonać niezbędnych zmian w podstawowych ustawieniach i ponownie nacisnąć OPUBLIKUJ.

Dobra, tutaj zaczyna się robić ciekawie. Możemy użyć Elementora, aby pobrać dynamiczne dane z naszej instalacji WordPress i wstawić je do samego wyskakującego okienka w naszym wyskakującym okienku. Możemy dołączyć takie informacje, jak nazwa użytkownika, tytuł strony i tak dalej.

Rozważmy następujący scenariusz: prowadzimy WooCommerce i chcemy poinformować użytkownika, że ​​na konkretny produkt, który aktualnie ogląda, dostępna jest zniżka. Aby rozpocząć, wybierz fragment tekstu z szablonu, a następnie kliknij Dynamiczny na pasku bocznym:

Mamy do wyboru szeroką gamę opcji, w tym informacje z samego posta, informacje z całej witryny, informacje o mediach, informacje o autorze, a nawet informacje WooCommerce. Wybierzemy tytuł produktu, który zostanie dodany do naszego bloku treści tekstowych w wyniku naszego wyboru.

Załóżmy, że szczegóły bazy danych nie są poprawnie pobierane. W takim przypadku można określić niektóre przed tekstem, niektóre po tekście i tekst zastępczy (jeśli szczegóły bazy danych nie są poprawnie pobierane).

Powtórzmy więc ten proces dla przycisku, który wyświetli cenę produktu. Możemy sformułować powyższy tekst jako KUP TERAZ ZA, aby zapewnić nam przekonujące wezwanie do działania:

Możemy nawet pójść o krok dalej i wykorzystać zdjęcie produktu jako tło samego wyskakującego okienka.

Po naciśnięciu OPUBLIKUJ ponownie otrzymujemy ustawienia publikowania, co pozwala nam określić, że chcemy, aby wyskakujące okienko pojawiało się tylko na stronach WooCommerce. Ustawimy licznik czasu na 15 sekund bezczynności, aby był wyzwalaczem. Oto jak się ostatecznie okazało:

Chociaż projekt można poprawić, widać, że wyświetlamy nazwę produktu, jego cenę oraz obraz produktu jako tło wyskakującego okienka. Znakomity!