So erstellen Sie einen atemberaubenden Sticky Header mit Elementor (Elementor Tutorial)

Sie wissen vielleicht bereits, dass Elementor ein erstaunlicher Seitenersteller ist. Weil elementor Page Builder es einem Nicht-Programmierer ermöglicht, 100% einzigartige WordPress-Seiten zu erstellen. In diesem Elementor-Tutorial zeigen wir Ihnen, wie Sie mit dem Elementor-Seitenersteller eine Kopfzeile erstellen.

Der Seitenersteller von Elementor gewinnt unter den WordPress-Benutzern aufgrund seiner Flexibilität, Visualität, seines einfachen Drop-and-Drag und seiner benutzerfreundlichen Einrichtungen Vertrauen.

Mit anderen Worten, über 1.283.275 Live-Websites verwenden Elementor.

Vielleicht gefällt dir dein aktueller WordPress-Theme-Header nicht. In diesem Fall können Sie den Elementor-Seitenersteller auswählen, um den Kopf- oder Fußzeilenteil Ihrer Website problemlos anzupassen.

Der Kopf- und Fußbereich ist der wichtigste Teil jeder Website. Weil ein Besucher oder Kunde zuerst diese Abschnitte sieht und dann auf anderen Webseiten navigiert.

Sie müssen diese beiden Abschnitte also sorgfältig gestalten. Und Sie müssen einige Informationen wie soziale Symbole, Suchschaltflächen, Kontaktnummern und Menü-Widgets bereitstellen.

Zu beachten: Dies ist nicht das Tutorial zum Entwerfen einer Fußzeile . Erfahren Sie, wie Sie mit dem Elementor eine Fußzeile erstellen.

Warum sollten Sie sich für Elementor entscheiden?

Wenn Sie keine Ahnung vom Programmieren haben, ist der Seitenersteller von Elementor die beste Option für Sie. Weil Sie mit dem Elementor erstaunliche und effektive Designs erstellen können.

Darüber hinaus bevorzugen die meisten WordPress-Benutzer Elementor, um Webseiten anzupassen. Es ist eines der besten Tools zum Bearbeiten, Anpassen, Gestalten und mehr auf der Webseite.

Auch hier enthält Elementor wichtige Add-Ons, mit denen Sie Ihre Website problemlos anpassen können. Mit Elementor Pro erhalten Sie mehr als 30 Widgets, um Ihren Design-Workflow zu verbessern. Mit dem Elementor-Seitenersteller erhalten Sie also alle diese Einrichtungen im Großen und Ganzen.

Sie können den Elementor-Seitenersteller aus folgenden Gründen auswählen:

• Einfach zu verwenden
• Sie können mit der Live-Site entwerfen
• Wichtige Widgets zum Anpassen von Webseiten wie Happyaddons
• Mobile Bearbeitungsfunktion
• Undo/Redo und Revisionsverlauf
• Visueller und angeborener Formularersteller
• Benutzerdefinierte Schriftarten, globale Widgets
• Und mehr

Was brauchen Sie, um einen Header mit Elementor zu erstellen?

Sowohl Elementor Free als auch Pro sind mit außergewöhnlich wertvollen Highlights gespickt. Wenn Sie eine WordPress-Website betreiben und ständig Websites entwickeln, ist Elementor Pro eine außergewöhnliche Erweiterung Ihrer Toolbox.

Bevor Sie daran denken, einen Header zu erstellen, müssen Sie die beiden folgenden Dinge beachten:

• Sie müssen die kostenlose Version von Elementor Page Builder installieren
• Und dann auf Elementor pro upgraden

Einen umwerfenden Header mit Elementor erstellen (7 einfache Schritte)

In diesem Abschnitt zeigen wir Schritt für Schritt, wie Sie einen erstaunlichen Header für Ihre Website entwerfen oder erstellen können.

Installieren Sie die kostenlose und Pro-Version von Elementor

Der Installationsprozess von Elementor free ist der gleiche wie bei einigen anderen Plugins:

• Navigiere zu wp-admin
• Klicken Sie auf Plugins→Neue Plugins hinzufügen
• Geben Sie „ Elementor “ ein und klicken Sie auf Jetzt installieren

5. „Aktivieren“ Sie nun das Plugin

Erfahren Sie, wie Sie Elementor Pro installieren

Fakten, die Sie berücksichtigen sollten, bevor Sie mit diesem Elementor-Tutorial beginnen

• Erstellen Sie zunächst ein Menü
• Installieren Sie das Envato Elements-Plugin

