So erstellen Sie einen benutzerdefinierten Vollbild -Schieberegler mit Divi 5 (kostenloser Download)

Eine der neuesten Veröffentlichungen von Divi 5 führt das Group Carousel -Modul vor, eine Funktion zum Erstellen von maßgeschneiderten, ansprechenden Schiebereglern und Karussells für Ihre WordPress -Site. Sie können Ihr Portfolio, Ihre Produkte, einen immersiven Helden oder einen Vollbildschieber einfach präsentieren und das Design Ihrer Website auf neue Höhen bringen.

In diesem Beitrag werden wir eine Schritt-für-Schritt-Anleitung zum Erstellen eines Vollbildschiebers mit dem Gruppen-Karussellmodul anbieten. Lass uns eintauchen!

Verständnis des Gruppenkarussellmoduls

Das Group Carousel -Modul ist eine vielseitige Ergänzung zu Divi 5, mit der Sie dynamische Schieberegler und Karusselle erstellen können.

Im Gegensatz zu herkömmlichen Modulen unterstützt es eine Vielzahl von Layouts, von einfachen Bildkarusseln bis hin zu komplexen, postbasierten Schiebereglern, die vom Schleifenbauer betrieben werden. Diese Flexibilität macht es perfekt, um Inhalte wie Portfolios, Testimonials oder Produktgalerien auf überzeugende Weise zu präsentieren.

Schlüsselmerkmale des Gruppenkarussellmoduls

Das Group Carousel -Modul scheint mit robusten Funktionen. Es unterstützt dynamische Inhaltsschleifen und ermöglicht es Ihnen, Beiträge, Seiten oder benutzerdefinierte Post -Typen direkt in Ihren Schieberegler mit dem Schleifenbauer einzuziehen.

Mit dem Modul können Sie auch jedes Divi -Modul verwenden, um schöne, ansprechende Schieberegler mit verschachtelten Zeilen und Modulgruppen zu erstellen. Sie können die Navigation mit Pfeilen und Paginierungspunkten anpassen und ihre Position, Farbe und andere Stile an Ihre Website anpassen.

Autoplay-Optionen, einstellbare Geschwindigkeiten und Pause-on-Hover-Funktionen bieten Ihren Besuchern ein auffälliges Erlebnis, um sicherzustellen, dass sie länger auf Ihrer Website bleiben. Darüber hinaus ist das Modul vollständig anpassbar, sodass Sie Layouts mit Vollbild- und Fullwidth -Layouts erstellen können, wodurch es ideal für Helden-, Service- oder Funktionsabschnitte auf Ihrer Website ist.

So bauen Sie einen Vollbild -Schieberegler mit dem Group Carousel -Modul von Divi 5

In diesem Tutorial zeigen wir Ihnen, wie Sie das Group Carousel -Modul verwenden, um einen Vollbild -Schieberegler für Ihre bevorstehenden Divi 5 -Websites zu erstellen. Am Ende haben Sie die Fähigkeiten, um faszinierende Schieberegler zu bauen, um Ihre Besucher zum Handeln zu ermutigen.

Schritt 1: Einrichten einer neuen Seite

Erstellen Sie eine neue Seite, fügen Sie einen Titel hinzu und klicken Sie auf Divi Builder verwenden , um loszulegen.

Wenn sich der visuelle Bauherr öffnet, wählen Sie Build von Grund auf neu unter den Optionen Ihrer Seiten erstellen .

Bewegen Sie sich über den Abschnitt Ihrer neuen Seite, um das Einstellungssymbol anzuzeigen. Klicken Sie darauf, um die Einstellungen des Abschnitts anzuzeigen.

Navigieren Sie zur Registerkarte "Design" . Klicken Sie auf das Dropdown -Menü Layout . Wählen Sie unter Inhalt des Inhalts aus . Wählen Sie im Feld Ausrichtungselemente die Mitte aus. Auf diese Weise kann der Inhalt unseres Abschnitts horizontal und vertikal zentriert werden.

