Erstellen Sie eine Leiste Förderung Die Animation für Ihre Seitenvorlage in Divi kann eine großartige Möglichkeit sein, elegante Produkte und Angebote zu bewerben, ohne sich auf ein Plugin verlassen zu müssen. Mit den leistungsstarken Designfunktionen von Divi können Sie die visuell erstellen Förderung wenn Sie eine Vorlage im Divi Theme Builder bearbeiten. Sobald das Modell fertig ist, folgt die Leiste Förderung wird auf jeder Seite angezeigt, die dieser Vorlage zugewiesen ist. 

Wir zeigen Ihnen auch, wie Sie die Werbeleiste fixieren (oder kleben) können.

Was Sie brauchen, um loszulegen

Zu Beginn müssen Sie um das Divi Theme zu installieren und zu aktivieren . Stellen Sie sicher, dass Sie die neueste Version von Divi haben.

Zum Testen benötigen Sie außerdem mindestens eine mit Divi Builder erstellte Seite, die von der Vorlage für die Aktionsleiste betroffen ist.

Erstellen Sie eine animierte Promotion-Leiste oben in einer Seitenvorlage

Erstellen Sie eine neue Vorlage

Gehen Sie im WordPress-Dashboard zu Divi> Theme Generator. 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 Aktionsleiste angezeigt werden soll.

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

HINWEIS: Wir fügen die Promotion-Leiste zum Modellkörperbereich hinzu (nicht zum Header), damit sie sowohl mit dem Divi-Standardheader als auch mit allen Headern funktioniert Benutzerdefiniert, den Sie später hinzufügen können.

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

Hinzufügen der Aktionsleiste zum Modell

Im Vorlagenlayout-Editor können wir mit der Erstellung der Promotion-Leiste mit Divi Builder beginnen.

Fügen Sie dem regulären Abschnitt zunächst eine Zeile mit einer Spalte hinzu.

Leitungseinstellungen

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

• Linker Hintergrundverlauf: # 4a42ec
• Rechter Hintergrundverlauf: # 521d91
• Verlaufsrichtung: 90deg
• Verwenden Sie eine benutzerdefinierte Rinnenbreite: JA
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Polsterung: 0px oben, 0px unten

Dies unterstützt die Hintergrundfarbe und Breite der von uns erstellten Aktionsleiste.

Spaltenparameter

Klicken Sie vor dem Beenden der Zeileneinstellungen auf, um die Spalteneinstellungen zu öffnen. Fügen Sie dann dem Hauptspaltenelement das folgende benutzerdefinierte CSS hinzu:

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

Dieses CSS verwendet die Flex-Eigenschaft, um die auszurichten Inhalt (oder Module) in der Säule, um sie horizontal (nebeneinander) zu stapeln. Außerdem werden die Module in der Säule vertikal und horizontal zentriert. Der Grund, warum wir dies auf diese Weise tun, besteht darin, zu vermeiden, dass mehrere Spaltenzeilenstrukturen verwendet werden müssen, die auf Mobilgeräten übereinander gestapelt werden. Mit dieser Konfiguration ist die Inhalt bleibt über alle Browserbreiten hinweg horizontal ausgerichtet.

Wir sind jetzt bereit, etwas hinzuzufügen Inhalt zur Promotionleiste.

Blurb-Modul hinzufügen

Für den Inhalt dieses Promotion-Beispiels werden wir ein Präsentationsmodul mit einem kleinen Symbol und ein Text-Blog mit einer Schaltfläche auf der rechten Seite einbinden (ähnlich der Promotion-Leiste auf Elegantthemes.com).

Klicken Sie auf den grauen Kreis und das Symbol in der Zeile und fügen Sie ein Präsentationsmodul hinzu.

Geben Sie für den Inhalt des Präsentationstextes die folgenden Informationen ein:

• Titel: [Geben Sie den Text der Aktion ein]
• Verwenden Sie das Symbol: JA
• Symbol: Geschenksymbol (siehe Screenshot)

Aktualisieren Sie die Einstellungen für das Präsentationsdesign wie folgt:

