Mit der Kata Mit diesem Theme können Sie Header gestalten, die für verschiedene Bildschirmgrößen optimiert sind und so ein adaptives Nutzererlebnis schaffen. Für ein verbessertes mobiles Erlebnis verwenden Sie die Kata Das Hamburger-Menü-Element ermöglicht die Gestaltung eines erweiterten, responsiven Menüs. Diese Anleitung bietet Schritt-für-Schritt-Anweisungen zur Erstellung eines mobilfreundlichen Headers, zum Erstellen einer Elementor-Vorlage und zum Verwalten der Sichtbarkeitseinstellungen.
Erstellen Sie einen für Mobilgeräte optimierten Kopfbereich
Neuen Header-Bereich für Mobilgeräte hinzufügen
Erstellen Sie unterhalb Ihres bestehenden Kopfzeilenbereichs einen zusätzlichen Abschnitt. Dieser Abschnitt wird speziell für kleinere Bildschirme angepasst, um eine optimale Darstellung zu gewährleisten.
Füge dem mobilen Header Kernelemente hinzu
Platzieren Sie in diesem neuen Abschnitt wichtige Elemente wie die Kata Logo- und Markenanpassung als auch Kata Hamburger MenüDiese Konfiguration gewährleistet, dass mobile Nutzer mit einem einfachen Schalter auf die Hauptnavigation zugreifen können.
Erstellen Sie eine Toggle-Menü-Vorlage
Neue Elementor-Vorlage erstellen
Um die Inhalte festzulegen, die beim Antippen des Schalters angezeigt werden, gehen Sie zu WordPress-Admin > Vorlagen > Neu hinzufügen. Wählen Sie das Abschnitt Geben Sie einen Vorlagentyp ein und erstellen Sie eine neue Vorlage speziell für Ihr mobiles Menü.
Passen Sie die Höhe des Abschnitts an die Bildschirmgröße an.
Im Elementor-Editor stellen Sie die Abschnittshöhe auf „An Bildschirm anpassen“ ein, um sicherzustellen, dass das Menü beim Öffnen die gesamte Höhe des Gerätebildschirms ausfüllt.
Fügen Sie Kata Menüelemente und Layout anpassen
Ziehen Sie die Kata Menu Element in diesen Abschnitt einfügen und dessen Layout festlegen Vertikale für ein übersichtliches, gestapeltes Erscheinungsbild, das sich gut für mobile Geräte eignet.
Wählen Sie das richtige Menü aus, das angezeigt werden soll.
Wählen Sie das gewünschte Menü aus den Dropdown-Optionen aus, damit es mit dieser mobilfreundlichen Menüvorlage verknüpft wird.
Jetzt können Sie dieses Menü mithilfe des Stylers gestalten. Gehen Sie zum Tab „Stil“ und öffnen Sie den Styler des Wrappers, indem Sie auf das entsprechende Symbol klicken. Wechseln Sie im Styler zum Tab „Text“ und ändern Sie die Textausrichtung auf „Zentriert“. Dadurch werden Ihre Menüpunkte mittig angezeigt.
Gestalte das Menü mit dem Styler-Tool
Menüpunkte ausrichten
In Elementor's Design Registerkarte, öffnen Sie den Styler für die Verpackung durch Anklicken des daneben stehenden Symbols. Unter dem Text Abschnitt, legen Sie die Textausrichtung fest auf Center um sicherzustellen, dass die Menüpunkte ordentlich angeordnet sind.
Einzelne Menüpunkte anpassen
Klicken Sie auf Allgemein Im Styler können Sie auf die einzelnen Menüpunkte zugreifen. Hier können Sie Farben, Schriftarten, Abstände und andere Gestaltungsoptionen an die Ästhetik Ihrer Marke anpassen.
Speichern Sie die Vorlage
Nachdem Sie die Gestaltung abgeschlossen haben, speichern Sie die Vorlage. Dieses mobile Menü kann nun mit dem Gerät verbunden werden. Kata Hamburger-Menüelement.
Verknüpfe das Hamburger-Menü mit der Vorlage
Wählen Sie Ihre neue Vorlage aus in Kata Hamburger Menü
Gehen Sie zur Kata Hamburger Menü Wählen Sie in den Einstellungen die im vorherigen Schritt gespeicherte Vorlage aus. Dadurch wird das Menü mit dem Umschalter verknüpft, sodass durch Antippen auf einem Mobilgerät das erweiterte Menü angezeigt wird.
Sichtbarkeitseinstellungen für verschiedene Geräte verwalten
Anzeigeeinstellungen für große Bildschirme
Legen Sie Ihren Hauptkopfbereich wie folgt fest: Anzeige: Block für größere Bildschirmgrößen (Desktop, Laptop und Tablet im Querformat) und Anzeige: None für Mobiltelefone, kleine Mobiltelefone und kleinere Tablets.
Anzeigeeinstellungen für die mobile Kopfzeile
Für den für Mobilgeräte optimierten Header-Bereich sollten diese Einstellungen umgekehrt werden: Anzeige: None für Desktop-, Laptop- und Tablet-Querformat Anzeige: Block für Mobiltelefone, kleine Mobiltelefone und kleinere Tablets.
Fazit
Mit diesen Schritten haben Sie erfolgreich einen responsiven, mobilfreundlichen Header implementiert. KataDie erweiterte Hamburger-Menü-Funktion ermöglicht es Nutzern, Ihre Website auf Mobilgeräten einfach zu navigieren und ein nahtloses Benutzererlebnis auf allen Bildschirmgrößen zu genießen, indem sie ein Umschaltmenü erstellen, das sich im Vollbildmodus öffnet.
