Springe zum Hauptinhalt

Wie die Gitter mit einem Blog Divi anpassen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.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 problemlos sicherstellen, dass alle Karten die gleiche Hintergrundfarbe, Schriftart, Ränder usw. haben. Die Stiloptionen sind jedoch auf das Design des Gitters insgesamt beschränkt, was es schwierig macht die Anwendung mehrerer oder unterschiedlicher Designs für die Karten innerhalb des Rasters.

Heute zeige ich Ihnen, wie Sie mithilfe von benutzerdefiniertem CSS mehr als einen Stil auf die Karten ausrichten und anwenden, die das Raster Ihres Blogs bilden. Ich zeige Ihnen, wie Sie einen anderen Stil auf die Karte anwenden, um einen Schachbretteffekt zu erzielen. Außerdem zeige ich Ihnen, wie Sie jede Karte nach Linien unterschiedlich gestalten und wie Sie eine einzelne Karte als Ziel festlegen.

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:

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
  • Zeigen Sie das Bild im Kopf: JA
  • Knopf lesen: ON

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

Speichern Sie Ihre Änderungen

Wie man das Layout "Grid" für das Blog versteht

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:

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

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:

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

Design Gate Beispiel

Beispiel # 1: Entwerfen eines karierten Gitters

In diesem ersten Beispiel werde ich alle ungeraden Karten des Blog-Moduls (1- und 3-Karten) in der ersten Spalte als Ziel festlegen, um ihnen eine dunkelgraue Hintergrundfarbe zu geben. Gehen Sie dazu zu "Divi → Theme Options" 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 Moduls Blog

.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

Füge alles zusammen, dies wählt die ungeraden Karten in der ersten Spalte des Blog-Moduls mit der Gridcard-ID aus.

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:

Der nächste Schritt bei der Erstellung unseres karierten Layouts besteht darin, die ungeraden Karten in der dritten Spalte als Ziel festzulegen und den dunkelgrauen Hintergrund und den weißen Text wie in der ersten Spalte anzuwenden. Fügen Sie das folgende CSS in das benutzerdefinierte CSS-Textfeld ein:

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

Dieser Code bezieht sich auf die Spalte "last" (In diesem Fall ist die dritte Spalte die letzte Spalte) mit dem Pseudo-Element "last-child".

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]

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

#gridcard .Column: n-Kind (2) Item: n-te-Kind (auch) {background: #333; } #gridcard .Column: n-Kind (2) Artikel: nth-child (auch) .entry-Titel, #gridcard .Column: nth-child (2) Artikel: nth-child (auch) .post-meta # gridcard .Column: nth-child (2) Artikel: nth-child (auch) .post-meta hat #gridcard .Column: nth-child (2) Artikel: nth-child (auch) .post-Gehalt p {color : #fff; }

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

Beispiel # 2: Hinzufügen von Hover-Effekten mit dem Checkered Layout

Sobald Sie wissen, wie die Karten des Blog-Moduls ausgerichtet werden, können Sie eines der Elemente in der Karte kreativ ändern.

In diesem Beispiel verwende ich das Schachbrett-Layout und dieses Mal ändere ich die Bilder in eine der dunkelgrauen Schwarz-Weiß-Karten, wenn ich den Mauszeiger über die Karte bewege. Und ich werde die Bilder zu einer der helleren weißen Karten machen, wenn ich über der Karte schwebe. Fügen Sie dazu das folgende CSS in das benutzerdefinierte CSS-Feld ein (stellen Sie sicher, dass Sie den anderen Code deaktivieren oder ausschneiden, damit er nicht mit dem neuen Code inkompatibel ist):

#gridcard .Column: first-child Artikel: nth-child (ungerade) #gridcard .Column: last-child Artikel: nth-child (ungerade) #gridcard .Column: n-Kind (2) Item: nth-child (gerade) {background: #333; } #gridcard .Column: first-child Artikel: nth-child (ungerade) .entry-Titel, #gridcard .Column: first-child Artikel: nth-child (ungerade) .post-meta, #gridcard .Column: erst- Kind Artikel: nth-child (ungerade) .post-meta hat .Column #gridcard: first-child Artikel: nth-child (ungerade) .post-Gehalt p #gridcard .Column: last-child Artikel: nth-child (ungerade) .entry-Titel, #gridcard .Column: last-child Artikel: nth-child (ungerade) .post-meta, #gridcard .Column: last-child Artikel: nth-child (ungerade) hat .post-meta , #gridcard .Column: last-child Artikel: nth-child (ungerade) .post-Gehalt p #gridcard .Column: nth-child (2) Artikel: nth-child (auch) .entry-Titel, #gridcard. Säule: nth-child (2) Artikel: nth-child (auch) .post-meta, #gridcard .Column: n-Kind (2) Artikel: nth-child (auch) .post-meta a, #gridcard .Column : nth-child (2) Artikel: nth-child (gerade) .post-content p {color: #fff; } #gridcard .Column: n-Kind (2) Item: n-Kind (auch): Hover-img, #gridcard .Column: first-child Artikel: nth-child (ungerade): Hover-img, #gridcard .Column: letzter -Kinder Artikel: nth-Kind (ungerade): Hover {-webkit img-Filter: Graustufen- (1); Filter: Graustufen (1); } #gridcard .Column: n-Kind (2) Item: nth-child (ungerade): Hover-img, #gridcard .Column: first-child Artikel: n-Kind (selbst): Hover-img, #gridcard .Column: letzte -kind Artikel: nth-child (gerade): hover img {-webkit-filter: Helligkeit (1.5); Filter: Helligkeit (1.5); }

Sie können Karten auch invertieren, sodass sie beim Bewegen des Mauszeigers über weiße Karten dunkelgrau und beim Bewegen über dunklere Karten weiß werden.

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: first-child Artikel: nth-child (ungerade): schweben, #gridcard .Column: last-child Artikel: nth-child (ungerade): schweben, #gridcard .Column: n-Kind (2) Artikel: nth-child (gerade): hover {background: #fff; } #gridcard .Column: first-child Artikel: nth-child (ungerade): schweben .entry-Titel, #gridcard .Column: first-child Artikel: nth-child (ungerade): .post-meta, #gridcard schweben. Säule: first-Kind-Artikel: nth-Kind (ungerade): Hover .post-meta hat #gridcard .Column: first-Kind-Artikel: nth-Kind (ungerade): Hover .post-Inhalt p #gridcard .Column: Last-Kind Artikel: nth-child (ungerade): schweben .entry-Titel, #gridcard .Column: last-child Artikel: nth-child (ungerade): schweben .post-meta, #gridcard .Column: last-child Artikel : n-te-Kind (ungerade): Hover .post-meta hat #gridcard .Column: last-child Artikel: nth-child (ungerade): Hover .post-Gehalt p #gridcard .Column: nth-child (2) Artikel: n-Kind (auch): schweben .entry-Titel, #gridcard .Column: nth-child (2) Artikel: nth-child (auch): schweben .post-meta, #gridcard .Column: n-Kind ( 2) Artikel: n-te-Kind (selbst): schweben .post-meta hat #gridcard .Column: nth-child (2) Artikel: n-Kind (selbst): Hover .post-Inhalt p {color: #333; } #gridcard .Column: first-child Artikel: n-Kind (selbst): schweben, #gridcard .Column: last-child Artikel: n-Kind (selbst): schweben, #gridcard .Column: n-Kind (2) Artikel: nth-child (ungerade): hover {background: #333; } #gridcard .Column: first-child Artikel: n-Kind (selbst): schweben .entry-Titel, #gridcard .Column: first-child Artikel: nth-child (auch): .post-meta, #gridcard schweben. Säule: first-child Artikel: n-Kind (selbst): Hover .post-meta haben #gridcard .Column: first-child Artikel: n-Kind (selbst): Hover .post-Gehalt p #gridcard .Column: Last-Kind Artikel: n-Kind (selbst): schweben .entry-Titel, #gridcard .Column: last-child Artikel: n-Kind (selbst): schweben .post-meta, #gridcard .Column: last-child Artikel .post-meta hat #gridcard .Column schweben: last-child Artikel: nth-child (auch) n-ter Kind (selbst): Hover .post-Gehalt p #gridcard .Column: nth-child (2) Artikel: nth-child (ungerade): schweben .entry-Titel, #gridcard .Column: nth-child (2) Artikel: nth-child (ungerade): schweben .post-meta, #gridcard .Column: n-Kind ( 2) Artikel: nth-child (ungerade): Hover .post-meta hat #gridcard .Column: nth-child (2) Artikel: nth-child (ungerade): Hover .post-Inhalt p {color: #fff; }

Gehen Sie nun den Effekt auf Ihrem Blog sehen.

Beispiel # 3: Individuelle Landkarten durch Linien

Für das dritte Beispiel wende ich den gleichen dunklen Hintergrund und den gleichen weißen Text für die Karten in jeder anderen Reihe (und nicht Spalte) an. Dazu müssen Sie alle geraden Karten in jeder der Spalten als Ziel auswählen. Gehen Sie zum Thema "Divi → Optionen" und stellen Sie sicher, dass Sie alle vorherigen CSS-Codes, die Sie seit Beginn dieses Tutorials hinzugefügt haben, deaktivieren oder löschen. Fügen Sie dann das folgende CSS hinzu:

#gridcard article: nth-child (gerade) {background-color: #333; } #gridcard Artikel: nth-child (auch) .entry-Titel, #gridcard Artikel: nth-child (auch) .post-meta, #gridcard Artikel: nth-child (auch) .post-meta a, #gridcard Abschnitt : nth-child (gerade) .post-content p {color: #fff; }

Hier ist das Ergebnis:

Beispiel # 4: Entwerfen einer bestimmten Gitterkarte

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

Gehen Sie zu der Seite, auf der Ihr Blog-Modul angezeigt wird, und klicken Sie mit der rechten Maustaste auf eine Ihrer Karten. Wählen Sie im angezeigten Optionsfeld "Überprüfen" aus (einige Browser verfügen möglicherweise über "Element überprüfen" oder ähnliches). Dadurch wird das Developer Tools-Fenster bereitgestellt, in dem sowohl die HTML- als auch die CSS-Datei Ihres Browsers angezeigt werden Suchen Sie auf der Webseite nach dem Tag des Artikels, der Ihren Artikel einhüllt, und notieren Sie sich die ID des Artikels, der ihm zugewiesen wurde. Dies ist der Selektor, den Sie verwenden müssen, um Ihre individuelle Karte als Ziel festzulegen. Rechtsklick und Klick auf inspiziert, um die Post-3466-ID zu finden.

Wie folgt:

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]

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, # nach-3466 .post-meta, # nach-3466 .post-meta, # nach-3466 .post-inhalt p {color: #fff; }

Auf die Karte wird nun dieser spezielle Stil angewendet.

Das ist es!

Abschließende Gedanken

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

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

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 16
  1. Hallo,
    Im DIVI-Blog steht neben dem Namen des Autors die Präposition "de" (z. B. von Stefano). Ich würde gerne wissen, ob es möglich ist, es auf "von" zu ändern.

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

  3. Guten Tag,
    Wie kann ich dieses Layout für mobile Geräte (Tablets) optimieren? Ich habe kein Schabrettmuster, aber unterschiedliche Farben für jeden Blogeintrag in einer bestimmten Reihenfolge. Das ändert sich natürlich, wenn wir zu Mobile wechseln und die Farben nicht mehr mit guten Posts verbunden sind ...
    Hat hier jemand eine Idee?

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

  5. 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 wurde automatisch aus dem Französischen übersetzt. Ich lade Sie ein, die französische Sprache im Sprach-Widget in der oberen Leiste unseres Blogs zu wählen und der korrekte 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:

  6. Guten Tag
    Danke für den Artikel. Ich habe eine Präsentation in Gitterform (Theme Divi). Ich habe Miniaturansichten (Fotos) für die Präsentation der Artikel. Wenn ich dagegen auf klicke, um auf den Artikel zuzugreifen, wird das Bild am Anfang des Artikels in großer Schrift angezeigt Artikel. Gibt es eine Möglichkeit, die Größe des Thumbnails zu ändern oder es in der Artikelansicht zu löschen?
    Danke
    Patrick

  7. Bonjourn, großer Artikel
    Ich versuche mein Glück hier, manchmal drehen wir ein Thema wochenlang um, ohne die Antwort zu finden, während das gleiche Thema für andere logisch ist.

    Also suche ich nach der Lösung, um ein Post-Grid zu erstellen, das nur aus visuellen, aber verschiedenen Höhen besteht, um deutlicher zu sein, dass ein visueller auf zwei die doppelte Höhe des visuellen Next hat.

    Eine Idee?

    Julien

  8. 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?
    Merci à vous
    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
23 Aktien
Aktie14
tweet2
Registrieren7