Wyróżnienie wtyczki Divi: proste rozwiązanie nakładki

Simple Overlay Solution to wtyczka innej firmy do Divi, która ułatwia tworzenie pełnoekranowych nakładek, wyskakujących okienek i mega menu za pomocą Divi Builder. Dodaj wiele nakładek do dowolnej strony. Wybierz między kliknięciem lub automatycznym wyzwalaczem opóźnienia czasowego, jasnym lub ciemnym programem ładującym oraz jasnym lub ciemnym tłem. Stylizuj przycisk zamykania lub stwórz własne tło i przyciski za pomocą Divi Builder. Każda nakładka ma 30-dniowy plik cookie.

Proste rozwiązanie nakładki

Prześlij i aktywuj wtyczkę jak zwykle. Następnie musisz aktywować licencję. W menu pulpitu przejdź do Ustawienia > Aktywacja Divi SOS i wprowadź swój klucz API oraz adres e-mail.

Importuj próbki SOS

Wtyczka SOS zawiera zestaw wersji demonstracyjnych w postaci pliku JSON, który można zaimportować do biblioteki SOS. Najpierw rozpakuj pobrany plik, aby uzyskać dostęp do pliku JSON. Są świetne na początek.

W menu pulpitu wybierz Divi > SOS . Wybierz opcję Importuj i eksportuj.

Zaimportuj plik JSON jak każdy układ.

Masz teraz 5 dem w bibliotece SOS. Dema można zobaczyć na stronie dewelopera.

Tworzenie układów SOS

Układy SOS są również tworzone w bibliotece SOS. Przejdź do biblioteki i kliknij Dodaj nowy .

Nazwij układ czymś, co ma dla Ciebie sens. Wybierz Układ jako Typ układu.

Wybierz Układy SOS dla kategorii.

Wybrałem gotowy układ, a następnie wybrałem stronę Kontakt z pakietu układów Resort. Po prawej stronie (lub na dole, jeśli przeglądasz w trybie wizualnym) znajdują się ustawienia układu. Daje to kod HREF układu, dzięki czemu można go uruchomić na dowolnej stronie (w dowolnym miejscu, w którym można podać adres URL). To jest link, którego będziesz używać do przycisków, tekstu itp., aby uruchomić nakładkę.

Możesz również ustawić automatyczne wyświetlanie (otworzy to ustawienie czasu i włączy plik cookie, aby wiedział, że odwiedzający widział nakładkę lub wyskakujące okienko). Ustaw przejście na zanikanie, przesuwanie lub brak. Wybierz jasne, ciemne lub bez tła. Wybierz jasny lub ciemny kolor ładowarki. Wybierz, czy chcesz pokazać przycisk zamykania. Możesz zmienić styl przycisku i jego tła.

Ładowarka może być jasna lub ciemna. Oto ciemna ładowarka na jasnym tle.

Przykładowe nakładki SOS

Tworzę nakładkę, która pokaże informacje o rezerwacji, gdy odwiedzający kliknie przycisk Zarezerwuj swój wyjazd . Dodaj link do adresu URL przycisku, aby uruchomić nakładkę.

Ustawiłem tło sekcji na przezroczyste, wybrałem jasne tło w ustawieniach SOS i dostosowałem układ tak, aby używał tylko jednej z sekcji. Kliknięcie przycisku Zarezerwuj swój wyjazd otwiera sekcję rezerwacji pobytu. Tło zawiera białą nakładkę. Dodałem również przycisk zamykania i stylizowałem go, aby pasował do układu. Układ jest umieszczony w górnej części ekranu i zajmuje całą szerokość. Można to dostosować za pomocą wyściółki.

Dodałem trochę wyściółki na górze sekcji. Wyłączyłem również tło, aby móc nim sterować za pomocą Divi Builder.

W tym przypadku korzystam z formularza kontaktowego z tego samego układu. Tym razem dodałem cień w dolnym wierszu, aby wyróżniał się z tła nakładki.

Dodałem link do przycisku na tej samej stronie co pierwsza nakładka (możesz dodać tyle ile chcesz). Ten otwiera formularz kontaktowy po kliknięciu przycisku Wyślij do nas .

Wynik wygląda interesująco. Nie dodałem do tego przycisku zamykającego. Odwiedzający może kliknąć w dowolnym miejscu poza formularzem, aby zamknąć nakładkę. Dodałem tło do wiersza i ustawiłem przezroczystość tak, aby prześwitowało tylko trochę tła.

