Divi: So zeigen Sie Artikelauszüge beim Hover an

Möchten Sie wissen, wie Sie Artikel-Snippets anzeigen, wenn Sie mit der Maus darüber fahren Divi ?

Die Vorschau von Blogpost-Snippets beim Hovern kann eine effektive Möglichkeit sein, ein kompaktes Rasterlayout für Ihre Blogposts beizubehalten, ohne diese Snippets ganz aufzugeben. 

Die Idee ist also, Snippets zunächst auszublenden und sie dann anzuzeigen, wenn Sie mit der Maus über einen Beitrag im Raster fahren. Daher können Leser mehr Posts sehen und gleichzeitig Ausschnitte der Posts sehen, die sie interessieren.

In diesem Tutorial zeigen wir Ihnen also, wie Sie diesen Umschalteffekt für die Snippets des Blog-Beitrags beim Hover-in erstellen Divi. 

Lassen Sie uns beginnen!

Übersicht

Hier ist zunächst ein Überblick darüber, was wir in diesem Tutorial erstellen werden.

Erstellen des Blog-Modul-Layouts

Zuerst müssen wir ein grundlegendes Layout für unsere Blogbeiträge erstellen. Für dieses Tutorial fügen wir einer Spalte eine Zeile hinzu und fügen ein Blog-Modul darin ein.

Erstellen Sie eine Linie

Fügen Sie zunächst eine Zeile mit einer Spalte in den Abschnitt ein

Linienbreite

Gehen Sie dann zu den Leitungseinstellungen. Ändern Sie dann auf der Registerkarte „Stil“ unter „Größe“ die Breiten wie folgt:

• Maximale Breite: 90 %
• Maximale Breite: 1200px

Fügen Sie ein Blog-Modul hinzu

Fügen Sie dann ein Blog-Modul in die Spalte der zuvor erstellten Zeile ein.

Blog-Modul-Einstellungen

Gehen Sie dann auf der Registerkarte zu den Blog-Moduleinstellungen InhaltSetzen Sie unter „Elemente“ die Option „Schaltfläche „Mehr lesen“ anzeigen“ auf „Ja“.

Gehen Sie nun auf die Registerkarte Stil, wählen Sie unter Vorlage die Vorlage „Raster“ als Layout für den Blog aus.

Gehen Sie schließlich zur Registerkarte Erweitert und fügen Sie die folgende CSS-Klasse hinzu: 

CSS-Klasse: Toggle-Blog-Auszug

Anschließend verwenden wir diese Klasse im nächsten Schritt als Selektor für unseren benutzerdefinierten CSS-Code.

Fügen Sie benutzerdefiniertes CSS mit dem Code-Modul hinzu.

Zu diesem Zeitpunkt sind unsere Blog-Beiträge in einem Raster angeordnet, und dem Blog-Menü wurde eine benutzerdefinierte CSS-Klasse hinzugefügt. Wir werden also diesen CSS-Klassenselektor verwenden, um dieses Blog-Modul gezielt anzusprechen und einen Umschalteffekt hinzuzufügen, wenn wir mit der Maus über einen Artikel fahren.

Um CSS hinzuzufügen, verwenden wir das Code-Modul. Fügen Sie dazu ein Code-Modul unter dem Blog-Modul hinzu.

Fügen Sie als Nächstes das benutzerdefinierte CSS unten ein, das zum Erstellen des Artikel-Snippet-Umschalteffekts beim Hover benötigt wird. Stellen Sie vor allem sicher, dass Sie den CSS-Code zwischen den erforderlichen Style-Tags einfügen.

1. @media all and (min-width: 981px) {
2.   /* add transition for post content*/
3.   .toggle-blog-excerpt .et_pb_post .post-content {
4.     -webkit-transition: all 500ms !important;
5.     transition: all 500ms !important;
6.   }
7.   /* keep post content visible in visual builder */
8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
9.     visibility:visible;
10.     opacity: 1;
11.     max-height:none;
12.   }
13.   /* hide post content */
14.   .toggle-blog-excerpt .et_pb_post .post-content {
15.     visibility: hidden;
16.     opacity: 0;
17.     max-height:0px;
18.   }
19.   /* show post content when hovering over post item */
20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
21.     visibility: visible;
22.     opacity:1;
23.     max-height: 500px;
24.   }
25.   /* set min-height for all post items */
26.   .toggle-blog-excerpt .et_pb_post {
27.     min-height: 400px; 
28.   }
29. }

Sehen wir uns das bisher erzielte Ergebnis an.

Ergebnis

Fügen wir dem Blog-Modul mit dem Divi-Builder ein zusätzliches Styling hinzu

Nachdem nun das CSS eingerichtet ist, um uns den Umschalteffekt für unsere Blog-Post-Snippets zu ermöglichen, können wir dem Blog-Modul mithilfe des Konstruktors beliebige zusätzliche Stile hinzufügen Divi.

Für dieses Beispiel nehmen wir minimale Anpassungen am Stil vor, aber Sie können auch Ihren eigenen Stil ausprobieren.

Stil des Artikeltitels

• Titel bei schwachem Licht: Fetter Text
• Titeltextfarbe: #6D6A7E
• Titeltextgröße: 20px
• Höhe der Titelzeile: 1.3 em

Textstil "Weiterlesen"

• Lesen Sie mehr Schwaches Licht: Fetter Text
• Lesen Sie mehr Kopierstil: TT
• Textfarbe Lesen Sie mehr: #6D6A7E
• Buchstabenabstand Weiterlesen: 1px
• Zeilenhöhe Weiterlesen: 3.5 m

Ändern Sie die Anzeige der Textpaginierung

• Paginierung anzeigen Schwaches Licht: Fetter Text
• Textfarbe Paginierung anzeigen: #6D6A7E
• Buchstabenabstand Paginierung anzeigen: 1px
• Paginierung anzeigen Kopierstil: TT

Rand entfernen

• Rahmenbreite des Rasterlayouts: 0px

Hover-Schattenbox-Stil

• Schattenbox: Siehe Screenshot
• Ausgangsposition: 0px
• Box-Schattenunschärfe-Stärke: 38px
• Schriftfarbe Untertitel: rgba (109,106,126,0.25)

Endergebnis

Zusammenfassung

Zusammenfassend lässt sich sagen, dass Ihnen das Hinzufügen einiger CSS-Snippets, wie in diesem Tutorial gezeigt, die Funktionalität bietet, die Sie benötigen, um Blog-Post-Snippets mit einem schönen Hover-Effekt zu rocken. 

Das Wichtigste bei dieser Methode ist, dass wir dem Blog-Modul mit den integrierten Optionen von Divi nach Belieben zusätzliches Styling hinzufügen können. Darüber hinaus können Sie Post-Elemente anpassen, einschließlich des Hinzufügens weiterer Hover-Effekte. 

Hoffentlich wird dies dazu beitragen, dem Blog Ihre zu geben Website Divi das Extra an Design und Funktionalität. Erzähl uns von deinen Erfahrungen in den Kommentaren.