So verwandeln Sie das Divi-Blog-Modul in Karussell-Blog-Beiträge

Veröffentlicht: 2022-10-28

In Divi gibt es ein Blog-Modul, das Ihre Blog-Posts dynamisch anzeigen kann, und Sie können sie auch sofort in zwei Layouts auswählen, dem Fullwidth-Layout, das vertikal gestapelte Posts anzeigt, sodass nur ein Post in einer einzelnen Zeile angezeigt wird, und dem Grid Layout, das die Blogbeiträge in mehreren Spalten platziert und so ein Raster erstellt. Wenn Sie das Modul schon eine Weile verwenden, möchten Sie vielleicht einen anderen Stil neben dem Grid- und Fullwidth-Layout für Ihre Blog-Posts haben.

Zuvor haben wir auch einige Artikel erstellt, mit denen Sie versuchen können, Ihre Blog-Posts zu gestalten. Bei einer davon geht es darum, den Inhalt der Blogbeiträge über das vorgestellte Bild für das Blogmodul mit Rasterlayout zu verschieben, und bei einer anderen geht es darum, Ihre Blogbeiträge mit dem Layout in voller Breite in das Listenlayout umzuwandeln.

Und dieses Mal möchten wir Ihnen eine weitere Anpassung zeigen, um Ihre Blog-Posts aufzuwerten: Verwandeln Sie die Blog-Posts in ein Karussell mit ziehbaren Funktionen auf dem PC und wischen Sie auf dem Handy, um wie in der folgenden Animation durch die Blog-Posts zu navigieren.

Verwandeln Sie das Divi Blog-Modul in ein Karussell

Schritt 1: Erstellen Sie eine Seite oder bearbeiten Sie eine vorhandene Seite

Um Ihr Divi-Blogmodul in ein Karussell zu verwandeln, fügen Sie der Website eine neue Seite hinzu oder bearbeiten Sie eine vorhandene Seite und bearbeiten Sie sie dann mit dem visuellen Editor von Divi Builder. Für dieses Tutorial erstellen wir eine neue Seite und verwenden das Blog -Layout aus den vorgefertigten Layout-Paketen von Charter Boat .

Schritt 2: Erstellen Sie die Schaltflächen „Zurück“ und „Weiter“ für das Karussell

Sobald Sie das Layout geladen haben, lädt das Blog-Modul Ihre Blog-Beiträge dynamisch. Der nächste Schritt besteht darin, die Schaltflächen „Zurück“ und „Weiter“ zu erstellen, damit der Benutzer zwischen den Beiträgen hin und her wechseln kann.

Fügen Sie eine neue Zeile für die Navigationsschaltflächen hinzu

Beginnen Sie mit dem Hinzufügen einer neuen Zeile und verschieben Sie sie direkt über die Zeile des Blogmoduls. Verwenden Sie dann die folgende Spaltenstruktur.

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und stellen Sie die Breite der Zeile auf 100 % der Abschnittsbreite ein, indem Sie zur Registerkarte Design → Größenblock navigieren und sowohl die Breite als auch die maximale Breite auf 100 % einstellen.

Fügen Sie die Blurb-Module für The Buttons hinzu

Sobald die Zeile fertig ist, fügen Sie ein Klappentext-Modul für die erste Schaltfläche hinzu, um durch die Beiträge zu navigieren. Wir wählen das Klappentext-Modul für die Schaltfläche, da es viele Optionen zum Gestalten des Symbols für die Schaltfläche bietet, die wir für die Post-Navigation verwenden.

