Alles, was Sie über das Group Carousel -Modul von Divi 5 wissen müssen

Einer der neuesten Module von Divi 5, The Group Carousel, ist hier, um es einfach zu machen, visuell atemberaubende Karussells und Animationen für Ihre Divi -Website zu erstellen. Mit dieser leistungsstarken Ergänzung können Webdesigner ansprechende Website-Karussells erstellen, ohne Plugins oder benutzerdefinierte CSS zu benötigen. Egal, ob Sie ein elegantes Portfolio, ein E-Commerce-Geschäft oder ein Blog erstellen oder ein Blog, das Group Carousel-Modul entsperren neue Kreativitätsstufen.

In diesem Beitrag werden wir alles, was Sie über das Group Carousel-Modul wissen müssen, mit Beispielen und einer Schritt-für-Schritt-Anleitung zum Einsatz abdecken. Lass uns eintauchen!

Was ist das Gruppen -Karussellmodul?

Mit dem Group Carousel-Modul in Divi 5 können Sie dynamische, auffällige Karussells und Schieberegler erstellen, die Ihrer Website ein wenig Bewegung und Interaktivität verleihen können. Unabhängig davon, ob Sie Portfolio-Stücke, Teammitglieder oder Produkte vorstellen, können Sie mit diesem vielseitigen Modul praktisch jede Art von Karussell erstellen, einschließlich postbasiertes, die Inhalte dynamisch ziehen.

Jede Folie ist eine leere Leinwand, mit der Sie ein Divi -Modul hinzufügen können, sodass es zu einem großartigen Werkzeug für kreative und funktionale Designs ist.

Schlüsselmerkmale

Das Group Carousel -Modul basiert auf der optimierten Fundament von Divi 5, um schnelle Lastzeiten und reibungslose Übergänge zu gewährleisten. Durch Drag & Drop-Schnittstelle von Divi 5 können Sie Schieberegler leicht Module hinzufügen, wobei reaktionsschnelle Steuerelemente für Desktop, Tablet und Mobile feinstimmen und gleichzeitig eine schnelle Leistung erhalten haben.

Anpassbare Folien

Das Gruppen -Karussellmodul bietet die vollständige Kontrolle über die Anzahl der Slider, deren Inhalte und Animationseinstellungen. Sie können Folienübergänge, Timing und Navigationsoptionen anpassen, um eine nahtlose Benutzererfahrung zu erstellen, die Ihrer Vision entspricht.

Dynamischer Inhalt mit Loop Builder

Das Modul von Divi 5's Loop Builder unterstützt dynamische Karussells basierend auf Posts, Begriffen oder Benutzerdaten. Sie können beispielsweise ein Testimonial -Karussell mit benutzerdefinierten Post -Typen und erweiterten benutzerdefinierten Feldern (ACF) erstellen, wodurch Kundenbewertungen oder Fallstudien automatisch gezogen werden, ohne manuelle Aktualisierungen zu benötigen.

Designflexibilität

Sie können die Designeinstellungen von Divi 5 nutzen, um einzigartige Karussellstile zu erstellen. Wenden Sie Transformationen, Filter, Boxschatten oder Schwebebereicheffekte auf Folien an und passen Sie einzelne Module innerhalb der Gruppe an, um visuell ansprechende Folien zu erstellen, die Ihre Besucher engagieren.

So verwenden Sie das Group Carousel -Modul

Das Einrichten eines Gruppenkarussells in Divi 5 ist intuitiv und flexibel. Fügen Sie zunächst eine einspaltige Zeile zur Seite hinzu. Wählen Sie anschließend das Gruppenkarussellmodul im visuellen Bauunternehmer aus und fügen Sie es Ihrer Seite hinzu.

Klicken Sie auf der Registerkarte Inhalt , um das Dropdown -Menü der Karusselleinstellungen zu erweitern.

Aktivieren Sie die automatische Rotation , den Mittelmodus und stellen Sie die Folien auf 3 ein.

Aktivieren Sie die Punktnavigation im Dropdown -Menü Elements anzeigen . Sie können die aktivierten Show -Pfeile hinterlassen oder deaktivieren.

Weisen Sie der ersten Gruppe ein Styling zu

Mit unseren Karusselleinstellungen können wir unsere erste Gruppe hinzufügen. Klicken Sie auf das Symbol für Gruppeneinstellungen , um die Einstellungen aufzurufen.

