Wszystko, co musisz wiedzieć o module grupy Divi 5

Jeden z najnowszych modułów Divi 5, grupa karuzeli, jest tutaj, aby ułatwić tworzenie oszałamiających wizualnie karuzeli i animacji dla Twojej witryny Divi. Ten potężny dodatek pozwala projektantom stron internetowych tworzyć angażujące karuzele witryny bez potrzebnych wtyczek innych firm lub niestandardowych CSS. Niezależnie od tego, czy budujesz eleganckie portfolio, sklep e-commerce, czy blog, moduł karuzeli grupy odblokowuje nowe poziomy kreatywności.

W tym poście omówimy wszystko, co musisz wiedzieć o module grupy karuzelowej, wraz z przykładami i przewodnikiem krok po kroku, jak z niego korzystać. Zanurzmy się!

Jaki jest moduł grupy karuzelowej?

Moduł karuzeli grupy w Divi 5 pozwala tworzyć dynamiczne, przyciągające wzrok karuze i suwaki, które mogą dodać odrobinę ruchu i interaktywności do Twojej witryny. Niezależnie od tego, czy prezentujesz elementy portfolio, członków zespołu, czy produkty, ten wszechstronny moduł pozwala budować praktycznie każdy rodzaj karuzeli, w tym dynamicznie te, które dynamicznie ciągną zawartość.

Każdy slajd to puste płótno, umożliwiające dodanie dowolnego modułu Divi, co czyni go doskonałym narzędziem do kreatywnych i funkcjonalnych projektów.

Kluczowe funkcje

Moduł grupy karuzelowej opiera się na zoptymalizowanym fundamencie Divi 5, zapewniając szybkie czasy ładowania i płynne przejścia. Interfejs Divi 5's Drag-and-Drop pozwala łatwo dodawać moduły do suwaków, z responsywnymi elementami sterującymi w celu dostrojenia układów na komputery stacjonarne, tabletu i telefonu komórkowego, przy jednoczesnym zachowaniu szybkiej wydajności.

Konfigurowalne slajdy

Moduł Group Carousel oferuje pełną kontrolę nad liczbą suwaków, ich treści i ustawień animacji. Możesz dostosować opcje przejścia, czasu i nawigacji, aby stworzyć bezproblemową obsługę, która pasuje do Twojej wizji.

Dynamiczna zawartość z konstruktorem pętli

Moduł zintegrowany z Builder Loop Divi 5 obsługuje dynamiczne karuzele na podstawie postów, warunków lub danych użytkownika. Na przykład możesz utworzyć karuzel referencyjny za pomocą niestandardowych typów postów i zaawansowanych pola niestandardowych (ACF), automatycznie przyciągając recenzje klientów lub studia przypadków bez konieczności ręcznych aktualizacji.

Elastyczność projektowania

Możesz wykorzystać ustawienia projektowe Divi 5, aby zbudować unikalne style karuzeli. Zastosuj transformacje, filtry, cienie w pudełku lub efekty unośnika do slajdów i dostosuj poszczególne moduły w grupie, aby tworzyć atrakcyjne wizualnie slajdy, które utrzymują zaangażowanie odwiedzających.

Jak korzystać z modułu karuzeli grupy

Założenie grupy karuzeli w Divi 5 jest intuicyjne i elastyczne. Zacznij od dodania rzędu jednokolumnowego do strony. Następnie wybierz moduł grupy karuzelowej w programie Builder i dodaj go do swojej strony.

Na karcie Content kliknij, aby rozwinąć menu rozwijane ustawienia karuzeli .

Włącz automatyczną obrót , tryb środkowy i ustaw slajdy na pokaz na 3 .

Włącz Pokaż nawigację kropkową w menu rozwijanym elementy. Możesz zostawić strzałki z włączonym lub wyłączonym.

Przypisz styl do pierwszej grupy

Po wprowadzeniu ustawień karuzeli możemy dodać naszą pierwszą grupę. Kliknij ikonę ustawień grupy , aby wyświetlić ustawienia.

Na karcie zawartości rozwinąć menu rozwijane tła . Kliknij kartę obrazu tła, a następnie kliknij +Dodaj obraz tła , aby dodać obraz do grupy.

Następnie przejdź do zakładki projektowej . Rozwiń menu rozwijane układu i ustaw uzasadnienie treści na koniec .

Następnie poszerz menu rozwijane odstępów i dodaj 5% marginesu w lewo i prawo od naszej grupy. To doda trochę oddechu między grupami w karuzeli.

Ustaw górną wyściółkę na 100%. Zastosuj wyściółkę 25px w lewo i w prawo.

Dodaj treść do pierwszej grupy

Możemy zwrócić uwagę na dodanie treści do naszej grupy. Kliknij ikonę Black + i dodaj moduł dzielnika .

Przejdź do zakładki projektowej . Rozwiń menu rozwijane i zmień kolor na #ffffff .

Następnie poszerz zakładkę rozmiaru. Ustaw masę dzielnika na 4px , a szerokość na 15% .

Następnie dodaj moduł nagłówka do grupy. Podaj tytuł nagłówka .

Przełącz na kartę Projekt . Pod tekstem nagłówka ustaw poziom nagłówka na H2 (lub dowolne inne, które chcesz) , wybierz interfejs czcionki nagłówka , wybierz światło dla wagi czcionki, #ffffff dla koloru tekstu nagłówka i 2EM dla rozmiaru tekstu nagłówka .

Przed powielaniem naszej grupy wróćmy do zakładki projektowej i dostosuj pionową lukę do 10px. To wyeliminuje każdą niepotrzebną przestrzeń pionową między modułami.

Dodawanie dodatkowych grup

Teraz, gdy nasza pierwsza grupa została zaprojektowana, możemy skopiować grupę stylową i po prostu wymienić naszą treść (obraz i tytuł) na karuzelę. Zduplikuj grupę osiem razy, a w sumie będziemy mieli dziewięć slajdów.

Po powieleniu grupy Twoja grupa karuzelowa powinna wyglądać tak.

Kiedy tu jesteśmy, dobrym pomysłem jest nadanie każdej grupie unikalnej nazwy, aby łatwiej je zidentyfikować. Kliknij ikonę ustawień pierwszej grupy i przewiń w dół do etykiety administratora . Nazwij grupę Grecję.

Kliknij 2. grupę w karuzeli. Rozwiń kartę tła i wymień obraz nową.

Podczas gdy na karcie zawartość nie zapomnij dodać nazwy do pola etykiety administratora . Następnie zmień tytuł modułu głównego na Maine .

Powtórz kroki ze wszystkimi dodatkowymi grupami. Po zakończeniu karuzela powinna wyglądać tak. Podczas pobytu w budowniczym wizualnym możesz użyć kropek nawigacyjnych do przewijania karuzeli, aby upewnić się, że nie przegapiłeś żadnych kroków.

Jak widać, tekst na niektórych naszych slajdach jest nieco trudny do odczytania. Możemy to poprawić na zakładce projektowej na poziomie karuzeli bez konieczności edytowania każdego elementu grupy indywidualnie.

Dostosowywanie grup i aktywnych grup

W module grupy karuzelowej możesz stylizować grupy aktywne i nieaktywne. Kluczem jest to, że sam moduł karuzeli grupy służy jako puste płótno, a ty stosujesz styl do grup modułów w nim. Pozwala to na wysoki poziom dostosowywania, pozwalając na tworzenie unikalnych układów i efektów.

Teraz, gdy stworzyliśmy grupową karuzelę, udaj się do zakładki projektowej w ustawieniach głównej karuzeli.

Rozwiń menu rozwijane grupy . Ta karta kontroluje ustawienia projektowe dla grup modułów zawartych w grupie karuzeli. Wszelkie stosowane tutaj ustawienia zostaną zastosowane do nieaktywnych modułów grupy.

Rozwiń kartę tła . Zastosujemy gradient światła na nieaktywne zakładki, aby upewnić się, że tekst jest czytelny. Ustaw pierwszy przystanek gradientu na #000000 z kryciem 0% . Dostosuj suwak lekko w prawo. Włącz gradient miejsca powyżej przełączania obrazu tła .

Ustaw 2. stop gradientowy na #000000 z 40% krycia .

Włącz gradient miejsca powyżej przełączania obrazu tła .

Następnie zlokalizuj kartę filtrów . Zmniejszymy nasycenie w grupach nieaktywnych, aby nadać obrazom w tle czarno -biały efekt. Znajdź suwak nasycenia i ustaw go na 0 .

Następnie rozwinąć menu rozwijane Active Group i kliknij kartę tła . Zastosuj te same ustawienia gradientu, co powyżej.

Pamiętaj, aby włączyć gradient miejsca powyżej przełączania obrazu tła .

Rozwiń menu rozwijane filtrów w aktywnych grupach i dostosuj suwak nasycenia do 75% . Będzie to pokolorować tylko aktywny element karuzeli, umożliwiając użytkownikom identyfikację aktywnego slajdu w karuzeli.

Dostosuj responsywny układ

Teraz, gdy nasza grupa karuzelowa jest gotowa na komputery stacjonarne, użyjemy konfigurowalnych responsywnych punktów przerwania Divi 5, aby stylizować mobilną wersję naszej karuzeli. Domyślnie Divi 5 umożliwia trzy punkty przerwania. Możesz użyć wszystkich siedmiu dostępnych punktów przerwania, jeśli chcesz mieć większą kontrolę nad różnymi rozmiarami urządzeń. Kliknij menu elipsy na środku górnego paska w wizualnym budowniczym.

Włącz punkty przerwania, które chcesz, i kliknij Zapisz , aby kontynuować.

Kliknij punkt przerwania tabletu , aby zobaczyć, jak układ będzie wyglądał na tabletach. Przewiń w dół do ustawień karuzeli i wyreguluj slajdy, aby pokazać do 1 . Będzie to również miało zastosowanie do wszelkich mniejszych punktów przerwania, takich jak telefon i telefon .

