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 und 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 den Inhalt festzulegen, der beim Antippen des Schalters angezeigt wird, gehen Sie in der WordPress-Administration zu „Vorlagen“ > „Neu hinzufügen“ . Wählen Sie den Vorlagentyp „Abschnitt“ 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
Öffnen Sie im Elementor- Stilmenü den Styler für den Wrapper , indem Sie auf das entsprechende Symbol klicken. Stellen Sie im Abschnitt „Text“ die Textausrichtung auf „Zentriert“ ein, um eine saubere Ausrichtung der Menüpunkte zu gewährleisten.
Einzelne Menüpunkte anpassen
Klicken Sie im Styler auf „Allgemein“ , um auf die einzelnen Menüpunkte zuzugreifen. 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
Stellen Sie für Ihren Hauptkopfzeilenbereich die Anzeige auf „Block“ für größere Bildschirmgrößen (Desktop, Laptop und Tablet im Querformat) und auf „Keine“ für Mobilgeräte, kleine Mobilgeräte und kleinere Tablets ein.
Anzeigeeinstellungen für die mobile Kopfzeile
Für den für Mobilgeräte optimierten Header-Bereich sollten Sie diese Einstellungen umkehren: Anzeige: Keine für Desktop, Laptop und Tablet im Querformat und Anzeige: Block für Mobilgeräte, kleine Mobilgeräte 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.
