Möchten Sie mit Elementor einen benutzerdefinierten Header in WordPress erstellen?
Der Header ist eines der entscheidenden Elemente, die jede Website haben sollte. Ein Header enthält normalerweise ein Menü, das es Ihren Besuchern erleichtert, zu wichtigen Seiten Ihrer Website zu navigieren. Ein weiteres Element, das normalerweise in einem Website-Header zu finden ist, ist das Logo.
Entdecken Sie So installieren Sie Elementor auf WordPress
Die meisten WordPress-Themes, ob kostenlos oder kostenpflichtig, ermöglichen es Ihnen, die Kopfzeile anzupassen, indem Sie Ihr Website-Logo oder das Navigationsmenü hinzufügen. Etwas WordPress-Themes, können Sie zusätzliche Elemente wie Suchleiste und Symbole für soziale Medien hinzufügen.
Aber ist es möglich, einen benutzerdefinierten Header in WordPress zu erstellen, um den Header der Wordpress-Theme Anlage ?
Natürlich können Sie einen benutzerdefinierten Header erstellen, um den Standardheader für das derzeit aktive Thema auf Ihrer WordPress-Website zu überschreiben.
Wenn Sie über Programmierkenntnisse verfügen (in diesem Fall PHP), erstellen Sie einen benutzerdefinierten Header für a Wordpress-Theme ist kein großes Problem. Wenn Sie keine Programmierkenntnisse haben, können Sie mit Elementor einen benutzerdefinierten Header erstellen, ohne eine einzige Codezeile zu schreiben. Die Kopfzeile können Sie über einen visuellen Drag-and-Drop-Editor erstellen.
Hinweis: Theme Builder ist nur auf Elementor Pro verfügbar.
So erstellen Sie einen benutzerdefinierten Header in WordPress mit Elementor
Die Pro-Version von Elementor kommt mit einer Funktion namens Theme-Builder. Mit dieser Funktion können Sie eine erstellen Wordpress-Theme ohne Codierung. Zu den Themenelementen, die Sie mit dem Theme Builder von Elementor erstellen können, gehören:
- Kopfzeile
- Fußzeile
- Vorlage für einen einzelnen Beitrag
- Archivseitenvorlage
- 404 Seitenvorlage
In diesem Artikel zeigen wir Ihnen, wie Sie mit Elementor einen benutzerdefinierten Header für Ihr WordPress-Theme erstellen. Nach der Veröffentlichung ersetzt dieser benutzerdefinierte Header den Header Ihres aktuellen Designs.
Bevor Sie beginnen, stellen Sie sicher, dass Sie installiert haben Elementor Pro auf Ihrer WordPress-Website.
Gehen Sie zuerst zu Vorlagen -> Theme Builder.
Gehen Sie auf der Theme Builder-Seite zur Registerkarte Kopfzeile und klicken Sie auf die Schaltfläche hinzufügen um eine neue Kopfzeile zu erstellen.
Es erscheint ein Popup-Fenster, in dem Sie aufgefordert werden, Ihrer Vorlage einen Namen zu geben. Geben Sie den Namen Ihres Modells ein und klicken Sie auf die Schaltfläche EIN MODELL ERSTELLEN.
Mit Elementor können Sie einen Header aus einer Vorlage erstellen. Wählen Sie eines der in der Modellbibliothek verfügbaren Modelle aus und klicken Sie auf die Schaltfläche einfügen um es in den Elementor-Editor zu laden.
Sie können die Kopfzeile auch von Grund auf neu erstellen. Wenn Sie es vorziehen, den Header von Grund auf neu zu erstellen, können Sie einfach die Vorlagenbibliothek schließen, um den Elementor-Editor zu öffnen.
Technisch gesehen können Sie jedes Elementor-Widget, das Sie im linken Bereich erkunden können, zu Ihrer Kopfzeile hinzufügen. Aber nicht alle Widgets sind wirklich notwendig, wenn es darum geht, den Website-Header zu erstellen.
Lesen Sie unseren Leitfaden: Elementor Free vs. Elementor Pro: Detaillierter Funktionsvergleich
In diesem Artikel zeigen wir Ihnen, wie Sie die gemeinsamen Elemente einer Kopfzeile hinzufügen: Website-Logo, Navigationsmenü und Suchleiste. In diesem Fall benötigen Sie einen neuen Abschnitt mit drei Spalten. Klicken Sie im Elementor-Editor auf das Plus-Symbol und wählen Sie die dreispaltige Struktur aus.
Legen Sie die Breite jeder Spalte fest, indem Sie die Trennlinie nach links oder rechts ziehen. Sehen Sie sich die Aufnahme unten an.
- Website-Logo hinzufügen
Um das Website-Logo hinzuzufügen, ziehen Sie das Widget Logo der Website vom linken Bereich in eine der Spalten im Elementor-Editor.
das Widget Logo der Website lädt Ihr Website-Logo. Wenn Sie Ihr Website-Logo nicht angegeben haben, können Sie zu . gehen Aussehen -> Anpassen um Ihr Logo hinzuzufügen.
Lesen Sie auch: So importieren oder exportieren Sie Modelle in Elementor
Sie können Ihr Logo über den linken Bereich anpassen. Sie können Elemente wie Ausrichtung, Link, Breite usw. definieren.
Spielen Sie einfach mit dem linken Panel herum, bis Sie mit dem Ergebnis zufrieden sind.
- Navigationsmenü hinzufügen
Um das Navigationsmenü hinzuzufügen, ziehen Sie das Widget Navigationsmenü in eine der Spalten im Elementor-Editor.
das Widget Navigationsmenü lädt das Hauptmenü Ihrer Website. Wenn Sie auf Ihrer Website kein Menü erstellt haben, können Sie zu gehen Aussehen -> Menüs einen zu erstellen. Wenn auf Ihrer Website mehrere Menüs vorhanden sind, können Sie im Dropdown-Menü der Optionen angeben, welches Menü angezeigt werden soll MENÜ des linken Panels.
Auch hier können Sie mit dem linken Bedienfeld herumspielen, um Ihr Menü anzupassen. Sie können das Layout (horizontal, vertikal), die Ausrichtung, den Animationseffekt usw. einstellen.
- Suchleiste hinzufügen
Um die Suchleiste hinzuzufügen, können Sie das Widget ziehen Suchformular in der restlichen Spalte.
Sobald die Formular hinzugefügt, können Sie zum linken Bereich gehen, um es anzupassen.
Kopfzeile anpassen
Standardmäßig hat Ihre Kopfzeile einen weißen Hintergrund. Sie können diese Farbe ändern, um sie an Ihre Designfarbe anzupassen. Aktivieren Sie dazu den Abschnitt, indem Sie im Browser darauf klicken (Strg + i).
Gehen Sie zur Registerkarte Design auf der linken Seite und wählen Sie Ihre Lieblingsfarbe aus, indem Sie auf den Farbwähler in der Option klicken Farbe Abschnitt Hintergrund.
Wenn Sie einen Sticky-Header haben möchten, können Sie auf die Registerkarte gehen Fortgeschritten. In der Option Klebrig, unter dem Abschnitt Bewegungseffekte, Legen Sie den Sticky-Speicherort fest. Standardmäßig wird der Sticky-Effekt auf alle Gerätetypen (Desktop, Tablet und Smartphone) angewendet.
Lesen Sie auch: Elementor Pro: 10 fantastische Funktionen zum Freischalten - Teil I
Wenn Sie den Sticky-Effekt bei einem bestimmten Gerätetyp deaktivieren möchten, entfernen Sie das Gerät einfach aus dem Feld.
Veröffentlichen Sie Ihren benutzerdefinierten Header
Bisher haben Sie Ihren benutzerdefinierten Header erfolgreich erstellt. Es gibt viele andere Tuning-Optionen, die Sie einstellen können, und es ist unmöglich, sie alle in diesem Beitrag zu behandeln.
Siehe auch: So erstellen Sie eine einzigartige Beitragsvorlage mit Elementor Pro
Spielen Sie einfach mit dem linken Panel herum, bis Sie mit dem Ergebnis wirklich zufrieden sind. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche VERÖFFENTLICHUNG unten im linken Bereich, um Ihre Header-Vorlage zu veröffentlichen.
Im nächsten Schritt werden Sie aufgefordert, die Anzeigebedingung einzustellen. Klicken Sie auf die Schaltfläche ZUSTAND HINZUFÜGEN
Standardmäßig wird Ihre Header-Vorlage auf die gesamte Website angewendet. Wenn Sie also möchten, dass Ihre Header-Vorlage auf die gesamte Website angewendet wird, können Sie einfach auf die Schaltfläche klicken SPEICHERN & SCHLIESSEN.
Lesen Sie auch: So erstellen Sie eine Fußzeile in WordPress mit Elementor
Oder wenn Sie Ihre Kopfzeilenvorlage auf eine bestimmte Seite anwenden möchten, können Sie die Seite angeben, indem Sie auf das Dropdown-Menü klicken. Wählen Sie die Seite aus dem anderen Dropdown-Menü, das als nächstes angezeigt wird. Klicken Sie auf die Schaltfläche SPEICHERN & SCHLIESSEN Sobald Sie mit der Angabe der Seite fertig sind.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
Hier ! Das war's für diesen Artikel, der Ihnen zeigt, wie Sie mit Elementor einen benutzerdefinierten Header in WordPress erstellen.Wenn Sie Bedenken haben, wie Sie dorthin gelangen, teilen Sie uns dies in der commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