Öffnen Sie die Blurb-Einstellungen , sobald Sie das Modul hinzugefügt haben, um die folgenden Einstellungen auf das Modul anzuwenden:

  • Ändern Sie den Titel in „Zurück“
  • Entfernen Sie den Haupttext
  • Öffnen Sie den Bild- und Symbolblock , schalten Sie die Option Symbol verwenden auf Ja um und wählen Sie das Symbol mit dem linken Pfeil.
  • Wechseln Sie zur Registerkarte Design und öffnen Sie dann den Bild- und Symbolblock , um die Symboleinstellungen wie folgt zu ändern:
    • Symbolfarbe: # 000000
    • Hintergrundfarbe für Bild/Symbol: #f2f2f2
    • Abgerundete Ecke für Bild/ Symbol: 50 Pixel für alle Ecken
  • Öffnen Sie den Titeltextblock , um den Titeltext wie folgt zu gestalten:
    • Schriftstärke des Titels : Semi Bold
    • Ausrichtung des Titeltexts: Zentriert
  • Ändern Sie die Modulgrößenoption für verschiedene Bildschirmgrößen und passen Sie ihre Ausrichtung nach rechts an, indem Sie zum Größenblock gehen und dann die Einstellungen wie folgt ändern:
    • Breite : Desktop = 10 %, Tablet = 20 %, Telefon = 30 %
    • Modulausrichtung : Rechts
  • Fügen Sie dem Modul eine benutzerdefinierte CSS-Klasse hinzu, um die Karussellaktion später auszulösen, indem Sie zur Registerkarte „ Erweitert “ → zum Block „ CSS-ID & Klassen “ wechseln und dann die benutzerdefinierte CSS- Klasse „Zurück-Schaltfläche“ zum Feld „CSS-Klasse“ hinzufügen.
  • Verwandeln Sie den Cursor in einen Zeiger, indem Sie das folgende CSS-Snippet zu Custom CSS → Main Element hinzufügen:
    • cursor: pointer;

Klonen Sie die Schaltflächenzeile und verschieben Sie sie unter die Blogzeile

Sobald die vorherige Schaltfläche eingestellt ist, klonen wir ihre Zeile und das enthaltene Modul, damit wir die Schritte nicht wiederholen müssen, verschieben Sie die Zeile unter die Zeile mit den Blogbeiträgen und ändern Sie einfach einige Einstellungen im geklonten Klappentextmodul für das Symbol, den Titel, und die benutzerdefinierte CSS-Klasse für die nächste Schaltfläche. Die geänderten Einstellungen sind wie folgt:

  • Ändern Sie auf der Registerkarte Inhalt den Wert von:
    • Titel: Weiter
    • Symbol: Rechtspfeil
  • Wechseln Sie dann zur Registerkarte Erweitert , um die CSS-Klasse zu ändern
    • CSS-ID & Klassen → CSS-Klasse : Weiter-Schaltfläche

Schritt 3: Bereiten Sie das Blog-Modul vor

Bereiten Sie die Reihe für die Karussell-Blog-Beiträge vor

Bevor wir das Modul berühren, bereiten wir zuerst die Zeile des Blog-Moduls vor, bevor wir es in Karussell-Blog-Posts umwandeln. Beginnen Sie mit dem Öffnen der Blog-Zeileneinstellungen und nehmen Sie dann wie folgt Änderungen an den Einstellungen vor:

  • Gehen Sie zur Registerkarte Design → Dimensionierungsblock und stellen Sie dann Folgendes ein:
    • Breite: 100 %
    • Maximale Breite: 100 %
  • Wechseln Sie zur Registerkarte Erweitert → Sichtbarkeitsblock :
    • Horizontaler Überlauf : Ausgeblendet
    • Vertikaler Überlauf: Ausgeblendet

Die obigen Einstellungen stellen sicher, dass das Karussell keine horizontalen Bildlaufleisten auf Ihrer Seite erscheinen lässt.

Bereiten Sie das Blog-Modul vor

Sobald Sie die Reihe vorbereitet haben, ist es an der Zeit, das Blog-Modul zu optimieren. Beginnen Sie mit dem Öffnen der Blog-Einstellungen und nehmen Sie dann wie folgt Änderungen an den Einstellungen vor:

  • Setzen Sie auf der Registerkarte Inhalt → Block Elemente die Einstellung Paginierung anzeigen auf Nein
  • Wechseln Sie zum Design -Tab → Layout -Block, um das Blog-Post-Layout auf volle Breite zu ändern
    • Layout: Volle Breite
  • Fügen Sie dann eine Überlagerung hinzu, indem Sie die folgenden Werte zum Überlagerungsblock hinzufügen
    • Vorgestelltes Bild-Overlay : Ein
    • Farbe des Overlay-Symbols: #ffffff
    • Overlay-Hintergrundfarbe: rgba(1,0,66,0.33)
  • Öffnen Sie immer noch auf der Registerkarte Design den Bildblock und wählen Sie einen der Box-Schatteneffekte aus der Option Image Box Shadow aus, um dem vorgestellten Bild einen Schatteneffekt hinzuzufügen und die folgende Farbe zu verwenden:
    • RGB(1,0,66,0,33)
  • Wechseln Sie zur Registerkarte „ Erweitert “, fügen Sie dem Blogmodul eine benutzerdefinierte CSS-Klasse hinzu, um das Karussell später zu aktivieren, indem Sie den Block „ CSS-ID und -Klassen “ öffnen, und fügen Sie dann die folgende CSS-Klasse hinzu:
    • CSS-Klasse: wpblog-Modul
  • Fügen Sie etwas Platz zwischen dem vorgestellten Bild und dem Titel und auch etwas Platz zwischen dem Post-Meta und dem Auszug hinzu, indem Sie einige Ränder hinzufügen. Fügen Sie dazu das folgende CSS-Snippet zum benutzerdefinierten CSS -Block hinzu:
    • Titel: margin-top: 10px;
    • Post Meta : margin-bottom: 30px;

