So erstellen Sie eine animierte Werbeleiste für Ihre Seitenvorlagen in Divi

Veröffentlicht: 2019-11-23

Das Erstellen einer animierten Werbeleiste für Ihre Seitenvorlage in Divi kann eine großartige Möglichkeit sein, Produkte und Angebote stilvoll zu bewerben, ohne sich auf ein Plugin verlassen zu müssen. Mit den leistungsstarken Designfunktionen von Divi können Sie die Promo-Leiste visuell erstellen, wenn Sie eine Vorlage in Divis Theme Builder bearbeiten. Sobald die Vorlage fertig ist, wird die Werbeleiste auf jeder Seite angezeigt, die dieser Vorlage zugewiesen wurde. Einfach!

Lass uns einsteigen und loslegen!

Vorgeschmack

Hier ist ein kurzer Blick auf die Promo-Leiste, die wir in diesem Tutorial erstellen werden.

Wir zeigen Ihnen auch, wie Sie die Promo-Leiste auch fest (oder klebrig) machen.

Laden Sie die Vorlage für die Werbeleisten-Seite KOSTENLOS herunter

Um die Vorlage für die Werbeleistenseite aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits in der Liste sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout in Ihre Seite zu importieren, extrahieren Sie einfach die ZIP-Datei und fügen Sie eine der JSON-Dateien mit der Option „Theme Builder Portability“ zum Divi Theme Builder hinzu.

Kommen wir zum Tutorial, sollen wir?

Abonnieren Sie unseren Youtube-Kanal

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie das Divi-Theme installieren und aktivieren. Stellen Sie sicher, dass Sie die neueste Version von Divi haben.

Außerdem benötigen Sie zu Testzwecken mindestens eine mit dem Divi Builder erstellte Seite, um dieser Seite die Vorlage für die Werbeleiste zuzuweisen, um das Ergebnis anzuzeigen.

Danach sind Sie bereit zu gehen.

Erstellen einer animierten Promo-Leiste oben in einer Seitenvorlage

Erstellen einer neuen Vorlage

Navigieren Sie im WordPress-Dashboard zu Divi > Theme Builder. Klicken Sie dann auf das Feld „Neue Vorlage hinzufügen“, um eine neue Vorlage zu erstellen.

Weisen Sie die Vorlage den Seiten zu, auf denen die Werbeleiste angezeigt werden soll.

Klicken Sie in der neuen Vorlage auf den Bereich "Benutzerdefinierten Körper hinzufügen" und wählen Sie dann "Benutzerdefinierten Körper erstellen".

HINWEIS: Wir fügen die Promo-Leiste zum Hauptbereich der Vorlage (nicht zur Kopfzeile) hinzu, damit sie mit der Standardkopfzeile von Divi sowie allen benutzerdefinierten Kopfzeilen, die Sie in Zukunft hinzufügen können, funktioniert.

Wählen Sie dann die Option „Von Grund auf neu erstellen“.

Hinzufügen der Promo-Leiste zur Vorlage

Im Vorlagenlayout-Editor können wir mit dem Erstellen der Promo-Leiste mit dem Divi Builder beginnen.

Beginnen Sie damit, dem regulären Abschnitt eine einspaltige Zeile hinzuzufügen.

Zeileneinstellungen

Aktualisieren Sie vor dem Hinzufügen eines Moduls die Zeileneinstellungen wie folgt:

Hintergrundfarbe links: #4a42ec
Hintergrund mit Farbverlauf rechts: #521d91
Verlaufsrichtung: 90deg
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Breite: 100%
Maximale Breite: 100%
Padding: 0px oben, 0px unten

Das kümmert sich um die Hintergrundfarbe und Breite der Promo-Leiste, die wir erstellen.

Spalteneinstellungen

Bevor Sie die Zeileneinstellungen verlassen, klicken Sie auf , um die Einstellungen der Spalte zu öffnen. Fügen Sie dann das folgende benutzerdefinierte CSS zum Column Main Element hinzu:

display: flex;
align-items: center;
justify-content: center;

Dieses CSS verwendet die flex-Eigenschaft, um den Inhalt (oder die Module) innerhalb der Spalte so auszurichten, dass er horizontal (nebeneinander) gestapelt wird. Außerdem zentriert er die Module innerhalb der Säule sowohl vertikal als auch horizontal. Der Grund, warum wir dies auf diese Weise tun, besteht darin, zu vermeiden, dass mehrspaltige Zeilenstrukturen verwendet werden, die auf Mobilgeräten übereinander gestapelt werden. Bei diesem Setup bleibt der Inhalt auf allen Browserbreiten in einer horizontalen Ausrichtung.

Jetzt können wir der Promo-Leiste einige Inhalte hinzufügen.

Hinzufügen des Blurb-Moduls

Für den Inhalt dieser Beispiel-Promo werden wir ein Klappenmodul mit einem kleinen Symbol und einen Text-Blog mit einer Schaltfläche auf der rechten Seite hinzufügen (ähnlich wie die Promo-Leiste auf Elegantthemes.com).

Klicken Sie in der Zeile auf das graue Kreis-Plus-Symbol und fügen Sie ein Klappenmodul hinzu.

Geben Sie für den Inhalt des Klappentextes Folgendes ein:

Titel: [Geben Sie den Werbetext ein]
Symbol verwenden: JA
Symbol: Geschenksymbol (siehe Screenshot)

