So fügen Sie eine obere Balken in WordPress mit Elementor hinzu

Eine oberste Leiste bietet eine effektive Möglichkeit, wichtige Nachrichten, Werbeaktionen und Aufrufe zum Handeln auf WordPress hervorzuheben. Es befindet sich oben auf der Webseite mit dem Ziel, die Aufmerksamkeit der Besucher auf sich zu ziehen, ohne das Browsererlebnis der Benutzer zu behindern.

Eine gut gestaltete Top-Bar kann die Conversions erheblich stärken, da sie die Aufmerksamkeit der Besucher sofort erregen und sie zu Aktionen wie der Anmeldung für Newsletter, Angebote mit begrenzter Zeit und Erkundung neuer Inhalte führen kann. Es funktioniert als anhaltende Erinnerung, ohne die Benutzer zu stören.

Das Hinzufügen von Top -Balken zu WordPress ist mit Elementor sehr einfach. In diesem Artikel werden wir eine schrittweise Anleitung zum Hinzufügen einer oberen Balken in WordPress mit Elementor abdecken. Bleib bis zum Ende bei uns.

Was ist eine obere Bar?

Eine obere Balken ist ein schmaler horizontaler Abschnitt, der oben auf einer Website über dem Hauptkopf angezeigt wird. Im Gegensatz zu Pop-ups oder Bannern wird es verwendet, um Kontaktdaten, Linkbeschreibungen, wichtige Ankündigungen, Werbeangebote und Nachrichten auszustellen. Sie können das Engagement des Benutzer durch umfangreiche Anpassungen wie Farben, Schriftarten und markenspezifische Schaltflächen verbessern.

Die obere Leiste wird nicht immer an der Spitze einer Website rund um die Uhr angezeigt. Stattdessen wird es normalerweise während der Kampagnenperioden zu Werbezwecken aufgetaucht. Es wird je nach Anwendungsfällen durch verschiedene Namen definiert. Wir werden es im folgenden Abschnitt besprechen. Lesen Sie weiter.

Was ist die oberste Bar auf einer Website?

Wie bereits vor einer Minute, wird die oberste Leiste auf einer Website durch verschiedene Namen definiert, die auf ihrem Zweck und ihrer Funktionalität basieren. Schauen Sie sich einige gängige Begriffe an, die für die unten aufgeführte obere Leiste verwendet werden.

• Ankündigungsleiste - Wird verwendet, um Ankündigungen, Ereignisbenachrichtigungen und wichtige Updates zu teilen.

• Benachrichtigungsleiste- Zeigt begrenzte Angebote, Systemwartungsnachrichten und dringende Nachrichten an.

• Promo Bar - Markiert spezielle Werbeaktionen, exklusive Rabatte und Kampagnen, um den Umsatz zu steigern.

• Info Bar - Exponate Kontaktnummern, Einkaufsdetails, lokale Adressen und Geschäftszeiten.

• Sticky Bar - bleibt oben auf der Website repariert, auch wenn Benutzer Beiträge und Seiten scrollen.

• Schwimmbalke - Gehen Sie mit, wenn Sie Beiträge und Seiten scrollen, um eine spürbare Präsenz zu gewährleisten.

So fügen Sie eine obere Balken in WordPress mit Elementor hinzu

Der theoretische Teil ist vorbei. Jetzt behandeln wir den Tutorial-Teil in diesem Abschnitt und erläutern eine Schritt-für-Schritt-Anleitung zum Hinzufügen einer oberen Balken in WordPress mit Elementor.

Voraussetzung: Installieren Sie Elementor oder Happyaddons

Um eine Top -Bar auf der gesamten Website zu erstellen, müssen Sie Zugriff auf den Elementor -Themenbauer haben, der eine Premium -Funktion ist. Wenn Sie die Premium -Version des Plugins verwenden möchten und nach einer kostenlosen Option suchen, müssen Sie das Happyaddons -Plugin probieren.

Happyaddons ist eigentlich ein Addon zum Elementor -Plugin mit vielen kostenlosen Funktionen, die normalerweise im Elementor Premium sind. Zum Beispiel hat Happyaddons auch einen Themenbauer, der Elementor ziemlich ähnlich ist, aber es ist völlig kostenlos zu bedienen.

