So erstellen Sie ein automatisches Karussell mit Divi & Slick.js

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit Divi, Slick.js und dem Ice Cream Shop Layout Pack ein automatisches Karussell erstellen. Wir beginnen damit, die schicke JS-Bibliothek in unsere Website aufzunehmen und fahren fort, indem wir sie im Divi Builder zum Laufen bringen. Dies ist eine großartige Möglichkeit, ein automatisches Karussell für jede Art von Modul zu erstellen, das Sie präsentieren möchten. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das automatische Karussell-Layout KOSTENLOS herunter

Um das kostenlose automatische Karussell-Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Stellen Sie sicher, dass Sie die Slick.js-Datei in Ihre Head-Tags einschließen! Ohne geht es nicht. Siehe den ersten Schritt unten.

1. Fügen Sie Slick JS zu Ihrer Divi-Theme-Integration hinzu

Gehen Sie zu Divi-Theme-Optionen

Der erste Teil dieses Tutorials ist ein sehr wichtiger; Hinzufügen von Slick.js zu Ihrer Website. Gehen Sie dazu zu Ihren Divi-Theme-Optionen.

Slick.js zu Head-Tags hinzufügen

Navigieren Sie zum Integrations-Tab und fügen Sie die Slick.js-Datei zu den Head-Tags Ihrer Website hinzu.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

2. Erstellen Sie eine neue Seite mit dem Menü-Layout der Eisdiele

Neue Seite hinzufügen

Fahren Sie fort, indem Sie Ihrer Website eine neue Seite hinzufügen. Geben Sie Ihrer Seite einen Titel, veröffentlichen Sie die Seite und wechseln Sie zu Divi Builder.

Eisdiele-Menü-Layout hochladen

Für dieses Tutorial verwenden wir das Menülayout des Ice Cream Shop Layout Packs, aber Sie können auch jede andere Seite/ein anderes Layout Ihrer Wahl verwenden.

2. Neuen Abschnitt zur Seite hinzufügen

Neuen Abschnitt hinzufügen

Der nächste Schritt beim Erstellen des automatischen Karussells besteht darin, Ihrer Seite einen neuen Abschnitt hinzuzufügen.

Hintergrundfarbe

Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #f5f5f5

Unterteiler

Fügen Sie dem Abschnitt auch einen unteren Teiler hinzu.

• Teilerstil: In Liste suchen
• Teilerfarbe: #ffffff
• Teilergewicht: 10vw

Abstand

Zusammen mit etwas Bodenpolsterung.

• Untere Polsterung: 10vw

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie die erste Zeile mit der folgenden Spaltenstruktur hinzufügen:

Titeltextmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Fügen Sie der Spalte der Zeile ein Textmodul hinzu und fügen Sie H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Aufforderung
• Überschrift 2 Schriftstärke: Ultraleicht
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textgröße: 60px (Desktop), 40px (Tablet), 25px (Telefon)
• Überschrift 2 Zeilenhöhe: 1.2em

Größe

Ändern Sie auch die Größeneinstellungen des Moduls.

• Maximale Breite: 800px
• Modulausrichtung: Mitte

3. Weisen Sie dem automatischen Schieberegler eine neue einspaltige Zeile zu

Neue Zeile hinzufügen

Spaltenstruktur

Um das automatische Karussell zu erstellen, müssen wir den Elementen, die wir im Karussell platzieren möchten, eine neue Zeile zuweisen. Stellen Sie sicher, dass Sie eine Zeile mit nur einer Spalte auswählen. In den nächsten Schritten verwandeln wir diese Spalte in ein automatisches Karussell.

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und lassen Sie die Zeile in den Größeneinstellungen die gesamte Breite des Bildschirms einnehmen.

• Breite: 100%
• Maximale Breite: 100%

Abstand

Fügen Sie einen oberen Rand hinzu und entfernen Sie als nächstes alle standardmäßigen oberen und unteren Auffüllungen.

• Oberer Rand: 50px
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Überläufe

Wir stellen auch sicher, dass nichts den Zeilencontainer übertrifft, indem wir die Überläufe ausblenden.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Spalteneinstellungen

Fahren Sie fort, indem Sie die Spalteneinstellungen öffnen.

CSS-Klassen

Fügen Sie der Spalte zwei verschiedene CSS-Klassen hinzu. Achte darauf, dass du einen Zwischenraum dazwischen lässt. Später in diesem Tutorial werden wir diese Klassen verwenden, um das automatische Karussell zu erstellen.

• CSS-Klasse: icecream-items slider

Erstes Slider-Element zur Spalte hinzufügen (Call-to-Action-Modul)