Als nächstes passen wir die Abstandseinstellungen für den Abschnitt an. Erweitern Sie das Dropdown -Menü zum Abstand . Stellen Sie den Rand auf 0PX , oben und unten ein. Stellen Sie unter der Polsterung den oberen und unten auf 0PX ein.

Klicken Sie mit den Einstellungen des Abschnitts auf das Green + -Symbol , um eine neue Zeile hinzuzufügen.

Wählen Sie die einspaltige Zeile unter gleichen Spalten aus.

Fügen Sie als nächstes das Gruppenkarussellmodul in die Zeile hinzu.

Vor dem Hinzufügen von Inhalten müssen wir das Zeilen- und Gruppen -Karussellmodul mit Flexbox- und Abstandsteuerungen einrichten.

Schritt 2: Konfigurieren Sie die Zeileneinstellungen

Wenn wir einen Vollbild -Schieberegler erstellen, müssen wir die Zeile und das Gruppen -Karussellmodul auf 100% Breite einstellen. Klicken Sie auf das Layers -Symbol , um die Abschnitte einfach einzustellen. Dies ist entscheidend für die Arbeit mit Abschnitten und Zeilen mit Vollbreiten, insbesondere wenn Polsterung und Rand auf 0 gesetzt wurden. Es erleichtert es, die Layoutstruktur Ihrer Seite zu erkennen

Klicken Sie in der Schichtansicht, um die Einspaltreihe auszuwählen, in der das Gruppenkarouselmodul untergebracht ist. Navigieren Sie zu den Designeinstellungen. Passen Sie im Dropdown -Menü Layout die horizontale Lücke auf 0 an.

Setzen Sie auch die Ausrichtung der Elemente in die Mitte für die Reihe.

Stellen Sie die Breite und die maximale Breite in der Größenregisterkarte auf 100%ein.

Stellen Sie in der Registerkarte Abstand den oberen und unteren Rand und die Polsterung auf 0PX ein.

Schritt 3: Konfigurieren Sie die Gruppen -Karusselleinstellungen

Als nächstes konfigurieren wir die Gruppen -Karusselleinstellungen. Erweitern Sie das Dropdown -Menü der Karusselleinstellungen auf der Registerkarte Inhalt. Sie können die automatische Drehung einschalten, die automatische Drehzahl bei der Standardeinstellung von 2000 ms auswählen und eine Pause für den Schweber aktivieren.

Deaktivieren Sie auf der Registerkarte Elements die Anzeige der Punktnavigation und lassen Sie die Anzeigen -Arrows aktiviert. Sie können auch ein benutzerdefiniertes Symbol für die linken und rechten Pfeile auswählen.

Klicken Sie, um die Registerkarte "Pfeile auf der Registerkarte" Design zu erweitern. Weisen Sie #FFFFFF als Pfeilfarbe zu, lassen Sie die Pfeilgröße am Standard 48px und lassen Sie die Pfeilposition auf innen eingestellt.

Erweitern Sie die Registerkarte Hintergrund und weisen Sie #000000 als Hintergrundfarbe zu.

Schritt 4: Style die erste Gruppe

Wir können den Einstellungen für Abschnitt, Reihen und Gruppenkarousel in den ersten Folie in den ersten Folie inhaltlich hinzufügen. Klicken Sie im Gruppen -Karussellmodul auf die Registerkarte "Inhalt" und klicken Sie auf das Symbol "Einstellungen" für die Gruppe.

Erweitern Sie das Dropdown -Menü des Hintergrunds und wählen Sie die Registerkarte Gradient .

Klicken Sie auf den ersten Gradienten -Schieberegler, um eine neue Farbe zuzuweisen. Geben Sie #EFB648 in das Farbfeld ein .

Klicken Sie anschließend in den 2. Gradienten -Schieberegler und weisen Sie #F28F52 als Farbe zu.

Wählen Sie im Feld Gradiententyp Rundschreiben .

Navigieren Sie als nächstes zur Registerkarte "Design" . Erweitern Sie die Registerkarte "Abstand" und weisen Sie oben und unten in der Gruppe 5% Polster zu.