In diesem Abschnitt werden wir also das Happyaddons -Plugin verwenden, um das Tutorial zu erklären. Installieren und aktivieren Sie die folgenden Plugins auf Ihrer Website.

• Elementor
• Happyaddons

Sobald sie auf Ihrer Website installiert und aktiviert sind, folgen Sie dem unten erläuterten Tutorial. Wir zeigen Ihnen, wie Sie eine obere Leiste auf WordPress erstellen, wie die, die Sie im Bild unten sehen können.

Schritt 01: Gehen Sie zu Happyaddons Theme Builder

Navigieren Sie zu Happyaddons> Theme Builder . Wie das Elementor -Plugin können Sie eine Header-, Fußzeile, eine Blog -Post -Vorlage und eine Archivseite mit dem Themenbauer des Happyaddons -Plugins erstellen.

Schritt 02: Gehen Sie zum Header -Abschnitt

Da die obere Leiste oben auf dem Web -Header angezeigt wird, müssen Sie sie aus dem Header -Abschnitt anpassen. Öffnen Sie also den Header mit der Option "Elementor" bearbeiten.

Erfahren Sie, wie Sie Off-Canvas-Inhalte im Elementor erstellen.

Schritt 03: Fügen Sie einen neuen Behälter über dem Header hinzu

Wenn Sie Ihren Cursor auf dem Header schweben, wird das Plus -Symbol (+) angezeigt. Durch Klicken auf dieses Symbol können Sie dem obigen Header einen neuen Container hinzufügen. Mach es.

Schritt 04: Passen Sie die obere Leiste an und fügen Sie Inhalte hinzu

Sie müssen dem Hintergrund der oberen Leiste eine kontrastierende Farbe hinzufügen. Klicken Sie dazu auf das Sechs-Punkte-Symbol im Container> Gehen Sie zur Registerkarte "Stil" . Suchen Sie die Farboption > Wählen Sie eine Farbe aus.

Fügen Sie das Texteditor -Widget in den Abschnitt "oberen Balken" hinzu. Auf diese Weise können Sie dem Abschnitt Textinhalte hinzufügen.

Unter dem Texteditor in der rechten Seitenleiste können Sie Ihren gewünschten Textinhalt schreiben, der in Echtzeit in der oberen Leiste angezeigt wird.

In der folgenden Option im Abschnitt Texteditor können Sie die Farbe und Kühnheit des Textes ändern, den Sie in die obere Leiste hinzugefügt haben.

Sie können sogar Räume zwischen den Wörtern hinzufügen und bestimmte Wörter unterstreichen . Wir haben dies mit unserem Text für dieses Tutorial angetan. Sie können sie unten sehen.

Mit Happyaddons können Sie dem Hintergrund der oberen Balken Partikeleffekte hinzufügen. Der glückliche Partikeleffekt ist eine visuelle Animationstechnik, bei der sich kleine, leuchtende Partikel auf einer Webseite dynamisch bewegen und eine lebendige und ansprechende Benutzererfahrung erzeugen.

Um dies hinzuzufügen, navigieren Sie zu Stil> glückliche Partikeleffekte . Schalten Sie danach weiter , um einen Partikelhintergrund zu ermöglichen .

Als nächstes können Sie einen Partikelstil, eine Partikelfarbe, eine Opazität, die Anzahl der Partikel, die Partikelgröße und die Bewegungsgeschwindigkeit auswählen. Ich hoffe, Sie können sie selbst machen.

Wir haben einen kurzen Clip hinzugefügt, damit Sie überprüfen können, wie die Happy Particle -Funktion funktioniert. Dies macht die obere Bar wirklich so gut auszusehen.

Erweitern Sie den Grenzabschnitt . Sie können eine Randbreite und eine Farbe festlegen, wie Sie möchten. Wir glauben jedoch, dass das Hinzufügen einer Grenze für die obere Leiste nicht wichtig ist. Sie können es also vermeiden.

