Wyróżnienie wtyczki Divi: moduł karuzeli Divi

DIVI Carousel Module to wtyczka innej firmy dla Divi i Extra, która dodaje zaawansowany suwak karuzeli do Divi Builder. Masz kontrolę nad prawie wszystkim w module, aby stworzyć prawie każdy rodzaj karuzeli, której potrzebujesz do swojej witryny Divi lub Extra. W tym artykule przyjrzymy się modułowi Divi Carousel i zobaczymy, co potrafi i jak łatwy w użyciu.

Instalacja i aktywacja modułu karuzeli Divi

Prześlij i aktywuj wtyczkę jak zwykle. Do pulpitu nawigacyjnego dodawany jest nowy element menu o nazwie DiviGear. Przejdź do tego menu i dodaj swój klucz licencyjny.

Moduł karuzeli Divi w Divi Builder

Do Divi Buildera dodano nowy moduł o nazwie Divi Carousel.

Moduł zawiera obszar do dodawania nowych pozycji. Karta Zawartość zawiera ustawienia suwaka, które pozwalają wybrać liczbę slajdów do wyświetlenia w zależności od urządzenia, z którego korzysta użytkownik, włączyć multislajd, ustawić czas przejścia itp. Włącz środkowy slajd, pętlę, autoodtwarzanie, nawigację strzałką i nawigację punktową . Ustaw odstępy między elementami, włącz równą wysokość i wyrównanie w pionie. Zaawansowane ustawienia pozwalają wybrać efekt suwaka.

Karta Projekt zawiera ustawienia nakładki, obrazu (szerokość), obramowania obrazu, tytułu i tekstu podstawowego, koloru, odstępów i obramowania. Obejmuje to dostosowywanie kolorów zarówno dla nawigacji strzałkami, jak i kropkami.

Karta Zaawansowane zawiera wszystkie pola CSS, których można oczekiwać, oraz ustawienia widoczności i przejścia. Dodaje pola CSS dla tytułu, treści, obrazu i przycisku.

Ustawienia przedmiotów karuzeli zawierają również trzy zakładki. Te ustawienia zastępują wszystkie ustawienia w ustawieniach modułu głównego. Karta Treść zawiera obszar na główną treść, tytuł i link do obrazu, ustawienia przycisków, ustawienia obrazu i tło.

Karta Projekt zawiera ustawienia tekstu tytułu, stylu zawartości (tekst podstawowy), przycisku, odstępów i cienia pola. Są to standardowe ustawienia projektowe, które można zobaczyć w większości modułów Divi. Zakładka Zaawansowane to podstawowe ustawienia, które można znaleźć w większości modułów.

Jako ustawienia obrazu możesz użyć obrazów lub ikon.

Dodaj tyle slajdów, ile chcesz. Slajdy są wyświetlane obok siebie zgodnie z liczbą, którą ustawiono do wyświetlania. Ten jest ustawiony na wyświetlanie czterech. Oczywiście możesz je przeciągać i upuszczać w dowolnej kolejności.

W tym dostosowałem odstępy między elementami do 100. Główną różnicą, która pokazuje mój przykład, jest tekst. Teraz wyświetla mniej słów w wierszu.

Ten wykorzystuje nawigację strzałką. Ustawiłem go tak, aby wyświetlał się na zewnątrz slajdu. Ustawiłem odstępy elementów na 1. Jest to bardziej oczywiste, jeśli użyjesz kolorów tła.

Ustawiłem ten, aby pokazywał dwa slajdy. Pokazuje nawigację punktową.

Oto spojrzenie na ustawienia zaawansowane. Ustawiłem efekt suwaka na Coverflow. Otwiera to opcję obracania i cieniowania. Ta funkcja pokazuje, co naprawdę odróżnia moduł od standardowego suwaka. To są ustawienia domyślne.

Teraz ustawiłem obrót na 100. Slajdy są przechylone jeszcze bardziej trójwymiarowo w lewą stronę, z dala od ekranu.

Oto ten sam obrót, ale bez cienia Coverflow.

Przykłady modułów karuzeli Divi

Jednym z moich ulubionych zastosowań karuzeli jest pokazywanie logo klientów lub produktów. W tym przykładzie dodałem moduł do strony portfolio strony docelowej dewelopera aplikacji. Ustawiłem go tak, aby wyświetlał 3 logo firmy, zapętlał przewijanie i automatycznie odtwarzał, aby odwiedzający nie musiał się po nich poruszać.

Działa również, aby pokazać projekty, nad którymi pracowałeś. W tym przypadku dodałem kilka projektów z przyciskami, aby odwiedzający mógł zobaczyć projekt. Zmieniłem kolor tekstu przycisku na biały i dodałem cień do przycisku. Uczyniłem strzałki białymi i ustawiłem krycie ich tła na prawie przezroczyste.

Tutaj dodałem tło do slajdu, uczyniłem go półprzezroczystym i dodałem cień pudełka. Odstępy obejmują dopełnienie przycisku, obrazu i zawartości. Dodałem odstępy do przycisku i obrazu.

Ten używa efektu suwaka Przepełnienie. To są ustawienia domyślne.

W tym przypadku ustawiłem go, aby wyśrodkować slajd. W przypadku użycia z ustawieniami przepełnienia wyśrodkowuje środkowy slajd i ustawia slajdy po obu stronach tak, aby były skierowane do siebie. Jest ustawiony na wyświetlanie czterech slajdów.

Ten jest ustawiony na wyświetlanie 3 slajdów. Ustawiłem Obrót na 80.