Schritt 5: Fügen Sie der ersten Gruppe Inhalte hinzu

Nachdem die Einstellungen unserer Gruppe konfiguriert sind, können wir der Gruppe Inhalte hinzufügen. Klicken Sie auf das Schwarz + -Symbol, um ein Modul hinzuzufügen.

Wenn das Dialogfeld "Modul oder Zeilen einfügen) angezeigt wird, klicken Sie auf die Registerkarte Neue Zeile . Wählen Sie im Abschnitt der gleichen Spalten die einzelne Spaltenzeile aus.

Fügen Sie ein Überschriftenmodul hinzu

Wählen Sie das Überschriftenmodul aus und fügen Sie ein.

Erweitern Sie das Dropdown -Menü des Textes und geben Sie Orangensaft als Titel ein.

Navigieren Sie zur Registerkarte "Design" . Erweitern Sie das Dropdown -Menü zur Überschrift Text . Wählen Sie H1 als Überschriftenpegel aus, verwenden Sie Bebas Neue als Kopfschrift , stellen Sie den Kopfschriftenstil in Großbuchstaben , die Ausrichtung der Überschriftentexte in die Mitte , die Kopftätigkeitsfarbe auf #FFFFFF und die Heading Textgröße bis 20EM ein.

Verwenden Sie die reaktionsschnellen Steuerelemente von Divi 5, um die Textgröße der Überschrift auf 15EM auf Tablet und 8EM auf Mobilgeräten anzupassen.

Fügen Sie eine neue Zeile hinzu

Als nächstes fügen wir eine neue Zeile unter der Einspaltreihe mit dem Überschriftenmodul hinzu. Klicken Sie auf das Schwarz + -Symbol, um ein neues Modul hinzuzufügen.

Klicken Sie auf die Registerkarte Neue Zeile . Wählen Sie unter Versatzspalten die 1/4 + 1/2 + 1/4 Option.

Erweitern Sie auf der Registerkarte "Entwurf die Größenregisterkarte" und geben Sie 70% für die Breite und die maximale Breite ein. Stellen Sie die Ausrichtung auf die Mitte ein.

Fügen Sie ein Überschriftenmodul hinzu

Wählen Sie das Überschriftenmodul aus und fügen Sie es der ersten Spalte hinzu.

Geben Sie der Überschrift einen Titel und gehen Sie auf die Registerkarte "Design" . Erweitern Sie das Dropdown -Menü zur Überschrift Text . Wählen Sie H2 für die Überschriftenebene , Bebas als Kopfschriften , Großbuchstaben als Kopfschriftenstil , #FFFFFF als Heading -Textfarbe und 6EM als Heading -Textgröße .

Verwenden Sie die reaktionsschnellen Steuerelemente von Divi, um die Textgröße der Überschrift an 4EM anzupassen.

Fügen Sie ein Textmodul hinzu

Fügen Sie ein Textmodul unter der Überschrift in der ersten Spalte hinzu. Geben Sie einen Körpertext ein und wechseln Sie zur Registerkarte "Design" . Wählen Sie Poppins als Textschrift , stellen Sie die Textfarbe auf #FFFFFF und die Textgröße auf 16PX ein.

Fügen Sie ein Schaltflächenmodul hinzu

Fügen Sie in der ersten Spalte ein Schaltflächenmodul unter das Textmodul hinzu. Weisen Sie der Schaltfläche in der Registerkarte Inhalt Text zu und tauschen Sie die Registerkarte "Design" aus. Erweitern Sie das Dropdown -Menü der Schaltfläche und aktivieren Sie benutzerdefinierte Stile für die Schaltfläche . Erweitern Sie dann das Menü „Button Hintergrund“ . Fügen Sie in der Registerkarte Hintergrundfarbe #528BF2 als Farbe der Schaltfläche hinzu.

Verwenden Sie die Schwebekontrollen von Divi 5, um #6A7C9D als Schwebelfarbe für die Taste zuzuweisen.

