So passen Sie Ihren Divi Slider an, um bestimmte Elemente mit jeder Folie zu ändern

Wir alle wissen, dass Schieberegler wunderbar geeignet sind, um den erstklassigen Abschnitt Ihrer Website zu maximieren. Sie sind großartig! Benutzer werden mit mehreren CTAs und wichtigen Funktionen begrüßt, die angezeigt werden, ohne jemals auf der Seite nach unten scrollen zu müssen. Aber manchmal können zu viele Änderungen in Design und Inhalt von Folie zu Folie die Besucher ablenken oder überfordern. Aus diesem Grund zeige ich Ihnen in diesem Tutorial, wie Sie Ihren Divi-Schieberegler so anpassen, dass er bei jedem Folienübergang nur bestimmte Elemente ändert. Auf diese Weise können Sie den Kerninhalt und die Designkomponenten Ihres Sliders konsistent halten, während Sie mit jeder Folie nur ein bestimmtes Element (wie ein einzelnes Wort oder eine Schaltfläche) ändern. Besucher können die Änderung leicht verarbeiten und Ihren Aufruf zum Handeln klar verstehen.

Tauchen wir ein!

Divi Slider Sneak Peek

Hear ist ein kleiner Einblick in das Design und die Funktionalität des Divi-Schiebereglers, den wir im heutigen Tutorial erstellen werden.

Beachten Sie, dass dadurch nur das eine Wort im Fließtext auf jeder Folie geändert wird.

Beachten Sie, wie sich bei diesem Beispiel sowohl das Textkörperwort als auch die Farben der Schaltflächen und des Punktes mit jeder Folie ändern.

Das Grundkonzept erklärt

Standardmäßig animiert der Divi-Schieberegler den Beschreibungstext bei jedem Übergang zu einer neuen Folie, die eingeblendet wird und den Inhalt leicht nach oben verschiebt.

Aber mit einer einfachen Zeile benutzerdefinierten CSS können wir diese Aufwärtsanimation des Textes deaktivieren. Und wenn wir die Folie duplizieren, den Hintergrund entfernen und nur eines der Elemente ändern (wie das eine Wort im Fließtext), sehen Sie, dass sich bei jeder Folie nur ein Wort ändert.

Sie können dieses Konzept verwenden, um nur bestimmte spezifische Texte, Schaltflächen oder Farben zu ändern, während die restlichen Designelemente mit jeder Folie im Spiel bleiben.

Einstieg

Abonnieren Sie unseren Youtube-Kanal

Für dieses Tutorial benötigen Sie lediglich das installierte und aktive Divi-Theme. Wir werden unseren Divi-Slider von Grund auf neu erstellen, indem wir den Divi-Builder am Frontend verwenden.

Erstellen Sie zunächst eine neue Seite und geben Sie Ihrer Seite einen Titel. Klicken Sie dann, um den Divi Builder zu verwenden, und wählen Sie die Option „Von Grund auf neu erstellen“. Klicken Sie dann auf die Schaltfläche „Auf dem Frontend aufbauen“.

Jetzt können Sie mit dem Design beginnen.

Einrichten des Divi Slider-Inhalts

Für dieses Beispiel verwende ich ein Slider-Modul mit voller Breite, aber dieses Tutorial gilt auch für normale Slider-Module. Beginnen wir damit, Ihrer Seite einen Abschnitt mit voller Breite mit einem Schiebereglermodul mit voller Breite hinzuzufügen.

Damit wir die Inhaltsänderungen unseres Schiebereglers sehen können, fügen wir dem Abschnitt in voller Breite zunächst vorübergehend eine dunkle Hintergrundfarbe hinzu. Öffnen Sie die Abschnittseinstellungen und geben Sie ihm eine schwarze Hintergrundfarbe (#222222).

Sie können dies noch nicht sehen, da die standardmäßige Hintergrundfarbe des Schiebereglers es verdeckt. Wir kreisen zurück, um das Hintergrunddesign des Abschnitts später im Tutorial abzuschließen.

Lassen Sie uns nun in die Einstellungen für den Fullwidth Slider springen und eine der Standardfolien löschen, sodass nur eine übrig bleibt. Öffnen Sie dann die Folieneinstellungen.

Aktualisieren Sie die Folieneinstellungen wie folgt:

Überschrift: „Websites, die Ihnen mehr bieten…“
Schaltflächentext: „Erste Schritte“

Fügen Sie unter Inhalt den folgenden HTML-Code hinzu:

Business<span style="color: #EE164D;">.</span>

(Dadurch wird dem Punkt (oder Punkt) nach dem Wort eine benutzerdefinierte Farbe hinzugefügt.)

Hintergrundfarbe: rgba(255,255,255,0)

Einstellungen speichern.

Duplizieren Sie nun die Folie zweimal, sodass Sie insgesamt drei Folien haben.

Öffnen Sie die Einstellungen für die zweite Folie. Ersetzen Sie unter Inhalt nur das Wort "Geschäft" durch "Geld", wobei der Rest von HTML, Überschrift und Schaltflächentext gleich bleibt. Wir wollen nur dieses eine Wort auf jeder Folie ändern. Speichern Sie dann die Einstellungen.

Öffnen Sie dann die Einstellungen für die dritte Folie. Ersetzen Sie unter Inhalt das Wort "Geschäft" durch "Erfolg" und speichern Sie die Einstellungen.

Alles erledigt! Das kümmert sich um unsere Slider-Inhalte.

Optimierung der Beschreibungstextanimation

Nachdem unser Slider-Inhalt vorhanden ist, müssen wir unsere Animation deaktivieren, damit unser Text nicht bei jeder Folie herumspringt. Gehen Sie dazu zu den Schiebereglereinstellungen in voller Breite und fügen Sie das folgende benutzerdefinierte CSS unter Folienbeschreibung hinzu:

animation-name: none;

Für dieses Beispiel ist es sinnvoll, unsere Slider-Animation automatisch zu machen und die Animationsgeschwindigkeit zu erhöhen, damit Benutzer den Wortwechsel in jeder Folie schneller sehen können. Gehen Sie dazu auf die Registerkarte Design und aktualisieren Sie Folgendes:

Automatische Animation: EIN
Automatische Animationsgeschwindigkeit (in ms): 3000

Sehen Sie sich nun das bisherige Ergebnis an. Sie sollten nur das eine Wort im Inhalt jeder Schieberegleränderung ohne die Aufwärtsanimation sehen.

Entwerfen des Sliders

Mit unserem Inhalt und unserer Funktionalität können wir damit beginnen, unseren Slider mit einem schönen, eleganten Design zu gestalten.

Öffnen Sie die Schiebereglereinstellungen für die volle Breite und aktualisieren Sie Folgendes:

Textausrichtung: links
Titelschriftart: Lato
Gewicht der Titelschrift: Leicht
Titeltextgröße: 32px
Titeltextschatten: siehe Screenshot
Stärke der Titeltextschattenunschärfe: 0em (dies nimmt im Grunde den Standardtextschatten weg)

Körperschriftart: Lato
Textgröße: 5vw (Desktop), 50px (Tablet), 40px (Smartphone)
Körperlinienhöhe: 1,6em
Textkörperschatten: siehe Screenshot
Stärke der Körpertextschattenunschärfe: 0em (dies entfernt im Grunde den Standardtextschatten)

Schaltflächentextgröße: 16px
Hintergrundfarbe der Schaltfläche: #ee164d
Breite der Schaltflächenleiste: 8px
Farbe des Knopfrahmens: #ee164d
Schaltflächenrandradius: 0px
Tastenabstand der Buchstaben: 1px
Schaltflächenschrift: Lato
Tastenausrichtung: rechts

Breite: 70 % (Desktop), 100 % (Tablet), 100 % (Smartphone)
Modulausrichtung: Mitte

Benutzerdefinierte Polsterung (Desktop): 19vw oben, 8vw unten
Benutzerdefinierte Polsterung (Tablet): 19vw oben, 4vw unten. 0px links, 0px rechts
Benutzerdefinierte Polsterung (Smartphone): 30vw oben, 4vw unten, 0px links, 0px rechts

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: -190px
Vertikale Position des Kastenschattens: 60px
Kastenschattenfarbe: rgba(0,16,17,0.7)

Und als letzten Schritt deaktivieren wir unsere Slider-Elemente, damit wir die Slider-Pfeile oder -Steuerelemente nicht sehen.

Das kümmert sich um unser Divi-Slider-Design!

Anpassen der Abschnittsstile

Der Rest des Designs wird unserem Abschnitt hinzugefügt, einschließlich unseres Hintergrundbilds, das als statischer Hintergrund für alle unsere Folien dient. Das Hinzufügen eines Hintergrundbilds zum Abschnitt ist für diese Verwendung besser, da Sie keine leichten Übergänge von einem Bild zum anderen sehen, wie wenn Sie das Hintergrundbild zu Ihrem Slider-Modul hinzufügen würden.

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Hintergrundbild: [Bild ca. 1920 x 800 Pixel einfügen]
Hintergrundfarbe links: rgba(0,16,17,0.45)
Hintergrundfarbe rechts: rgba(0,16,17,0.92)
Startposition: 34%
Endposition: 0%
Farbverlauf über dem Hintergrundbild platzieren: JA

Geben Sie als Nächstes Ihrem Abschnitt einen rechten Rand wie folgt:

Breite des rechten Rands: 5vw
Farbe des rechten Rands: #001011

Und schließlich geben Sie Ihrem Abschnitt einen Kastenschatten, um den Rahmen des Designs auszugleichen.

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: -200px
Vertikale Position des Boxschattens: -150px
Kastenschattenfarbe: rgba(0,16,17,0.74)

Das ist es!

Endgültiges Design des Divi Sliders

Hier ist das endgültige Design des benutzerdefinierten Divi-Schiebereglers.

Und hier ist die Funktionalität der Folien. Beachten Sie, wie sich bei jeder Folie nur das eine Wort ändert.

Endgültiges Design auf Mobilgeräten

Tablette

Smartphone

Experimentieren Sie mit dem Ändern anderer Elemente

Sie können mit jeder Folie experimentieren, indem Sie andere Elemente ändern, um kreativere Designs und Funktionen zu erhalten. Sie können beispielsweise jeder Ihrer Folienschaltflächen mit jeder Folie eine andere Farbe zuweisen sowie die Farbe des Zeitraums mit der neuen Schaltflächenfarbe auf jeder Folie abgleichen.

So würde das aussehen.

Sie können sogar versuchen, die Schattenfarbe der Folienbox oder ein anderes Designelement zu ändern. Es gibt unzählige Möglichkeiten!

Abschließende Gedanken

Dieses benutzerdefinierte Divi-Schieberegler-Design und -Funktionalität bietet eine schöne Alternative zu den herkömmlichen Schiebereglern da draußen. Der Kern des Designs ändert sich nicht, was den wichtigen Aspekt Ihres CTA weiter hervorhebt, der sich mit jeder Folie ändert. Es scheint, als könnte dies etwas sein, das Sie testen könnten, um zu sehen, ob es die Conversions steigern kann!

Lassen Sie mich in den Kommentaren unten wissen, was Sie denken.

Danke schön!