Twórz wyskakujące okienka Elementora w WooCommerce

Wszyscy jesteśmy wielkimi fanami WooCommerce. Konfiguracja i dostosowanie jest proste. Pakiet zawiera funkcje ułatwiające tworzenie i zarządzanie dynamicznym i wydajnym sklepem e-commerce.

Jednak stworzenie udanej strony e-commerce to coś więcej niż tylko dodanie 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 okna wyskakującego
• Możesz także tworzyć wyskakujące okienka za pomocą narzędzia do tworzenia wizualizacji w Elementorze
• Preferencje publikowania

Chociaż WooCommerce tworzy dla Ciebie koszyk i stronę kasy podczas tworzenia witryny, Elementor zwiększa ich atrakcyjność, dostosowując je.

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

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

Funkcja przeciągania i upuszczania w Elementorze 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 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 żadnego nie utworzyłeś, zobaczysz coś podobnego do poniższego:

Kiedy już klikniesz DODAJ NOWE WYskakujące okienko (co jest dość oczywiste), zostaniesz poproszony o nadanie mu nazwy, a następnie wybranie szablonu z wyświetlonych gotowych amp . Dostępne są różne szablony do wielu celów; niektóre nadają się do ogłoszeń, inne do promowania rabatów, jeszcze inne idealnie nadają się do zachęcania użytkowników do zapisania się na coś. Istnieją nawet amp ostrzegania użytkowników o używaniu plików cookie lub innych powiadomień związanych z RODO. Gdy tylko znajdziesz coś, co Ci się podoba, kliknij na to, aby zobaczyć większy podgląd, a następnie naciśnij przycisk Wstaw.

Po kliknięciu tego przycisku zostaniesz przeniesiony do narzędzia do tworzenia wyskakujących okienek w zapleczu WordPress.

Jeśli w przeszłości pracowałeś z Elementorem, poczujesz się jak w domu dzięki interfejsowi, opcjom i sposobowi, w jaki wszystko jest dla Ciebie zorganizowane. Zasadniczo jest to 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 Edycja > Edytuj elementy. Kiedy skończysz, na pasku bocznym po lewej stronie zobaczysz elementy sterujące i preferencje wraz z opcją Opublikuj swoją pracę.

Konfiguracja okna wyskakującego

 W tym momencie powinieneś zobaczyć podgląd wyskakującego okienka – albo pustej planszy, albo wybranego szablonu.

Ustawienia wyskakującego okienka, zawsze otwarte domyślnie, pozwalają dostosować sposób działania samego wyskakującego obszaru roboczego. Są one następujące:

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

• Modalne wyskakujące okienka to rodzaj okna modalnego.
• Wsuwane elementy, paski powiadomień i tak dalej.

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

Ustawienia dostępne są następujące opcje :

• Zmień wysokość i szerokość obrazu.
• Zmień pionową lub poziomą orientację obiektu (na amp możesz ustawić go na górze lub na dole, aby utworzyć pasek powiadomień)
• Podejmij decyzję, czy chcesz zastosować nakładkę (pozwala to amp . wyszarzać tło, gdy wyskakujące okienko jest aktywne)
• Wyłącz przycisk zamykania w przeglądarce.
• Dołącz animację wejścia.

Styl możesz wykonać następujące czynności :

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

Na koniec karta Zaawansowane zawiera różne ustawienia importu, które umożliwiają wykonanie następujących czynności:

• Wyświetl przycisk zamykania lub pozwól, aby wyskakujące okienko zamykało się automatycznie po upływie określonego czasu.
• Klikając na nakładkę lub naciskając klawisz Escape, możesz zapobiec zamknięciu 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 irytowaniu odwiedzających).

Aby dać Ci wyobrażenie o tym, jak te ustawienia wpłyną na wyskakujące okienko, oto jak to będzie wyglądać po zmianie pozycji w prawym dolnym rogu okna:

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