• Symbolfarbe: # ff4a9e
• Bild / Position der Symbole: links
• Verwenden Sie die Schriftgröße des Symbols: JA
• Icon Schriftgröße: 16px
• Text Titelgröße: 16px (Desktop), 14px (Telefon)
• Hewight-Titelzeile: 1.3em
• Maximale Breite: 230px (nur Telefon)
• Polsterung: Top 10px
• Animationsstil: Folie
• Animationsrichtung: rechts
• Animationsverzögerung: 250ms

Hinzufügen des Tastenmoduls

Fügen Sie dann ein Schaltflächenmodul unter dem Klappentext-Modul hinzu. Aufgrund der Flex-Eigenschaft wird das Modul eher rechts als unten angezeigt.

Aktualisieren Sie die Schaltflächendesignparameter wie folgt:

• Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: JA
• Schaltflächentextgröße: 15px (Desktop), 13px (Telefon)
• Knopftextfarbe: #ffffff
• Breite des Schaltflächenrandes: 0px
• Radius des Randes der Schaltfläche: 20px
• Schriftgröße: halb fett

• Rand (Desktop): 20px auf der linken Seite
• Rand (Telefon): 10px links
• Polsterung (Büro): 0px oben, 0px unten
• Auffüllen (Telefon): 2px oben, 2px unten, 8px links, 8px rechts
• Animationsstil: Bounce
• Animationsverzögerung: 1000ms

Abschnittseinstellungen

Aktualisieren Sie den Abschnitt mit der Aktionsleiste wie folgt, um den Entwurf der Aktionsleiste fertigzustellen:

• Polsterung: 0px oben, 0px unten
• Animationsstil: Bounce
• Animationsrichtung: Nach unten
• Animationsdauer: 500ms
• Animationsverzögerung: 250ms
• Animation Startopazität: 100%
• Z-Index: 999

Hinzufügen des Inhaltsveröffentlichungsmoduls in voller Breite

Zu diesem Zeitpunkt ist die Aktionsleiste fertig. Da dies jedoch eine Vorlage ist, müssen wir sicherstellen, dass wir das Inhaltsposting-Modul hinzufügen, um den Inhalt der Seite (n) anzuzeigen, die diese Vorlage verwenden.

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

(HINWEIS: Für Seiten, die den Standardeditor verwenden, sollten Sie in einem regulären Abschnitt einen Standard-Mod für Post-Inhalte verwenden, um standardmäßig eine ähnliche maximale Breite von 1080 Pixel zu erreichen.)

Fügen Sie einen Abschnitt voller Breite hinzu

Fügen Sie unter dem Abschnitt mit Ihrer Promotion-Leiste einen Abschnitt mit voller Breite hinzu.

Fügen Sie ein Inhaltsmodul im Fullwidth-Format hinzu

Wählen Sie dann das Modul Fullwidth Post Content.

Es ist mehr oder weniger das. Stellen Sie nun sicher und speichern Sie das Layout, bevor Sie den Editor verlassen.

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

Endergebnis

VORHER

Hier ist nun die Seite, bevor Sie das Modell mit der Promotion-Leiste zuweisen.

Nach

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

Machen Sie die Werbeleiste klebrig

Damit die Aktionsleiste unter die Standardüberschrift von Divi passt, können wir dem Abschnitt mit der Aktionsleiste ein einfaches CSS-Snippet hinzufügen.

position: fixed;width: 100%;

Öffnen Sie die Abschnittseinstellungen und fügen Sie dem Hauptdesktopelement den folgenden CSS-Code hinzu:

Fügen Sie dann dem Hauptelement des Tablets den folgenden CSS-Code hinzu:

position: relative;

Überprüfen Sie nun das Ergebnis.

Bei früheren Konvertierungen können Sie die Link-URL auch unter der Linkoption Zeileneinstellungen zur gesamten Zeile hinzufügen.

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie mit Divi Theme Builder eine Promo-Leiste (von Grund auf neu) entwerfen. Die Werbeleiste ist komplett mit mehreren Animationen und Designs, um sie wirklich sichtbar zu machen Besucher. Sie können sogar die Promo-Leiste reparieren, während Sie auf der Seite nach unten scrollen, um noch mehr Sichtbarkeit zu erhalten. Und mit der Möglichkeit zu steuern, wo die Werbeleiste auf Ihrer Website platziert wird, ist die App äußerst praktisch.