Mehr Klicks: Menüpunkt als Button im Hauptmenü hervorheben

Möchtest du einen Menüpunkt in deinem WordPress-Menü durch einen Button hervorheben? In diesem Blogpost zeige ich dir Schritt für Schritt, wie du das machst. (Unten findest du das YouTube-Video dazu.)

Ein Button im Menü kann deiner Webseite einen professionelleren Look verleihen und du lenkst die Aufmerksamkeit des Besuchers auf deine wichtigste Handlungsaufforderung (CTA=Call to Action).

Lass uns direkt loslegen!

Schritt 1: Menü anpassen

• Einloggen: Melde dich bei deinem WordPress-Dashboard an.
• Menü auswählen: Gehe zu „Design“ und klicke auf „Menüs“.
• Hauptmenü aufrufen: Wähle das Menü aus, in dem du den Button gestalten möchtest.
• CSS-Klassen aktivieren: Klicke oben rechts auf „Ansicht anpassen“ und aktiviere das Kontrollkästchen „CSS-Klassen“.

Schritt 2: CSS-Klasse hinzufügen

• Button aufklappen: Klicke auf den Menüpunkt, den du als Button gestalten möchtest.
• CSS-Klasse einfügen: Füge die CSS-Klasse menu-button in das entsprechende Feld ein.
• Änderungen speichern: Klicke auf „Menü speichern“, um die Änderungen zu sichern.

Schritt 3: Customizer öffnen

• Customizer aufrufen: Gehe zu „Design“ und klicke auf „Customizer“.
• Zusätzliches CSS: Suche den Punkt „Zusätzliches CSS“.

Schritt 4: CSS-Code einfügen

1. Code kopieren: Kopiere den CSS-Code, den du weiter unten findest.
2. Code einfügen: Füge den Code in das Feld „Zusätzliches CSS“ ein. Du wirst sofort die Änderungen am Button sehen.

Dies ist der CSS-Code, den du im Customizer unter dem Punkt „Zusätzliches CSS“ einfügst, damit dein Menüpunkt zu einem Button wird:

Die erste Zeile besagt, dass der Button nur auf Bildschirmen angezeigt wird, die breiter als 980 Pixel sind.

@media all and (min-width: 980px) {
	.menu-button {
		padding: 0!important;
		background: #ED9801;
		border-radius: 50px;
		border: solid 0px #726D5B;
    box-shadow: 0px 2px 18px 0px rgb(0 0 0 / 30%);
	}
	.menu-button a{
		color: #000!important;
		padding: 10px 20px 10px 20px!important;
		font-weight: 600 !important;
	}
	#top-menu-nav .menu-button a:hover {
		opacity: 1;
		color: #fff!important;
		font-weight: 600 !important;
	}
	.menu-button:hover {
		border: solid 0px #dee7e6;
		background: #726D5B;
	}
}

Schritt 5: Button anpassen

Jetzt kannst du den Button an dein Branding anpassen. Hier sind einige Punkte, die du beachten solltest:

• Padding: Definiert den Abstand innerhalb des Buttons.
• Hintergrundfarbe: Füge deinen Branding-Farbcode ein.
• Hover-Effekte: Bestimme, was passiert, wenn der Benutzer mit der Maus über den Button fährt.
• Border-Radius: Legt fest, wie stark die Ecken des Buttons abgerundet sind.
• Schriftfarbe: Bestimme die Farbe des Textes im Button.

Hinweis zum Theme-Wechsel

Wenn du irgendwann dein Theme wechselst, musst du den CSS-Code erneut einfügen und prüfen, ob der Code weiterhin funktioniert.

• Theme wechseln: Gehe zu „Design“ und wähle ein neues Theme aus.
• CSS kopieren: Kopiere den CSS-Code aus dem Customizer, bevor du das Theme wechselst.
• Neues Theme anpassen: Füge den CSS-Code im neuen Theme wieder ein.

Fazit

Mit diesen Schritten kannst du ganz einfach einen ansprechenden Button in deinem WordPress-Menü gestalten. Denke daran, den Code an dein individuelles Branding anzupassen, um ein einheitliches Erscheinungsbild auf deiner Website zu haben.

Wenn dir dieser Beitrag gefallen hat und du mehr über WordPress-Tutorials erfahren möchtest, abonniere meinen YouTube-Kanal oder trage dich in meinen Newsletter ein.

Ich wünsche dir viel Erfolg beim Gestalten deines Buttons! Lass mich wissen, ob es für dich funktioniert hat.

Tutorial als YouTube-Video ansehen: