So schalten Sie Blogpost-Auszüge bei Hover in Divi . um

Veröffentlicht: 2021-08-02

Das Umschalten von Blog-Post-Auszügen beim Hover kann eine effektive Möglichkeit sein, ein kompaktes Raster-Layout für Ihre Blog-Posts beizubehalten, ohne diese Auszüge ganz aufzugeben. Die Idee ist, die Auszüge zunächst auszublenden und dann ihre Sichtbarkeit umzuschalten, wenn Sie mit der Maus über einen Beitrag im Raster fahren. Auf diese Weise können Benutzer mehr Beiträge im Browser-Ansichtsfenster sehen, während dem Benutzer die Möglichkeit geboten wird, Auszüge von Beiträgen anzuzeigen, an denen sie interessiert sind, indem er mit der Maus über den Beitrag fährt.

In diesem Tutorial zeigen wir Ihnen, wie Sie Blogpost-Auszüge beim Hover in Divi umschalten. Dazu fügen wir ein paar benutzerdefinierte CSS-Schnipsel hinzu, die die Auszüge des Post-Items eines Blog-Moduls beim Hover umschalten (keine JQuery erforderlich). Sobald der Code vorhanden ist, können Sie das Blog-Modul mit den integrierten Einstellungen von Divi nach Belieben gestalten.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das 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 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

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.

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 Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

divi-Benachrichtigungsfeld

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Erweiternde Eckregisterkarten

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. Wählen Sie die Option „Von Grund auf neu erstellen“.

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

So schalten Sie Blogpost-Auszüge bei Hover in Divi . um

Erstellen des Blog-Modul-Layouts

Zuerst müssen wir ein grundlegendes Layout für unsere Blogbeiträge erstellen. In diesem Beispiel fügen wir eine einspaltige Zeile mit einem darin enthaltenen Blogmodul hinzu.

Zeile erstellen

Fügen Sie dem Abschnitt eine einspaltige Zeile hinzu.

Reihenbreite

Aktualisieren Sie im modalen Zeileneinstellungen die folgenden Designeinstellungen, um die Breite anzupassen.

  • Breite: 95%
  • Maximale Breite: 1200px

Blog-Modul hinzufügen

Fügen Sie in der Spalte der Zeile ein neues Blog-Modul hinzu.

Einstellungen des Blog-Moduls

Aktualisieren Sie als Nächstes die Inhaltseinstellungen des Blogmoduls, indem Sie auswählen, dass die Schaltfläche Weiterlesen angezeigt wird.

Wählen Sie auf der Registerkarte Design das Rasterlayout für den Blog aus.

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

  • CSS-Klasse: toggle-blog-excerpt

Wir werden diese Klasse im nächsten Schritt als Selektor für unseren benutzerdefinierten CSS-Code verwenden.

Benutzerdefiniertes CSS mit Codemodul hinzufügen

An dieser Stelle haben wir ein grundlegendes Raster-Layout für unsere Blog-Posts mit einer benutzerdefinierten CSS-Klasse, die dem Blog-Modul hinzugefügt wurde. Wir werden diesen CSS-Klassenselektor verwenden, um dieses bestimmte Blogmodul anzusprechen und dem Beitragsauszug des Beitragselements einen Umschalteffekt beim Hover hinzuzufügen.

Um das CSS hinzuzufügen, verwenden wir ein Codemodul. Fügen Sie unterhalb des Blogmoduls ein neues Codemodul hinzu.

Fügen Sie das folgende benutzerdefinierte CSS ein, das für den Umschalteffekt nach dem Auszug erforderlich ist. Stellen Sie sicher, dass Sie das CSS in die erforderlichen Style- Tags einschließen. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Schauen wir uns das bisherige Ergebnis auf der Live-Seite an.

Ergebnis

Wir werden den Code am Ende des Artikels etwas detaillierter behandeln. Aber jetzt schauen wir uns das bisherige Ergebnis an.

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

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

Für dieses Beispiel werden wir minimale Anpassungen am Stil vornehmen, aber Sie können auch Ihr eigenes Styling erkunden.

Titel des Style-Beitrags

  • Schriftstärke des Titels: Fett
  • Titeltextfarbe: #6d6a7e
  • Titeltextgröße: 20px
  • Höhe der Titelzeile: 1,3 em

Stil Weiterlesen Text

  • Weiterlesen Schriftstärke: Fett
  • Lesen Sie mehr Schriftstil: TT
  • Lesen Sie mehr Textfarbe: #6d6a7e
  • Lesen Sie mehr Buchstabenabstand: 1px
  • Lesen Sie mehr Linienhöhe: 3.5em

Stil-Paginierung

  • Paginierung Schriftstärke: Fett
  • Paginierungs-Schriftart: TT
  • Paginierungstextfarbe: #6d6a7e
  • Paginierung Buchstabenabstand: 1px

Rahmen entfernen

  • Rahmenbreite des Rasterlayouts: 0px

Stylebox-Schatten beim Hover

  • Boxschatten: Siehe Screenshot
  • Vertikale Position des Boxschattens: 0px
  • Stärke der Box-Schattenunschärfe: 38px
  • Schattenfarbe (Desktop): transparent
  • Schattenfarbe (Hover): rgba(109,106,126,0,25)

Endergebnis

Über den CSS-Code

Wenn Sie an der Aufschlüsselung des benutzerdefinierten CSS interessiert sind, das zuvor dem Codemodul hinzugefügt wurde, ist es hier.

Zuerst müssen wir das gesamte CSS in eine Medienabfrage einschließen, die das CSS nur auf Desktop-Browser anwendet. 

@media all and (min-width: 981px) {

}

Zweitens müssen wir einen Übergang mit einer Dauer von 500 ms zum Inhalt des Beitrags/Auszug zu den Stiländerungen hinzufügen, die auftreten, wenn der Mauszeiger über das Beitragselement bewegt wird.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

Drittens müssen wir sicherstellen, dass der Inhalt/Auszug des Beitrags sichtbar bleibt, wenn der Visual Builder verwendet wird, damit wir Änderungen vornehmen können.

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

Viertens müssen wir den Inhalt/Auszug des Beitrags standardmäßig ausblenden, wenn die Seite geladen wird. Dazu verwenden wir visible:hidden, um den Inhalt auszublenden. Dann fügen wir opacity:0 hinzu, damit wir einen Ein- und Ausblendeffekt erhalten, wenn wir opacity:1 zum Hover-Zustand hinzufügen. Wir verwenden auch max-height:0px, um den Schiebe-Toggle-Effekt zu erzielen, wenn wir dem Hover-Zustand max-height:500px hinzufügen.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

Fünftens zeigen wir den Inhalt/Auszug des Beitrags, wenn sich das Beitragselement (.et_pb_post) im Schwebezustand befindet. Dazu ändern wir die Sichtbarkeit auf sichtbar, die Deckkraft auf 1 und die maximale Höhe auf 500px.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

Für das letzte Snippet können wir allen Post-Elementen dieselbe Mindesthöhe geben, um ein saubereres vertikal ausgerichtetes Rasterlayout zu erhalten.

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

Hier ist noch ein Blick auf den endgültigen Code. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Abschließende Gedanken

Wie in diesem Tutorial gezeigt, können Sie durch das Hinzufügen einiger CSS-Schnipsel die erforderliche Funktionalität zum Umschalten von Blogpost-Auszügen mit einem schönen Hover-Effekt erhalten. Das Beste an dieser Methode ist, dass wir auf dieser Funktionalität aufbauen können, indem wir dem Blog-Modul mithilfe der integrierten Optionen von Divi jedes zusätzliche Styling hinzufügen, das wir möchten. Auf diese Weise können Sie den Post-Elementen erweitertes Styling hinzufügen, einschließlich mehr Hover-Effekten. Hoffentlich wird dies dazu beitragen, dem Blog Ihrer Divi-Website einen zusätzlichen Schub in Design und Funktionalität zu geben.

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

Danke schön!