Springe zum Hauptinhalt

So erstellen Sie einen benutzerdefinierten Header in WordPress mit Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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

Bei den meisten WordPress-Themes, ob kostenlos oder kostenpflichtig, können Sie den Header anpassen, indem Sie Ihr Website-Logo oder das Navigationsmenü hinzufügen. Bei einigen WordPress-Themes können Sie zusätzliche Elemente wie die Suchleiste und Social-Media-Symbole hinzufügen.

Aber ist es möglich, einen benutzerdefinierten Header in WordPress zu erstellen, um den Header des aktiven WordPress-Themes zu ersetzen?

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 (in diesem Fall PHP) verfügen, ist das Erstellen eines benutzerdefinierten Headers für ein WordPress-Theme keine große Sache. Wenn Sie keine Programmierkenntnisse haben, können Sie mit Elementor einen benutzerdefinierten Header erstellen, ohne eine einzige Codezeile schreiben zu müssen. Sie können die Kopfzeile über einen visuellen Editor durch Ziehen und Ablegen 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 ein WordPress-Theme ohne Codierung erstellen. Die Theme-Elemente, die Sie mit dem Theme-Builder von Elementor erstellen können, sind wie folgt:

  • 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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.

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.

Spaltenabschnitt hinzufügen

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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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 das Formular hinzugefügt wurde, können Sie zum linken Bereich wechseln, 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 Stil auf der linken Seite und wählen Sie Ihre Lieblingsfarbe aus, indem Sie auf den Farbwähler in der Option klicken Farbe Abschnitt Hintergrund.

So erstellen Sie einen Header in WordPress mit Elementor

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.

So erstellen Sie einen Header in WordPress mit Elementor

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

So erstellen Sie einen Header in WordPress mit Elementor

Holen Sie sich jetzt Elementor Pro!

Fazit

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.

...

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren