Möchten Sie Ihr mobiles Menü in WordPress bearbeiten? Ein klares, schnelles und benutzerfreundliches mobiles Menü erleichtert den Besuchern das Surfen auf Ihrer Website und kann sogar Ihre Suchmaschinenoptimierung verbessern.
In dieser Anleitung zeige ich Ihnen zwei einfache Möglichkeiten, Ihr WordPress-Mobilmenü zu bearbeiten. Die erste verwendet SeedProd für eine vollständige Anpassung, während die zweite eine kostenlose Option mit weniger Funktionen ist.
Warum sollten Sie Ihr mobiles Menü in WordPress bearbeiten?
Die Bearbeitung und Anpassung Ihres mobilen WordPress-Menüs ist aus folgenden Gründen wichtig:
- Verbesserte Benutzerfreundlichkeit: Mobile Nutzer haben andere Bedürfnisse und Gewohnheiten als Desktop-Nutzer. Indem Sie Ihr mobiles Menü anpassen, können Sie ein benutzerfreundliches Erlebnis schaffen, das ihren individuellen Bedürfnissen entspricht.
- Schnellere Ladezeiten der Website: Ein für mobile Geräte optimiertes Menü kann dazu beitragen, die Ladezeiten der Seite zu verkürzen, was für Nutzer mit langsameren Internetverbindungen wichtig ist.
- Bessere Navigation: Ein gut gestaltetes mobiles Menü kann es den Nutzern erleichtern, das Gewünschte auf Ihrer Website zu finden, was zu einem besseren Engagement und höheren Konversionsraten führt.
- Mobile-First-Indexierung: Google verwendet ein Mobile-First-Indexierungssystem, d. h. Websites werden auf der Grundlage ihrer mobilen Version eingestuft. Ein gut gestaltetes mobiles Menü kann dazu beitragen, das Ranking Ihrer Website in Suchmaschinen zu verbessern.
Insgesamt ist die Bearbeitung Ihres WordPress-Menüs für Mobilgeräte wichtig, um es für mobile Besucher zu optimieren, die Benutzerfreundlichkeit zu verbessern und das Engagement, die Konversionsraten und die Suchmaschinenoptimierung zu steigern.
Wie man das mobile Menü in WordPress bearbeitet
In dieser Anleitung zeigen wir Ihnen 2 verschiedene Möglichkeiten, wie Sie ein mobiles Menü auf Ihrer WordPress-Website bearbeiten können.
Mit der ersten Methode können Sie Ihre Menüs vollständig anpassen und bestimmte Elemente auf Desktop- oder Mobilbildschirmen ein- oder ausblenden. Die alternative Methode ist jedoch eine kostenlose Lösung mit weniger Anpassungsmöglichkeiten.
Klicken Sie auf einen der unten stehenden Links, um die gewünschte Methode auszuwählen:
- Anpassen von mobilen Menüs mit SeedProd Page Builder
- Alternative: Bearbeiten Sie mobile Menüs mit einem kostenlosen WordPress-Plugin
- FAQs zur Bearbeitung von mobilen Menüs in WordPress
Fangen wir an!
Anpassen von mobilen Menüs mit SeedProd Page Builder
Zu Beginn werden wir ein Seitenerstellungs-Plugin verwenden, um mobile Menüs visuell und ohne Code anzupassen und zu bearbeiten. Hierfür verwenden wir SeedProd, den besten WordPress Website- und Landing Page Builder.
Es enthält Hunderte von vorgefertigten Vorlagen, eine Drag-and-Drop-Schnittstelle und unzählige Designelemente, mit denen Sie jede WordPress-Seite mühelos anpassen können. Egal, ob sich Ihr Menü in der Kopfzeile, der Fußzeile oder der WordPress-Seitenleiste befindet, Sie können es mit dem SeedProd-Builder einfach bearbeiten.
Außerdem können Sie mit den leistungsstarken Sichtbarkeitsoptionen dieses Plugins bestimmte Designelemente auf mobilen oder Desktop-Bildschirmen ausblenden. Auf diese Weise können Sie Ihre Navigationsmenüs an unterschiedliche Bildschirmgrößen anpassen.
Schritt 1. Installieren und Aktivieren von SeedProd
Um loszulegen, müssen Sie das Plugin von der SeedProd-Website herunterladen. Obwohl es eine kostenlose Version von SeedProd gibt, werden wir SeedProd Pro wegen seiner Funktionen zur Erstellung von WordPress-Themen verwenden.
Wenn Sie Hilfe benötigen, können Sie diese Anleitung zur Installation eines WordPress-Plugins lesen.
Nach der Aktivierung gehen Sie zu SeedProd " Einstellungen, wo Sie Ihren Plugin-Lizenzschlüssel eingeben können. Sie finden diese Informationen im Abschnitt "Downloads" in Ihrem SeedProd-Konto-Dashboard.
Fügen Sie Ihren Schlüssel in das leere Feld ein und klicken Sie auf die Schaltfläche Schlüssel prüfen, um Ihre Lizenz zu speichern.
Schritt 2. Wählen Sie eine vorgefertigte Vorlage
Als Nächstes müssen Sie sich für ein vorgefertigtes Design entscheiden, das Sie als Ausgangspunkt verwenden möchten. Sie können entweder ein ganz neues WordPress-Theme von Grund auf mit dem Theme Builder erstellen oder einzelne Seiten mit dem Landing Page Builder erstellen.
Für diese Anleitung werden wir den Theme Builder verwenden. Wenn Sie jedoch lieber eine Landing Page erstellen möchten, können Sie diese Anleitung zum Erstellen einer Landing Page in WordPress befolgen.
Um ein vorgefertigtes Design für Ihr WordPress-Theme auszuwählen, navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd " Theme Builder und klicken Sie auf die Schaltfläche Theme Template Kits.
Dies öffnet die Bibliothek von SeedProd mit vorgefertigten Website-Vorlagen, die Sie mit einem Klick installieren können.
Blättern Sie einfach durch die Designs, bis Sie eine Vorlage finden, die Ihnen gefällt, und klicken Sie dann auf das Häkchen, um sie zu importieren.
Sobald Sie Ihr Website-Kit importiert haben, sehen Sie alle Vorlagenteile Ihres Themas in einer Liste wie dieser:
Dies sind die einzelnen Vorlagen, aus denen Ihr komplettes Thema besteht, und Sie können jede von ihnen mit dem Drag-and-Drop-Seiten-Builder von SeedProd anpassen.
Wir zeigen Ihnen als Nächstes, wie Sie das machen können! Es ist supereinfach und erfordert kein Schreiben von HTML, Jquery oder benutzerdefiniertem CSS-Code.
Schritt 3. Anpassen der Kopfzeilenvorlage
Da sich das WordPress-Menü, das wir bearbeiten wollen, in der Kopfzeile befindet, scrollen Sie durch Ihre Vorlagenteile, bis Sie die Kopfzeilenvorlage finden. Bewegen Sie dann den Mauszeiger darüber und klicken Sie auf den Link "Design bearbeiten".
Wenn es sich öffnet, sehen Sie ein Layout mit einer Live-Vorschau Ihrer Kopfzeile auf der rechten Seite und WordPress-Blöcken auf der linken Seite. Sie können jeden Block in die Vorschau ziehen, um Ihrer Seite ganz einfach neue Elemente hinzuzufügen.
Wenn Sie auf ein Element in Ihrer Kopfzeile klicken, können Sie dessen Einstellungen in der linken Seitenleiste sehen. Wenn Sie z. B. das Logo auswählen, werden Optionen zum Ändern des Logobildes, seiner Größe, Ausrichtung und Verknüpfung angezeigt.
In ähnlicher Weise zeigt ein Klick auf den Block Nav Menu verschiedene Menüeinstellungen an.
So können Sie beispielsweise zwischen einem "einfachen" und einem "WordPress-Menü" wählen.
Mit der Option "Einfach" können Sie neue Menüelemente innerhalb der Seitenerstellungsoberfläche hinzufügen. Sie können Links zu jeder Seite, jedem Beitrag, jeder Kategorie, jedem Tag oder jeder externen Webseite hinzufügen.
Da es sich um einen einfachen Ansatz zur Menüerstellung handelt, können Sie keine Dropdown-Menüs hinzufügen, bereits erstellte Menüs auswählen oder ein benutzerdefiniertes mobiles Menü zuweisen.
Sie können jedoch die Menüausrichtung, die Schriftgröße, den Abstand und die Trennlinie anpassen. Außerdem können Sie auf der Registerkarte "Erweitert" zwischen horizontalen und vertikalen Menüs wählen und die Typografie, Hintergrundfarben, Rahmen, CSS-Klassen und mehr anpassen.
Die WordPress-Menü-Option hat einen anderen Ansatz. Sie können vorhandene Menüpositionen aus der Dropdown-Liste auswählen und das Umschaltmenü für die mobile Navigation für kleine Bildschirmgrößen aktivieren.
Wenn Sie diese Einstellung aktivieren und zur mobilen Ansicht wechseln, werden Sie sehen, dass Ihr mobiles Menü ein Hamburger-Symbol anstelle der Standard-Menü-Links hat, was für die mobile Benutzererfahrung viel besser ist.
Es enthält auch einen Link zur Standard-WordPress-Menüseite, um Ihr Menü-Layout zu bearbeiten. Wie das einfache Menü bietet auch die Registerkarte "Erweitert" Anpassungs- und Animationsoptionen, und im Gegensatz zum einfachen Menü können Sie die Gestaltungsoptionen für Ihre Untermenüs anpassen.
Schritt 4. Bearbeiten Sie die Einstellungen für die Sichtbarkeit der Kopfzeile
Bis jetzt wissen Sie, wie Sie Ihr Hauptmenü bearbeiten und ein Hamburger-Menü für mobile Bildschirme aktivieren können. Was aber, wenn es in Ihrer Kopfzeile Elemente gibt, die Sie auf kleineren Bildschirmen nicht anzeigen möchten?
Die gute Nachricht ist, dass Sie die Sichtbarkeitseinstellungen für jedes Seitenelement bearbeiten und auswählen können, was auf verschiedenen Bildschirmgrößen angezeigt wird.
Nehmen wir an, Sie möchten die Aufforderung zum Handeln (CTA) in Ihrer Kopfzeile auf mobilen Geräten ausblenden, weil sie die Benutzerfreundlichkeit beeinträchtigt. In diesem Fall können Sie die Registerkarte "Erweiterte Einstellungen" dieses Blocks aufrufen und im Menü "Gerätesichtbarkeit" die Option "Auf Mobilgeräten ausblenden" aktivieren.
Wenn Sie eine Vorschau Ihrer Kopfzeile in der mobilen Ansicht anzeigen, sehen Sie, dass sie ausgegraut ist, was bedeutet, dass die Schaltfläche für mobile Besucher nicht sichtbar ist.
Fahren Sie mit der Anpassung der Optionen für Ihr mobiles Menü fort, bis Sie mit dem Aussehen zufrieden sind. Klicken Sie dann auf die Schaltfläche Speichern, um Ihre Änderungen zu speichern.
Schritt 5. Setzen Sie die Anpassung Ihres WordPress-Themes fort
Nachdem Sie Ihr Menü bearbeitet haben, können Sie den Rest Ihrer WordPress-Website mit dem Page Builder von SeedProd anpassen. Sie können zum Beispiel Ihre WordPress-Startseite bearbeiten, eine benutzerdefinierte WordPress-Seitenleiste erstellen und die Vorlage für Ihre Blog-Seite anpassen.
Sie können sogar Ihre WordPress-Fußzeile bearbeiten und ein vertikales Menü-Widget wie dieses hinzufügen:
Wenn Sie eine eCommerce-Website haben, können Sie Ihre Produktseiten auch mit den WooCommerce-Blöcken von SeedProd anpassen.
Schritt 6. Veröffentlichen Sie Ihre Änderungen
Wenn Sie bereit sind, Ihre Änderungen auf Ihrer WordPress-Website live zu schalten, kehren Sie zum SeedProd-Theme-Builder-Dashboard zurück und suchen Sie nach dem Kippschalter "SeedProd-Theme aktivieren". Schalten Sie diesen Schalter einfach auf die Position "Ja", um Ihr SeedProd-Theme zu aktivieren.
Jetzt können Sie Ihre Website besuchen und Ihr mobiles Menü in Aktion sehen.
Alternative: Bearbeiten Sie mobile Menüs mit einem kostenlosen WordPress-Plugin
Eine andere Möglichkeit, Ihre mobilen Menüs zu bearbeiten, ist die Verwendung eines WordPress-Menü-Plugins. Mit dem Plugin, das wir als Nächstes verwenden, können Sie zum Beispiel ein Hamburger-Menü erstellen, das sich auf mobilen Bildschirmen ausklappen lässt.
Zunächst müssen Sie das Responsive Menu WordPress-Plugin herunterladen, installieren und aktivieren.
Sobald das Plugin aktiviert ist, sehen Sie in Ihrer WordPress-Verwaltungsleiste ein neues Label namens "Responsive Menu". Wenn Sie darauf klicken, gelangen Sie zum Menübildschirm, um ein neues responsives Menü hinzuzufügen.
Klicken Sie also einfach auf die Schaltfläche Neues Menü erstellen. Es wird ein Popup-Fenster mit verschiedenen Menüthemen angezeigt , aus denen Sie wählen können, darunter Standard, Electric Blue, Full-Width und weitere.
Wählen Sie ein Thema, das Ihnen gefällt, und klicken Sie dann auf die Schaltfläche Weiter.
Sie können nun einen Namen für Ihr Menü eingeben, ein vorhandenes WordPress-Menü zur Anzeige auswählen und auf die Schaltfläche Menü erstellen klicken.
Jetzt sehen Sie eine visuelle Schnittstelle, auf der Sie Ihre responsiven Menüoptionen bearbeiten können. Sie können verschiedene Elemente ein- und ausblenden und die Mindest- und Höchstbreite für die mobile Darstellung ändern.
Das responsive Menü-Plugin bietet viele weitere Optionen für mobile Menüs, mit denen Sie das Verhalten und Aussehen Ihres Menüs ändern können. Sie können sie auf dieser Seite erkunden und nach Bedarf anpassen.
Vergessen Sie nicht, auf die Schaltfläche "Aktualisieren" zu klicken, um Ihre Einstellungen zu speichern.
Von dort aus können Sie Ihre Website besuchen, um das responsive Menü in Aktion zu sehen.
FAQs zur Bearbeitung von mobilen Menüs in WordPress
Ich hoffe, diese Anleitung hat Ihnen geholfen zu lernen, wie man mobile Menüs in WordPress bearbeitet. Hier sind ein paar andere Tutorials, die Sie vielleicht auch hilfreich finden, darunter die folgenden:
- Hinzufügen einer benutzerdefinierten Warnmeldung zu WordPress
- Beste WordPress-Plugins: Top 25 Must-Have Tools
- Wie man eine Autorenseite in WordPress ohne Programmierkenntnisse erstellt
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