Erweitern Sie auf der Registerkarte Inhalt das Dropdown -Menü des Hintergrunds . Klicken Sie auf die Registerkarte Hintergrundbild und klicken Sie dann auf das Hintergrundbild, um der Gruppe ein Bild hinzuzufügen.

Navigieren Sie als nächstes zur Registerkarte "Design" . Erweitern Sie das Layout -Dropdown -Menü und setzen Sie die Rechtfertigung von Inhalten auf das Ende .

Erweitern Sie als nächstes das Dropdown -Menü ab dem Abstand und fügen Sie links und rechts 5% Marge unserer Gruppe hinzu. Dadurch wird zwischen den Gruppen im Karussell einige Atmungsraum hinzufügen.

Stellen Sie die obere Polsterung auf 100%ein. Tragen Sie die 25px -Polsterung nach links und rechts auf.

Fügen Sie der ersten Gruppe Inhalte hinzu

Wir können unsere Aufmerksamkeit darauf lenken, dass wir unsere Gruppe Inhalte hinzufügen. Klicken Sie auf das Schwarz + -Symbol und fügen Sie ein Teilermodul hinzu.

Navigieren Sie zur Registerkarte "Design" . Erweitern Sie das Dropdown -Menü der Linie und ändern Sie die Farbe in #ffffff .

Erweitern Sie als nächstes die Größenregisterkarte. Stellen Sie das Trenngewicht auf 4px und die Breite auf 15% ein.

Fügen Sie als nächstes ein Überschriftenmodul zur Gruppe hinzu. Geben Sie der Überschrift einen Titel.

Wechseln Sie zur Registerkarte "Design" . Setzen Sie unter dem Überschriftentext die Überschriftenpegel auf H2 (oder eine andere gewünschte Überschrift) , wählen Sie Inter für die Kopfschriftenschrift , wählen Sie Licht für das Schriftgewicht, #ffffff für die Überschrift Textfarbe und 2EM für die Textgröße .

Kehren wir vor Duplizieren unserer Gruppe zur Registerkarte Entwurf zurück und passen Sie die vertikale Lücke auf 10px an. Dadurch werden unnötigen vertikalen Raum zwischen Modulen beseitigt.

Hinzufügen zusätzlicher Gruppen

Nachdem unsere erste Gruppe gestaltet ist, können wir die gestaltete Gruppe kopieren und einfach unseren Inhalt (Hintergrundbild und Titel) gegen das Karussell austauschen. Duplizieren Sie die Gruppe achtmal und wir werden insgesamt neun Folien haben.

Nach der Duplikation der Gruppe sollte Ihr Gruppenkarussel so aussehen.

Während wir hier sind, ist es eine gute Idee, jeder Gruppe einen einzigartigen Namen zu geben, damit sie leichter zu identifizieren sind. Klicken Sie auf das Einstellungssymbol der ersten Gruppe und scrollen Sie nach unten auf Admin -Etikett . Nennen Sie die Gruppe Griechenland.

Klicken Sie auf die 2. Gruppe im Karussell. Erweitern Sie die Registerkarte Hintergrund und ersetzen Sie das Bild durch eine neue.

Vergessen Sie auf der Registerkarte Inhalt nicht, dem Feld Admin -Etikett einen Namen hinzuzufügen. Ändern Sie als nächstes den Titel des Überschriftenmoduls in Maine .

Wiederholen Sie die Schritte mit allen zusätzlichen Gruppen. Wenn Sie fertig sind, sollte Ihr Karussell so aussehen. Während Sie im visuellen Builder sind, können Sie die Navigationspunkte verwenden, um durch das Karussell zu scrollen, um sicherzustellen, dass Sie keine Schritte verpasst haben.

Wie Sie sehen können, ist der Text auf einigen unserer Folien etwas schwer zu lesen. Wir können dies auf der Registerkarte "Design" auf der Karussellebene korrigieren, ohne jedes Gruppenelement einzeln bearbeiten zu müssen.

Anpassung von Gruppen und aktiven Gruppen

Im Gruppen -Karussellmodul können Sie aktive und inaktive Gruppen stylen. Der Schlüssel ist, dass das Group Carousel -Modul selbst als leere Leinwand dient und Sie Styling auf die darin enthaltenen Modulgruppen anwenden. Dies ermöglicht ein hohes Maß an Anpassung und ermöglicht es, eindeutige Layouts und Effekte zu erstellen.

Nachdem wir ein Gruppenkarousel erstellt haben, besuchen Sie die Registerkarte "Design" in den Einstellungen des Hauptkarousel.

Erweitern Sie das Dropdown -Menü der Gruppen . Diese Registerkarte steuert die Entwurfseinstellungen für die im Gruppenkarousel enthaltenen Modulgruppen. Alle Einstellungen, die Sie hier anwenden, werden auf die inaktiven Gruppenmodule angewendet.

Erweitern Sie die Registerkarte Hintergrund . Wir werden einen leichten Gradienten auf die inaktiven Registerkarten anwenden, um sicherzustellen, dass der Text lesbar ist. Setzen Sie den ersten Gradientenstopp mit einer Deckkraft von 0% auf #000000 . Stellen Sie den Schieberegler leicht nach rechts ein. Aktivieren Sie den Ort -Gradienten über dem Hintergrundbild .

Stellen Sie den 2. Gradientenstopp mit einer Deckkraft von 40% auf #000000 ein.

Aktivieren Sie den Ort -Gradienten über dem Hintergrundbild .

Suchen Sie als Nächstes die Registerkarte Filter . Wir werden die Sättigung in den inaktiven Gruppen reduzieren, um den Hintergrundbildern einen Schwarzweiß -Effekt zu verleihen. Suchen Sie den Sättigungsschieber und stellen Sie ihn auf 0 .

Erweitern Sie als Nächstes das Dropdown -Menü aktive Gruppen und klicken Sie auf die Registerkarte Hintergrund . Wenden Sie die gleichen Gradienteneinstellungen wie oben an.

Aktivieren Sie unbedingt den Ort -Gradienten über dem Hintergrundbild .

Erweitern Sie das Dropdown -Menü Filter unter aktiven Gruppen und passen Sie den Sättigungsschieberegler auf 75% ein. Dadurch werden nur das aktive Karussellelement erfunden, sodass Benutzer die aktive Folie im Karussell identifizieren können.

Passen Sie das Responsive Layout an

Nachdem unser Gruppenkarussel für Desktops bereit ist, werden wir die anpassbaren Responsive -Haltepunkte von Divi 5 verwenden, um die mobile Version unseres Karussells zu stylen. Standardmäßig aktiviert Divi 5 drei Haltepunkte. Sie können alle sieben verfügbaren Haltepunkte verwenden, wenn Sie mehr Kontrolle über verschiedene Gerätegrößen wünschen. Klicken Sie in der Mitte der oberen Leiste im Visual Builder auf das Ellipsis -Menü.

Aktivieren Sie die Breakpoints, die Sie möchten, und klicken Sie auf Speichern , um fortzufahren.

Klicken Sie auf den Tablet -Haltepunkt, um anzuzeigen, wie das Layout auf Tablet -Geräten aussieht. Scrollen Sie nach unten zu den Karusselleinstellungen und passen Sie die Folien so ein, dass sie 1 angezeigt werden. Dies gilt auch für kleinere Haltepunkte wie telefonisch und Telefon .

Klicken Sie schließlich auf die Schaltfläche Vorschau oben links im Bildschirm, um Ihr Gruppenkarousel in einer neuen Registerkarte anzuzeigen.

Sobald Ihr Gruppenkarousel dem Video unten ähnlich aussehen sollte.

Das war's! Der Bau eines Gruppenkarussells in Divi 5 ist unkompliziert und bietet unglaubliche Ergebnisse.

Integration mit dem Schleifenbauer von Divi 5

Der Loop Builder von Divi 5 ist eine leistungsstarke Funktion, mit der das Gruppenmodul in eine dynamische Inhaltsanzeige verwandeln kann. Mit dieser Funktion können Designer dynamische, automatisierte Karussells erstellen, die Inhalte direkt von WordPress abrufen und statische Inhalte in Produktdisplays, Kategoriearchive oder Teammitglied -Karussells mit wenigen Klicks umwandeln.

Durch die Integration von Loop Builder in das Group Carousel ermöglicht Divi 5 die Benutzer, anspruchsvolle, inhaltsgetriebene Karussells mit minimaler manueller Arbeit zu erstellen, was es zu einer herausragenden Funktion für dynamisches Webdesign macht.

