Springe zum Hauptinhalt

So personalisieren Sie die Gitter eines Blogs mit Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

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. [Empfohlen]

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 werde ich Ihnen zeigen, wie Sie mit benutzerdefiniertem CSS mehr als einen Stil auf die Karten ausrichten und anwenden können, aus denen das Raster Ihres Blogs besteht. Ich zeige Ihnen, wie Sie einen anderen Stil auf die Karte anwenden, um einen Schachbretteffekt zu erzielen. Ich werde Ihnen auch zeigen, wie Sie jede Karte pro Zeile anders gestalten und wie Sie eine einzelne Karte als Ziel wählen.

Dies sind also 4-Beispiele zum Anpassen Ihres Blogs, einschließlich einiger Hover-Effekte, die Sie verwenden können. Am Ende dieses Tutorials können Sie fantastische Designs für Ihr Blog erstellen.

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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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 den Modulkarten des Blogs ab (einschließlich Titel, Artikel-Metas, Artikel-Meta-Links und Artikelinhalt) und weist ihnen die weiße Farbe zu.

Hier ist das Ergebnis:

Anpassung des ungeraden Divi-Gitters

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Ä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.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 20

  1. Guten Tag,
    Ich bin wirklich ein Anfänger, aber dank der Online-Tutorials schaffe ich es, einen schönen Blog zu erstellen.
    Wirklich, danke für diesen einen, weil ich nur die Codes kopieren musste und alles einwandfrei lief. Ich bin mit dem Ergebnis zufrieden.
    Nochmals vielen Dank, einen schönen Tag 🙂

  2. Hallo,
    Der DIVI-Blog platziert neben dem Namen des Autors die Präposition "von" (z. B. Stefano). Ich würde gerne wissen, ob es möglich ist, es in "de" zu ändern.

  3. Hallo Thierry
    Super Tutorial
    Ich würde gerne wissen, ob es möglich ist, das vorgestellte Bild zu vergrößern
    Ich möchte diesen Stil auf meinen Blog anwenden
    Danke

  4. Guten Tag,
    Wie kann ich dieses Layout für Mobilgeräte (Tablets) optimieren? Ich habe kein Schabrettmuster, aber verschiedene Farben für jeden Blog-Beitrag in einer bestimmten Reihenfolge. Das ändert sich natürlich, wenn Sie zu Mobile wechseln und die Farben nicht mehr mit den richtigen Posts verknüpft sind ...
    Hat hier jemand eine Idee?

  5. Guten Tag,

    Danke für diesen Artikel! Ich möchte auch das "Lesen Sie mehr" am Ende der Artikel ändern.
    Könnten Sie uns Beispiele für CSS-Code geben, um den Text zu ändern und ihn zum Beispiel in eine schöne zentrierte Schaltfläche zu legen?

    En vous remerciant.
    Sophie

  6. Cuándo lo pones in der CSS personalizado, por ejemplo:
    #gridcard .Column: First-Child-Art: nth-child (impar) {background: #333; }

    da error como el seidue: Erwartete eine Funktion oder IDENT nach Doppelpunkt in Zeile 1, Spalte 18

    Grüße

    1. Hallo,

      Unser Blog wird automatisch aus dem Französischen übersetzt. Ich lade Sie daher ein, die französische Sprache im Sprach-Widget in der oberen Leiste unseres Blogs auszuwählen. Der richtige CSS-Code wird angezeigt.

    2. usted escribió ein artículo übeles escrito, debería ser: artículo des primers Hijo: kein arte del primer hijo:

      Du falsch geschriebener Artikel, sollte es sein: First-Child-Artikel: nicht First-Child-Art:

  7. Hallo
    Danke für den Artikel. Ich habe eine Rasterpräsentation (Divi-Thema). Ich habe Miniaturansichten (Fotos) für die Präsentation der Artikel. Wenn ich dagegen klicke, um Zugriff auf den Artikel zu erhalten, wird das Bild am Anfang des Artikels groß angezeigt 'Artikel. Gibt es eine Möglichkeit, die Größe des Miniaturbilds festzulegen oder es aus der Post-Ansicht zu löschen?
    Danke
    Patrick

    1. Hallo,

      Entschuldigung, aber unsere Divi-Unterstützung ist auf unsere Tutorials beschränkt. Bitte kontaktieren Sie Eleganthemes SVP.

  8. Bonjourn, großer Artikel
    Ich versuche hier mein Glück, manchmal haben wir uns wochenlang mit einem Thema beschäftigt, ohne die Antwort zu finden, wenn dasselbe Thema für andere Sinn macht.

    Ich suche daher nach einer Lösung, um ein Post-Grid einzurichten, das nur aus Grafiken, aber unterschiedlichen Höhen besteht, um genauer zu sein, dass jede zweite Grafik die doppelte Höhe der Grafik daneben hat.

    Eine Idee?

    Julien

  9. Große Tutorial! Ich werde prüfen, ca dieses Wochenend für meine Seite.
    Sie haben eine Lösung, die Extrakte in die Gitter zu entfernen?
    Vielen Dank an Sie
    Sofhy

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
20 Aktien
Aktie7
tweet2
Registrieren11