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?

Ein vollflächiges, responsives Menü erleichtert Besuchern die Navigation auf Ihrer WordPress-Website oder in Ihrem WooCommerce-Shop auf Smartphones und Tablets erheblich.

Indem der gesamte Bildschirm für das Menü genutzt wird, ist es einfach, auf Links zu tippen, ohne versehentlich das falsche Element auszuwählen.

Da heutzutage mehr Menschen auf Mobilgeräten als auf Desktops surfen, ist es unerlässlich zu prüfen, wie Ihre Website auf kleinen Bildschirmen aussieht.

Ein responsives Menü passt sich automatisch an verschiedene Bildschirmgrößen an und sorgt so für ein reibungsloses Erlebnis für jeden Besucher.

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

Schritt 1: Installieren und aktivieren Sie das FullScreen Menu Plugin

Das erste, was Sie tun müssen, ist, das Plugin FullScreen Menu zu installieren und zu aktivieren.

Sie können sich unsere Schritt-für-Schritt-Anleitung So installieren Sie ein WordPress-Plugin für Anfänger für weitere Details ansehen.

Schritt 2: Allgemeine Menüeinstellungen konfigurieren

Nach der Aktivierung sollten Sie zur Seite Fullscreen Menu Options in Ihrem WordPress-Admin-Menü navigieren, um die Plugin-Einstellungen zu konfigurieren.

Sie gelangen automatisch zum Tab 'Einstellungen'. Beginnen Sie damit, das Kontrollkästchen  'Animated Fullscreen Menu aktivieren'  zu aktivieren, um das Menü zu aktivieren.

Es ist ratsam, zunächst auch das Feld '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.

Unter diesen Optionen finden Sie weitere Einstellungen, mit denen Sie das Menü nur auf Mobilgeräten anzeigen, das Menü bei einem Klick oder Scrollen schließen und das Menü auf bestimmten Seiten ausblenden können. 

In unserem Beispiel lassen wir diese Einstellungen deaktiviert, aber Sie können sie gerne nach Ihren Wünschen für Ihre eigene Website anpassen.

Schritt 3: Menüdesign und Erscheinungsbild anpassen

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

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, Schriftart und Animationseinstellungen 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 erscheint normalerweise im Header-Bereich Ihrer Website. 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 empfehlen wir, bei den Standard-Schrifteinstellungen zu bleiben, die oft die Schriftart Ihres Themes verwenden.

Dies ist eine gute Wahl, da es zum Gesamtdesign Ihrer Website passt, und das Laden zusätzlicher Schriftarten kann manchmal die Leistung und Geschwindigkeit Ihrer WordPress-Site 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 eine dezente Linie, die erscheint (wie eine Abstands-Linie), eine Änderung der Hintergrundfarbe oder eine Änderung der Hintergrundfarbe mit einem abgerundeten Rand.

Schritt 4: Vollbild-Menüinhalt definieren

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 unsere Anleitung So fügen Sie Navigationsmenüs in WordPress hinzu.

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, diesen 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 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.

Schritt 5: Änderungen speichern und Menü testen

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 Vollbild-Menü zufrieden sind, vergessen Sie nicht, im WordPress-Admin-Menü zu Vollbild-Menüoptionen zurückzukehren und '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.

Häufig gestellte Fragen zum Hinzufügen eines Vollbild-Responsive-Menüs in WordPress

Hier sind einige Fragen, die unsere Leser häufig zum Hinzufügen eines Vollbild-Responsive-Menüs in WordPress gestellt haben:

Wie erstellt man ein responsives Menü in WordPress?

Um ein responsives Menü in WordPress zu erstellen, verwenden Sie ein mobilfreundliches Menü-Plugin wie FullScreen Menu. Dies stellt sicher, dass sich Ihr Menü für eine reibungslose Navigation an verschiedene Bildschirmgrößen anpasst.

Wie macht man einen Header in WordPress responsiv?

Einen Header in WordPress responsiv zu machen bedeutet, dass er sich auf jedem Gerät automatisch anpasst. Sie können dies mit einem responsiven Theme oder durch Anpassen des Header-Layouts mit CSS und dem Block-Editor tun.

Detaillierte Anweisungen finden Sie in unserem Tutorial zur Anpassung Ihres WordPress-Headers.

Wie erstellt man eine Vollbildseite in WordPress?

Sie können in WordPress eine Vollbildseite erstellen, indem Sie einen Page Builder wie SeedProd oder Theme-Einstellungen verwenden, die „Full-Width“-Vorlagen zulassen. Dies entfernt Seitenleisten und dehnt Ihre Inhalte über den gesamten Bildschirm aus.

Wie erstellt man eine responsive Tabelle in WordPress?

Um eine responsive Tabelle in WordPress zu erstellen, verwenden Sie den Tabellenblock des Block-Editors oder ein Plugin mit Unterstützung für responsive Tabellen. Dies stellt sicher, dass Ihre Tabelle auf Mobilgeräten ordentlich gescrollt oder gestapelt wird.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Vollbild-Responsive-Menü zu Ihrer WordPress-Site 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.