Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen.

Möchten Sie wissen, wie Sie Artikelauszüge beim Hover in Divi anzeigen können?

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 diese Blog-Post-Snippets für den Hover-Toggle-Effekt in Divi erstellen. 

Lassen Sie uns beginnen!

Übersicht

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

Auszüge von Artikeln auf Hover in Divi anzeigen

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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

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
Auszüge von Artikeln auf Hover in Divi anzeigen

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 zu den Einstellungen des Blog-Moduls, setzen Sie auf der Registerkarte Inhalt unter Elemente die Option „Weiterlesen-Schaltfläche anzeigen“ auf „Ja“.

Sie möchten Ihre Produkte im Internet verkaufen?

Laden Sie WooCommerce kostenlos herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen und ganz einfach Ihren Online-Shop zu erstellen. Perfekt für Anfänger.

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-width981px) {
  2.   /* add transition for post content*/
  3.   .toggle-blog-excerpt .et_pb_post .post-content {
  4.     -webkit-transitionall 500ms !important;
  5.     transitionall 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.     opacity1;
  11.     max-height:none;
  12.   }
  13.   /* hide post content */
  14.   .toggle-blog-excerpt .et_pb_post .post-content {
  15.     visibilityhidden;
  16.     opacity0;
  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.     visibilityvisible;
  22.     opacity:1;
  23.     max-height500px;
  24.   }
  25.   /* set min-height for all post items */
  26.   .toggle-blog-excerpt .et_pb_post {
  27.     min-height400px
  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

Jetzt, da das CSS vorhanden ist, um uns den Umschalteffekt für unsere Blog-Post-Snippets zu geben, können wir dem Blog-Modul mit dem Divi-Builder beliebige zusätzliche Stile hinzufügen.

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
Auszüge von Artikeln auf Hover in Divi anzeigen

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
Auszüge von Artikeln auf Hover in Divi anzeigen

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

Fazit

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, Ihrem Divi-Website-Blog einen zusätzlichen Schub in Design und Funktionalität zu verleihen. Erzähl uns von deinen Erfahrungen in den Kommentaren.