Aufzählungspunkte in Häkchen umwandeln mit Divi

von | 25.11.2017 | 0 Kommentare

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).

Aufzaehlungspunkte mit WordPress erstellen

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 🙂

CSS Klasse mit dem Divi Theme bestimmen

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

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

  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Punkt 4
  • Punkt 5

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:

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:




ANZEIGE

Webdesign-Osnabrueck

Wenn dir der Artikel gefallen hat, dann freuen wir uns über ein Follow auf Twitter und Facebook. Mehr WordPress und Divi Video Tutorials findest du auf unserem YouTube Channel.

Noch Fragen?

Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann nutz' die Kommentarfunktion unter diesem Beitrag!

Wir können das Tutorial auch für dich durchführen. Stell hierfür eine Anfrage bei Swish!

Anzeige
Aktuelle Beiträge
WordPress: Link auf Nofollow setzen

WordPress: Link auf Nofollow setzen

Wie setzte ich Links auf Nofollow? Wann sollen Links auf Nofollow gesetzt werden und was bedeutet Nofollow eigentlich? Das alles sind Fragen, die sich wohl irgendwann jeder beim Aufbau einer Website stellt. Ich persönlich halte das Thema für überbewertet und genau aus...

0 Kommentare

Einen Kommentar abschicken

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