Und das war's für die Einstellungen des Blog-Moduls. Verwandeln wir es in ein ziehbares und wischbares Karussell, oder?

Schritt 4: Verwandeln Sie die Blog-Beiträge in ein ziehbares und streichbares Karussell

Sobald die Einstellungen des Blog-Moduls festgelegt sind, ist es jetzt an der Zeit, die Blog-Posts in ein ziehbares und wischbares Karussell zu verwandeln. Dazu müssen wir eine Slick JS-Bibliothek und einige benutzerdefinierte Codes hinzufügen, damit es funktioniert.

Fügen Sie Slick JS-Funktionalität und Slide CSS hinzu

Slick JS ist ein jQuery-Plug-in zum Erstellen vollständig anpassbarer, reaktionsschneller und mobilfreundlicher Karussells. Um die Funktionalität von Slick JS hinzuzufügen, fügen Sie ein Codemodul zu einer beliebigen Spalte auf der Seite hinzu, oder Sie können das folgende Skript mit URL zum Kopf Ihrer Website hinzufügen, indem Sie zu Divi → Divi-Designoptionen → Integrationen gehen: 

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

Für dieses Tutorial verwenden wir das Code-Modul und platzieren den obigen Code darin, dann fügen wir den folgenden Folien-CSS-Code direkt unter dem Ende des script-Tags hinzu. 

 <Stil>
	.slick-slide {
	Schwimmer: links;
	Marge: 2vw;
	}
</style>

Lassen Sie das Karussell seine Form annehmen

Damit das ziehbare und wischbare Karussell endlich seine Form annimmt, müssen Sie den folgenden JQuery-Code hinzufügen. Sie können den Code nach dem CSS-Code der vorherigen Folie platzieren. Ohne weitere Umschweife hier der Code: 

 <Skript>
  jQuery(Funktion($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('slider'); 
postContainer.addClass('Blog-Karussell'); 
 
$('.blog-karussell').slick({
    unendlich: wahr,
    SlidesToShow: 3,
    slidesToScroll: 1,
    centerMode: wahr,
    centerPadding: '10%',
    wischen: wahr,
    prevArrow: ZurückButton,
    nextArrow: nextButton,
   
    reaktionsschnell: [{
    Haltepunkt: 1079, Einstellungen: {
    SlidesToShow: 1
    }
    }]
 
});
});
</script>

Der obige Code sorgt auch dafür, dass die Schaltflächen Zurück und Weiter ordnungsgemäß als Navigationsschaltflächen funktionieren. Sie können sich das Bild unten für unsere Codeplatzierung im Codemodul ansehen.

Schritt 5: Sehen Sie sich Ihre Karussell-Blog-Beiträge live an

Jetzt sind alle erforderlichen Codes bereits vorhanden, das Blog-Modul befindet sich jedoch immer noch im Layout in voller Breite in unserem Divi-Builder. Woher?

Keine Sorge, speichern Sie die Seite und beenden Sie den visuellen Builder, um Ihre Blog-Beiträge vom Frontend aus anzuzeigen. Und voila, Ihre Blog-Posts werden in ein ziehbares und wischbares Karussell mit den Schaltflächen „Weiter“ und „Zurück“ umgewandelt, um Ihnen eine weitere Möglichkeit zu geben, durch die Karussell-Blog-Posts zu navigieren.

Das Endergebnis

Wenn Sie das Blog-Modul schon eine Weile verwenden, möchten Sie vielleicht einen anderen Stil neben dem Grid- und Fullwidth-Layout für Ihre Blog-Posts haben, die das Standardlayout sind, das Sie sofort bekommen können. Dieses Tutorial hat Ihnen gezeigt, wie Sie Ihre Blog-Posts in ein ziehbares und wischbares Karussell verwandeln, das Ihnen mehr Möglichkeiten bietet, Ihre Website-Elemente wie Blog-Seiten oder verwandte Posts zu gestalten.

Divi herunterladen