Aktualisieren Sie die Klappendesign-Einstellungen wie folgt:

Symbolfarbe: #ff4a9e
Bild-/Symbolplatzierung: Links
Symbolschriftgröße verwenden: JA
Symbolschriftgröße: 16px
Titeltextgröße: 16px (Desktop), 14px (Telefon)
Titelzeilenhöhe: 1.3em
Max. Breite: 230px (nur Telefon)
Polsterung: 10px oben
Animationsstil: Folie
Animationsrichtung: Rechts
Animationsverzögerung: 250ms

Hinzufügen des Tastenmoduls

Fügen Sie als Nächstes ein Schaltflächenmodul unter dem Klappenmodul hinzu. Aufgrund der flex-Eigenschaft erscheint das Modul rechts neben dem Klappentext statt darunter.

Aktualisieren Sie die Einstellungen für das Schaltflächendesign wie folgt:

Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 15px (Desktop), 13px (Telefon)
Schaltflächentextfarbe: #ffffff
Breite des Tastenrahmens: 0px
Schaltflächenrandradius: 20px
Tastenschriftstärke: Halbfett

Rand (Desktop): 20 Pixel übrig
Rand (Telefon): 10 Pixel übrig
Polsterung (Desktop): 0px oben, 0px unten
Polsterung (Telefon): 2 Pixel oben, 2 Pixel unten, 8 Pixel links, 8 Pixel rechts
Animationsstil: Bounce
Animationsverzögerung: 1000ms

Abschnittseinstellungen

Um das Design der Werbeleiste abzuschließen, aktualisieren Sie den Abschnitt mit der Werbeleiste wie folgt:

Padding: 0px oben, 0px unten
Animationsstil: Bounce
Animationsrichtung: Unten
Animationsdauer: 500 ms
Animationsverzögerung: 250ms
Anfangsdeckkraft der Animation: 100 %
Z-Index: 999

Hinzufügen des Moduls für Post-Inhalte in voller Breite

Zu diesem Zeitpunkt ist die Promo-Bar einsatzbereit. Da es sich jedoch um eine Vorlage handelt, müssen wir sicherstellen, dass das Beitragsinhaltsmodul hinzugefügt wird, um den Inhalt der Seite(n) anzuzeigen, die diese Vorlage verwenden.

Für Seiten, die mit dem Divi Builder erstellt wurden (oder werden), sollten Sie ein Inhaltsmodul mit voller Breite verwenden, um den Inhaltsbereich zu maximieren.

(HINWEIS: Für Seiten, die den Standard-Editor verwenden, sollten Sie ein reguläres Post-Content-Modul innerhalb eines regulären Abschnitts verwenden, damit Sie standardmäßig eine ähnliche maximale Breite von 1080px haben.)

Abschnitt in voller Breite hinzufügen

Fügen Sie unter dem Abschnitt, der Ihre Promo-Leiste enthält, einen Abschnitt mit voller Breite hinzu.

Modul für Post-Inhalte in voller Breite hinzufügen

Wählen Sie dann das Modul für Post-Inhalte mit voller Breite aus.

Das macht es ungefähr. Stellen Sie nun sicher und speichern Sie das Layout, bevor Sie den Editor verlassen.

Speichern Sie dann die Änderungen auch für den Theme Builder.

Endergebnis

Vor

Hier ist nun die Seite vor der Zuweisung der Vorlage mit der Promo-Leiste.

Nach

Und hier ist die gleiche Seite mit der neuen Vorlage mit der Promo-Leiste.

Hier ist es auf dem Handy.

Hier ist die Animation der Aktionsleiste beim Laden der Seite.

Machen Sie die Promo Bar klebrig

Damit die Promo-Leiste unter dem standardmäßigen Divi-Header bleibt, können wir dem Abschnitt mit der Promo-Leiste ein einfaches CSS-Snippet hinzufügen.

Öffnen Sie die Abschnittseinstellungen und fügen Sie das folgende CSS zum Hauptelement auf dem Desktop hinzu:

position: fixed;
width: 100%;

Fügen Sie dann das folgende CSS zum Hauptelement auf dem Tablet hinzu:

position: relative;

Sehen Sie sich nun das Ergebnis an.

Vergiss die Links nicht

Sobald Sie die Promo-Leiste erstellt haben, möchten Sie die Link-URL dem Werbeangebot oder der Seite hinzufügen. Sie können die Link-URL der Schaltfläche auf der Registerkarte Inhalt der Schaltflächeneinstellungen hinzufügen.

Bei bereits erfolgten Conversions können Sie die Link-URL auch der gesamten Zeile unter der Link-Option für die Zeileneinstellungen hinzufügen.

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie mit dem Divi Theme Builder eine Promo-Leiste (von Grund auf neu) entwerfen. Die Promo-Bar ist mit mehreren Animationen und Designs ausgestattet, um sie für Besucher wirklich hervorzuheben. Sie können die Promo-Leiste sogar fixieren, wenn Sie auf der Seite nach unten scrollen, um noch mehr Sichtbarkeit zu erzielen. Und mit der Möglichkeit zu steuern, wo die Promo-Leiste auf Ihrer Website angezeigt wird, ist die Anwendung äußerst praktisch.

Hoffentlich wird dies Sie dazu inspirieren, ein paar eigene Promo-Bars zu erstellen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!