Kata Header Builder ist ein vielseitiges Werkzeug, mit dem Benutzer ihre Website-Header in der Elementor-Bearbeitungsumgebung erstellen und anpassen können. Styler Ohne Programmierkenntnisse. Fügen Sie Ihre bevorzugten Widgets hinzu, um Ihre eigene Vorlage zu erstellen. Die erstellte Vorlage dient dann als Hauptheader Ihrer Website und wird oben geladen. Dank der Drag-and-Drop-Oberfläche, zahlreicher Anpassungsmöglichkeiten und vordefinierter Vorlagen ist die Gestaltung des Headers intuitiv und effizient.
Hinweis: Einer von Kata Header BuilderDie Besonderheit von besteht darin, dass die Widgets nebeneinander und nicht untereinander angeordnet sind.
Hier eine Erklärung seiner Merkmale und Funktionen:
1. Drag-and-Drop-Editor
Der Header Builder verfügt über eine intuitive Drag-and-Drop-Oberfläche, mit der Benutzer Elemente wie Logos, Menüs, Schaltflächen, Suchleisten, Social-Media-Icons und mehr hinzufügen, anordnen und in der Größe anpassen können. Sie können diese Elemente in bestimmten Zeilen und Spalten positionieren und so das Layout präzise steuern.
2. Vordefinierte Vorlagen
Kata bietet mehrere vorgefertigte Header-Vorlagen, die Sie importieren und anpassen können. Diese Vorlagen sind responsiv und für verschiedene Website-Typen wie Blogs, Online-Shops oder Unternehmenswebsites geeignet.
3. Layoutanpassung
Sie können das Header-Layout an den Stil Ihrer Website anpassen:
Reihen und SpaltenFügen Sie mehrere Zeilen und Spalten hinzu, um Ihre Kopfzeile zu strukturieren.
BreiteneinstellungenPassen Sie die Breite der Kopfzeile an, von voller Breite auf ein Boxed-Layout.
4. Styling-Optionen
Der Builder beinhaltet umfassende Styling-Tools:
Abstand und Polsterung: Feinabstimmung von Rändern und Abständen für ein elegantes Design.
Farben und Hintergründe: Farben und Farbverläufe anpassen oder Bilder als Hintergründe hinzufügen.
Typografie: Schriftarten, -größen und -stärken für Textelemente anpassen.
5. Unterstützung für dynamische Inhalte
KataDer Header Builder von [Name des Tools] integriert sich in die dynamischen Inhaltsfunktionen von WordPress und ermöglicht es Ihnen, personalisierte Inhalte basierend auf dem Benutzerprofil anzuzeigen, wie z. B. Anmelde-/Abmelde-Schaltflächen oder individuelle Begrüßungen.
6. Erweiterte Funktionen
Mega-Menü: Erweitern Sie die Navigationsmöglichkeiten mit der Mega-Menü-Funktion, die Kategorien, Bilder und Widgets anzeigt.
Benutzerdefinierter Code: Fügen Sie HTML-, CSS- oder JavaScript-Code-Snippets für erweiterte Anpassungen ein.
Integrationen von DrittanbieternKompatibel mit gängigen Plugins wie WooCommerce, wodurch das Hinzufügen von Warenkorbsymbolen oder Benutzerkonto-Links vereinfacht wird.
7. Export und Import
Speichern Sie Ihre Header-Designs als Vorlagen, um sie auf anderen Websites oder in verschiedenen Bereichen Ihrer aktuellen Website wiederzuverwenden. Sie können auch von anderen Nutzern freigegebene Header importieren. Kata von Nutzern oder von den Theme-Entwicklern bereitgestellt.
Zugriff auf den Header-Builder
Um auf den Header Builder zuzugreifen, gehen Sie zu wp-admin > Kata > Kopfzeile.
Jetzt bist du drin Kata Header-Builder. Der Elementor-Editor öffnet sich standardmäßig und begrüßt Sie mit dem Kata Logo, Ihr Website-Menü und verschiedene Header-Elemente, darunter ein Suchsymbol, ein Benutzerkonto, eine Wunschliste und ein Warenkorb. Auf der linken Seite sehen Sie Elementor-Widgets, die speziell für die Website vorgesehen sind. Kata Header-Generator.
Dies sind die Widgets, die üblicherweise im Header der Website verwendet werden. Sie können jedoch beliebige Widgets im Header verwenden.
- Kata Logo- und Markenanpassung
- Kata Menu
- Kata Suche
- Kata Warenkorb
- Kata Datum
- Kata Hamburger Menü
- Kata Sprachen ändern
- Kata Login
- Kata Wetter
Fügen Sie das gewünschte Element zum Header-Bereich hinzu und beginnen Sie mit der Gestaltung.
Responsiver Header
Das Design Ihres Headers muss für verschiedene Geräte mit unterschiedlichen Bildschirmgrößen angepasst werden. Erstellen Sie daher unterhalb Ihres Headers einen weiteren Abschnitt, der speziell für kleine Bildschirme gestaltet ist.
Die Menüpunkte werden auf Mobilgeräten üblicherweise anders dargestellt. Ein Schalter ersetzt die Kopfzeile, sodass nach dem Antippen das gesamte Menü angezeigt wird.
Das Kata Das Menüelement bietet die Option für ein responsives Menü, das nach der Aktivierung über eine Standardvorlage verfügt.
Dieses Design kann derzeit nicht angepasst werden. Wenn Sie also ein erweitertes, responsives Menü wünschen, müssen Sie die folgende Option verwenden: Kata Hamburger-Menüelement.
Erstellen Sie unterhalb des Hauptabschnitts einen Abschnitt und platzieren Sie dort die Kata Logo, Kata Hamburger-Menü und andere darin enthaltene Elemente.
Nun müssen Sie eine Elementor-Inhaltsvorlage erstellen, die durch Antippen des Schalters angezeigt werden kann. Öffnen Sie dazu das WordPress-Menü im Adminbereich und gehen Sie zu „Vorlagen“ > „Neu hinzufügen“, um eine Vorlage in Form eines Abschnitts zu erstellen.
Stellen Sie die Höhe Ihres Elementor-Abschnitts auf „An Bildschirm anpassen“ ein, damit er die gesamte Höhe des Benutzerbildschirms ausfüllt.
Ziehen Sie nun einen Kata Fügen Sie das Menüelement zu Ihrem Abschnitt hinzu.
Stellen Sie das Layout auf Vertikal ein und wählen Sie das Menü aus, das angezeigt werden soll.
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 Symbol davor klicken. Wechseln Sie im Styler zum Tab „Text“ und ändern Sie die Textausrichtung auf „Zentriert“. Dadurch werden Ihre Menüpunkte mittig angezeigt.
Klicken Sie nun auf „Allgemein“ und öffnen Sie den Styler für einen Menüpunkt, den Sie anpassen möchten.
Wenn Sie fertig sind, speichern Sie die Vorlage und gehen Sie dann zu Kata Wählen Sie im Menü „Hamburger-Menü“ die soeben gespeicherte Vorlage aus.
Die Implementierung des Umschaltmenüs ist abgeschlossen.
Responsive Einstellungen
Um festzulegen, welcher Abschnitt auf bestimmten Geräten oder Bildschirmgrößen angezeigt wird, verwenden Sie Responsive Einstellungen in Elementor.
Führen Sie die folgenden Schritte aus, um die responsiven Einstellungen zu konfigurieren:
1. Zugriff auf die responsiven Einstellungen
Wählen Sie den Abschnitt aus, den Sie konfigurieren möchten.
Gehen Sie in der Elementor-Seitenleiste zu Erweitert Tab.
Scrollen Sie nach unten, um das zu finden Reaktionsschnell Abschnitt „Einstellungen“.
2. Sichtbarkeitsoptionen
Auf dem Desktop ausblenden: Blendet das ausgewählte Element auf Geräten mit großen Bildschirmen (z. B. Desktop-Computern) aus.
Auf dem Laptop versteckenBlendet das ausgewählte Element auf Geräten aus, die als Laptops klassifiziert sind. Dies gilt üblicherweise für Bildschirme mit einer Breite zwischen 992 px und 1200 px. Der genaue Bereich kann von den benutzerdefinierten Breakpoint-Einstellungen abhängen.
Im Tablet-Querformat ausblenden: Blendet das ausgewählte Element bei der Anzeige auf Tablets im Querformat aus. Dies gilt für Bildschirmbreiten zwischen 768px und 992px.
Im Tablet-Hochformat ausblenden: Blendet das ausgewählte Element bei der Anzeige auf Tablets im Hochformat aus. Dies gilt typischerweise für Bildschirmbreiten zwischen 600px und 768px.
Im mobilen Querformat ausblenden: Blendet das ausgewählte Element auf Mobilgeräten im Querformat aus. Dies gilt im Allgemeinen für Bildschirme mit einer Breite zwischen 480px und 600px.
Im mobilen Hochformat ausblenden: Blendet das ausgewählte Element auf Mobilgeräten im Hochformat aus. Dies betrifft typischerweise Bildschirme mit einer Auflösung von weniger als 480 Pixeln.
Um die Einstellung anzuwenden, schalten Sie einfach die Sichtbarkeit für jedes Gerät um.
3. Layouts für verschiedene Geräte anpassen
Zur Geräteansicht wechseln: Klicken Sie oben im Elementor-Panel auf das Symbol für den responsiven Modus.
Auswählen Desktop, Tabletteden Mobil um zu sehen, wie das Design auf den einzelnen Geräten aussieht.
4. Testen und letzte Anpassungen
Über die Schaltfläche „Vorschau“ können Sie überprüfen, wie die Website auf verschiedenen Geräten aussieht.
Testen Sie gründlich, um sicherzustellen, dass alle Elemente gemäß Ihren Einstellungen richtig ausgerichtet und sichtbar sind.
