Springe zum Hauptinhalt

So erstellen Sie eine animierte Promotion-Leiste auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Das Erstellen einer animierten Promotion-Leiste für Ihre Seitenvorlage in Divi kann eine großartige Möglichkeit sein, stilvolle Produkte und Angebote zu bewerben, ohne sich auf ein Plugin verlassen zu müssen. Mithilfe der leistungsstarken Designfunktionen von Divi können Sie die Promotion-Leiste visuell erstellen, wenn Sie eine Vorlage im Divi Theme Creator bearbeiten. Wenn die Vorlage fertig ist, wird die Promotion-Leiste auf jeder dieser Vorlage zugewiesenen Seite angezeigt. 

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.

Fügen Sie ein neues Divi-Modell hinzu

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

Divi Homepage

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.

Fügen Sie ein Körpermodell hinzu

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.

Fügen Sie einer Spalte auf divi eine Zeile 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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;

Anpassung des CSS-Codes

Dieses CSS verwendet die Flex-Eigenschaft, um den Inhalt (oder die Module) in der Spalte so auszurichten, dass sie horizontal (nebeneinander) gestapelt werden. Außerdem werden die Module in der Spalte vertikal und horizontal zentriert. Der Grund dafür ist, dass nicht mehrere Spaltenzeilenstrukturen verwendet werden müssen, die auf einem Mobiltelefon übereinander gestapelt werden. Bei dieser Konfiguration bleibt der Inhalt horizontal über alle Browserbreiten ausgerichtet.

Jetzt können wir der Aktionsleiste Inhalte hinzufügen.

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.

Fügen Sie einen zweiten Abschnitt des Zusammenfassungsmoduls 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)
Konfiguration des Divi Summary Moduls

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.

Divi-Tastenmodul

Aktualisieren Sie die Schaltflächendesignparameter wie folgt:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • 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
Passen Sie das Divi-Button-Modul an
  • 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
Passen Sie den Abstand der Divi-Tastenmodule an

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
Passen Sie das Animations-Divi-Modul an

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.

Erstellen Sie einen Divi Builder-Abschnitt in voller Breite

Fügen Sie ein Inhaltsmodul im Fullwidth-Format hinzu

Wählen Sie dann das Modul Fullwidth Post Content.

Artikelinhalt in voller Breite divi

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

Divi-Layout speichern

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

Theme Builder Divi

Endergebnis

vor

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:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Geben Sie den festen Abschnitt ein

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

position: relative;

Fügen Sie dem Divi-Abschnitt einen CSS-Code hinzu

Überprüfen Sie nun das Ergebnis.

Divi animiertes 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 Promotion-Leiste (von Grund auf neu) entwerfen. Die Werbeleiste enthält mehrere Animationen und Designs, um sie für Besucher wirklich sichtbar zu machen. Sie können sogar die Promotion-Leiste korrigieren, während Sie auf der Seite nach unten scrollen, um noch mehr Sichtbarkeit zu erzielen. Mit der Möglichkeit, die Platzierung der Promotion-Leiste auf Ihrer Website zu steuern, ist die App äußerst praktisch.

Dieser Artikel enthält 1 Kommentar

  1. Hallo,

    Hervorragender Artikel und Tutorial, wirklich TOP !!!

    Ich möchte das Gleiche tun, aber da ich das sekundäre Menü verwende, in dem sich Konto, Telefon und Warenkorb über dem Hauptmenü (meine Produktkategorien) befinden, wird die Promo-Leiste nicht plötzlich angezeigt, es sei denn, ich habe einen Schritt des Tutorials verpasst. !!.

    Was ich tun möchte, ist, diese Promo-Leiste über der sekundären Leiste anzuzeigen, kurz gesagt, über allem anderen, um eine Promo, einen Flash-Verkauf, zu platzieren und die Informationen entsprechend den Ereignissen zu ändern, die ich einschließen möchte

    Irgendeine Idee auf dieser Route bitte?

    Youssef

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren