Das Divi Blog-Modul verfügt über eine Layout-Option in Form eines nützlichen Rasters für Ihre Blog-Posts. Die Raster-Vorlage organisiert Ihre Blog-Posts in Feldern oder Karten, die die Sichtbarkeit von Elementen auf einem Bildschirm im Vergleich zur Standardansicht vereinfachen.

Mit den Einstellungen des Blog-Moduls können Sie das Gesamtdesign Ihres Netzwerks anpassen. Sie können ganz einfach festlegen, dass alle Ihre Karten dieselbe Hintergrundfarbe, Schriftart, dieselben Ränder usw. haben. Die Stiloptionen sind jedoch auf das Design des Rasters als Ganzes beschränkt, was es schwierig macht Anwenden mehrerer oder unterschiedlicher Designs auf die Karten innerhalb des Rasters.

Heute zeige ich Ihnen, wie Sie mehr als einen Stil gezielt auf die Karten anwenden, aus denen das Raster besteht. Ihr Blog Verwenden von benutzerdefiniertem CSS. Ich zeige Ihnen, wie Sie auf jede andere Karte einen anderen Stil anwenden, um einen Schachbretteffekt zu erzeugen. Außerdem zeige ich Ihnen, wie Sie jede Karte je Reihe unterschiedlich gestalten und wie Sie jede einzelne Karte als Ziel auswählen.

Das sind also 4 Beispiele für die Anpassung Ihr Blog, einschließlich einiger Hover-Effekte, die Sie verwenden können. Am Ende dieses Tutorials werden Sie in der Lage sein, tolle Designs für zu erstellen Ihr Blog.

Andere Tutorials zum Thema Divi

Lassen Sie uns beginnen.

Konfiguration Layout-Raster für Ihren Blog

Vergewissern Sie sich vor dem Entwurf der Blog-Modulkarten, dass mindestens 12-Artikel mit einem Bild in der Box erstellt wurden.

Sobald Ihre Nachrichten erstellt wurden, erstellen Sie eine neue Seite. Stellen Sie auf Ihrer neuen Seite das Blog-Modul in einer Spalte mit voller Breite in einem Standardteil bereit:

Konfigurieren des Layouts eines Divi-Blogs

Klicken Sie hier, um die Einstellungen des Blog-Moduls zu bearbeiten. Ändern Sie unter Allgemeine Einstellungen die folgenden Einstellungen:

  • Layout: Raster (Grid)
  • Zahl der Artikel: 12
  • Ausgewähltes Bild anzeigen: JA
  • Knopf lesen: ON

Divi Grid Konfiguration

Geben Sie unter Benutzerdefiniertes CSS "Gridcard" in das Textfeld CSS-ID ein. Auf diese Weise können wir nur dieses Blog-Modul personalisieren.

Gridcard CSS Divi

Speichern Sie Ihre Änderungen

So verstehen Sie das "Grid" -Layout für das Blog

Nun, da Sie einen Blog Gitter an der richtigen Stelle ist es wichtig, die Struktur des Layouts des Netzes zu verstehen, so dass Sie Karten der Blog-Modul finden können Sie anpassen möchten.

Das Blog-Raster ist mit einem dreispaltigen Layout konfiguriert. Das Folgende ist eine Illustration des Blog-Rasters mit 12-Blog-Artikeln, die in drei Spalten unterteilt sind:

Präsentation des Grid Divi Layouts

Die Blog-Ticketkarten sind in jeder Spalte von oben nach unten angeordnet. Wenn Sie ihnen also eine Nummer geben möchten, müssen Sie 1 bis 4 für jede Länge von oben nach unten zählen:

Divi-Artikel zählen

Da Sie die numerische Reihenfolge jeder Blog-Karte in jeder Spalte kennen, können Sie jede Karte auch wie folgt als ungerade oder gerade Zahl identifizieren:

Divi mit gerader und ungerader Zahl

Design Gate Beispiel

Beispiel Nr. 1: Entwurf eines "karierten" Gitters

In diesem ersten Beispiel ziele ich auf alle ungeraden Karten im Blog-Modul (Karten 1 und 3) in der ersten Spalte ab und gebe ihnen eine dunkelgraue Hintergrundfarbe. Gehen Sie dazu zu "Divi → Theme-Optionen" und fügen Sie das folgende CSS in das benutzerdefinierte CSS-Textfeld ein:

#gridcard .Column: first-child Artikel: nth-child (ungerade) {background: #333; }

Hier ist eine Aufschlüsselung dessen, was dieser Code tut:

#gridcard = die ID des gesamten Blog-Moduls

.column: first-child = wähle die erste Spalte im Blog-Modul aus

post: nth-child (ungerade) = wählt alle ungeraden Gegenstände (oder Karten) in der Spalte aus

Zusammengenommen werden die ungeradzahligen Karten in der ersten Spalte des Blog-Moduls mit der ID "Gridcard" ausgewählt.

Dann wird Ihren weißen Text hinzufügen, indem Sie den folgenden CSS auf dem dunklen Hintergrund gehen wird:

#gridcard .Column: first-child Artikel: nth-child (ungerade) .entry-Titel, #gridcard .Column: first-child Artikel: nth-child (ungerade) .post-meta, #gridcard .Column: first-child Artikel: nth-child (ungerade) .post-meta a, #gridcard .Column: first-child Artikel: nth-child (ungerade) .post-Gehalt p {color: #ffffff; }

Dieser Code zielt auf alle Textelemente in Blog-Modulkarten ab (einschließlich Titel, Beitragsmetas, Beitragsmeta-Links usw.). Inhalt des Artikels) und verleiht ihnen die Farbe Weiß.

Hier ist das Ergebnis:

Anpassung des ungeraden Divi-Gitters

Der nächste Schritt beim Erstellen unseres Schachbrett-Layouts besteht darin, die ungeradzahligen Karten in der dritten Spalte anzuvisieren und den dunkelgrauen Hintergrund und den weißen Text wie in der ersten Spalte anzuwenden. Fügen Sie dem Textfeld Benutzerdefiniertes CSS das folgende CSS hinzu:

#gridcard .column: last-child Artikel: nth-child (ungerade) {Hintergrund: # 333; } #gridcard .column: last-child Artikel: nth-child (ungerade) .entry-title, #gridcard .column: last-child Artikel: nth-child (ungerade) .post-meta, #gridcard .column: last- untergeordneter Artikel: n-tes Kind (ungerade) .post-meta a, #gridcard. Spalte: letztes untergeordnetes Element: n-tes Kind (ungerade) .post-Inhalt p {Farbe: #ffffff; }}

Dieser Code zielt auf die "letzte" Spalte ab (In diesem Fall ist die dritte Spalte die letzte Spalte) mit dem Spitznamenelement "last-child".

Für die zweite Spalte (oder Mittel), ziele auf gerade Karten, um den Schachbretteffekt zu vervollständigen. Dazu müssen wir folgendes CSS hinzufügen:

#gridcard .column: n-tes Kind (2) Artikel: n-tes Kind (gerade) {Hintergrund: # 333; } #gridcard .column: nth-child (2) Artikel: nth-child (gerade) .entry-title, #gridcard .column: nth-child (2) Artikel: nth-child (gerade) .post-meta, # gridcard .column: nth-child (2) Artikel: nth-child (gerade) .post-meta a, #gridcard .column: nth-child (2) Artikel: nth-child (gerade) .post-content p {color : #F f f; }}

Nun gehen Sie die Blog-Seite besuchen Sie das Schachbrett Layout der Blog-Modul Karten zu sehen.

Checkerboard Grid Divi Layout

Beispiel 2: Hinzufügen von Hover-Effekten mit dem überprüften Layout

Sobald Sie wissen, wie Sie auf die Blog-Modulkarten abzielen, können Sie jedes Element in der Karte kreativ ändern.

In diesem Beispiel verwende ich das Schachbrett-Layout und dieses Mal ändere ich die vorgestellten Bilder von dunkelgrauen Karten in Schwarzweiß, wenn ich mit der Maus über die Karte fahre. Und ich werde die Bilder auf der Titelseite der weißen Karten heller machen, wenn ich mit der Maus über die Karte schwebe. Fügen Sie dazu im Bereich Benutzerdefiniertes CSS das folgende CSS hinzu (deaktivieren oder schneiden Sie den anderen Code, damit er nicht mit dem neuen kompatibel ist):

#gridcard .column: Artikel des ersten Kindes: nth-child (ungerade), #gridcard .column: Artikel des letzten Kindes: nth-child (ungerade), #gridcard .column: nth-child (2) Artikel: nth-child (gerade) {Hintergrund: # 333; } #gridcard .column: Artikel des ersten Kindes: nth-child (ungerade) .entry-title, #gridcard .column: Artikel des ersten Kindes: nth-child (ungerade) .post-meta, #gridcard .column: first- untergeordneter Artikel: n-tes Kind (ungerade) .post-meta a, #gridcard .column: erstes Kind Artikel: n-tes Kind (ungerade) .post-Inhalt p, #gridcard .column: letztes untergeordnetes Element: n-tes Kind (ungerade) .entry-title, #gridcard .column: Artikel des letzten Kindes: nth-child (ungerade) .post-meta, #gridcard .column: Artikel des letzten Kindes: nth-child (ungerade) .post-meta a , #gridcard .column: last-child Artikel: nth-child (ungerade) .post-content p, #gridcard .column: nth-child (2) Artikel: nth-child (gerade) .entry-title, #gridcard. Spalte: nth-child (2) Artikel: nth-child (gerade) .post-meta, #gridcard .column: nth-child (2) Artikel: nth-child (gerade) .post-meta a, #gridcard .column : n-tes Kind (2) Artikel: n-tes Kind (gerade) .post-content p {color: #fff; } #gridcard .column: n-tes Kind (2) Artikel: n-tes Kind (gerade): Hover-Bild, #gridcard .column: erstes Kind Artikel: n-tes Kind (ungerade): Hover-Bild, #gridcard .column: last -child Artikel: n-tes Kind (ungerade): hover img {-webkit-filter: Graustufen (1); Filter: Graustufen (1); } #gridcard .column: nth-child (2) Artikel: nth-child (ungerade): hover img, #gridcard .column: first-child Artikel: nth-child (gerade): hover img, #gridcard .column: last -child Artikel: n-tes Kind (gerade): hover img {-webkit-filter: Helligkeit (1.5); Filter: Helligkeit (1.5); }}

Sie können den Karten auch einen Inversionseffekt hinzufügen, sodass sie dunkelgrau werden, wenn Sie mit der Maus über die weißen Karten fahren, und wenn Sie mit der Maus über die dunkelgrauen Karten fahren, werden sie weiß.

Fügen Sie den folgenden CSS und CSS oben:

#gridcard .column article, #gridcard .column article img {-webkit-Transition: alle 0.8s; -Moz-Übergang: alle 0.8s; Übergang: alle 0.8s; } #gridcard .column: Artikel des ersten Kindes: n-tes Kind (ungerade): Hover, #gridcard .column: Artikel des letzten Kindes: n-tes Kind (ungerade): Hover, #gridcard .column: n-tes Kind (2) Artikel: n-tes Kind (gerade): hover {Hintergrund: #fff; } #gridcard .column: Artikel des ersten Kindes: nth-child (ungerade): Hover .entry-title, #gridcard .column: Artikel des ersten Kindes: nth-child (ungerade): Hover .post-meta, #gridcard. Spalte: Artikel des ersten Kindes: n-tes Kind (ungerade): Hover .post-meta a, #gridcard .column: Artikel des ersten Kindes: n-tes Kind (ungerade): Hover .post-content p, #gridcard .column: Artikel des letzten Kindes: n-tes Kind (ungerade): Hover-Eintragstitel, #gridcard .column: Artikel des letzten Kindes: n-tes Kind (ungerade): Hover .post-meta, #gridcard .column: Artikel des letzten Kindes : n-tes Kind (ungerade): hover .post-meta a, #gridcard .column: letztes Kind Artikel: n-tes Kind (ungerade): hover .post-content p, #gridcard .column: n-tes Kind (2) Artikel: n-tes Kind (gerade): Hover-Eintrag-Titel, #Gitterkarte .Spalte: n-tes Kind (2) Artikel: n-tes Kind (gerade): Hover-Post-Meta, #Gitterkarte .Spalte: n-tes Kind (gerade) 2) Artikel: n-tes Kind (gerade): Hover .post-meta a, #gridcard. Spalte: n-tes Kind (2) Artikel: n-tes Kind (gerade): Hover .post-Inhalt p {Farbe: # 333; } #gridcard .column: Artikel des ersten Kindes: nth-child (gerade): Hover, #gridcard .column: Artikel des letzten Kindes: nth-child (gerade): Hover, #gridcard .column: nth-child (2) Artikel: n-tes Kind (ungerade): hover {Hintergrund: # 333; } #gridcard .column: Artikel des ersten Kindes: nth-child (gerade): Hover .entry-title, #gridcard .column: Artikel des ersten Kindes: nth-child (gerade): Hover .post-meta, #gridcard. Spalte: Artikel des ersten Kindes: n-tes Kind (gerade): Hover .post-meta a, #gridcard .column: Artikel des ersten Kindes: n-tes Kind (gerade): Hover .post-content p, #gridcard .column: Artikel des letzten Kindes: n-tes Kind (gerade): Hover-Eintragstitel, #gridcard .column: Artikel des letzten Kindes: n-tes Kind (gerade): Hover .post-meta, #gridcard .column: Artikel des letzten Kindes : n-tes Kind (gerade): Hover .post-meta a, #gridcard .column: letztes Kind Artikel: n-tes Kind (gerade): Hover .post-content p, #gridcard .column: n-tes Kind (2) Artikel: n-tes Kind (ungerade): Hover-Eintrag-Titel, #Gitterkarte. Spalte: n-tes Kind (2) Artikel: n-tes Kind (ungerade): Hover-Post-Meta, #Gitterkarte. Spalte: n-tes Kind ( 2) Artikel: n-tes Kind (ungerade): hover .post-meta a, #gridcard .column: n-tes Kind (2) Artikel: n-tes Kind (ungerade): hover .post-content p {Farbe: #fff; }}

Sehen Sie sich jetzt die Auswirkungen auf Ihr Blog an.

Anpassen der Raster beim Schweben von Divi

Beispiel # 3: Individuelle Landkarten durch Linien

Für das dritte Beispiel werde ich den gleichen dunklen Hintergrund und weißen Text auf die Karten in jeder zweiten Zeile (nicht Spalte) anwenden. Dazu müssen Sie alle geraden Karten in jeder der Spalten als Ziel wählen. Gehen Sie zu "Divi → Optionen" des Themas und stellen Sie sicher, dass Sie alle vorherigen CSS-Codes deaktivieren oder entfernen, die Sie seit Beginn dieses Tutorials hinzugefügt haben. Fügen Sie dann das folgende CSS hinzu:

#gridcard Artikel: n-tes Kind (gerade) {Hintergrundfarbe: # 333; } # Gridcard-Artikel: n-tes Kind (gerade) .Eintragstitel, # Gridcard-Artikel: n-tes Kind (gerade). Post-Meta, # Gridcard-Artikel: n-tes Kind (gerade) : n-tes Kind (gerade) .post-content p {Farbe: #fff; }}

Hier ist das Ergebnis:

Konfigurationsergebnis nach Divi Line

Beispiel # 4: Entwerfen einer bestimmten Gitterkarte

Einige von Ihnen möchten möglicherweise eine bestimmte Karte auswählen. Dazu müssen Sie die eindeutige Artikel-ID finden, die jeder Ihrer Karten automatisch zugewiesen wird. In diesem Beispiel verwende ich den Chrome-Browser.

Gehen Sie zur Seite mit Ihrem Blog-Modul und klicken Sie mit der rechten Maustaste auf eine Ihrer Karten. Wählen Sie im angezeigten Optionsfeld "Inspect" aus (einige Browser verfügen möglicherweise über "Inspect Item" oder ähnliches. Dadurch wird das Fenster "Developer Tools" bereitgestellt, in dem sowohl HTML als auch CSS für Sie angezeigt werden Suchen Sie das Artikel-Tag, das Ihren Artikel umschließt, und notieren Sie die ihm zugewiesene Artikel-ID. Dies ist der Selektor, mit dem Sie Ihre individuelle Karte als Ziel festlegen sollten. In meinem Beispiel habe ich Rechtsklick und geklickt inspiziert, um die ID "post-3466" zu finden.

Wie folgt:

Änderung eines einzelnen Artikels

Um diese CSS Karte als Ziel ihm einen grauen Hintergrund mit einem weißen Schrift zu geben, müssen Sie die folgende CSS verwenden:

# post-3466 {Hintergrund: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }}

Auf die Karte wird nun dieser spezielle Stil angewendet.

Das ist alles!

Abschließende Gedanken

Dies sind nur einige Beispiele für die vielen verschiedenen Stile, die Sie mit dieser Art von CSS-Targeting von Blog-Modulkarten erzielen können. Sie müssen nicht mehr für jede Karte den gleichen Stil beibehalten. Sie können sie so gestalten, wie Sie möchten.

Wenn Sie Fragen oder Anregungen haben, zögern Sie nicht, sie mir zu bieten.

[vc_row center_row=“yes“][vc_column width=“1/2″][vcex_button target=“blank“ layout=“expanded“ align=“center“ font_family=“Raleway“ font_weight=“700″ style=“flat“ custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI THEMA HERUNTERLADEN [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=“https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials“ target=“blank“ layout=“expanded“ align=“center“ font_family = „Raleway“ font_weight=“700″ style=“flat“ custom_background=“#c4226e“ custom_hover_background=“#8d184f“ custom_color=“#ffffff“ custom_hover_color=“#ffffff“ icon_right=“fa fa-download“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi Tutorials