Verwenden Sie auch uneordnete Listen auf Ihrer Website? Ich vermute: ja. Die Bulletpoints wirken aber häufig etwas langweilig. Immerhin: Sie lassen sich leicht mit schöneren Symbolen ersetzen – etwa solche aus dem Divi-Icon-Portfolio.
Nebenan sehen Sie eine Liste, wie sie im Divi-Theme ziemlich normal ist. Mit einfachen Bulletpoints – nichts Aufregendes:
Doch da geht mehr: denn die Bulletpoints lassen sich mit Icons ersetzen und die bislang schnöde Liste damit insgesamt aufhübschen.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
- Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
- Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Zunächst vergeben Sie dem Textmodul, welches die zu verändernde Liste enthält, eine CSS-Klasse. In unserem Fall ist es «custom_bullets». Diesen Namen tragen Sie im Bearbeitungsmodus des Textmoduls im Tab «Erweitert» unter «CSS-ID und Klassen» ins Textfeld «CSS-Klasse» ein.
Dann kopieren Sie den folgenden Code und fügen ihn in das Stylesheet Ihrer Website ein. Sie finden es im Backend unter Design/Customizer/Zusätzliches CSS:
.custom_bullets ul {
padding-bottom: 20px;
}
.custom_bullets li {
padding-left: 15px;
padding-bottom: 0em;
list-style-type: none;
}
.custom_bullets li::before {
font-family: 'ETmodules';
content: "\6c";
color: #293280;
position: absolute;
left: 5px;
}Das war’s auch schon. Die oben gezeigte Liste sieht nun so aus wie nebenan:
Anpassen können Sie einiges. Zum Beispiel die Icon-Farbe (auf Zeile 14) oder das Icon selber (auf Zeile 13). Eine Übersicht des Divi-Icon-Fonts finden Sie übrigens unter diesem Link.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
- Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
- Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Werbung
Werbung
