Wie verwendet man Elementor, um einen transparenten Header zu erstellen?

Transparente Kopfzeilen können eine großartige Möglichkeit sein, das Erscheinungsbild Ihrer Website zu verbessern. Es hebt Ihr Website-Design hervor und wirkt für die Besucher Ihrer Website interaktiver.

Aber können Sie Elementor verwenden, um einen transparenten Header auf WordPress zu erstellen, ohne eine Programmiersprache zu kennen? Die Antwort ist ja! Das kannst du auf jeden Fall. Dieser Artikel zeigt Ihnen die Anweisungen zum einfachen Erstellen eines transparenten Elementor-Headers.

Die Vorteile der Verwendung transparenter Header

Sie können ganz einfach ansprechende transparente Elementor-Kopfzeilen erstellen. Aber wenn Sie möchten, können Sie noch einen Schritt weiter gehen und es fixieren, während die Besucher durch den Seiteninhalt scrollen. Nachfolgend die Vorteile:

Hervorragend geeignet für lange Webseiten

Die Verwendung eines transparenten klebrigen Headers ist eine stilvolle und schnelle Methode, um sicherzustellen, dass Ihre Besucher ein angenehmes Erlebnis haben.

Sie können Ihrer Website zu einem benutzerfreundlicheren Navigationssystem verhelfen. Wenn der Inhalt Ihrer Website sehr lang ist, ist dieser Vorteil sehr vorteilhaft.

Am besten für umsetzbare Websites

Transparente Sticky-Header funktionieren am besten auf umsetzbaren Websites wie Einzelhandels- oder E-Commerce-Websites. Das liegt daran, dass Sie möchten, dass die Besucher eine bestimmte Aktion ausführen, während sie sich noch auf dem Seiteninhalt befinden.

Wenn die Kopfzeile beim Durchsuchen Ihrer Website schön angezeigt wird, finden die Besucher es bequemer, sie zu erkunden.

Da der Header transparent ist, wird die Lesbarkeit des Inhalts nicht beeinträchtigt. Daher kann das Hinzufügen eines transparenten Headers die Absprungrate Ihrer Website verringern und Ihre Besucher effizient leiten.

Verbessern Sie Ihre Site-Navigationsfähigkeit

Die Verwendung eines transparenten Sticky-Headers auf Ihrer Website ermutigt Ihre Besucher, sofort Maßnahmen zu ergreifen. Es spart ihnen Zeit bei der Suche nach einer bestimmten Option.

Und anstatt das Logo Ihrer Marke überall auf der Homepage zu platzieren, können Sie es elegant auf einem transparenten klebrigen Header anzeigen.

Wie verwende ich Elementor Pro, um einen transparenten Header zu erstellen?

Lassen Sie uns nun lernen, wie Sie mit Elementor Pro einen transparenten Header erstellen und anpassen.

Installieren und aktivieren Sie das Elementor Pro-Plugin

Wenn Ihre Site Elementor Pro noch nicht hatte, müssen Sie es installieren und aktivieren.

1. Gehen Sie im WordPress-Dashboard zu Plugins > Neu hinzufügen .

2. Finden Sie das Plugin, indem Sie „Elementor“ eingeben. Sie sehen dann den Elementor Website Builder als Option aufgelistet.
3. Klicken Sie auf die Schaltflächen Jetzt installieren bzw. Aktivieren .
4. Nachdem Sie Elementor Pro erfolgreich gekauft haben, gehen Sie zu my.elementor.com.
5. Melden Sie sich mit den Informationen an, die Sie nach dem Kauf in der E-Mail erhalten haben.
6. Als nächstes werden Sie zur Profilseite weitergeleitet. Klicken Sie oben rechts auf die Schaltfläche Plug -in herunterladen, um die ZIP-Datei auf Ihren Computer herunterzuladen.

7. Klicken Sie im WordPress-Dashboard Ihrer Website auf Plugins > Neu hinzufügen . Klicken Sie dann auf die Schaltfläche Plug -in hochladen in der oberen linken Ecke.
8. Klicken Sie auf die Schaltfläche Datei auswählen. Wählen Sie die gerade heruntergeladene .zip-Datei aus. Klicken Sie anschließend auf Aktivieren .
9. Oben auf dem Dashboard der Website erhalten Sie eine Benachrichtigung, in der Sie aufgefordert werden, Ihren Lizenzschlüssel zu aktivieren.

Erstellen Sie ein Menü für Ihre Website

Als nächstes müssen Sie mithilfe des WordPress-Dashboards ein Kopfzeilenmenü erstellen, falls Sie dies noch nicht getan haben. Nachfolgend finden Sie eine Einführung.

1. Navigieren Sie im WordPress-Dashboard zu Darstellung > Menüs .

2. Geben Sie den Menünamen in das Textfeld Menüname ein. Klicken Sie dann auf die Schaltfläche Menü erstellen .
3. Konzentrieren Sie sich auf das linke Feld. Hier können Sie die Seiten, Beiträge, Kategorien und benutzerdefinierten Links der Website zum Menü hinzufügen.

4. Sie können Menüelemente ziehen und ablegen, um sie neu anzuordnen oder Untermenüs im rechten Bereich zu erstellen.

5. Wenn Sie zufrieden sind, denken Sie daran, auf die Schaltfläche Menü speichern zu klicken.

Verwenden Sie Elementor Pro , um eine normale Kopfzeile zu erstellen

1. Gehen Sie im WordPress-Dashboard zu Vorlagen > Neu hinzufügen.

2. Ein Popup-Fenster wird angezeigt. Wählen Sie die Kopfzeilenvorlage Elementor aus dem Dropdown-Menü aus und geben Sie ihren Namen in das Textfeld Benennen Sie Ihre Vorlage ein. Klicken Sie dann auf die Schaltfläche VORLAGE ERSTELLEN .

3. Die Elementor-Vorlagengalerie wird in einem Popup-Fenster angezeigt. Sie können durch alle Kopfzeilenstile von Elementor navigieren. Wenn Sie einen Favoriten ausgewählt haben, bewegen Sie den Cursor darauf und klicken Sie dann auf die Schaltfläche Einfügen . Sie können auch alle in der Vorschau anzeigen.

Erstellen Sie mit Elementor Pro einen transparenten Sticky Header

1. Jetzt müssen Sie die Kopfzeile mit Elementor Pro transparent machen. Klicken Sie dazu auf die Schaltfläche mit den sechs Punkten über der Kopfzeile.

2. Wählen Sie im Abschnitt "Layout" im Drop-down-Menü " Menü " das gewünschte Menü aus.

3. Wechseln Sie zur Registerkarte Stil , um die Hintergrundfarbe und den Transparenzwert der Kopfzeile zu ändern. Wählen Sie im Bereich „Hintergrund“ den Hintergrundtyp „ Klassisch “ (angezeigt durch einen Pinsel).

4. Klicken Sie auf die Schaltfläche Farbauswahl . Wählen Sie dann die gewünschte Farbe und den gewünschten Transparenzwert aus.
5. Sie können das allgemeine Erscheinungsbild der Kopfzeile weiter ändern, einschließlich Typografie, Hintergrundüberlagerung, Rahmen und Trennlinie. Fühlen Sie sich frei zu experimentieren.
6. Wechseln Sie als Nächstes zur Registerkarte Erweitert . Scrollen Sie dann zum Abschnitt Bewegungseffekte . Aktivieren Sie die Option Bildlaufeffekte .

7. Wählen Sie im Dropdown-Menü „ Effekte relativ zu “ die Option „ Gesamte Seite “.
8. Wählen Sie schließlich die Option Top aus dem Dropdown-Menü Sticky .
9. Wenn Sie zufrieden sind, klicken Sie auf die Schaltfläche „ Veröffentlichen “, um die Änderungen zu übernehmen.

Das Ergebnis wird ähnlich wie unten sein:

Wie verwendet man Elementor, um kostenlos einen transparenten Header zu erstellen ?

Wenn Sie wenig Budget haben und kein Geld für Elementor Pro ausgeben möchten, benötigen Sie ein weiteres Plugin, um transparente Header zu erstellen.

In diesem Artikel verwenden wir das Plug-in „Essential Addons for Elementor“. Dies ist die beliebteste Widget-Bibliothek mit über einer Million aktiven Benutzern.

Sie erhalten viele Widgets kostenlos, um eine Website hervorzuheben und so ansprechend wie möglich zu gestalten. Beachten Sie, dass Sie die Premium-Version nicht benötigen, um transparente Header zu erstellen.

Installieren und aktivieren Sie das Elementor- und Essential-Add-ons für das Elementor-Plug-in

1. Gehen Sie im WordPress-Dashboard zu Plugins > Neu hinzufügen .

2. Finden Sie das Plugin, indem Sie „ Elementor “ eingeben. Sie sehen dann das Elementor-Plugin als Option aufgeführt.
3. Klicken Sie auf die Schaltfläche „Jetzt installieren“ bzw. „Aktivieren“.
4. Wiederholen Sie den obigen Vorgang mit dem Plugin Essential Addons for Elementor.

Erstellen Sie ein Menü für Ihre Website

Wir haben dies bereits oben behandelt. Bitte scrollen Sie nach oben zum Know-how.

Verwenden Sie Essential Addons für Elementor , um einen transparenten Sticky Header zu erstellen

1. Navigieren Sie zu Essential Addons > Elements . Aktivieren Sie hier das Simple Menu -Widget. Denken Sie daran, auf die Schaltfläche EINSTELLUNGEN SPEICHERN zu klicken.

2. Erstelle eine neue Seite/einen neuen Beitrag oder öffne einen bestehenden mit Elementor.
3. Klicken Sie unten links auf die Schaltfläche Einstellungen (gekennzeichnet durch ein Zahnrad). Wählen Sie im Dropdown-Menü „ Seitenlayout “ die Option „Elementor Canvas“ aus. Auf diese Weise können Sie den mit dem Thema gelieferten Header loswerden.

4. Kehren Sie zum Widget-Menü zurück, indem Sie auf das Symbol mit den neun Quadraten klicken. Suchen Sie nach dem einfachen Menü -Widget. Ziehen Sie es per Drag & Drop an die gewünschte Stelle.

5. Wählen Sie im Abschnitt Allgemein das gewünschte Menü im Dropdown-Menü Menü auswählen aus.

6. Wechseln Sie zur Registerkarte Stil , um die Hintergrundfarbe und den Transparenzwert der Kopfzeile zu ändern.

7. Wählen Sie im Bereich „Hintergrund“ den Hintergrundtyp „ Klassisch “ (angezeigt durch einen Pinsel).
8. Klicken Sie auf die Schaltfläche Farbauswahl . Wählen Sie dann die gewünschte Farbe und den gewünschten Transparenzwert aus.
9. Sie können das allgemeine Erscheinungsbild der Kopfzeile weiter ändern, einschließlich Typografie, Hintergrundüberlagerung, Rahmen und Trennlinie. Fühlen Sie sich frei zu experimentieren.
10. Wechseln Sie als Nächstes zur Registerkarte Erweitert . Scrollen Sie dann zum Abschnitt Positionierung . Wählen Sie die Option Fest im Dropdown-Menü Position .

11. Kehren Sie zum Widget-Menü zurück, indem Sie auf das Symbol mit den neun Quadraten klicken. Suchen Sie nach dem Spacer- Widget. Ziehen Sie es per Drag-and-Drop direkt unter das Widget „Einfaches Menü “.

12. Passen Sie im Abschnitt „Abstandshalter“ den Abstandswert so an, dass er mit der Höhe der Kopfzeile übereinstimmt.

13. Wenn Sie zufrieden sind, klicken Sie auf die Schaltfläche „ Veröffentlichen “, um die Änderungen zu übernehmen.

Wie erstelle ich einen transparenten Header für Woostify-Benutzer?

Wenn Sie das Woositfy-Theme verwenden, können Sie sogar in der kostenlosen Version innerhalb von Minuten schnell einen schönen transparenten Header für Ihre gesamte Website anwenden. Befolgen Sie die nachstehenden Anweisungen, um zu erfahren:

1. Navigieren Sie im WordPress-Dashboard zu Aussehen > Anpassen .

2. Gehen Sie dann zu Layout > Header Transparent .

3. Schalten Sie den Schalter „Transparente Kopfzeile aktivieren“ ein.

4. Im neuen Reiter Allgemein und Design können Sie die neue transparente Kopfzeile nach Ihren Wünschen anpassen. Beispielsweise können Sie es auf bestimmten Seiten wie 404, Beiträgen usw. aktivieren/deaktivieren.

5. Vergessen Sie nicht, auf die Schaltfläche „ Veröffentlichen “ zu klicken, wenn Sie mit dem Ergebnis zufrieden sind.

Letzte Worte

Das Erstellen eines transparenten Elementor-Headers ist ein eleganter Ansatz, um Benutzern die Navigation auf Ihrer Website zu erleichtern.

Der von uns erstellte Header ist vollständig responsiv. Daher müssen Sie sich um dieses Problem keine großen Sorgen machen. Für diejenigen, die Woostify verwenden, sollten Sie den dritten Weg wählen. Es ist auch der einfachste und schnellste Weg, wenn Sie einen schönen transparenten Header erstellen möchten.