Na koniec kliknij przycisk podglądu w lewym górnym rogu ekranu, aby wyświetlić karuzel grupową w nowej karcie.

Po zakończeniu grupa karuzelowa powinna wyglądać podobnie do poniższego filmu.

To wszystko! Budowanie grupy karuzeli w Divi 5 jest proste i oferuje niesamowite rezultaty.

Integracja z konstruktorem pętli Divi 5

Divi 5's Loop Builder to potężna funkcja, która może przekształcić moduł grupy w dynamiczny wyświetlacz treści. Ta funkcja pozwala projektantom tworzyć dynamiczne, zautomatyzowane karuzele, które pobierają zawartość bezpośrednio z WordPress, przekształcając treść statyczną w wyświetlacze produktów, archiwa kategorii lub karuzele członków zespołu za pomocą kilku kliknięć.

Integrując Builder Loop z karuzelą grupową, Divi 5 upoważnia użytkowników do tworzenia wyrafinowanych, opartych na treści karuzeli z minimalną pracą ręczną, co czyni go wyjątkową funkcją dynamicznego projektowania stron internetowych.

Builder pętli umożliwia grupie karuzelę dynamiczną zapętlanie postów, warunków lub danych użytkownika, tworzenie karuzeli, które automatycznie odzwierciedlają najnowszą zawartość witryny. Ponieważ Builder pętli pobiera dane bezpośrednio z bazy danych WordPress, możesz łatwo zaprezentować posty na blogu, kategorie produktów lub profile użytkowników.

Na przykład możesz utworzyć karuzel na blogu przy użyciu suwaka typu post lub kategorii produktu za pomocą WooCommerce Warunki, dzięki czemu moduł jest niezwykle wszechstronny dla dynamicznych potrzeb treści.

Real World Przykłady modułu karuzeli grupy

Elastyczność modułu karuzeli grupy sprawia, że jest odpowiedni do różnych przypadków użycia. Oto kilka rzeczywistych przykładów pokazujących, co jest możliwe.

Niestandardowa pełna szerokość / pełny suwak

W tym przykładzie stworzyliśmy suwak na pełną szerokość/pełny ekran, aby zawierać koktajle do lodziarni. Ustawiamy karuzel, aby wyświetlał jeden zjeżdżalnię na raz, z których każdy zawiera obraz tła, dwa nagłówki i przycisk wezwania do działania. Ustawiliśmy również animację, aby przejść do następnego slajdu po 3-sekundowym opóźnieniu. Możesz osiągnąć ten wygląd, ustawiając karuzelę grupową i sekcję na 100 VH.

Prezentacja członka zespołu

Jeśli chcesz zawierać członków zespołu na swojej stronie, korzystanie z modułu karuzeli grupy to świetny sposób na zrobienie tego. W tym przykładzie skonfigurowaliśmy 3-kolumnowy układ w naszej karuzeli. Każdy slajd zawiera strzał w głowę, nazwę, rolę i linki mediów społecznościowych za pomocą modułu Social Follow Divi. Ustaw karuzel, aby przewijał jeden zjeżdżalnię na raz, aby uzyskać czysty, profesjonalny wygląd.

Prezentacje kategorii

Moduł karuzeli Divi 5 działa bezbłędnie z konstruktorem pętli. Umożliwia to tworzenie angażujących suwaków z kategorii produktów Twojej witryny. Każda slajd dynamicznie przyciąga nazwę kategorii i wyświetlony obraz, dzięki czemu jest to świetny sposób na zaprezentowanie swoich produktów. W tym przykładzie używamy efektów filtra

Referencje

Moduł grupy karuzelowej doskonale nadaje się również do tworzenia suwaka referencyjnego. Możesz łatwo zaprezentować najlepsze recenzje klientów, referencje klientów i wiele innych. Dzięki module grupy karuzelowej nie jesteś już ograniczony do statycznych kolumn ani wtyczek zewnętrznych.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a my wysyłamy Ci e -mailem kopię pakietu układu Ultimate Divi Landing Page, a także ton innych niesamowitych i bezpłatnych zasobów, wskazówek i wskazówek. Śledź dalej, a będziesz mistrzem Divi w krótkim czasie. Jeśli jesteś już subskrybowany, po prostu wpisz swój adres e -mail poniżej i kliknij Pobierz, aby uzyskać dostęp do pakietu układu.

POBIERAĆ

Udało ci się zasubskrybować. Sprawdź swój adres e -mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układu Divi!

Odblokuj kreatywne możliwości za pomocą modułu karuzeli Divi 5

Moduł Carousel Group Divi 5 jest potężnym dodatkiem, który odblokowuje nowe możliwości tworzenia dynamicznych stron internetowych Divi. Od tworzenia angażujących suwaków produktów po referencje, ten moduł ułatwia dodawanie interaktywnych treści do witryn Divi.

Teraz, gdy odnowiona fundacja Divi 5 utorowała drogę do większej liczby funkcji, to idealny czas na zanurzenie się! Czy wypróbowałeś już moduł karuzeli grupowej? Daj nam znać w komentarzach poniżej.