In Wordpress Aufzählungszeichen ändern mit Divi Theme

WordPress Aufzählungszeichen ändern in Häkchen bsp. Divi Bullet Points

6. November 2018

Mit Divi werden eine Reihe von Icons installiert. Zumeist kennt man die Symbole aus dem Informationstext Modul. Was die wenigsten jedoch wissen ist, dass die Icons der Elegant Font eigentlich überall platziert werden können. Vielleicht habt ihr auf der ein oder anderen Website bereits grüne Häkchen vor Aufzählungspunkten entdecken können. Diese Design Spielerei eignet sich beispielweise für die Auflistung angebotener Dienstleitungen o.ä.. Wie sich Auszählungszeichen in grüne Häkchen oder andere Symbole umwandeln lassen, erfahrt ihr in diesem Beitrag.

 

Grüner Haken statt Bullet Point

 

In diesem Tutorial wollen wir euch zeigen, wie ihr die standard Bullet Points mit grünen Häkchen ersetzen könnt. Es ist aber auch möglich jedes andere Icon zu verwenden, solange dieses in der Elegant Font enthalten ist. Eine Übersicht der möglichen Symbole findet ihr auf der Elegant Themes Website. Scrollt einfach ein Stück nach unten und wählt das für euch passende Icon aus.

Bereit? Dann lasst uns loslegen.

Als erstes erstellt ihr ein neues Textmodul und fügt dort eure Aufzählungspunkte ein. Wichtig ist, jedem neuen Punkt einen Absatz voranzustellen. Sobald das erledigt ist, markiert ihr den gesamten Text und klickt auf das Auszählungs-Button (siehe Screenshot).

Divi Bullet Points anpassen

 

Wechsel jetzt in die Registerkarte Erweitert und trage dort die Bezeichnung wplo-bullet in das Feld CSS-Klasse ein. Dieser Schritt ist wichtig, damit Divi den folgenden CSS-Code zuordnen kann ?

 

Die WordPress Aufzählungszeichen ändern erfolgreich im Theme

 

Anschließend speicherst du deine Änderung ab und fügst folgendes CSS in das Feld benutzerdefiniertes CSS oder dein Divi Child Theme ein:

 

 

/***Entfernt die Bullet Points***/
.wplo-bullet ul {
list-style-type:none!important;
}
/***Fügt den Icon vor den Text ein***/
.wplo-bullet ul li:before {
content: "\5a";
font-family: 'ETmodules';
color: green;
float: left;
padding-right: 5px;
}

Deine Aufzählung sollte jetzt so wie in unserem Beispiel aussehen.

 

Individuelles Icon statt Bulletpoint

Wie bereits erwähnt, kann jedes beliebige Icon aus der Elegant Font verwendet werden. Gehe hierfür auf die Website (siehe Link weiter oben) und finde das für dich passende Icon. Zu jedem Symbol wird der dazugehörige Code ausgewiesen. Ersetze jetzt die „5a“, die du im CSS unter content findest, mit deinem individuellen Icon-Code. Es handelt sich um folgenden Teil:

content: "\5a";

Farbe der Icons anpassen

 

Selbstverständlich lässt sich ebenfalls die Farbe der Icons individuell anpassen. Wenn dir das Grün nicht gefällt, kannst du deinen eigenen Farbcode einbringen. Ändere dafür folgenden Teil des Codes:

color: green; 

SIE KÖNNEN SICH BEI UNS BEDANKEN!

Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!

 

Bitte hinterlassen Sie uns eine positive Bewertung.

 

Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen

Kommentare

Sag uns deine Meinung! Jetzt antworten

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.