So entwerfen Sie aktuelle Beiträge nach Kategorie-Layout mit coolen Hover-Effekten in Divi

Wir alle sind es gewohnt, dass aktuelle Beiträge auf einer Website angezeigt werden. Sie werden normalerweise mit dem WordPress-Widget „Recent Post“ oder einem Plugin generiert, um die zuletzt veröffentlichten Artikel im Blog anzuzeigen. Und sie erscheinen normalerweise auf der Blog-Seite, am Ende von Posts, in Seitenleisten oder als hervorgehobener Abschnitt einer Landing Page (so ähnlich).

In diesem Tutorial zeigen wir Ihnen, wie Sie die letzten Beiträge nach Kategorie anzeigen. Wir werden nur den Divi Builder (und einige Blog-Module) verwenden, um einen Abschnitt zu erstellen, der die neuesten Beiträge aus vier verschiedenen Kategorien anzeigt. Dieser Abschnitt mit den neuesten Posts nach Kategorie enthält einzigartige Kategorie-Tags, Animationen und Hover-Effekte – alles ohne Plugin.

Hör zu!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design und die Funktionalität des Layouts der letzten Beiträge nach Kategorie, das wir gemeinsam erstellen werden.

Laden Sie die neuesten Beiträge nach Kategorie-Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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 in der Liste sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht abgemeldet und erhalten keine zusätzlichen 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!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Lasst uns zum Tutorial kommen, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Außerdem hängt die Funktionalität des Abschnitts mit den letzten Posts davon ab, dass auf Ihrer Website tatsächliche Blog-Posts mit zugewiesenen Kategorien vorhanden sind. Stellen Sie also sicher, dass Sie ein paar Schein-Blog-Posts eingerichtet haben, wenn Sie eine Test-Site verwenden.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen der letzten Beiträge nach Kategorie in Divi

Erstellen Sie eine 4-spaltige Zeile

Um mit dem Divi Builder loszulegen, erstellen Sie eine 4-Spalten-Zeile.

Blog erstellen Modul 1

Jede der vier Spalten enthält ein separates Blog-Modul. Fügen Sie das erste Blog-Modul zu Spalte 1 hinzu.

Jedes der Blog-Module zeigt standardmäßig den neuesten Beitrag von Ihrer Website an. Alles, was wir tun werden, ist eine bestimmte Kategorie auszuwählen, die für dieses bestimmte Blog-Modul hinzugefügt werden soll. Dann begrenzen wir die Beitragsanzahl auf 1, sodass nur ein Beitrag angezeigt wird. Dadurch erhalten wir dynamisch den neuesten Blogbeitrag für diese Kategorie.

Blog-Inhalte

Aktualisieren Sie die Blog-Inhaltsoptionen wie folgt:

• Beitragstyp: Beiträge
• Beitragsanzahl: 1
• Enthaltene Kategorien: Nachrichten (oder eine Ihrer eigenen)
• Beitragsauszüge verwenden: NEIN
• Auszug Länge: 120

Elementoptionen

Aktualisieren Sie dann die Elementoptionen wie folgt:

• Kategorien anzeigen: NO
• Auszug anzeigen: NEIN (Desktop), JA (Hover und Tablet)
• Paginierung anzeigen: NEIN

Blog-Design

Aktualisieren Sie dann das Design wie folgt:

• Hintergrundfarbe (Desktop): #ffffff
• Hintergrundfarbe (Hover): #8ac829
• Schriftstärke des Titels: Semi Bold
• Titelschriftart: TT
• Titeltextgröße: 24px
• Titel-Buchstaben-Abstand: 1px
• Höhe der Titelzeile: 1,4 em
• Textkörperfarbe: #ffffff
• Gewicht der Metaschrift: Leicht
• Meta-Buchstabenabstand: 3px

• Mindesthöhe: 450px (Desktop), automatisch (Tablet)
• Polsterung: 5 % oben, 5 % unten, 5 % links, 5 % rechts
• Boxschatten: Siehe Screenshot
• Animationsstil: Zoom

Das kümmert sich um das Design unseres ersten Blog-Moduls. Jetzt müssen wir unser benutzerdefiniertes Kategorie-Tag erstellen.

Kategorie-Tag erstellen 1

Fügen Sie zum Erstellen des Tags ein neues Textmodul unter dem Blog-Modul hinzu und ziehen Sie es dann über das Blog-Modul.

Textinhalt

Aktualisieren Sie den Hauptteilinhalt mit dem Namen der Kategorie, die Sie für das Blogmodul ausgewählt haben. In meinem Beispiel zeige ich den letzten Beitrag aus der Kategorie Nachrichten an, also füge ich das Wort "Nachrichten" zum Hauptinhalt hinzu.

Entwerfen des Kategorie-Tags

Aktualisieren Sie unter den Textdesign-Einstellungen Folgendes:

• Hintergrundfarbe: #8ac829
• Schriftstärke des Textes: Ultra Bold
• Text Textfarbe: #ffffff
• Textausrichtung: Mitte
• Breite: 120px
• Rand: 80px oben, -80px unten
• Polsterung: 10px oben, 10px unten
• Animationsstil: Ausblenden
• Animationsverzögerung: 1000ms
• Z-Index: 1

Da wir einen negativen Rand verwenden, um das Tag über der Blog-Karte abzulegen, müssen wir den z-Index auf 1 setzen, damit das Tag über dem Blog-Modul bleibt.

Nachdem wir nun einen Beitrag erstellt haben, können wir den Drahtmodellansichtsmodus bereitstellen und diese Module in die anderen Spalten kopieren.

