Wyróżnienie wtyczki Divi: łatwe wsuwanie

Easy Slide-Ins to wtyczka innej firmy do Divi i Extra, która umożliwia tworzenie slajdów (i wyskakujących okienek) za pomocą konstruktora Divi. Wsuwane mogą wyświetlać wszystko, co można zbudować za pomocą Divi Builder. Wyzwalaj wsuwki za pomocą procentu przewijania, zamiaru wyjścia, przycisku z wieloma lokalizacjami i klasy CSS. Zawiera dożywotnie aktualizacje i wersje demonstracyjne.

W tym artykule przyjrzymy się Easy Slide-Ins i zobaczymy, co potrafi i jest łatwy w użyciu. Przyjrzymy się również kilku demom dołączonym do wtyczki. Wtyczka jest dostępna na stronie dewelopera.

Instalowanie łatwych wsuwanych

Najpierw rozpakuj plik. Wewnątrz folderu znajdziesz dema, plik z linkiem do dokumentacji oraz wtyczkę Easy Slide-Ins.

Prześlij i aktywuj wtyczkę jak zwykle.

Do pulpitu nawigacyjnego dodano nowe menu o nazwie Easy Slide-Ins. Kliknij to menu i wprowadź klucz licencyjny.

Aktywacja licencji dodaje dwa elementy menu (Wszystkie elementy i Dodaj nowy), w których możesz zobaczyć swoje wjazdy i utworzyć nowe wjazdy.

Tworzenie nowej wsuwki

Kliknięcie w celu dodania nowego slajdu otwiera edytor, w którym możesz użyć Divi Builder do utworzenia slajdu.

Zawiera również wiele ustawień. Są one umieszczone pod Divi Builder. Wybierz pozycję od lewej, prawej, lewej górnej, prawej górnej, lewej dolnej, prawej dolnej, górnej, dolnej, lewej lub prawej. Ustaw automatyczne wyzwalanie przy przewijaniu i wybierz ilość przewijania. Możesz również ustawić go tak, aby otwierał się w zamiarze wyjścia. Ustaw kolor tła, cień pudełka i szerokość wsunięcia.

Pokaż tytuł i wprowadź tekst, który ma się pokazać. Wybierz kolor tła i tekstu tytułu, a także rodzinę czcionek, rozmiar i grubość. Ustaw zaokrąglenie narożnika, wysokość etykiety i szerokość etykiety. Pokaż ikonę zamykającą i wybierz kolory tła i ikony oraz rozmiar ikony.

Sterowanie jest intuicyjne w użyciu i zrozumieniu. Istnieje wystarczająca liczba dostosowań, aby styl etykiety pasował do Twojej witryny i kontrolować działanie wsuwanych elementów.

Inne funkcje są dodawane lub usuwane w zależności od wybranych opcji. Wybrałem Box Shadow i teraz udostępnia opcje dla pozycji poziomej i pionowej, siły rozmycia i rozsunięcia oraz koloru.

Karta Zaawansowane pozwala wybrać strony, na których slajd może być wyświetlany. Możesz wybrać wszystkie strony, poszczególne strony i wszystkie posty. Na niektórych urządzeniach możesz ukryć wsuwaną kartę.

Karta Pola niestandardowe umożliwia dodawanie pól niestandardowych, tak jak w przypadku każdej strony lub posta.

Proste przykłady wsuwania

To jest strona kontaktowa z układu zarządzania ryzykiem. Używam tego do zbudowania wsuwki, aby projekt pasował do układu. Ustawiłem, aby nie wyświetlać paska bocznego ani nawigacji punktowej. Możesz wyświetlić podgląd jak zwykłą stronę. Po zaprojektowaniu slajdu opublikuj jak zwykle.

Włączyłem etykietę w ustawieniach i ustawiłem tło na czarne, a tekst na biały. Zachowałem domyślny tekst (Skontaktuj się z nami). Ustawiłem wyświetlanie w prawym górnym rogu. Używana jest domyślna wysokość, ale można ją łatwo zmienić.

Kliknięcie etykiety otwiera slajd, który wyświetla się na ekranie z formularzem kontaktowym z pakietu układu zarządzania ryzykiem. Ponowne kliknięcie przycisku Skontaktuj się z nami zamyka suwak. Mam szerokość wsuwania ustawioną na 500 pikseli, wysokość etykiety na 150, a szerokość etykiety na 60.

Przykład pokazuje cień pudełka. Zmieniłem lokalizację na prawy pasek boczny, na którym wyświetlany jest przycisk zamykania. Zmieniłem kolory etykiety i przycisku zamykania oraz zaokrągliłem rogi etykiety. Ustawiłem też szerokość wsuwania na 600 pikseli.

W tym przypadku przeniosłem etykietę na górną pozycję paska. Użyłem kolorów z układu i zmieniłem szerokość na 122 piksele i wysokość na 40 pikseli. Jak widać na tym obrazku, etykieta pozostaje na miejscu na zwoju.

Otwiera się na pełnym ekranie i zawiera przycisk zamykania.

W tym przypadku dodałem nowy slajd do lewego paska bocznego. Stylizowałem go tak, aby pasował do witryny i pozostawiłem kwadratowe rogi etykiety. Używam 50% górnego marginesu etykiety, co powoduje umieszczenie górnej części etykiety na środku wysokości mojego ekranu.