Mit dem Schleifenbauer können das Gruppenkarousel dynamisch Beiträge, Begriffe oder Benutzerdaten durchführen und Karussells erstellen, die den neuesten Inhalt Ihrer Website automatisch widerspiegeln. Da der Loop Builder Daten direkt aus Ihrer WordPress -Datenbank abzieht, können Sie problemlos Blog -Beiträge, Produktkategorien oder Benutzerprofile präsentieren.

Sie können beispielsweise ein Blog -Post -Karussell mit einem Post -Typ oder einem Produktkategorie -Schieberegler mit WooCommerce -Begriffen erstellen, wodurch das Modul für dynamische Inhaltsanforderungen unglaublich vielseitig ist.

Beispiele für die echte Welt des Gruppenkarouselmoduls

Die Flexibilität des Group Carousel -Moduls macht es für verschiedene Anwendungsfälle geeignet. Hier sind einige Beispiele in der realen Welt, um zu zeigen, was möglich ist.

Benutzerdefinierte Slider in voller Breite / Vollbild

In diesem Beispiel haben wir einen Schieberegler mit Vollbreite/Vollbild für eine Eisdiele erstellt. Wir stellen das Karussell auf, um jeweils jeweils eine Folie anzuzeigen, die jeweils ein Hintergrundbild, zwei Überschriften und eine Taste zur Aufruf-Action enthält. Wir haben auch die Animation so eingestellt, dass sie nach einer Verzögerung von 3 Sekunden zur nächsten Folie voranschreitet. Sie können diesen Look erzielen, indem Sie das Gruppenkarousel und den Abschnitt auf 100VH setzen.

Teammitglied Showcase

Wenn Sie Teammitglieder auf Ihrer Website vornehmen möchten, ist die Verwendung des Group Carousel -Moduls eine großartige Möglichkeit, dies zu tun. In diesem Beispiel haben wir ein 3-Spal-Layout in unserem Karussell konfiguriert. Jede Folie enthält einen Headshot, einen Namen, eine Rolle und eine Links für soziale Medien unter Verwendung von Divi's Social Follow -Modul. Stellen Sie das Karussell auf, um jeweils eine Folie für einen sauberen, professionellen Look zu scrollen.

Kategorie präsentiert

Das Group Carousel -Modul von Divi 5 arbeitet fehlerfrei mit dem Schleifenbauer zusammen. Auf diese Weise können Sie ansprechende Schieberegler erstellen, die die Produktkategorien Ihrer Website enthalten. Jede Folie zieht den Kategoriennamen und das Bild dynamisch an, was es zu einer hervorragenden Möglichkeit macht, Ihre Produkte zu präsentieren. In diesem Beispiel verwenden wir Filtereffekte an

Zeugnisse

Das Group Carousel -Modul eignet sich auch hervorragend zum Erstellen eines Testimonial -Sliders. Sie können problemlos Ihre besten Kundenbewertungen, Kunden -Testimonials und mehr präsentieren. Dank des Group Carousel -Moduls sind Sie nicht mehr auf statische Spalten oder externe Plugins beschränkt.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Treten Sie dem Divi -Newsletter bei und wir senden Ihnen eine Kopie des ultimativen Divi -Landing -Layout -Pakets sowie Tonnen anderer erstaunlicher und kostenloser Divi -Ressourcen, Tipps und Tricks per E -Mail. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi -Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach Ihre E -Mail -Adresse unten ein und klicken Sie auf Download, um auf das Layoutpaket zuzugreifen.

HERUNTERLADEN

Sie haben erfolgreich abonniert. Bitte überprüfen Sie Ihre E -Mail -Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi -Layout -Packs zu erhalten!

Schalte kreative Möglichkeiten mit dem Karussellmodul von Divi 5 frei

Das Group Carousel -Modul von Divi 5 ist eine leistungsstarke Ergänzung, die neue Möglichkeiten für die Erstellung dynamischer Divi -Websites ermöglicht. Dieses Modul erleichtert das Hinzufügen interaktiver Inhalte zu Ihren Divi -Websites, die von der Erstellung von Produktschiebern bis hin zu Testimonials erleichtert werden.

Jetzt, da die überarbeitete Stiftung von Divi 5 den Weg für weitere Funktionen geebnet hat, ist es der perfekte Zeitpunkt, um einzutauchen! Haben Sie das Group Carousel -Modul schon ausprobiert? Lassen Sie es uns in den Kommentaren unten wissen.