Lesefortschritt:

Abschnitte im Divi-Theme abwechselnd einfärben

10. Juli 2022 | CSS-Stylesheet, Divi-Theme

Trick # 158 | Dieser Beitrag beinhaltet 323 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Diesen Hack finden wir ziemlich cool: Damit Abschnitte besser erfasst und unterschieden werden können, kann es hilfreich sein, sie verschiedenfarbig auszuzeichnen. Ändern sich die Inhalte jedoch häufiger, ist es sehr aufwändig alle Abschnitte einzeln umzufärben. Mit ein wenig CSS kann diese Arbeit vermieden werden.

Der CSS-Code übernimmt hier und wechselt die Hintergrundfarbe für jede zweite Divi-Sektion. Der Offset – also den Startpunkt der wechselnden Farben haben wir hier mal 4 festgelegt. Für den Header, den Lead und die erste Sektion soll in diesem Fall noch nichts geändert werden.

Der CSS-Code gehört – wie immer – ins CSS-Stylesheet Ihres Child-Themes. Aufzurufen unter Design/Customizer/Zusätzliches CSS: 

.et_pb_section:nth-of-type(2n+4) {
  background: #C0C0C0;
}

Die Hintergrundfarbe können Sie natürlich auf Zeile 2 anpassen.

Der vorliegende Code bezieht sich übrigens auf Sektionen (.et_pb_section). Falls Sie stattdessen Zeilen abwechselnd einfärben möchten, würde der Code so aussehen:

.et_pb_row:nth-of-type(2n+4) {
  background: #C0C0C0;
}

So geht das.

Werbung

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.