Lesefortschritt:

Button im WordPress-Menü anzeigen

9. Juni 2024 | CSS-Stylesheet, WordPress

Dieser Beitrag beinhaltet 579 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Dem Menü Ihrer WordPress-Website können Sie neben den normalen Menülinks auch einen Button hinzufügen. Das ermöglicht eine etwas auffälligere Linkdarstellung, die überdies sehr einfach umzusetzen ist.

Um einem Menü einen Button hinzuzufügen, müssen Sie lediglich einen zusätzlichen Menüpunkt im Menü hinzufügen und diesem eine benutzerdefinierte CSS-Klasse zuweisen.

Öffnen Sie hierfür im Backend «Design» und danach «Menüs». Bearbeiten Sie das gewünschte Menü und fügen Sie einen «Individuellen Link» hinzu. Tragen Sie den Linknamen und die URL ein und tragen Sie unter «CSS-Klassen» den Text «cta-menu-button» ein. Falls die CSS-Klassen bei Ihnen nicht angezeigt werden, können Sie sie oben rechts im Fenster über den Link «Ansicht anpassen» dauerhaft hinzufügen.

Nun benötigen Sie noch etwas CSS-Code, den Sie in das Stylesheet Ihrer Website einfügen. Im Backend unter Design/Customizer/Zusätzliches CSS:

.cta-menu-button {
    border: 1px solid #293280;
    border-radius: 10px;
    background: #59B14B;
    box-shadow: 0px 0px 12px 3px #59b14b33;
    transition: all .3s 0s;
}
.cta-menu-button a {
    padding: 18px !important;
}
.cta-menu-button:hover {
    transform: scale(1.1);
    transition: all .2s 0s;
}

Damit ist der Button im Menü aktiv und sieht (mit unserem CSS-Beispiel) so aus wie nebenan. Den Code können Sie einfach anpassen – etwa die Farben auf den Zeilen 2, 4 und 5 ändern.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This