Verwandeln Sie Ihr Blog-Modul in ein erweitertes Draggable/Swipe-Karussell mit Divi & Slick

Für viele Websites ist das Bloggen zu einem wichtigen Bestandteil ihrer SEO-Strategie geworden. Neben der Erstellung hochwertiger Inhalte ist es jedoch auch wichtig, die Post-Navigation für Ihre Besucher zu vereinfachen. Auf diese Weise können sie von einem Beitrag zum anderen springen und mehr Zeit auf Ihrer Website verbringen, um die dort veröffentlichten Inhalte zu lesen. In Divi gibt es ein Blog-Modul, mit dem Sie Ihre Blog-Posts dynamisch anzeigen und auch stylen können. Wenn Sie nach einer Möglichkeit suchen, die Beitragssuche auf die nächste Stufe zu heben, werden Sie diesen Beitrag lieben. Wir zeigen Ihnen, wie Sie das integrierte Divi-Blog-Modul mit den integrierten Elementen von Divi und der kostenlosen Slick-js-Bibliothek in ein fortschrittliches Draggable/Swipe-Karussell verwandeln. 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 Blog-Modul Draggable Swipe Carousel Layout KOSTENLOS herunter

Um das kostenlose Blog-Modul mit ziehbarem Swipe-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!

1. Blog-Seite erstellen

Neue Seite hinzufügen

Beginnen Sie damit, der Website, an der Sie gerade arbeiten, eine neue Seite hinzuzufügen. Geben Sie Ihrer Seite einen Titel, veröffentlichen Sie die Seite und wechseln Sie zu Visual Builder.

Laden Sie das Seitenlayout des Blogs des Innenarchitekturunternehmens hoch

In diesem Anwendungsfall-Tutorial verwenden wir das Blog-Layout der Interior Design Company, Sie können jedoch auch jedes andere Layout Ihrer Wahl verwenden.

2. Erstellen Sie mithilfe von Blurb-Modulen Pfeildesigns zum Vorherigen und zum Nächsten

Neue Zeile zum Anfang des Abschnitts hinzufügen

Spaltenstruktur

Sobald wir uns auf der Blog-Seite befinden, können wir mit dem Erstellen des erweiterten ziehbaren Swipe-Karussells beginnen. Der erste Teil widmet sich der Gestaltung der Pfeile, die wir benötigen, damit Besucher zwischen den Beiträgen hin- und herwechseln können. Die Pfeile werden nicht die einzige Möglichkeit sein, die Besucher durch das Karussell navigieren müssen. Sie können das Karussell auf dem Desktop ziehen und auch auf dem Handy wischen. Um die Pfeile zu entwerfen, verwenden wir das eingebaute Blurb-Modul von Divi, aber Sie können jedes andere Modul Ihrer Wahl verwenden. Fügen Sie oben in Ihrem Blog-Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und lassen Sie die Zeile die linke und rechte Seite des Abschnitts berühren, indem Sie die Größeneinstellungen wie folgt ändern:

• Breite: 100%
• Maximale Breite: 100%

Blurb-Modul hinzufügen

Titel hinzufügen

Fügen Sie dann ein Blurb-Modul hinzu und fügen Sie einen Titel ein.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen wie folgt:

• Symbolfarbe: #000000
• Kreissymbol: Ja
• Kreisfarbe: #f2f2f2
• Bild-/Symbolplatzierung: Oben
• Bild-/Symbolausrichtung: Mitte

Einstellungen für Titeltext

Ändern Sie dann die Einstellungen für den Titeltext.

• Titelschriftart: Muli
• Schriftstärke des Titels: Semi Bold
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #000000

Größe

Als Nächstes ändern wir die Größeneinstellungen des Moduls für verschiedene Bildschirmgrößen.

• Breite: 10 % (Desktop), 20 % (Tablet), 30 % (Telefon)
• Modulausrichtung: Rechts

CSS-Klasse

Und wir werden auch eine CSS-Klasse hinzufügen. Diese CSS-Klasse hilft uns, die Karussell-Aktion beim Klicken später im Tutorial auszulösen.

• CSS-Klasse: Zurück-Button

Hauptelement-CSS

Zu guter Letzt fügen wir dem Hauptelement des Moduls auch eine Zeile CSS-Code hinzu, um den Cursor in einen Zeiger zu verwandeln.

cursor: pointer;

Zeile klonen und unten im Abschnitt platzieren

