Die Kopfzeile von a Webseite ist die erste Information, die von wahrgenommen wird Besucher Ihrer Website. Es ermöglicht Ihnen, Ihr Markenlogo hervorzuheben, die Seiten Ihrer Website zu organisieren und andere wichtige Funktionen (Suche, Verbindung usw.) bereitzustellen. Außerdem ist ein schwebender und transparenter Header erforderlich, da dies die Benutzererfahrung verbessert.

In diesem Artikel zeigen wir Ihnen, wie Sie einen Header erstellen und transparent machen Elementor. Aber vorher werden wir sehen, was ein schwebender und transparenter Header ist.

Was ist ein schwebender und transparenter Header?

Ein schwebender Header ist eine Navigationsleiste, die immer fixiert bleibt, auch wenn der Besucher auf der Webseite nach unten scrollt. Es eignet sich sehr gut für Websites mit Seiten mit langen Artikeln, Rezensionen und einseitigen Websites. Und sein transparenter Aspekt ermöglicht es Ihnen, die Hintergrundfarbe der Seite sowie ihren Inhalt zu sehen.

Warum schwebende und transparente Header verwenden?

Moderne Websites verwenden zunehmend schwebende und transparente Kopfzeilen, da sie einen visuellen Einfluss auf die haben Besucher Der Seite. Die Gründe für ihre Annahme zielen auf:

• Steigerung der Bekanntheit Ihrer Marke,
• Steigern Sie die Benutzererfahrung,
• Navigation verbessern

Sonst noch zu entdecken So erstellen Sie einen zweifarbigen Titel in Elementor

Mit Elementor einen Header anheften und transparent machen

Um einen transparenten und schwebenden Header zu erstellen, müssen Sie über beide Versionen von verfügenElementor (Pro und Lite). Andernfalls laden Sie die (Elementor, Elementor Pro) bevor es losgeht.

Folgen Sie nach der Installation den nächsten Schritten.

Schritt 1: Erstellen Sie ein Menü mit Elementor

Gehen Sie folgendermaßen vor, um ein Menü zu erstellen:

• nacheinander auswählen Aussehen >> Menüs
• Benennen Sie das Menü
• Geben Sie die Position des Menüs an
• Bestätigen Sie durch Klicken auf die Schaltfläche Menü speichern

• Überprüfen Sie die Seiten, Artikel oder Beiträge in der Gruppe Elemente zum Menü hinzufügen
• Klicken Sie auf In dem Menü , um die markierten Elemente zum Menü hinzuzufügen
• Zum Schluss klicken Sie auf Speichern Menü

Lire aussi Elementor: So zeigen Sie Text über einem Bild an

Schritt 2: Wählen Sie die Kopfzeilenvorlage aus der Elementor-Vorlagenbibliothek aus

Benutzer vonElementor Pro haben Zugriff auf eine Bibliothek gebrauchsfertiger Vorlagen, die für die Gestaltung verschiedener Abschnitte eines Projekts nützlich sind Website. Hier finden Sie auch eine Vielzahl von Header-Vorlagen. Um dies zu tun,

• Gehen Sie nacheinander zu Modelle >> Hinzufügen

• Sie sehen ein modales Popup
• wählen Kopfzeile
• Zum Schluss klicken Sie auf Erstellen Sie eine Vorlage

Ab dann wird die Bibliothek angezeigt. Standardmäßig werden Header-Blöcke angezeigt. Blättern Sie durch die angebotenen Vorlagen und fügen Sie dann die Vorlage ein, die Sie interessiert.

Die Kopfzeilenvorlage wird im Elementor-Canvas geöffnet.

Schritt 3: Stiftleiste mit Elementor

Führen Sie die folgenden Schritte aus, um die Kopfzeile anzuheften:

• Klicken Sie auf die Schaltfläche Kopfbereich bearbeiten
• Wählen Sie dann die Registerkarte aus avancé
• Dann Bewegungseffekt

• Rufen Sie das Menü auf Stift und wählen Sie den Wert aus Ein haut, wird die Kopfzeile Ihrer Website eingefroren, wenn der Besucher die Seiten nach unten scrollt.
• Standardmäßig wird die Kopfzeile automatisch auf Medien wie Desktop, Tablet und Handy angeheftet

Stöbern Sie auch Elementor: So exportieren und importieren Sie Vorlagen

Schritt 4: Header mit Elementor transparent machen

Um dies zu erreichen, wiederholen Sie die folgende Methode:

• gehe zu Stil >> Hintergrund >> Farbwähler

• Ändern Sie dann die Deckkraft des Hintergrunds

Wenn Sie die Kopfzeile vollständig transparent machen möchten, ändern Sie den Hintergrundtyp, indem Sie den Typ auswählen klassisch. Daher sind die Navigationsmenüs aufgrund des Textfarbkontrasts (weiß) unsichtbar.

Um diese Situation zu beheben, gehen Sie wie folgt vor:

• Klicken Sie nacheinander auf Menü ändern von Stöbern Sie >> Stile
• Dann auf dem Farbwähler
• Wählen Sie die gewünschte Farbe (in unserem Fall musste sie nicht geändert werden).

Sobald Sie fertig sind, können Sie Ihre Webseite veröffentlichen. Aber vorher sehen wir uns an, wie Sie die Navigationsmenüs in unserer Vorlage durch die von uns erstellten ersetzen. Denken Sie daran, dass der unserem zugewiesene Name ist Header-Menü (siehe Schritt 1):

• Wählen Sie die Registerkarte Inhalt
• Dann ändern Sie die menu indem Sie den Namen Ihrer Kopfzeile auswählen

Und los gehts :).

Zusammenfassung

Transparente und schwebende Kopfzeilen können in mehreren Fällen für Sie nützlich sein. Wir hoffen, dass dieser Artikel Ihre Anforderungen an das Erstellen transparenter und schwebender Header mit Elementor erfüllen konnte. Wenn Sie weitere Bedenken zu diesem Thema haben, teilen Sie uns dies in den Kommentaren mit.