Mit dem Envato Elements Plugin erhalten Sie viele kostenlose Fotos, Blöcke und Vorlagen. So können Sie eine erstaunliche Erfahrung mit Envato und dem Elementor Page Builder-Plugin zusammen genießen.

Schritt eins: Erstellen Sie eine leere Kopfzeile

Gehen Sie zu Vorlage > Theme Builder > Kopfzeile auswählen

• Ein Popup-Fenster wird angezeigt. Wo Sie gebeten haben, auszuwählen, was Sie bekommen möchten.

• Wählen Sie dann die Kopfzeile aus, die Sie erstellen möchten. Nachdem Sie auf die Schaltfläche „ Vorlage erstellen “ geklickt haben.

Elementor zeigt Ihnen viele kostenlose Vorlagen und Blöcke. Und Sie können auch Ihre Lieblingsvorlage speichern.

Schritt Zwei: Einrichten des allgemeinen Layouts

Um eine benutzerdefinierte Kopfzeile zu erstellen, müssen Sie entscheiden, welche Arten von Layout Sie benötigen.

• Klicken Sie zunächst auf die Hauptanpassungsschaltfläche Ihres Header-Teils, um den Abschnitt „ Layout “ in der Seitenleiste zu bearbeiten:

• Und dann nehmen Sie die gewünschte Struktur auf

Hinweis: Wir haben das markierte Layout im obigen Bild zum Erstellen der Kopfzeile verwendet.

Schritt drei: Hinzufügen eines Logos

Dies ist ein sehr einfacher Schritt. Sie können ganz einfach ein Logo hinzufügen. Sie können dies auf zwei Arten tun.

1. Gehen Sie zu „Dashboard“ > „Darstellung“ > „Anpassen“ > „Site-Identität“.

• Danach können Sie das Logo auswählen und in der Kopfzeile festlegen.

02. Wählen Sie den Site-Logo -Block in der Seitenleiste aus. Ziehen Sie es dorthin, wo Sie es verwenden möchten.

• Schließlich wird Ihr aktuelles Logo automatisch abgerufen, nachdem Sie das „ Site-Logo “ in den gepunkteten Bereich gezogen haben.

• In dieser Einstellung können Sie auswählen, wie das Logo beim Klicken aussehen soll, und Sie können hier auch seine Größe und Ausrichtung anpassen.
• Mit den Optionen Stil und Erweitert können Sie viele Dinge tun.

Schritt 4: Hinzufügen eines Menüs

• Wählen Sie das Widget „ Nav-Menü “ in der linken Seitenleiste aus. Ziehen Sie es wie in Schritt vier in den Kopfbereich.

• Und es passt das von Ihnen erstellte Menü an. Erfahren Sie, wie Sie ein benutzerdefiniertes Menü erstellen.

Hier sind die wichtigen Dinge, die Sie wissen sollten.

• Menü : Wählen Sie das gewünschte Menü aus. Sie können zwischen Aussehen → Menüs wählen
• Layout : Sie erhalten Horizontal, Vertikal oder Dropdown
• Ausrichten : Links, zentriert, rechts oder strecken, um den gesamten verfügbaren Bereich auszufüllen
• Zeiger – Wie Sie den aktiven Link markieren möchten
• Animation – Wie der Mauszeiger aussehen soll

Schritt 5: Hinzufügen eines Suchfelds

Um das Suchfeld in der Kopfzeile hinzuzufügen, müssen Sie nur das Such-Widget auswählen und an die gewünschte Stelle ziehen.

In diesem Abschnitt erhalten Sie:

• Skin – Sie erhalten Classic, Minimal, Full Screen für die
• Platzhalter – Sie können diesen Abschnitt verlassen oder so etwas wie „Suchen“ dort lassen
• Ausrichtung , Größe – Von hier aus richten Sie das Suchfeld aus

Schritt 6: Fügen Sie weitere zusätzliche Elemente hinzu

Um Ihren Header lukrativ zu machen, können Sie ein Widget von der linken Seite Ihres Bildschirms hinzufügen. Sie können mit diesen Widgets experimentieren, um den erstaunlichen Effekt zu erzielen, der Ihnen gefällt.

Hier ist ein Screenshot der Widgets. Sie können nach allem suchen, was Sie wollen.

Mithilfe von Widgets können Sie soziale Symbole , Seitenkopftext und mehr hinzufügen.

Schritt Sieben: Veröffentlichen Sie Ihren Header

Außerdem ist dies der wichtigste Teil. Nachdem Sie Ihren Header entworfen haben, müssen Sie sehr vorsichtig sein.