Otwiera się z lewej strony. Dałem mu szerokość 1000 pikseli, więc zajmuje dużo mojego ekranu. Wysuwany kontakt jest nadal wyświetlany u góry, mimo że menu jest objęte wysuwanym biuletynem.

Wsuwki zapewniają klasę wyzwalania przycisków. Możesz użyć tego za pomocą przycisków, aby otworzyć wsuwkę.

Skopiuj klasę i wklej ją w polu CSS Class przycisku.

Teraz kliknięcie przycisku otwiera wsuwkę. Nigdzie nie musi być etykiet, ale wsunie się od kierunku, w którym umieściłeś wsuwkę. Ten został umieszczony po lewej stronie, więc pochodzi z lewej. Ustawiłem szerokość na 1000 pikseli.

Łatwe wsuwane wersje demonstracyjne

Plik do pobrania zawiera 12 wersji demonstracyjnych. Są to gotowe układy (pliki JSON), które można przesłać do biblioteki Divi. Zaimportuj je do biblioteki Divi jak zwykłe układy. Zawierają one stylizowane moduły, ale musisz skonfigurować ustawienia projektu. Oto kilka z nich.

To jest wiadomość e-mail dotycząca odbioru z zamiarem wyjścia. Zawiera kilka modułów tekstowych, formularz kontaktowy i moduł obrazu.

Oto jak to wygląda na ekranie. Zostawiłem tutaj wszystko domyślnie, więc przycisk nadal pokazuje oryginalny tekst, lokalizację i styl.

To jest e-mail kolekcji z intencją przewijania. Zawiera obraz tła, dwa moduły tekstowe i moduł e-mail.

Oto jak wygląda na stronie przy użyciu gotowych ustawień. Pokazuje to, jak responsywny jest wsuwany (co jest dokładnie tym, czego oczekiwaliśmy, ponieważ pokazuje układ Divi). Jeśli chcesz pokazać więcej obrazu, po prostu rozszerz suwak.

Ten jest przewodnikiem dla odwiedzających. Zawiera moduł kodu (dla Google Maps), kilka notek, tekst i formularz kontaktowy.

Oto jak wygląda na stronie przy ustawieniach domyślnych.

Ten to Promocja z etykietą. Zawiera moduł tekstowy, kilka tabel cenowych i przycisk.

Oto jak to wygląda na ekranie. Ustawiłem go na 800 pikseli, aby po wsunięciu pokazywał pełną szerokość. Usunąłem etykietę i ustawiłem ją tak, aby wyświetlała się, gdy przewijanie strony osiągnie 60%.

Oto ten sam układ, gdy oglądasz go z Extra. Cieszę się, że działa świetnie zarówno z Divi, jak i Extra.

Łatwa cena i dokumentacja wsuwanych

Easy Slide-Ins jest dostępny na stronie dewelopera. Posiada dwie opcje zakupu:

• Pojedyncza strona – 27 USD
• Nieograniczone witryny – 97

Obie licencje obejmują wersje demonstracyjne i dożywotnie aktualizacje.

Dokumentacja jest dostępna na stronie dokumentacji i wsparcia dewelopera. Strona zawiera opis każdego z punktów wraz z obrazkami, aby je zademonstrować. Strona zawiera również łącze do pomocy e-mail.

Końcowe myśli

Easy Slide-Ins ułatwia tworzenie slajdów i wyskakujących okienek dla Divi i Extra. Uważam, że jest łatwy w użyciu. Nigdy nie potrzebowałem dokumentacji, ale jest tam w razie potrzeby. To ciekawy sposób na wprowadzenie ukrytych elementów strony. Ponieważ wszystko może być użyte w slide-in, możesz wyświetlać formularze kontaktowe, zapisy do newslettera, wezwania do działania, filmy, moduły sklepu itp. Może to być pojedynczy moduł lub układ całej strony.

Podoba mi się, że ma wiele opcji wyzwalania. Zamiar wyjścia i automatyczne wyzwalanie sprawiają, że jest to dobry wybór do tworzenia wyskakujących okienek e-mail i wezwania do działania. Otwarcie przez kliknięcie etykiety to dobry sposób na dodanie ich do wielu lokalizacji na swoich stronach. Podoba mi się, że możesz dodać wiele slajdów na jednej stronie i że możesz określić, na których stronach są wyświetlane. Dodanie klasy CSS do przycisków to świetny sposób na ujawnienie informacji, gdy odwiedzający zdecyduje się je zobaczyć.

Możesz zbudować slide-in z front-endu, ale nie wiedziałem, jak uzyskać dostęp do ustawień. Bez tych ustawień nie mogłem przenieść etykiet i zobaczyć ich lokalizacji w czasie rzeczywistym. Aby je zobaczyć, musiałem załadować stronę. Nadal nie było to trudne w użyciu, ale było trochę zgadywania. To jest tak mało ważne, że nie powstrzymywałbym mnie przed używaniem lub polecaniem go.

Jeśli szukasz prostego i intuicyjnego sposobu tworzenia wsuwek za pomocą Divi Builder, warto zajrzeć do Easy Slide-Ins.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś Easy Slide-Ins dla Divi? Daj nam znać, co o tym myślisz w komentarzach.

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