Wechseln Sie zurück zur Desktop -Ansicht. Erweitern Sie die Registerkarte "Schaltfläche" Rand . Fügen Sie 100px unter Taste Rand Radius hinzu und stellen Sie die Grenzbreite der Taste auf 0PX ein.

Erweitern Sie das Dropdown -Menü der Schaltfläche Text . Weisen Sie Poppins als Schaltflächenschrift , #ffffff als Schaltfläche Textfarbe und 16PX als Schaltfläche Textgröße zu.

Erweitern Sie die Einstellungen des Schaltflächensymbols und deaktivieren Sie das Symbol für Schaltfläche anzeigen .

Erweitern Sie zum Schluss das Dropdown -Menü ab dem Abstand . Fügen Sie nach oben und unten 15px -Polster und nach links und rechts.

Fügen Sie ein Bildmodul hinzu

Platzieren Sie ein Bildmodul in der zweiten Spalte. Wenn die Einstellungen angezeigt werden, schweben Sie über das Bildfeld, um die Einstellungen anzuzeigen. Klicken Sie auf das Symbol "Einstellungen", um die Medienbibliothek zu laden und ein Bild in das Modul hochzuladen.

Als nächstes werden wir dem Bild eine Interaktion hinzufügen, um einen Maus-Over-Effekt zu erzeugen. Navigieren Sie zur Registerkarte Erweitert . Erweitern Sie das Interaktionenmenü , um die Einstellungen anzuzeigen. Klicken Sie auf die Schaltfläche +Interaktion hinzufügen .

Wählen Sie Maus ein, wenn die Optionen angezeigt werden.

Geben Sie die Bildneigung in das Feld Admin -Etikett ein, wählen Sie Maus eingebracht als Triggerereignis, Spiegelmausbewegung als Effektaktion, wählen Sie das Bild als Zielmodul, als Bewegungstyp und 15 für die Empfindlichkeit. Klicken Sie schließlich auf die Schaltfläche Interaktion speichern, um die Interaktion zu aktivieren.

Fügen Sie ein Balkenmodul hinzu

Klicken Sie auf, um das Modul der Balken in der dritten Spalte hinzuzufügen. Auf der Registerkarte Inhalt. Deaktivieren Sie auf der Registerkarte Elemente den Prozentsatz .

Erweitern Sie als nächstes die Registerkarte Hintergrund. Fügen Sie #ffffff als Hintergrundfarbe hinzu.

Tauschen Sie auf die Registerkarte "Design" und erweitern Sie das Dropdown -Menü der Balken . Fügen Sie im Feld der Bar Hintergrundfarbe #528BF2 als Farbe hinzu.

Erweitern Sie das Dropdown -Menü des Titeltextes . Wählen Sie im Feld Title Font Bebas Neue . Wählen Sie #FFFFFF als Titeltextfarbe und 22PX als Titeltextgröße .

Tauschen Sie auf die Registerkarte Inhalt zurück. Klicken Sie dieses Mal auf das Symbol für die Einstellungen für das erste Balkenzähler -Element.

Geben Sie den Text in das Titelfeld ein und setzen Sie das Prozentfeld auf 75 .

Klicken Sie auf, um zum Hauptinhaltsregisterkarte zurückzukehren, um das Modul der Balken -Zähler zu erhalten.

Nachdem unsere Designeinstellungen festgelegt sind, können Sie den ersten Balkenzählerelement problemlos kopieren, um die Einstellungen zu erhalten.

Duplizieren Sie den Bar -Zählerstück und ändern Sie den Titel und den Prozentsatz in Ihre gewünschten Einstellungen.

Schritt 6: Animationen hinzufügen

Damit die Gruppe immersiverer wird, werden wir einige Animationseffekte hinzufügen. Zuerst verleihen wir unserer Hauptüberschrift einen Zoomeffekt. Klicken Sie, um die Hauptüberschrift für die Gruppe auszuwählen. Navigieren Sie zur Registerkarte Design und scrollen Sie nach unten, um die Registerkarte Animation zu erweitern. Wählen Sie Zoom für die Animation. Lassen Sie alle Einstellungen so wie es ist.