Erweitern Sie nun den Abschnitt "Formteiler" . Mit der Option "Formteiler" können Sie anpassbaren und dynamischen Formen oben oder unten in den Abschnitten hinzufügen.

Diese Option ist jedoch auch für die obere Leiste nicht wichtig. Es ist also besser, dass Sie es vermeiden. Wenn Sie diese Funktion jedoch in die obere Leiste hinzufügen möchten, können Sie dies tun.

Hier finden Sie eine Anleitung zum Erstellen einer Infografik -Webseite mit Elementor.

Schritt 05: Konfigurieren Sie erweiterte Einstellungen für die obere Leiste

Kommen Sie schließlich zur Registerkarte Erweitert . Sie erhalten hier zahlreiche Optionen, um die Marge, Polsterung, Ausrichtung, Ordnung, Position, Höhe, Bewegungseffekt, Reaktionsschnur und mehr anzupassen. Führen Sie selbst die notwendigen Anpassungen durch.

Schritt 06: Verstecken Sie die obere Leiste auf einem Gerätetyp

Sie können die obere Leiste auf jedem gewünschten Gerät verbergen. Zum Beispiel möchten wir die obere Leiste auf den Tablet -Geräten ausblenden. Erweitern Sie dazu den reaktionsschnellen Abschnitt. Schalten Sie dann die Option des Gerätemodus aus, in dem Sie die obere Leiste ausblenden möchten.

Schritt 07: Machen Sie die oberste Bar Mobile Responsive

Klicken Sie auf die Option Responsive Modus auf der Fußzeile des Elementor -Panels. Wählen Sie dann den mobilen Porträtmodus aus.

Sie können sehen, dass der Top -Balkeninhalt in drei Zeilen angezeigt wird und nicht perfekt ausgerichtet ist, im Gegensatz zu dem, wie Sie ihn im Desktop -Modus sehen.

Um den Text für die Bildschirmgröße gut aussehen zu lassen, müssen Sie die Anpassungen benötigen, die Sie benötigen, indem Sie im mobilen Porträtmodus bleiben.

Wir haben die Texte zentral ausgerichtet. Sieht es jetzt nicht besser aus? Sie können es weiter auf jede gewünschte Weise anpassen.

Schritt 08: Veröffentlichung/Aktualisierung der Änderungen

Wenn alle Anpassungen durchgeführt werden, klicken Sie auf die Schaltfläche Veröffentlichen/Aktualisierung unten im Elementor -Panel, um alle Änderungen zu erhalten.

Erkunden Sie, wie Sie eine Lightbox in WordPress mit Elementor erstellen.

Schritt 09: Vorschau der oberen Leiste auf der Website

Kommen Sie nun an die Frontenden Ihrer Website. Sie sehen, dass die obere Leiste auf Ihrer Website gut angezeigt wird.

Daher können Sie mit dem Elementor -Plugin kostenlos eine obere Leiste auf WordPress erstellen.

Letzte Gedanken

Ich hoffe, Sie haben dieses Tutorial genossen. Aber um das Beste aus der oberen Bar zu bekommen, gibt es einige wichtige Dinge, die Sie sorgfältig befolgen müssen. Konzentrieren Sie sich auf die Aufrechterhaltung eines sauberen und visuell ansprechenden Designs, das mit dem Branding Ihrer Website übereinstimmt. Wählen Sie kontrastierende Farben für die Lesbarkeit, verwenden Sie einen klaren und prägnanten Text und halten Sie die Nachricht für Ihr Publikum relevant.

Optimieren Sie außerdem die mobile Reaktionsfähigkeit, sodass die oberste Balken über alle Geräte hinweg funktionsfähig bleibt, ohne die Benutzererfahrung zu behindern. Vermeiden Sie es, die obere Leiste mit zu vielen Informationen zu überladen, da sie Besucher überwältigen kann. Wenn Sie Animationen oder Effekte verwenden, halten Sie sie subtil, um die Professionalität aufrechtzuerhalten.

Wenn Sie noch Verwirrung oder Fragen im Auge haben, teilen Sie uns diese über das Kommentarfeld unten darüber mit.