• Klicken Sie dazu auf die Schaltfläche VERÖFFENTLICHEN auf der linken Seite der Fußzeile. Sie werden ein Popup sehen, in dem Sie gefragt werden, wo Sie Ihre neue Kopfzeile anzeigen möchten.

• Die grundlegende Bedingung für diesen Abschnitt ist die Auswahl von „ Entire Site “ (Gesamte Website) und dann die Schaltfläche „Save and Close“ (Speichern und schließen).

Endlich ist Ihr Header-Teil fertig. Hurra!!!

Wenn Sie also diesen Schritten folgen, können Sie ganz einfach Ihren eigenen Header für Ihre Website entwerfen.

Sehen Sie sich das Video unten an, um einen Website-Header in WordPress zu erstellen:

Top 5 Websites, die mit Elementor erstellt wurden

Ganz außerhalb der Erstellung hat sich Elementor zu einem führenden WordPress Page Builder und einem nützlichen Asset entwickelt, das eine kompakte Lösung für Website-Entwickler bietet.

Infolgedessen verwenden viele Designer Elementor und fügen jeden Monat neue Benutzer hinzu. Hier werden wir über die Top-5-Websites berichten, die ihre Website mit dem Elementor-Seitenersteller entworfen und entwickelt haben.

Elementor erreichte ungefähr 2 Millionen aktive Installationen

Web bringen

Bringing The Web ist eine spezialisierte Genossenschaft für eine breite Palette von Online-Arrangements. Es zeigt eine gut kombinierte Struktursprache, ebenso wie eine zarte meergrün/blaue Themenschattierung.

MO SCHALKX

MO SCHALKX ist eine kommerzielle Website für Fotografie und Film. Der Inhaber dieser Website ist Niederländer. Und er entwickelt seine Website mit Elementor. Dies ist eine Portfolio-Website. Auf dieser Website lädt er alle seine aktuellen Projekte hoch.

CASA DA COMIDA

CASA Da Comida ist ein in Lissabon ansässiges Lokal, das alles bietet, was eine Kochstelle beinhalten muss. Die Seite findet heraus, wie man die hohe Qualität des Restaurants weitergeben kann.

Am wichtigsten ist, dass es HD-Videos und -Bilder im Vollbildmodus enthält. Sie finden auch einen beeindruckenden Bewertungsbereich für Google-, Facebook- und Tripadvisor-Ergebnisse.

SCHÖPFER

CREATER ist ein Dienstleister für Weblösungen aus Malaysia. Die Besucher werden auf den ersten Blick überrascht sein, den schwarz-grün gemischten Hintergrund zu sehen.

Der vorhersehbare dunkle und grüne Hintergrund, der auf allen Seiten zu sehen ist, dominiert ebenfalls die vielfältigen benutzerdefinierten Illustrationen auf der Website.

HEXAGON WEB

HEXAGON WEB ist eine französische Entwicklungswebsite. Ihre Website ist farbenfroh mit trendigen Illustrationen und feinem Bienenstock-Design im Hintergrund.

Darüber hinaus verwendeten sie auf ihrer Website Formteiler und Kurvenillustrationen, wodurch sie einen fließenden Layouteffekt erzielten.

Ich freue mich auf Elementor

Vor allem kann man davon ausgehen, dass sich der Page Builder Elementor zur ersten Wahl für den Webentwickler entwickelt. Menschen aus der ganzen Welt verwenden den Elementor-Seitenersteller, um ihre Website zu gestalten.

Jeden Monat veröffentlicht das Elementor-Team Showcase. In diesem Showcase erhalten Sie die Top 10 Websites, die den Elementor-Seitenersteller verwenden. Daher ist unsere Liste nach dem Showcase des Monats von der Elementor-Website.

Um Ihre mit Elementor erstellte Website zu optimieren oder Ihre Webseiten anzupassen, haben wir HappyAddons entwickelt, und fast alle unsere Widgets sind für Sie völlig kostenlos. Vergessen Sie nicht, HappyAddons auszuprobieren – die ultimative Widget-Sammlung für Elementor.

Sind Sie bereit, Ihren atemberaubenden Header mit Elementor zu erstellen?

Wir glauben, dass Sie in diesem Elementor-Tutorial-Blog auch etwas Nützliches gelernt haben. Und Sie können jede Kopfzeile für Ihre Website, Ihren Blog oder Ihre Unternehmenswebsite entwerfen.

Wenn Sie jedoch etwas zu sagen haben oder Fragen haben, können Sie diese gerne im Kommentarbereich stellen. Wir antworten Ihnen gerne.