So erstellen Sie einen kompakten Testimonial-Slider für einen Header in Divi

Das Hinzufügen von Testimonials zu Ihrer Website ist eine effektive Möglichkeit, die Glaubwürdigkeit Ihres Unternehmens (oder Ihrer Marke) zu stärken und Vertrauen bei den Besuchern aufzubauen. Ein Testimonial-Schieberegler ist ein praktisches Werkzeug, um Testimonials an einem Ort zu präsentieren. Vor diesem Hintergrund ist es sinnvoll, Ihrem Header einen kompakten Testimonial-Schieberegler hinzuzufügen, damit diese Testimonials eines der ersten Dinge sind, die der Benutzer beim Besuch Ihrer Website sieht.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen kompakten Testimonial-Slider erstellen, um kurze Testimonials im Header Ihrer Website anzuzeigen. Um dies zu tun, werden wir das Slider-Modul von Divi auf unterhaltsame und einzigartige Weise modifizieren.

Lass uns anfangen!

Vorgeschmack

Hier ist der kompakte Testimonial-Slider, den wir mit dem Divi Slider-Modul erstellen.

Und hier ist der gleiche Testimonial-Schieberegler zu einem globalen Header hinzugefügt.

Und so sieht es auf dem Handy aus.

Laden Sie das Layout und die Vorlage KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es 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 auf der Liste stehen, 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.

HERUNTERLADEN

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!

Importieren Sie das Layout in die Divi-Bibliothek

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer. Es wird die JSON-Datei mit dem Namen „divi-short-testimonial-slider-module-layout.json“ sein.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Importieren Sie die Header-Vorlage in den Divi Theme Builder

Wenn Sie eine Header-Vorlage mit dem zum Header hinzugefügten kompakten Testimonial-Schieberegler importieren möchten, müssen Sie zu Divi > Theme Builder navigieren.

Verwenden Sie dann das Portabilitätssymbol oben rechts auf der Seite, um die JSON-Datei zu importieren. Es wird die Datei mit dem Namen „divi-short-testimonial-slider-header-template.json“ sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

So erstellen Sie einen kompakten Testimonial-Slider in Divi

Neues Zeilen- und Slider-Modul hinzufügen

Fügen Sie dem Abschnitt zunächst eine einspaltige Zeile hinzu.

Fügen Sie dann der Zeile ein Schiebemodul hinzu.

Folie bearbeiten

Löschen Sie unter den Schiebereglereinstellungen die zweite Standardfolie auf der Registerkarte Inhalt und klicken Sie dann auf , um die Einstellungen der verbleibenden Folie zu bearbeiten.

Folieninhalt

Aktualisieren Sie auf der Registerkarte Inhalt der Folieneinstellungen Folgendes:

• Titel: „Donec sollicitudin molestie malesuada. Vivamus sucipit tortor eget.“
• Schaltflächentext: Alles lesen
• Körper: — Tatiana Gagelman

Wenn Sie fertig sind, speichern Sie die Folieneinstellungen.

Slider-Einstellungen aktualisieren

Doppelte Folie und Steuerelemente ausblenden

Nachdem Sie die erste Folie mit Inhalt aktualisiert haben, duplizieren Sie diese Folie, um eine oder mehrere zusätzliche Folien zu erstellen.

Blenden Sie dann in der Optionsgruppe Elemente die Schieberegler aus, indem Sie Folgendes aktualisieren:

• Kontrollen anzeigen: NEIN

Hintergrund für alle Folien aktualisieren

Als nächstes fügen wir einen Hintergrund hinzu, der für alle Folien verwendet wird. Dieser Hintergrund enthält einen Hintergrundverlauf und ein Hintergrundbild-Styling (wenn/wenn Sie einer einzelnen Folie ein Autoren-Hintergrundbild hinzufügen).

Um den Hintergrund hinzuzufügen, aktualisieren Sie Folgendes:

• Hintergrundfarbe links: #000000
• Hintergrund mit Farbverlauf rechts: #000000
• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Mitte links
• Hintergrundbild-Mischung: Helligkeit

Es ist wichtig zu beachten, dass wir hier kein Hintergrundbild hinzufügen. Wir fügen nur die Größe, Position und den Mischmodus für das Bild hinzu, das von einer einzelnen Folie verwendet wird. Es ist einfacher, es hier hinzuzufügen, als dass Sie jeder Folie separat das gleiche Styling hinzufügen müssen. Später zeigen wir Ihnen, wie Sie den einzelnen Folien Bilder hinzufügen.

Slider-Design-Einstellungen

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

Überlagerung

• Hintergrundüberlagerung verwenden: JA
• Hintergrund-Overlay-Farbe: rgba(0,0,0,0.7)

Titeltext

• Titelüberschriftsebene: H4
• Titelschrift: Josefin Sans
• Schriftstärke des Titels: Mittel
• Ausrichtung des Titeltextes: Links
• Titeltextgröße: 16px (Desktop und Tablet), 14px (Telefon)
• Höhe der Titelzeile: 1,5 em

Hauptteil

• Körperschrift: Josefin Sans
• Ausrichtung des Textkörpers: Links
• Textkörperfarbe: #aaaaaa
• Körperbuchstabenabstand: 0.05em

Taste

• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 1em
• Schaltflächentextfarbe: Standard (Desktop), #000 (Hover)
• Schaltflächenhintergrundfarbe (Desktop): rgba(255,255,255,0.19)
• Hintergrundfarbe der Schaltfläche (Hover): #ffffff
• Breite des Tastenrahmens: 0px
• Tasten-Buchstaben-Abstand: 0.05em
• Knopfschrift: Josefin Sans
• Schaltflächenrand: 0px oben, 0px unten
• Tastenpolsterung: 0px oben, 0px unten, 0.6em links, 0.6em rechts

Auffüllen und automatische Animation

Aktualisieren Sie dann den Abstand des Schiebereglers, sodass er kompakt ist, und stellen Sie die gewünschte automatische Animationsgeschwindigkeit für den Schieberegler ein.

• Rand: 0px oben, 0px unten
• Polsterung: 1em oben, 1em unten, 5% links, 5% rechts
• Automatische Animation: EIN
• Automatische Animationsgeschwindigkeit: 3500

Benutzerdefinierte CSS

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS hinzu, um den Stil jedes Schiebereglerelements (Titel, Schaltfläche und Pfeile) zu aktualisieren.

Folientitel

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Dadurch wird sichergestellt, dass der Folientitel auf kleineren Bildschirmen keinen Zeilenumbruch erzeugt.

Schiebetaste

position:absolute;
bottom: 1em;
right: 6%;

Dadurch erhält der Button eine absolute Position, so dass er schön unter dem Titel und rechts neben der Folie sitzt, wodurch der Slider noch kompakter wird.

Schiebepfeile

font-size: 30px;
margin-top: -15px;

Dadurch werden die Navigationspfeile des Schiebereglers einfach kleiner, um sie an die kompakte Schiebereglergröße anzupassen.

Tipp: Fügen Sie der Spalte dieselbe Hintergrundfarbe hinzu, um glattere Folienübergänge zu erhalten

Derzeit wird die Animation jeder Folie die Hintergrundfarbe zusammen mit dem Folieninhalt animieren. Um zu verhindern, dass der Hintergrund diese Animation anzeigt, können wir der Spalte dieselbe Hintergrundfarbe zuweisen, damit der Übergang glatter ist.

Öffnen Sie dazu die Einstellungen für die übergeordnete Spalte des Sliders und fügen Sie folgende Hintergrundfarbe hinzu:

• Hintergrundfarbe: #000000

Hinzufügen von Autorenhintergrundbildern zu einer Folie

Wenn Sie ein Autorenhintergrundbild für eine Folie einfügen möchten, können Sie dies tun, indem Sie jeder Folie ein Hintergrundbild hinzufügen.

Sobald Sie der Folie das Hintergrundbild hinzugefügt haben, übernimmt das Hintergrundbild die Stile, die bereits unter den Einstellungen des Schiebereglers (nicht der Folie) vorhanden sind.

Ergebnis

Sehen Sie sich das Endergebnis an.

Hinzufügen des kompakten Testimonial-Schiebereglers zu einer Header-Vorlage

Speichern des Moduls in der Divi-Bibliothek

Bevor wir den kompakten Testimonial-Schieberegler zu einem globalen Header hinzufügen können, müssen wir das Modul zuerst in der Divi-Bibliothek speichern. Sie können dies tun, indem Sie mit der Maus über das Slider-Modul fahren und auf das Symbol "In Bibliothek speichern" klicken. Geben Sie dann dem Layout einen Namen und klicken Sie auf die Schaltfläche „In Bibliothek speichern“.

Hinzufügen des kompakten Testimonial-Modul-Layouts zu einer Header-Vorlage

Bearbeiten Sie die benutzerdefinierte Kopfzeile

Sobald das neue Testimonial-Slider-Modul in der Bibliothek gespeichert wurde, können wir es einem benutzerdefinierten Header hinzufügen.

Navigieren Sie zu Divi > Theme Builder und klicken Sie dann auf , um den benutzerdefinierten Header für die Vorlage zu bearbeiten.

Gespeichertes Testimonial-Slider-Modul-Layout aus Bibliothek einfügen

Klicken Sie im Header-Layout-Editor auf , um das kompakte Testimonial-Schieberegler-Modul dort hinzuzufügen, wo es angezeigt werden soll.

Wählen Sie im Modalmodul Modul einfügen die Registerkarte Aus Bibliothek hinzufügen aus. Suchen Sie den kompakten Testimonial-Schieberegler, den Sie zuvor in der Bibliothek gespeichert haben, und wählen Sie ihn aus.

Speichern Sie nach dem Laden die Änderungen.

Endergebnis

Und hier ist der gleiche Testimonial-Schieberegler zu einem globalen Header hinzugefügt.

Und hier ist der gleiche Testimonial-Slider ohne die Hintergrundbilder des Autors.

Und so sieht es auf dem Handy aus.

Abschließende Gedanken

Der kompakte Testimonial-Slider kann eine neue Ergänzung zum Header jeder Website sein, die die Glaubwürdigkeit ihrer Dienste an der sichtbarsten Stelle ihrer Website steigern möchte. Sie können es auch verwenden, um Besucher auf eine Testimonial-Seite oder eine Verkaufsseite umzuleiten, um die Conversions zu erhöhen. Hoffentlich wird es für Sie nützlich sein.

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

Danke schön!