Kopieren Sie das Text- und Blog-Modul in Spalte 1 und fügen Sie sie in die Spalten 2, 3 und 4 ein, sodass Sie in jeder Spalte genau die gleichen Module haben.

Für jedes duplizierte Blog-Modul müssen wir ihm eine neue Blog-Kategorie und eine neue Hover-Hintergrundfarbe zuweisen. Und für jedes duplizierte Kategorie-Tag müssen wir den Kategorienamen aktualisieren, damit er der für das Blog-Modul ausgewählten Kategorie entspricht, und dann die Hintergrundfarbe aktualisieren, damit sie der Hover-Hintergrundfarbe des Blog-Moduls entspricht.

Module in Spalte 2 aktualisieren

Bleiben Sie in der Drahtmodellansicht, öffnen Sie die Einstellungen für das Blogmodul in Spalte 2 und aktualisieren Sie Folgendes:

• Enthaltene Kategorien: Geschäftlich (oder Ihre eigenen)
• Hintergrundfarbe (Hover): #f64937

Aktualisieren Sie anschließend die Einstellungen für den Textbaustein in Spalte 2 wie folgt:

• Körper: „Geschäft“
• Hintergrundfarbe: #f64937

Module in Spalte 3 aktualisieren

Öffnen Sie dann die Einstellungen für das Blog-Modul in Spalte 3 und aktualisieren Sie Folgendes:

• Enthaltene Kategorien: Geld (oder dein eigenes)
• Hintergrundfarbe (Hover): #6529c7

Aktualisieren Sie anschließend die Einstellungen für den Textbaustein in Spalte 3 wie folgt:

• Körper: „Geld“
• Hintergrundfarbe: #6529c7

Module in Spalte 4 aktualisieren

Öffnen Sie dann die Einstellungen für das Blog-Modul in Spalte 4 und aktualisieren Sie Folgendes:

• Enthaltene Kategorien: Coaching (oder Ihr eigenes)
• Hintergrundfarbe (Hover): #f17809

Aktualisieren Sie anschließend die Einstellungen für den Textbaustein in Spalte 4 wie folgt:

• Körper: „Coaching“
• Hintergrundfarbe: #f17809

Aktualisieren der Zeileneinstellungen

Es gibt einige Anpassungen, die wir an unserer Reihe vornehmen müssen, einschließlich einer festgelegten Höhe und einer benutzerdefinierten Bundstegbreite. Aktualisieren Sie die folgenden Zeileneinstellungen:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 2
• Breite: 94%
• Maximale Breite: 1400px
• Höhe: 540px (Desktop), automatisch (Tablet)
• Padding: 0px oben, 0px unten

Wir setzen die Zeilenhöhe auf dem Desktop auf 540px, um zu verhindern, dass die Zeile erweitert und andere Inhalte auf der Seite verschoben wird, wenn der Mauszeiger über eine Blogkarte bewegt wird. Stellen Sie sicher, dass die Höhe auf dem Tablet auf automatisch eingestellt ist, damit Sie keine Inhalte ausblenden.

Aktualisieren der Einstellungen für jede Spalte

Um den letzten Blog-Posts einen Hover-Effekt zu verleihen, der auf beide Module gleichzeitig angewendet wird, können wir den Hover-Effekt der Spalte hinzufügen, die die beiden Module enthält, aus denen der Blog-Post besteht. Öffnen Sie die Einstellungen für jede der Spalten und aktualisieren Sie Folgendes:

• Maßstab transformieren (Hover): 115%

Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement nur auf dem Tablet-Display hinzu:

transform: none !important

Dieser kleine Ausschnitt deaktiviert den Hover-Effekt der Transformationsskalierung für Mobilgeräte.

Jetzt, wenn die letzten Beiträge alle mit einem entsprechenden Kategorie-Tag und einer passenden Hintergrundfarbe versehen sind, die angezeigt werden, wenn Sie mit der Maus über die Karte fahren. Außerdem wird die Karte größer und zeigt den Ausschnitt auch beim Schweben an.

Aktualisieren der Abschnittseinstellungen

Geben wir dem Abschnitt einen neuen Hintergrundverlauf und etwas Auffüllung. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Hintergrundfarbe links: #6529c7
• Hintergrund mit Farbverlauf rechts: #f64937
• Verlaufsrichtung: 270deg
• Polsterung: 10vw oben, 10vw unten

Endergebnis

Das ist es! Schauen wir uns das Endergebnis an. Dieses Bild enthält einen Titel, der leicht hinzugefügt werden kann, um das Design zu vervollständigen.

Und hier sind die Animations- und Hover-Effekte.

Abschließende Gedanken

Das Erstellen neuer Posts nach Kategorie-Layout ist wirklich ein einfacher Prozess, wenn Sie ein wenig über den Tellerrand hinausdenken. Alles, was Sie wirklich tun müssen, ist, für jede Kategorie, die Sie anzeigen möchten, ein Blog-Modul zu erstellen. Beschränken Sie dann dieses Modul darauf, nur den neuesten Beitrag für eine bestimmte Kategorie anzuzeigen. Danach haben Sie die Macht von Divi an Ihrer Seite, um sich um das Design zu kümmern.

Dieses Layout kann überall auf Ihrer Website verwendet werden, einschließlich Theme Builder-Vorlagen. Sie können sie also mit den Portabilitätsoptionen überall importieren, wo Sie sie benötigen. Ich hoffe, es ist nützlich für Ihr nächstes Projekt oder gibt Ihnen zumindest ein wenig Inspiration, um diese Räder für noch bessere Divi-Designs zum Laufen zu bringen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!