Hiacynta Hess
Webdesignerin

Aktualisiert am:
15. Oktober 2023

Hiacynta Hess
Webdesignerin

Sprache: CSS
Level: Anfänger ⭐

Aktualisiert am:

15. Oktober 2023

In dieser Anleitung lernst du, wie du Icons in das Drop-Down-Menü deiner Divi-Website einfügen kannst. Hier sind ein paar gute Gründe dafür, warum du dies tun solltest:

1. Bessere Übersicht: Mit Icons trennst du die Links visuell voneinander. Das hilft den Besuchern deiner Website, schneller zu finden, wonach sie suchen, besonders wenn dein Menü viele Optionen hat.

2. Gestalte die Navigation intuitiv: Ein treffendes Icon versteht man oft schneller als einen Text. Ein kurzer Blick genügt, und der Besucher weiß, wohin der Link führt.

3. Werte dein Design auf: Mit Icons sieht dein Menü direkt professioneller und moderner aus. Das macht deine Website insgesamt ansprechender.

1. CSS Code integrieren

Um Icons in das Drop-Down-Menü einzufügen, musst du zunächst einen individuelle CSS Code integrieren. Kopiere dir den Code und füge ihn ein unter Divi → Theme Optionen → Eigene CSS

.pa-menu-icon > a:before {
    font-family: 'ETMODULES';
    content: '\e063';
    text-align: center;
    vertical-align: middle;
    margin-right: 15px;
    margin-left: 0px;
    color: #e26602;
    font-size: 1em;
    transition: all .3s ease;
}

2. Icons aussuchen

Für die Icons wird die Schrift ETMODULES verwendet, das sind die Icons die in Divi verfügbar sind. In diesem Beitrag findest du eine Auflistung aller Icons die in Divi verfügbar sind: The Elegant Icon Font

Scrollst du etwas weiter runter, findest du eine Auflistung aller Icons inkl. dem dazugehörigem Unicode.

3. Icons einfügen

In dem oben aufgeführtem CSS Snippet kannst du bei content den Wert ändern. Hier musst du einfach nur den Unicode einfügen. In meinem Snippet habe ich den Wert "e063" eingetragen. Dieser Wert steht für ein Dreieck mit einem Ausrufezeichen.

Den ersten Teil des Unicodes, d.h. das &#x kannst du ignorieren und musst es nicht einfügen.

Nun musst du in dein Menü wechseln Dashboard → Design → Menüs und musst bei deinem Submenü eine CSS Klasse eintragen. Die CSS Klasse lautet pa-menu-icon (siehe erste Zeile des CSS Codes).

Icons ins Divi Drop-Down-Menü einfügen

Das war's auch schon! Nun wird vor dem Submenü Video Anleitungen ein Icon angezeigt. Im CSS Code kannst du nun weitere Anpassungen vornehmen, z.B. die Größe des Icons ändern, die Farbe oder die Abstände.

Hat dir dieser Artikel geholfen?

Your page rank:

WordPress Website selbst erstellen

Hiacynta Hess

Hiacynta Hess ist die Autorin des Artikels und führt seit 2004 ein Online Business. Mittlerweile unterstützt sie Online-Unternehmer bei ihrer WordPress-Website und weiterführenden Online-Marketing Maßnahmen.

Ihre Expertise und Erfahrungen zu diesen Themenbereichen teilt sie auf ihrem Blog, ihrem YouTube Kanal und in ihrem Mentoringprogramm.

Für vertiefende Einblicke und regelmäßige Updates folge Hiacynta auf Instagram. Abonniere auch ihren Newsletter in dem sie exklusive Tipps, bewährte Strategien und vieles mehr mit ihrer engagierten Community teilt. Lass dich inspirieren!

Transparenzhinweis:
Die mit einem * gekennzeichneten Links sind Affiliate Links. Diese diesen zur Orientierung und zum einfachen Finden der Produkte. Solltest du über den Link etwas bestellen, erhalte ich eine kleine Provision. Für dich entstehen keine Mehrkosten. Generell empfehle ich nur Produkte, die ich selbst getestet habe und die ich auch gut finde. Danke für deine Unterstützung.

Abonniere meinen Newsletter!

Mache es wie die anderen Online-Unternehmer, die regelmäßig exklusive Insidertipps für Ihr Online-Business und Ihre Marketing-Maßnahmen direkt ins Postfach bekommen. Kostenlos und jederzeit abbestellbar.

Weitere Infos findest du in meinen Datenschutzhinweisen.

WordPress Cookie Hinweis von Real Cookie Banner