Nachdem Sie den ersten Pfeil ausgefüllt haben, können Sie den gesamten Zeilencontainer klonen und die duplizierte Zeile am Ende des Blogabschnitts platzieren.

Ändere den Titel

Öffnen Sie das Blurb-Modul in der doppelten Zeile und ändern Sie den Titel.

Icon ändern

Zusammen mit dem Symbol.

CSS-Klasse ändern

Und ändern Sie auch die CSS-Klasse.

• CSS-Klasse: next-button

3. Bereiten Sie das Blog-Modul vor

Offene Zeile mit Blog-Modul

Größe

Sobald die Pfeile platziert sind, ist es an der Zeit, das Blog-Modul zu optimieren, beginnend mit der Zeile, in der es platziert ist. Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen entsprechend:

• Breite: 100%
• Maximale Breite: 100%

Sichtweite

Setzen Sie dann die Überläufe der Zeile auf ausgeblendet. Dadurch wird sichergestellt, dass das Karussell keine horizontale Bildlaufleiste auf unserer Seite anzeigt.

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

Blog-Modul ändern

Paginierung ausblenden

Sobald die Zeileneinstellungen vorgenommen wurden, öffnen Sie die Einstellungen des Blog-Moduls. Stellen Sie sicher, dass die Paginierung in den Elementeinstellungen deaktiviert ist.

• Paginierung anzeigen: Nein

Layout

Wechseln Sie dann zur Registerkarte Design und ändern Sie das Layout auf volle Breite.

• Layout: Volle Breite

Überlagerung

Wir fügen auch ein Overlay hinzu.

• Featured Image Overlay: Ein
• Farbe des Überlagerungssymbols: #ffffff
• Overlay-Hintergrundfarbe: rgba(1,0,66,0.33)

CSS-Klasse

Als Nächstes fügen wir unserem Blog eine CSS-Klasse hinzu, die uns hilft, das Karussell später im Tutorial zu aktivieren.

• CSS-Klasse: Blog-Modul

Meta-CSS posten

Und wir werden etwas Abstand zwischen dem Post-Meta und dem Auszug schaffen, indem wir dem Post-Meta-CSS-Element im erweiterten Tab etwas unteren Rand hinzufügen.

margin-bottom: 50px;

4. Slick JS-Funktionalität hinzufügen

Code-Modul unter Blog-Modul hinzufügen

Sobald alle Divi-Einstellungen vorhanden sind, ist es an der Zeit, die glatte js-Funktionalität hinzuzufügen! Fügen Sie ein Code-Modul direkt unter dem Blog-Modul (oder irgendwo anders auf der Seite) hinzu.

Slick JS-Skript-Tags hinzufügen

Fügen Sie dann die glatte js-Bibliothek in Skript-Tags hinzu (wie Sie im Druckbildschirm unten sehen können). Sie können diese auch in den Divi-Themeneinstellungen zum Kopf Ihrer Website hinzufügen.

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

CSS-Code für Folie hinzufügen

Wir werden jeden Blogbeitrag auf individueller Ebene mit etwas CSS-Code leicht modifizieren. Stellen Sie sicher, dass Sie den Code zwischen den Style-Tags platzieren, wie im Druckbildschirm unten gezeigt.

.slick-slide {
float: left;
margin: 2vw;
}

JQuery-Code hinzufügen

Und zu guter Letzt fügen wir JQuery-Code hinzu, damit das erweiterte ziehbare Swipe-Karussell seine Form annehmen kann. Im folgenden Code fügen wir auch die von uns entwickelten Schaltflächen zur Funktionalität des Karussells hinzu. Stellen Sie sicher, dass Sie den Code in Skript-Tags platzieren, wie Sie im Druckbildschirm unten sehen können.

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

5. Seite speichern und Visual Builder beenden, um das Ergebnis anzuzeigen

Im Visual Builder sehen Sie das Ergebnis nicht. Also, sobald Sie fertig sind, speichern Sie Ihre Seite, beenden Sie den Visual Builder und sehen Sie sich das Ergebnis auf Ihrer Website an!

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 Ihr Blog-Modul-Design auf die nächste Stufe bringen. Genauer gesagt haben wir Ihnen gezeigt, wie Sie das integrierte Blog-Modul von Divi mithilfe der kostenlosen Slick-js-Bibliothek in ein fortschrittliches, ziehbares Swipe-Karussell verwandeln können. Wir haben die JSON-Datei auch kostenlos zur Verfügung gestellt! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

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.