Klicken Sie anschließend, um die 2. Zeile (dreispaltige Zeile) zu erweitern. Klicken Sie in die Einstellungen der ersten Spalte.

Klicken Sie auf die Registerkarte Design und scrollen Sie nach unten, um die Registerkarte Animation anzuzeigen. Wählen Sie die Folie für den Animationsstil und richtig für die Animationsrichtung. Lassen Sie alle anderen Einstellungen so, wie es ist.

Klicken Sie für die Zeile auf die Registerkarte Hauptinhalt zurück. Wählen Sie diesmal die 3. Spalte aus. Navigieren Sie zur Registerkarte "Design", erweitern Sie die Registerkarte Animation und wählen Sie für die Animation eine Folie> links. Lassen Sie die anderen Einstellungen bei ihren Standardeinstellungen.

Schritt 7: Überlappende Zeilen

Um dem Layout ein wenig zusätzliches Flair hinzuzufügen, werden wir den Rand in der 2. Zeile einstellen, um einen Überlappungseffekt zu erzeugen. Dadurch wird die Reihe nach oben drücken und es ermöglicht, die Hauptüberschrift für einen schönen Effekt zu überlappen. Wählen Sie die 2. Zeile im Layout aus und navigieren Sie zur Registerkarte Entwurf. Erweitern Sie die Registerkarte "Abstand", um die Einstellungen anzuzeigen. Stellen Sie den Wert am oberen Rand auf -8%.

Als nächstes wenden wir einen Z -Indexwert an, um die 2. Zeile über dem 1. zu platzieren. Navigieren Sie zur Registerkarte Erweitert, erweitern Sie die Positionseinstellungen und wenden Sie 999999 auf das Feld des Z -Index an.

Wenn Sie den Schieberegler vorschauen, werden Sie feststellen, dass die 2. Zeile die 1. Zeile leicht überlappt und einen schönen Überlappungseffekt erzeugt.

Schritt 8: Reaktionsfähigkeit Test

Bevor wir die erste Gruppe kopieren, ist es eine gute Idee, die Reaktionsfähigkeit des Layouts zu testen. Verwenden Sie die anpassbaren Anpassungsbestandteile von Divi 5, um Anpassungen vorzunehmen.

In Divi 5 gibt es jetzt 7 Haltepunkte anstelle von Divi 4's 3. Sie können diese Haltepunkte verwenden, um sicherzustellen, dass Ihr Layout auf jeder Bildschirmgröße unglaublich aussieht. Navigieren Sie durch die Haltepunkte und nehmen Sie die erforderlichen Verbesserungen vor, bevor wir die erste Gruppe kopieren.

Eine der besten neuen Funktionen in Divi 5 ist die Möglichkeit, die Reihenfolge der Spalten für mobile Geräte zu ändern. Dies ist eine großartige Möglichkeit, das Design funktional und effektiv in allen Bildschirmgrößen zu halten. Wählen Sie in der mobilen Ansicht die 2. Spalte der 2. Zeile in unserem Layout (3-Spal-Zeile) aus.

Erweitern Sie auf der Registerkarte Inhalt die Registerkarte Bestell . Setzen Sie die Anzeigereihenfolge von dort auf -1 . Dadurch wird die Spalte mit dem Bild oben platziert, sodass das Bild die Überschrift wie auf Desktop- und Tablet -Ansichten überlagert.

Schritt 9: Duplizierende Gruppen

Sobald wir alles im Quadrat verabschiedet haben, können wir die erste Gruppe leicht kopieren und den Hintergrundgradienten, den Text und den Bild ändern, ohne alle Schritte zu wiederholen. Klicken Sie auf der Registerkarte "Hauptkarousel -Gruppeninhalt", um die erste Gruppe zu duplizieren.

Weisen Sie vor dem Kopieren der Gruppe eine Administratorbezeichnung zu, um die Identifizierung zu erleichtern.

Vom dort ändern Sie den Titel, tauschen Sie das Bild aus und weisen Sie der Gruppe einen neuen Hintergrundgradienten zu. Verwenden Sie #FC6A3C für den ersten Gradienten -Slider und #C52F00 für den zweiten.

