Button im WordPress-Menü anzeigen
9. Juni 2024 | CSS-Stylesheet, WordPress
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
Ähnliche Beiträge
- Divi-Buttons unlimited: So gelingen Ihre… Das Button-Modul im Divi-Theme bietet eine Fülle von Anpassungsmöglichkeiten. Sie können die Farbe, das Symbol, den Hover-Stil, die Animation und die Position ändern. Aber was, wenn Sie über das hinausgehen…
- Gesamtes Akkordeon-Modul im Divi-Theme per Button… Das Akkordeon-Modul des Divi-Themes bietet keine Möglichkeit, alle Akkordeon-Toggles auf einmal zu öffnen oder zu schliessen. Hier erfahren Sie, wie Sie einen Button hinzufügen, der genau das tut.
- Zweite Textzeile zu den Divi-Schaltflächen hinzufügen Eine gute Möglichkeit, zusätzliche Marketinginformationen auf einer Landing-Page bereitzustellen, ist eine zweite Textzeile auf einer Call-to-Action-Schaltfläche. Da es standardmässig keine Möglichkeit gibt, dem Divi-Button eine zweite Textzeile hinzuzufügen, werden wir…
- Anruf oder SMS mit dem Divi-Button starten Während viele Websites Kontaktformulare verwenden, gibt es Zeiten und Geschäfte, die einen direkteren oder dringenden Kontakt erfordern. Hier kann ein traditioneller Telefonanruf oder sogar eine Textnachricht sehr nützlich sein. Hier…
Kategorien
Divi-Module
Dr.-Code-Specials
Neueste Beiträge
Hover-Animation für das Divi-Standard-Menü
publiziert am 15. September 2024
Notfallplan: Admin-Zugang zur WordPress-Website durch die Hintertür
publiziert am 11. September 2024
Schaltflächen im Divi-Visual Builder links gruppieren
publiziert am 8. September 2024
Divi-Button anstelle eines beliebigen Standardbuttons anzeigen
publiziert am 4. September 2024
Automatische URL-Verlinkung in Kommentaren deaktivieren
publiziert am 1. September 2024
sowie 381 weitere publizierte Tipps & Tricks
Geplante Beiträge
Beitragspublikation im RSS-Feed verzögern
erscheint am 18. September 2024
WordPress-Userlogin nur noch mit Benutzername statt E-Mail-Adresse
erscheint am 22. September 2024
Feldnamen im Divi-Formular-Modul während der Eingabe verschieben
erscheint am 25. September 2024
sowie 145 weitere geplante Themen
Child-Theme erstellen
Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden.
Tipps & Tricks per Mail
Mit dem Newsletter von Dr. Code erhalten Sie sporadich die neuesten Hacks und Tricks zu CSS, Divi, Wordpress & Co. direkt in Ihr Mailpostfach.
Themenidee?
Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.
Treffen Sie Vorsichtsmassnahmen bei der Nutzung der Inhalte dieser Website. Auch wenn die Tipps und Tricks erprobt sind, kann mal was schiefgehen.
Wir empfehlen, möglichst in einer Testumgebung zu arbeiten und/oder Sicherungskopien anzulegen, bevor Sie ans Werk gehen.