Bullet-Points sehen vielleicht etwas dröge aus. Zumeist ist es ein schwarzer Tolggen, der die Listen sortiert – nun: besser als nix; aber da geht noch mehr. Ersetzen Sie die Standard-Bullets mit einem Icon aus dem Divi-Katalog. Etwa so wie in unserem heutigen Hack.
Wir stellen Ihnen gleich zwei Gestaltungsmöglichkeiten vor:
1. Checkboxes statt Bullet-Points
Fügen Sie den folgenden CSS-Code in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
.bullet-list-checkmark ul {
list-style-type: none!important;
}
.bullet-list-checkmark ul li:before {
content: '\e052'!important;
color: #59B14B;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}Selbstverständlich können Sie das Icon, die Farben und die Grössen anpassen.
Dem Text-Modul, in welchem die Liste platziert werden soll, vergeben Sie überdies eine CSS-Klasse: Bearbeiten Sie das Text-Modul, klicken Sie auf den Tab «Erweitert», dann auf «CSS-ID und Klassen». Im Textfeld «CSS-Klasse» tragen Sie «bullet-list-checkmark» ein.
Das Ergebnis unseres Codes sieht so aus:
- 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.
X statt Bullet-Points
Fügen Sie den folgenden CSS-Code in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
.bullet-list-circle-x ul {
list-style-type: none!important;
}
.bullet-list-circle-x ul li:before {
content: '\e051'!important;
color: #293280!important;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}Natürlich können Sie auch dieses Icon, die Farben und die Grössen selbst definieren.
Ausserdem müssen Sie im Text-Modul, in welchem die Liste platziert werden soll, eine CSS-Klasse festlegen: Bearbeiten Sie das Text-Modul, klicken Sie auf den Tab «Erweitert» und auf «CSS-ID und Klassen». Im Textfeld «CSS-Klasse» tragen Sie «bullet-list-circle-x» ein.
Das Ergebnis dieses zweiten Codes sieht so aus:
- 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.
Ziemlich simpel, würden wir meinen.
Werbung
Werbung
