Ich wünschte ... ich könnte einen benutzerdefinierten WordPress-Header auf meiner Website verwenden, ohne Programmierkenntnisse zu haben!
Hast du jemals so über dich selbst gedacht? Sicherlich hast du es getan!
Nun… Die gute Nachricht ist… ja, Sie können den Elementor-Seitenersteller verwenden, um einen vollständig benutzerdefinierten Header zu erstellen.
Das wissen Sie vielleicht schon Elementor-Seitenersteller ermöglicht es einem Nicht-Programmierer, vollständig einzigartige WordPress-Seiten zu erstellen.
Hier in diesem Artikel erhalten Sie eine Schritt-für-Schritt-Anleitung dazu So entwerfen Sie einen benutzerdefinierten Header mit dem Elementor- und ElementsKit-Add-on.
Lasst uns loslegen!
Quick Overview
A custom header in Elementor is a personalized navigation section that replaces your theme’s default header, allowing for complete control over layout, branding, and user experience. This is achieved by using a header footer elementor wordpress plugin like ElementsKit or the native Elementor Pro Theme Builder to create templates that apply across your entire site.
Tools Used: ElementsKit Header Footer Builder
Top Strategies for Creating a Custom Header:
✅ Utilize a Template Builder: Navigate to your WordPress header plugin settings (e.g., ElementsKit > Header Footer) and create a new template specifically for your navigation.
✅ Assign Conditional Logic: Set your template to appear on the “Entire Site” or use display conditions to create a WordPress different header per page for targeted landing pages.
✅ Construct a Visual Layout: Drag and drop essential widgets—such as the Site Logo, Nav Menu, and Search bar—directly onto the Elementor canvas.
✅ Prioritize Responsiveness: Use Elementor’s responsive mode to adjust your Elementor header design so it remains functional and visually appealing on mobile devices.
For example, if you are building a conversion-focused marketing site, you can design a header that features a bold “Get Started” CTA button pinned to the right side of your navigation menu. By implementing an Transparenter klebriger Header von Elementor effect, the menu can overlay a vibrant hero image and then transition to a solid background color as the user scrolls, ensuring the navigation links always remain perfectly readable.
Designing a custom header with Elementor removes the design limitations of standard themes, enabling you to build a professional, cohesive brand identity that effectively guides users toward your most important content.
Warum müssen Sie einen benutzerdefinierten Elementor-Header entwerfen?
Das Entwerfen eines benutzerdefinierten Headers mit Elementor auf einer WordPress-Site bietet zahlreiche Vorteile und verbessert sowohl die Ästhetik als auch die Funktionalität. Hier sind 5 Hauptvorteile der Einbindung eines personalisierten Headers in Ihre Website:
🚀 Verbessertes Branding und Identität
Wenn Sie mit Elementor einen benutzerdefinierten WordPress-Header erstellen, können Sie das Design an die Identität Ihrer Marke anpassen. Sie können Markenfarben, Logos und Typografie integrieren und so Ihrer gesamten Website ein einheitliches und professionelles Erscheinungsbild verleihen.
Diese Konsistenz hilft bei der Etablierung und Stärkung Ihrer Markenidentität und der Gestaltung Ihrer Website für Besucher unvergesslicher.
✅ Verbesserte Benutzererfahrung (UX)
Ein gut gestalteter benutzerdefinierter WordPress-Header kann das Benutzererlebnis insgesamt verbessern, indem er die Navigation erleichtert intuitiver und benutzerfreundlicher.
Sie haben die Flexibilität, Navigationsmenüs zu organisieren, Call-to-Action-Schaltflächen einzubinden und das Layout für eine bessere Zugänglichkeit zu optimieren. Dies wiederum kann die Absprungraten senken und Besucher dazu ermutigen, mehr Inhalte auf Ihrer Website zu erkunden.
📱Responsives Design für mobile Geräte
Mit Elementor können Sie reaktionsfähige Header erstellen und so ein nahtloses Erlebnis für Benutzer auf verschiedenen Geräten gewährleisten. einschließlich Smartphones und Tablets.
Mit einem benutzerdefinierten Elementor-Header können Sie das Layout und den Inhalt speziell für kleinere Bildschirme optimieren und ein mobilfreundliches Design bereitstellen, um verschiedene Auflösungen und Ausrichtungen anzupassen.
💰Erhöhte Conversion-Chancen
Durch das Entwerfen eines benutzerdefinierten WordPress-Headers mit Elementor können Sie wichtige Elemente wie Kontaktformulare, Suchleisten oder Werbebotschaften strategisch an prominenten Stellen platzieren.
Das kann dazu führen erhöhte Conversion-Raten da Besucher diese Elemente eher bemerken und sich mit ihnen beschäftigen.
🎨 Flexibilität und Designkontrolle
Elementor bietet eine Drag-and-Drop-Oberfläche, sodass Sie die vollständige Kontrolle über das Design Ihres Headers haben, ohne dass umfangreiche Programmierkenntnisse erforderlich sind.
Diese Flexibilität hilft Ihnen, mit verschiedenen Layouts, Stilen und Inhaltsanordnungen zu experimentieren, bis Sie das Beste gefunden haben optisch ansprechend und funktional Elementor-Header für Ihre Website.
So entwerfen Sie einen benutzerdefinierten Header mit Elementor: Schritt-für-Schritt-Anleitung
Um einen benutzerdefinierten Elementor-Header auf Ihrer WordPress-Site zu erstellen und zu gestalten, benötigen Sie zwei WordPress-Plugins für benutzerdefinierte Header –>
Jetzt zeigen wir es Ihnen Schritt-für-Schritt-Prozess erfahren Sie, wie Sie mit Elementor einen benutzerdefinierten Header für Ihre WordPress-Website erstellen.
Schritt->1: Header hinzufügen Vorlage
Melden Sie sich zunächst bei Ihrem Admin-Dashboard an, um mit Elementor ein benutzerdefiniertes WordPress-Header-Design zu erstellen.
- Navigieren Sie zu ElementsKit → Meine Vorlagen→ Klicken Sie auf „Neu hinzufügen“.„.
Schritt->2: Wählen Sie Header-Optionen
Es öffnet sich ein Popup-Fenster mit Optionen.
- Füge hinzu ein Titel. Zum Beispiel: Benutzerdefinierter Header
- Wählen Sie den Typ → Header
- Wählen Sie eine Bedingung → Gesamte Site, Singular oder Archiv
- Aktivieren Sie die Aktivierungsoption
- Klicke auf „Mit Elementor bearbeiten“
Jetzt können Sie Ihr professionelles Aussehen bearbeiten Elementor Erstellen Sie ganz einfach einen benutzerdefinierten Header-Bereich.
Schritt->3: Wählen Sie ein Header-Design
You can select your custom header design for your WordPress site from the Integrierte ElementsKit-Header-Bibliothek.
- Wählen Sie ein Design aus der Bibliothek.
- Klick auf das "Schaltfläche „Einfügen“. Ihres gewählten Designs.
- Ihr benutzerdefiniertes Header-Design wird automatisch auf Ihrer Webseite platziert.
Schritt->4: Passen Sie das Standardlayout an
To edit the layout section, click on the customization button:
- Dehnungsabschnitt aktivieren/deaktivieren: Sie können den Abschnitt auf die volle Breite strecken
- Inhaltsbreite anpassen: Wählen Sie aus dem Dropdown-Menü die Inhaltsbreite „Box“ oder „Vollbreite“ aus
- Ändere das Spaltenlücke auf „Schmal“, „Erweitert“, „Breit“ oder „Breiter“ einstellen.
- Höhe anpassen: Wählen Sie Elementor „An Bildschirm anpassen“ oder „Mindesthöhe“.
- Wählen vertikal ausrichten von Oben, Mitte, Unten, Abstand dazwischen, Abstand ringsherum, Abstand gleichmäßig
- Überlauf: Behalten Sie die Option „Standard“ oder „Ausgeblendet“ bei
- Wählen Sie HTML-Tag aus: Wählen Sie aus der Dropdown-Liste aus
Schritt->5: Telefonnummer anpassenUmber
Reduzieren Sie die Kommunikationsbarriere, indem Sie die Kontaktnummer zu Ihrer Website hinzufügen. Sie können Ihrer Elementor-Kontaktnummer einen Link hinzufügen, damit Besucher Sie problemlos anrufen können.
- Wählen Sie das Layout: Standard oder Inline
- Firma anpassen Telefonnummer
- Laden Sie alle hoch Symbol mit Weiterleitungslink
📢📢 Siehe auch – Rekorde brechen: Wir feiern mehr als 1 Million Benutzer von ElementsKit!
Schritt->6: E-Mail anpassen
Hinzufügen Ihres offizielle E-Mail-Adresse auf dem benutzerdefinierten Header vereinfacht den Kommunikationsvorgang. Es gewährleistet eine reibungslosere Kommunikationsbrücke mit Ihren Benutzern.
Schauen wir uns den Prozess an Anpassen der E-Mail-Adresse im benutzerdefinierten Header Ihrer WordPress-Site.
- Wählen Sie das Layout: Standard oder Inline
- Fügen Sie die E-Mail-Adresse des Unternehmens hinzu oder bearbeiten Sie sie
- Laden Sie alle hoch Symbol mit Weiterleitungslink
Schritt->7: Passen Sie die Adresse an
Ermöglichen Sie Ihren Benutzern, Sie leicht zu finden, indem Sie oben die Firmenadresse hinzufügen. Dies wird sehr hilfreich sein Verbesserung der Benutzerinteraktion. So fügen Sie Ihre Firmenadresse in Ihren benutzerdefinierten Elementor-Header ein→
- Wählen Sie das Layout: Standard oder Inline
- Fügen Sie das Unternehmen hinzu oder bearbeiten Sie es
- Laden Sie ein beliebiges Symbol von hoch Symbolbibliothek mit dem Redirect-Link
Schritt->8: Fügen Sie Ihre Social-Media-Profile hinzu
Sie können Ihre offiziellen Social-Media-Profile wie Facebook, Twitter oder Instagram anzeigen und Ihre Benutzer nahtlos verbinden.
Um Ihren benutzerdefinierten WordPress-Header durch benutzerdefinierte Social-Media-Symbole vertrauenswürdiger zu machen, müssen Sie →
- Klick auf das soziales Widget
- Wählen Sie Ihren Stil: Symbol, Text oder beides
- Wählen Sie die Ausrichtungsposition: Links, Mitte oder Rechts
- Symbol hinzufügen: Symbol aus Bibliothek hochladen
- Etikett hinzufügen/bearbeiten
- Bieten Soziale Verbindung
- Passen Sie das Symbol sowohl für Normal als auch für Hover an
- Hintergrundfarbe hinzufügen
- Wählen Sie den Rahmentyp: Durchgehend, Doppelt, Gepunktet, Gestrichelt, Rille
- Wählen Sie Textschatten: Unschärfe, Horizontal, Vertikal
- Wählen Sie „Boxschatten“ aus: Horizontal, Vertikal, Unschärfe, Ausbreitung
- Wählen Sie Position: Umriss oder Einschub
Schritt->9: Fügen Sie ein Logo hinzu
Mit ein paar einfachen Schritten können Sie ein Logo hinzufügen:
- Klicken Sie auf das Logobild→ Laden Sie Ihre Mediendatei hoch oder wählen Sie sie aus
- Wählen Sie die Bildgröße aus dem Dropdown-Menü aus
- Wählen Sie die Ausrichtung links, zentriert oder rechts
- Fügen Sie eine beliebige Art von Bildunterschrift hinzu, z. B. eine Anhangsunterschrift oder eine benutzerdefinierte Untertitelung
- Wählen Sie den Linktyp „Mediendatei“ oder „Benutzerdefinierte URL“. Sie können auch eine Weiterleitungs-URL hinzufügen.
Schritt->10: Hinzufügen Suchoption
Wenn Ihre Website eine große Menge an Inhalten enthält, können Sie einen hinzufügen Suchoption für Ihre Website. Sehen Sie sich an, wie Sie benutzerdefinierte Suchoptionen hinzufügen können:
- Fügen Sie beliebige hinzu Platzhaltertext
- Hochladen Symbol aus der Symbolbibliothek
- Passen Sie die Größe durch Ziehen an
Schritt->11: Fügen Sie einen CTA-Button hinzu
Befolgen Sie den Vorgang, um eine CTA-Schaltfläche in Ihren benutzerdefinierten WordPress-Header hinzuzufügen →
- Beschriftung: Schaltflächentext hinzufügen oder bearbeiten
- URL: Geben Sie einen Weiterleitungs-URL-Link an
- Aktivieren Sie „Symbol hinzufügen“, um das Schaltflächensymbol bereitzustellen
- Laden Sie die hoch Schaltflächensymbol aus der Icon-Bibliothek oder Sie können es aus Ihrer Bibliothek hochladen
- Wählen Sie Symbolposition: Vor dem Text oder Nach dem Text
- Wählen Sie die Ausrichtung: Links, Mitte oder Rechts
Schritt->12: Passen Sie das Menü an
Megamenu Builder ist eine der erstaunlichsten Funktionen von ElementsKit. Wenn Sie den Menübereich erstellen und anpassen möchten, können Sie diesen verwenden Megamenü-Funktion. Schauen wir uns die Funktionalitäten an:
- Wählen Sie Ihr zuvor erstelltes Menü aus dem Dropdown-Menü aus
- Wählen Sie die horizontale Menüposition: Links, Mitte, Rechts oder Blocksatz
- Laden Sie das Logo des mobilen Menüs und das Hamburger-Symbol hoch
- Aktivieren/deaktivieren Sie den Untermenü-Klickbereich: Symbol/Text
- Eine Seite aktivieren/deaktivieren
- Wählen Sie einen reaktionsfähigen Haltepunkt: Tablet/Mobil
Schritt 13: Testen des Headers
Jetzt ist es an der Zeit, das Ergebnis zu überprüfen. Nach Entwerfen Sie Ihren benutzerdefinierten WordPress-Header mit Elementor Klicken Sie einfach auf das „Aktualisieren-Button“
Schauen wir uns die endgültige Ausgabe an!
How to edit the header in WordPress Elementor using ElementsKit?
How to edit the header in WordPress Elementor with Theme Builder?
How to edit the header in Elementor specifically for mobile viewing?
Zusammenfassung
Es ist wirklich einfach, ein toll aussehendes Produkt zu erstellen Website-Header mit Elementor und ElementsKit.
Ich hoffe, dass Sie gelernt haben, wie Sie mit Elementor einen vollständig benutzerdefinierten Header für Ihre WordPress-Site erstellen. Wenn Sie jedoch weitere Fragen zum Verfahren haben, können Sie unten gerne einen Kommentar hinterlassen. Wir werden uns freuen, Ihnen zu helfen.
Schreibe einen Kommentar