So fügen Sie ein Vollbild-Responsive-Menü in WordPress hinzu

Menüs sind unerlässlich, um Besuchern die Navigation auf Ihrer WordPress-Website zu erleichtern und mehr von Ihren Beiträgen und Seiten zu finden. Vollbild-Responsive-Menüs können besonders hilfreich sein, wenn Sie Ihre Website für mobile Benutzer gestalten.

Wenn Ihre Benutzer auf ein Hamburger-Symbol klicken oder tippen, wird eine Vollbild-Überlagerung des Menüs Ihrer Website mit einer schönen Animation angezeigt.

Wir haben auf unseren eigenen Websites mit verschiedenen Menütypen experimentiert, um zu sehen, was die besten Ergebnisse erzielt. Und in diesem Artikel zeigen wir Ihnen, wie Sie ein responsives Vollbildmenü in WordPress hinzufügen, ohne Code schreiben zu müssen.

Warum ein Vollbild-Responsive-Menü in WordPress hinzufügen?

Gut gestaltete Menüs helfen Ihren Besuchern, sich auf Ihrer WordPress-Website oder Ihrem WooCommerce-Shop zurechtzufinden. Aber es kann schwierig sein, auf ein Standardmenü in der Kopfzeile zu tippen, während Sie den kleinen Bildschirm eines Smartphones verwenden.

Für viele Websites gibt es bereits mehr mobile Besucher als Desktop-Besucher. Deshalb empfehlen wir Ihnen, die mobile Version Ihrer WordPress-Website in der Vorschau anzuzeigen, um zu sehen, wie Ihre Website auf Mobilgeräten aussieht.

Ein Vollbild-Responsive-Mobilmenü passt sich automatisch an verschiedene Bildschirmgrößen an. Da der gesamte verfügbare Platz für das Menü genutzt wird, ist die Navigation auf Smartphones und Tablets einfacher.

Sehen wir uns an, wie man ein Vollbild-responsives Menü in WordPress hinzufügt.

So fügen Sie ein Vollbild-Responsive-Menü in WordPress hinzu

Das erste, was Sie tun müssen, ist das Plugin FullScreen Menu zu installieren und zu aktivieren. Sie können sich unseren Schritt-für-Schritt-Leitfaden zur Installation eines WordPress-Plugins für Anfänger für weitere Details ansehen.

Nach der Aktivierung sollten Sie zur Seite Vollbildmenü-Optionen in Ihrem WordPress-Admin-Menü gehen, um die Plugin-Einstellungen zu konfigurieren. Sie werden automatisch zur Registerkarte „Einstellungen“ weitergeleitet.

Beginnen Sie damit, das Kontrollkästchen „Animiertes Vollbildmenü aktivieren“ zu aktivieren, um das Menü zu aktivieren.

Es ist ratsam, zunächst auch das Kontrollkästchen „Menü nur für Admin-Benutzer anzeigen“ zu aktivieren. So können Sie die Änderungen sehen, während Sie das Menü konfigurieren, aber Besucher Ihrer Website können es erst sehen, wenn Sie fertig sind.

Vergessen Sie nicht, zurückzukommen und das Kontrollkästchen zu deaktivieren, wenn Sie fertig sind.

Andere Einstellungen lassen Sie das Menü nur auf Mobilgeräten anzeigen, das Menü per Klick oder Scrollen schließen und das Menü auf bestimmten Seiten ausblenden. In unserem Beispiel lassen wir diese Einstellungen deaktiviert, aber Sie können sie gerne nach Ihren Wünschen für Ihre eigene Website anpassen.

Vollbild-Menü Design und Aussehen

Als Nächstes passen wir das Design des Menüs an. Glücklicherweise erlaubt das Menü-Plugin, dies ohne benutzerdefiniertes CSS zu tun.

Um das Menü anzupassen, müssen Sie oben auf der Seite auf die Registerkarte „Design/Erscheinungsbild“ klicken. Auf dieser Seite können Sie die Farben, Schriftarten und Animations-Einstellungen für Ihr Menü auswählen.

Oben auf der Seite sehen Sie zwei Farbeinstellungen. Die erste Farbe ist für das Hamburger-Menü-Symbol. Dieses wird in der oberen rechten Ecke Ihrer Website angezeigt. Wenn Ihre Besucher darauf klicken oder tippen, wird das Vollbildmenü angezeigt oder ausgeblendet.

Die zweite Farbeinstellung ist für den Hintergrund des Menüs.

Wenn Sie auf jedes Feld klicken, erscheint eine Farbpalette. Sie können entweder auf die gewünschte Farbe klicken oder deren Hex-Code eingeben.

Nachdem Sie die Menüfarben ausgewählt haben, sollten Sie auf der Seite nach unten zum Abschnitt Schriftart/Erscheinungsbild scrollen. Hier können Sie die Schriftfarbe, Schriftfamilie und Schriftgröße auswählen, die für den Menütext verwendet werden.

Für dieses Tutorial bleiben wir bei den Standardeinstellungen, die die Schriftart unseres Themes verwenden. Wir empfehlen diese Einstellung, da sie zum Design Ihrer Website passt. Außerdem könnte das Laden zusätzlicher Schriftarten die Leistung und Geschwindigkeit Ihrer WordPress-Website beeinträchtigen.

Es gibt auch Einstellungen, um ein seitliches Menü auf bestimmten Seiten anzuzeigen und das Hauptmenü zu scrollen, wenn es nicht hoch genug ist. Für dieses Tutorial lassen wir diese Einstellungen deaktiviert, aber Sie können gerne damit auf Ihrem eigenen WordPress-Blog oder Ihrer Website experimentieren.

Scrollen Sie danach zum Abschnitt „Animationseinstellungen“. Hier können Sie zwei Hauptoptionen anpassen.

Der erste davon ist „Animationstyp“. Damit können Sie die Animationsrichtung auswählen, wenn das Menü aktiviert wird. Sie können zwischen von oben nach unten, von links nach rechts und von rechts nach links wählen.

Die zweite Einstellung ist der Effekt, den Sie erhalten, wenn Sie mit der Maus über einen Menüeintrag fahren. Die Auswahlmöglichkeiten sind Polsterlinie, Hintergrundfarbe und Hintergrundfarbe mit abgerundetem Rand.

Vollbildmenü-Inhalt

Schließlich müssen Sie zum Seitenanfang zurückscrollen und auf die Registerkarte „Menüinhalt“ klicken. Hier können Sie das WordPress-Menü auswählen, das in Ihrem Vollbildmenü angezeigt wird.

Neben „Menü auswählen“ oben müssen Sie ein Menü aus der Dropdown-Liste auswählen. Wenn Sie noch kein Navigationsmenü erstellt haben, lesen Sie unseren Leitfaden zum Hinzufügen von Navigationsmenüs in WordPress.

Wenn Sie zusätzliche Inhalte auf dem Menübildschirm anzeigen möchten, können Sie diese im nächsten Abschnitt mit der Bezeichnung „Kostenlose HTML / Shortcodes“ hinzufügen. Geben Sie einfach Ihren Inhalt in das Editorfeld ein und fügen Sie alle Mediendateien hinzu, die Sie möchten. Diese Inhalte werden unter dem Menü angezeigt.

Es gibt auch eine Checkbox, die einen Link zu Ihrer Datenschutzseite enthält. Viele Website-Besitzer ziehen es jedoch vor, diese im Footer anstatt im Hauptmenü hinzuzufügen.

Als Nächstes möchten Sie vielleicht Social-Media-Icons als Menüpunkte hinzufügen. Diese werden in einer Reihe am unteren Rand Ihres Vollbildmenüs angezeigt.

Um sie hinzuzufügen, scrollen Sie einfach nach unten zum Abschnitt „Social Icons“ und geben Sie einen Titel für das Symbol ein, z. B. „Facebook“. Wählen Sie anschließend das entsprechende Symbol aus und geben Sie die URL zu Ihrer sozialen Seite ein.

Sie können weitere Symbole hinzufügen, indem Sie auf die Schaltfläche „Weiteres Symbol hinzufügen“ klicken.

Schließlich können Sie eine native WordPress-Suchleiste oben in Ihrem responsiven Menü hinzufügen. Sie müssen zum Ende der Seite 'Menüinhalt' scrollen und das Kontrollkästchen 'Suchleiste hinzufügen?' aktivieren. Wenn Sie möchten, können Sie auch Platzhaltertext eingeben.

Klicken Sie abschließend auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Sie können nun Ihre Website besuchen, um das Vollbild-Responsive-Menü in Aktion zu sehen. Wir empfehlen Ihnen, die Größe Ihres Browsers zu ändern, um zu sehen, wie sich das Menü bei verschiedenen Bildschirmgrößen verhält.

So sieht es auf unserer Demowebsite aus.

Wenn Sie mit Ihrem Vollbildmenü zufrieden sind, vergessen Sie nicht, zurück zu Vollbildmenü-Optionen zu navigieren und die Option „Menü nur für Admin-Benutzer anzeigen“ zu deaktivieren. Nachdem Sie auf die Schaltfläche „Änderungen speichern“ geklickt haben, können Besucher Ihrer Website auf das Menü zugreifen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Vollbild-responsives Menü zu Ihrer WordPress-Website hinzufügen. Möglicherweise möchten Sie auch lernen, wie Sie ein Mega-Menü auf Ihrer WordPress-Website hinzufügen oder wie Sie ein Slide-Panel-Menü in WordPress-Themes hinzufügen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.