Abschnitte im Divi-Theme abwechselnd einfärben

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

Geschätzte Lesezeit für diesen Beitrag: 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

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This