Ten jest ustawiony na wyświetlanie 6 slajdów. Obrót jest ustawiony na wartość domyślną (50).

Ten pokazuje 6 slajdów bez włączonego slajdu centralnego lub przepełnienia.

Ten pokazuje 6 z włączonym środkowym slajdem.

W tym przykładzie używam modułu jako suwaka menu żywności. Dodając obraz, tekst i przycisk, faktycznie tworzy suwak z notatkami. Obrazy są ustawione na 100 szerokości. Dodałem nakładkę, przycisk do zakupu każdego przedmiotu (przycisk prowadzi do strony produktu dla przedmiotu) i nawigację punktową. Stylizowałem nakładkę i ikonę nakładki, a także kropki zarówno dla aktywnych, jak i nieaktywnych slajdów. Idealnie pasuje do układu Coffee.

W tym przypadku dodałem nawigację strzałką i stylizowałem ją tak, aby pasowała do przycisków. Mam to do pokazania strzałek po najechaniu. Możesz ustawić strzałki wewnątrz lub na zewnątrz suwaka i zmienić ich kolor. Nie możesz zmienić ich rozmiaru w ustawieniach modułu.

Ten wykorzystuje efekt Coverflow. Najeżdżam na lewy slajd, aby pokazać nakładkę i strzałki.

W tym przypadku dodałem tło i cień pudełka tylko do jednego ze slajdów. Można to wykorzystać do pokazania, co jest w sprzedaży lub wyróżnienia najlepszej oferty.

Do tego używam tylko ikon. Umieściłem moduł obok zestawu modułów z notatkami i ustawiłem 6 linków do mediów społecznościowych. Są stylizowane tak, aby pasowały do ​​notek. Kliknięcie ikony otwiera sieć społecznościową. Ustawiłem go tak, aby przesuwał się co sekundę automatycznie.

Pokazywanie wielu slajdów odcina część ikony, co zapewnia dobry efekt wizualny podczas animacji suwaka.

W tym przykładzie chciałem zbudować prosty suwak tabeli cen. Uprościłem ceny z pakietu układu pola golfowego.

Teraz dodałem cień do pudełka. Na początku nie byłem w stanie ustawić pionowego cienia pod slajdem. Wtedy zdałem sobie sprawę, że slajdy dotykają boków pojemnika modułu. Dodałem dopełnienie modułów, a następnie mogłem dodać cienie skrzynek ze wszystkich stron slajdów.

Możesz także dostosować dopełnienie przycisku, obrazu i zawartości dla każdego slajdu osobno. W tym przykładzie dostosowuję dopełnienie slajdu po lewej stronie.

Dodałem strzałki i wystylizowałem je, aby pasowały do ​​elementów w układzie.

W tym przykładzie dodałem obrazy, zmieniłem cień pudełka i dodałem trochę więcej dopełnienia treści, aby cień pudełka był widoczny w pełni. Przeniosłem też strzałki na zewnątrz slajdów.

Teraz dodałem przycisk. Dostosowałem style przycisków, w tym kolory, promień obramowania, rozmiar tekstu i dodałem cień pudełka, który pasuje do slajdów.

Oczywiście, ponieważ moduł zawiera obszar treści, możesz dodać dowolny rodzaj treści, w tym multimedia. Dodałem obrazy pasujące do układu. Cała treść znajduje się pod tytułem. Obrazy wyglądają świetnie w tej lokalizacji.

Oto jak wygląda moduł w układzie pola golfowego. Oryginalny układ miał wiele funkcji cenowych. Korzystając z modułu Divi Carousel, wszystkie ceny są nadal dostępne, ale są wyświetlane na slajdach. Wygląda na to, że należy do tego układu.

Świetnie działa również z Extra. W tym przykładzie ustawiłem stronę tak, aby nie wyświetlała paska bocznego.

Oto jak to wygląda z paskiem bocznym (chociaż nie dodałem żadnych widżetów do paska bocznego, rozmiar jest taki sam). Widać tutaj, że moduł jest responsywny.

Cena modułu karuzeli Divi

Moduł Divi Carousel jest dostępny na stronie dewelopera. Dostępne są dwie opcje:

• Pojedyncza strona – 15 .$
• Nielimitowane strony – 29

Dokumentacja i wsparcie modułu karuzeli Divi

Dokumentacja jest dostępna w menu panelu DiviGear. Wybierz kartę Dokumentacja. Zawiera łącza do 4-minutowego przewodnika wideo na kanale DiviGear na YouTube. Wsparcie w zakresie biletów jest zapewniane przez Freshdesk.

Końcowe myśli

Moduł karuzeli Divi to łatwy sposób na dodanie suwaka karuzeli do Divi Builder. Jest intuicyjny i ma więcej dostosowań, niż się spodziewałem. Kilka razy nie mogłem poprawnie sklonować slajdu, ale to mógł być problem z mojej strony. Pamiętaj, aby nadać każdemu slajdowi etykietę administratora, w przeciwnym razie wyświetli się nazwa elementu w module, co utrudni ich odróżnienie.

Podoba mi się, że ma osobno obrazy, treść i przyciski. Pozwala to na tworzenie kart, notatek, obrazów, tekstu, pokazywanie ikon lub wszystkiego, co chcesz pokazać w suwaku. Możesz dodać obraz na górze suwaka i nadal mieć możliwość dodania większej ilości do obszaru zawartości.

Divi Carousel Module to doskonały suwak karuzeli. Jest dostępny na stronie dewelopera oraz na rynkach Divi.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś moduł Divi Carousel? Daj nam znać, co o tym myślisz w komentarzach poniżej.

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