Ten wykorzystuje sekcję z layoutu firmy inwestycyjnej. Chcę utworzyć wyskakujące okienko z wezwaniem do działania. Ustawiłem go tak, aby wyświetlał się automatycznie z opóźnieniem 1000 milisekund. Podczas automatycznego wyświetlania nie musisz nigdzie dodawać linku. Automatycznie pokazuje się na każdej stronie. Ustawiłem również plik cookie, aby wyświetlał wyskakujące okienko tylko raz na 30 dni.

Wyskakujące okienko pokazuje 1 sekundę po załadowaniu strony. Spowoduje to utworzenie CTA jako wyskakującego okienka, które będzie wyświetlane tylko raz na 30 dni. Nie widać tego na tym obrazku, ale dodałem mu również tło paralaksy, po prostu dlatego. Dzięki temu możesz być tak kreatywny w przypadku wyskakujących okienek, jak w przypadku dowolnego projektu strony.

Przenoszę opcję zamykania z przycisku w prawym górnym rogu do przycisku utworzonego za pomocą Divi Builder. Sklonowałem przycisk z układu, zmieniłem tekst i dodałem link zamykający do adresu URL.

Rezultatem jest czysty projekt, który świetnie sprawdza się jako CTA.

Wróciłem do projektu i dodałem nowe tło oraz przycisk otwierający kolejną stronę.

W tym celu stworzyłem wyskakujące okienko newslettera oparte na układzie Esports. Ustawiłem wyskakujące okienko, aby otwierało się automatycznie po 30 sekundach. Tło jest ustawione na ciemne, a program ładujący na jasny. Zamieszczę również przycisk zamykający wykorzystujący kolory z layoutu.

Wyskakujące okienko subskrypcji wygląda świetnie i idealnie pasuje do projektu witryny, ponieważ w rzeczywistości pochodzi z projektu witryny. Podoba mi się, że może używać zwykłych układów Divi do tworzenia wyskakujących okienek.

Mega menu

Możesz także tworzyć mega menu za pomocą SOS. Utwórz łącze niestandardowe jako element menu, a następnie dodaj łącze nakładki do adresu URL elementu menu.

Dodałem nakładkę do linku Informacje w moim menu rozwijanym. Możesz mieć inną nakładkę dla każdego łącza w menu, jeśli chcesz, i może to być wszystko, co możesz zbudować za pomocą Divi.

Cena prostego rozwiązania nakładki

Istnieją dwie licencje na SOS. Oba mają jednorazową opłatę i obejmują dożywotnie aktualizacje.

• 1 witryna internetowa i 1 witryna deweloperska – 25 . USD
• Nieograniczone strony internetowe – 45

Możesz kupić SOS ze strony dewelopera.

Końcowe myśli

Proste rozwiązanie nakładki jest łatwe w użyciu. Sterowanie proste i intuicyjne. Budowanie nakładek jest prawie takie samo jak budowanie strony w Divi. Jeśli możesz użyć Divi Builder, możesz użyć SOS. Strony Divi ładują się szybko, ponieważ nakładki nie są wstępnie załadowane. Nakładki i wyskakujące okienka również ładują się szybko.

Podoba mi się, że ma ciasteczko. Daje to pewną kontrolę nad wyskakującymi okienkami, dzięki czemu ten sam użytkownik nie będzie musiał oglądać oferty za każdym razem, gdy odwiedza witrynę. Jestem pewien, że nie byłoby to łatwe, ale chciałbym zobaczyć kilka opcji plików cookie. Na przykład możesz ustawić wyświetlanie raz w tygodniu, raz dziennie, dwa razy w miesiącu itd. Przydałoby się też kilka opcji programu ładującego. Może różne opcje i dostosowania kolorów. Chciałbym też mieć możliwość wyłączenia strony z wyświetlania automatycznych nakładek.

Podoba mi się, że zwykły przycisk Divi może być użyty do przycisku zamykania. Otwiera to wiele możliwości projektowania i nie ograniczasz się do używania wbudowanego przycisku. Jeśli chcesz użyć przycisku, ma on wiele opcji kolorów.

SOS to łatwa do polecenia wtyczka. Jeśli interesuje Cię łatwy sposób tworzenia nakładek, wyskakujących okienek i mega menu za pomocą Divi Builder, Simple Overlay Solution (SOS) może być wtyczką, której potrzebujesz.

Chcemy usłyszeć od Ciebie. Czy próbowałeś wtyczki Simple Overlay Solution do tworzenia nakładek i wyskakujących okienek? Daj nam znać, co o tym myślisz w komentarzach.

Polecane zdjęcie za pośrednictwem Bakhtiar Zein / shutterstock.com