Gestaltung von Aufzählungen und Bulletpoint-Listen im Divi-Theme verbessern

18. September 2022 | CSS-Stylesheet, Divi-Theme

Geschätzte Lesezeit für diesen Beitrag: ca. 4 Minuten.

Nun: Dr. Code liebt das Divi-Theme. Aber Divi hat auch Macken. Gehörige sogar. Eine der gröbsten sind die verkorksten Listen, welche Divi produziert. Ob Aufzählungen oder Bullet-Points: das sieht meist nicht gut aus. Es lässt sich aber beheben. Mit einigen Zeilen CSS-Code.

Listen werden erstellt mit dem HTML-Tag <li>Listeninhalt</li>. Da ist es verlockend, den li-Tag per CSS zu formatieren. Doch das geht meist ziemlich in die Hosen. Die Navigationspunkte des Menüs enthalten nämlich auch den li-Tag – wenn Sie den also passend für Textfelder formatieren, mündet das in völlig verunstalteten Menüs.

Es gibt aber eine Lösung, die wir Ihnen hier zeigen.

1. Nummerierte Aufzählungen (Ordered Lists) gestalten

Diese Aufzählungen enthalten den HTML-Tag <ol></ol>. Der untenstehende CSS-Code steuert genau diesen Tag an und legt die Gestaltung fest. Kopieren Sie den Code in das CSS-Stylesheet Ihrer WordPress-Website (unter Design/Customizer/Zusätzliches CSS):

#left-area ol, .entry-content ol, .et-l--header ol, .et-l--body ol, .et-l--footer ol, .comment-content ol, body.et-pb-preview #main-content .container ol {
	padding: 0 2em 23px 2em;
	line-height: 1.5em;;
	list-style-position: outside;
}

Dies ergibt Aufzählungslisten in folgendem Stil:

  1. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu
  2. Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
  3. Consetetur sadipscing elitr, sed diam
  4. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu

Das ist aber freilich nur die halbe Wahrheit. Es gibt ja noch andere Listen:

2. Bulletpoint-Listen oder ungeordnete Aufzählungen (Unordered Lists)

Diese werden über den HTML-Tag <ul></ul> erstellt. Der folgende Code steuert diesen Tag an und legt die Gestaltung fest. Kopieren Sie auch diesen Code in das CSS-Stylesheet Ihrer WordPress-Website. Unter Design/Customizer/Zusätzliches CSS:

#left-area .entry-content ul, .entry-content ul, .et-l--header ul, .et-l--body ul, .et-l--footer ul, .comment-content ul, body.et-pb-preview #main-content .container ul {
	padding: 0 2em 23px 2em;
	line-height: 1.5em;
	list-style-type: square;
}

Dies ergibt Bulletpointlisten in folgendem Stil:

  • Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu
  • Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
  • Consetetur sadipscing elitr, sed diam
  • Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu

Beide CSS-Codes können natürlich – ganz nach Gusto angepasst werden; sie ergeben aber doch schon eine ansprechende Darstellung.

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