Trick # 351 | Dieser Beitrag beinhaltet 0 Wörter. – Geschätzte Lesezeit: ca. 0 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