Możesz także tworzyć wyskakujące okienka za pomocą narzędzia do tworzenia wizualizacji w Elementorze

Po ukończeniu podstawowych ustawień wyskakujących okienek możesz rozpocząć projektowanie rzeczywistej zawartości wyskakującego okienka, przeciągając i upuszczając elementy do wizualnego interfejsu „przeciągnij i upuść”.

Możesz użyć dowolnego widżetu Elementora, co daje dużą kontrolę nad ostatecznym projektem. Widget Formularz to jedyna rzecz, którą koniecznie musisz uwzględnić, ponieważ jako jedyny umożliwia utworzenie formularza zgody na 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. Na amp :

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 PUBLIKUJ pojawi się seria pytań. Jako ilustracja:

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

Jakie zatem zdarzenie powoduje wyświetlenie wyskakującego okienka? Możesz między innymi wybrać, czy wyskakujące okienko ma być wyświetlane natychmiast po załadowaniu strony, podczas przewijania lub gdy użytkownik przewinie do określonego elementu. Wszystkie te opcje mają swoje ustawienia, co pozwala na pełną personalizację.

Na koniec zobaczysz kilka zaawansowanych zasad, takich jak pokazywanie wyskakującego okienka tylko powracającym użytkownikom, pokazywanie wyskakującego okienka tylko określoną liczbę razy lub być może pokazywanie wyskakującego okienka tylko wtedy, gdy użytkownik zostanie przekierowany do Twojej witryny z określonego adresu Adres URL. Jest ich jeszcze kilka. Opcje te mogą znacznie poprawić komfort korzystania z wyskakującego okienka, umożliwiając zaprojektowanie go z prawdziwą integralnością i uwzględnieniem użytkowników.

Dokończ ustawienia w żądany sposób, a następnie kliknij ZAPISZ I ZAMKNIJ. Po kliknięciu tego przycisku zostaniesz przeniesiony do widoku amp okienka.

Wyskakujące okienka można dostosowywać i dodawać do nich dynamiczną zawartość.

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

Wracamy do etapu DODAJ NOWE POPUP-y, gdzie możemy jeszcze raz podać tytuł i wybrać szablon.

Następnie możemy go wybrać, wprowadzić niezbędne zmiany w podstawowych ustawieniach i ponownie kliknąć PUBLIKUJ.

OK, tutaj zaczyna się robić ciekawie. Możemy użyć Elementora do pobrania dynamicznych danych z naszej instalacji WordPress i wstawienia ich do samego wyskakującego okienka w naszym wyskakującym okienku. Możemy uwzględnić takie informacje, jak nazwa użytkownika, tytuł strony i tak dalej.

Rozważmy następujący scenariusz: korzystamy z WooCommerce i chcemy poinformować użytkownika, że ​​dostępny jest rabat na konkretny produkt, który aktualnie przegląda. Aby rozpocząć, wybierz sekcję tekstu z szablonu, a następnie kliknij Dynamiczny na pasku bocznym:

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

Załóżmy, że szczegóły bazy danych nie zostały poprawnie pobrane. W takim przypadku możliwe jest określenie niektórych przed tekstem, innych po tekście i tekstu zastępczego (jeśli szczegóły bazy danych nie zostaną poprawnie pobrane).

Powtórzmy więc ten proces dla przycisku, który wyświetli cenę produktu. Możemy sformułować powyższy tekst jako KUP TERAZ, 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.

Kiedy naciśniemy PUBLIKUJ, ponownie pojawią się ustawienia publikowania, co pozwoli nam określić, czy chcemy, aby wyskakujące okienko pojawiało się tylko na stronach WooCommerce. Ustawimy licznik czasu na 15 sekund bezczynności, który będzie wyzwalaczem. Oto jak to ostatecznie wyszło:

Chociaż projekt można by ulepszyć, widać, że wyświetlamy nazwę produktu, jego cenę i zdjęcie produktu jako tło wyskakującego okienka. Genialny!