Sie möchten auch den Schaltflächen- und Bar -Zählerfarben in #3DFCCA und #C52F00 für den Schweber ändern.

Wir müssen auch das Animationszeitpunkt für die 2. Gruppe anpassen. Dies stellt sicher, dass die Animationen nicht für andere Folien geladen werden, wenn der Schieberegler voranschreitet. Navigieren Sie im Hauptüberschriftenmodul zur Registerkarte Design , erweitern Sie das Animationsmenü und setzen Sie die Animationsverzögerung auf 2000 ms .

Tun Sie dasselbe für die 3-Spal-Reihe. Setzen Sie in der ersten und dritten Spalten die Animationsverzögerung auf 2000 ms .

Änderungen an der dritten Gruppe

Verwenden Sie für die 3. Gruppe #71B953 und #617A56 für den Hintergrundgradienten .

Verwenden Sie für die Module der Taste und der Balken . Verwenden Sie #BA54B3 und #654F64 für die Schwebefarbe.

Sie müssen auch die Animationsverzögerung des Überschriftenmoduls und des ersten und dritten Spaltens der 2. Zeile auf 4000 ms ändern.

Änderungen an der vierten Gruppe

Verwenden Sie für den Hintergrundgradienten #AD52B7 und #AD52B7 .

Verwenden Sie #83b853 und #83b853 für die Balkenschalter- und Taste -Module.

Setzen Sie schließlich die Animationsverzögerung auf 6000 ms auf der Hauptüberschrift in der Gruppe zusammen mit den ersten und dritten Spalten der 3-Spal-Reihe.

Schritt 10: Vorschau und speichern Sie den Schieberegler

Der letzte Schritt besteht darin, das Layout zu speichern und eine Vorschau zu erhalten, um sicherzustellen, dass keine Schritte übersehen wurden. Klicken Sie im visuellen Builder in der oberen rechten Ecke auf die Schaltfläche Speichern.

Klicken Sie auf die Schaltfläche Vorschau, um das Layout in einer neuen Registerkarte zu öffnen.

Sobald Sie fertig sind, sollte Ihr Schieberegler so aussehen:

Das war's! Das Group Carousel -Modul ist ein vielseitiger Neuzugang bei Divi 5. Es ermöglicht es Ihnen, Schieberegler und Karussell für jedes Projekt zu erstellen und unbegrenzte Anpassungsoptionen anzubieten.

Laden Sie das Full -Screen -Karussell -Layout herunter

Wenn Sie das Layout verwenden möchten, das wir in diesem Beitrag nachgebaut haben, können Sie über das folgende Formular darauf zugreifen. Sobald Sie den Ordner heruntergeladen und entpackt haben, finden Sie eine JSON -Datei. Navigieren Sie zu Ihrer Divi -Bibliothek, um die Datei hochzuladen, damit Sie zugreifen können, und verwenden Sie sie für jede Seite, die Sie erstellen.

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!

Bauen Sie noch heute Ihr erstes Karussell in Divi 5

Das Erstellen eines benutzerdefinierten Vollbild -Schiebereglers mit dem Gruppen -Karussellmodul von Divi 5 eröffnet eine Welt voller Möglichkeiten, um ansprechende Erlebnisse auf Ihren Websites zu schaffen. Befolgen Sie die Schritte in diesem Beitrag, Sie haben gelernt, wie Sie die Funktionen des Moduls aus erweiterten Anpassungsoptionen wie Animationen, Reaktionsgrüßpunkten und interaktiven Effekten verwenden. Mit der Flexibilität des Group Carousel -Moduls können Sie Folien für alles erstellen, was Sie sich vorstellen können, und gleichzeitig einen nahtlosen, professionellen Look über alle Bildschirmgrößen beibehalten.

Laden Sie das neueste Divi 5 Public Alpha herunter, experimentieren Sie mit dem Group Carousel -Modul und teilen Sie uns mit, was Sie in den Kommentaren oder in unseren Social -Media -Kanälen denken.