Standardinhalt

Es ist Zeit, mit dem Hinzufügen des ersten Karussell-Elements zu beginnen! Wir verwenden ein Call-to-Action-Modul, aber Sie können auch jedes andere Modul Ihrer Wahl verwenden. Geben Sie einen Inhalt Ihrer Wahl ein.

Hover-Inhalt

Ersetzen Sie den Titel- und Hauptinhalt durch ein leeres Zeichen (wie dieses: ' '), um den Inhalt beim Bewegen des Mauszeigers zu entfernen.

Verknüpfung

Stellen Sie sicher, dass Sie auch einen Link zum Modul hinzufügen, damit die Schaltfläche angezeigt wird.

• Schaltflächen-Link-URL: #

Standard-Hintergrund mit Farbverlauf

Gehen Sie dann zu den Hintergrundeinstellungen und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #8300e9
• Farbe 2: rgba(41,196,169,0)
• Verlaufstyp: Radial
• Radiale Richtung: Oben
• Startposition: 35%
• Endposition: 35%

Hover-Farbverlaufshintergrund entfernen

Entfernen Sie den Farbverlaufshintergrund beim Schweben.

Hintergrundbild

Laden Sie auch ein relevantes Hintergrundbild hoch.

Einstellungen für Titeltext

Wechseln Sie zur Registerkarte Design und ändern Sie die Einstellungen für den Titeltext entsprechend:

• Titelschriftart: Aufforderung
• Titeltextgröße: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)
• Höhe der Titelzeile: 2vw (Desktop), 3vw (Tablet), 4vw (Telefon)

Textkörpereinstellungen

Ändern Sie auch die Textkörpereinstellungen.

• Körperschriftart: Open Sans
• Textgröße: 0,9 vw (Desktop), 2 vw (Tablet), 2,5 vw (Telefon)
• Körperlinienhöhe: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)

Tasteneinstellungen

Gehen Sie dann zu den Schaltflächeneinstellungen und gestalten Sie die Schaltfläche wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,9 vw (Desktop), 1,5 vw (Tablet), 2 vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000 (Standard), #ff6f7e (Hover)
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: 2px
• Schaltflächenschriftart: Aufforderung
• Schriftstärke der Schaltfläche: Normal
• Schaltflächenschriftart: Großbuchstaben

• Obere Marge: 19vw (Desktop), 30vw (Tablet), 45vw (Telefon)
• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)
• Rechte Polsterung: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)

Größe

Wir ändern auch die Breite und Höhe des Moduls.

• Breite: 23vw
• Höhe: 23vw (Desktop), 50vw (Tablet), 80vw (Telefon)

Abstand

Gehen Sie zu guter Letzt zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Linker Rand: 1vw
• Rechter Rand: 1vw
• Obere Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)

4. Schieberegler-Element so oft wie gewünscht klonen

CTA-Modul viermal klonen

Sobald Sie das erste CTA-Modul abgeschlossen haben, können Sie es beliebig oft klonen. Jedes Modul in dieser Spalte ist Teil des automatischen Karussells.

Ändern Sie Inhalt, Hintergrund mit Farbverlauf und Hintergrundbild für jedes Duplikat

Stellen Sie sicher, dass Sie den Inhalt, den Hintergrund des Farbverlaufs und das Hintergrundbild jedes Duplikats ändern, um jedes CTA-Modul einzigartig zu machen.

5. Neue Zeile unterhalb der vorherigen hinzufügen

Fügen Sie dem Abschnitt die nächste und letzte Zeile mit der folgenden Spaltenstruktur hinzu:

Erstes Code-Modul mit jQuery-Code einfügen

Neues Codemodul zur Spalte hinzufügen

Fügen Sie der Spalte ein erstes Codemodul hinzu.

CSS-Code einfügen

Und fügen Sie die folgenden Zeilen CSS-Code ein:

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

Zweites Codemodul mit CSS-Code einfügen

Neues Codemodul zur Spalte hinzufügen

Fügen Sie ein weiteres Codemodul direkt unter dem vorherigen hinzu.

jQuery-Code einfügen

Und fügen Sie die folgenden Zeilen des jQuery-Codes ein:

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

Nachdem Sie den CSS- und jQuery-Code hinzugefügt haben, können Sie den Visual Builder beenden, um das Ergebnis anzuzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divi, slick.js und dem Ice Cream Shop Layout Pack ein automatisches Karussell erstellen. Dies ist eine großartige Möglichkeit, Ihrer Website Interaktionen hinzuzufügen. Sie können diese Technik mit jeder Art von Modul verwenden, das Sie anzeigen möchten! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.