Möchten Sie einen kompakten Testimonial-Slider für einen Divi-Header einfügen?
Das Hinzufügen von Testimonials zu Ihrer Website ist ein effektiver Weg, um Glaubwürdigkeit für Ihr Unternehmen (oder Ihre Marke) aufzubauen und Vertrauen aufzubauen Besucher.
Ein Testimonial-Slider ist ein praktisches Tool, um Testimonials an einem Ort zu präsentieren. Vor diesem Hintergrund ist es sinnvoll, Ihrem Header einen kompakten Testimonial-Slider hinzuzufügen, damit diese Testimonials eines der ersten Dinge sind, die der Benutzer sieht, wenn er Ihre besucht Webseite.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen kompakten Testimonial-Slider erstellen, um kurze Testimonials in der Kopfzeile Ihres zu präsentieren Website.
Zu diesem Zweck werden wir das Divi Slider-Modul auf unterhaltsame und einzigartige Weise modifizieren.
Fangen wir an!
Aber bevor Sie unseren Leitfaden entdecken können Divi, das beste WordPress-Theme der Welt und das am einfachsten zu bedienende
Übersicht
Hier ist der kompakte Testimonial-Slider, den wir mit dem Slider-Modul von Divi erstellen werden.
Und hier ist der gleiche Testimonial-Slider, der zu einem globalen Header hinzugefügt wurde.
Und so sieht es auf dem Handy aus.
Erstellen Sie eine neue Seite mit Divi Builder
Um zu beginnen, müssen Sie Folgendes tun:
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder
klicken Sie dann auf Beginnen Sie mit dem Bauen (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 Schiebereglermodul hinzufügen
Fügen Sie dem Abschnitt zunächst eine einspaltige Zeile hinzu.
Fügen Sie der Linie dann ein Slider-Modul hinzu.
Folie bearbeiten
Entfernen Sie unter Schiebereglereinstellungen die zweite Standardfolie unter der Registerkarte Inhalt, und klicken Sie dann auf , um die Einstellungen für die verbleibende Folie zu ändern.
Folieninhalt
Unter der Registerkarte Inhalt Aktualisieren Sie in den Folieneinstellungen Folgendes:
- Titel: „Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
- Schaltfläche: Alles lesen
- Körper: – Tatiana Gagelman
Wenn Sie fertig sind, speichern Sie die Folieneinstellungen.
Lesen Sie auch: Divi: So verwenden Sie Hintergrundmaskeneinstellungen und Mustertransformationsoptionen
Schiebereglereinstellungen aktualisieren
Duplizieren Sie das Schieben und verbergen Sie Steuerelemente
Nach dem Aktualisieren der ersten Folie mit Inhalt, duplizieren Sie diese Folie, um eine oder mehrere zusätzliche Folien zu erstellen.
Dann unter der Optionsgruppe verschiedenste Komponenten, blenden Sie die Schieberegler aus, indem Sie Folgendes aktualisieren:
- Showsteuerung: NEIN
Aktualisieren Sie den Hintergrund aller Folien
Als Nächstes fügen wir einen Hintergrund hinzu, der für alle Folien verwendet wird.
Aktualisieren Sie Folgendes, um den Hintergrund hinzuzufügen:
- Hintergrundverlauf:
- Farbverlauf stoppt 0 %: #000000
- Gradient stoppt 100 %: #000000
- Hintergrundbild:
- Größe: Passform
- Position: Mitte links
- Mischung: Leuchtkraft
Slider-Einstellungen
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
Abdeckung
- Hintergrundüberlagerung verwenden: JA
- Farbe der Hintergrundüberlagerung: rgba(0,0,0,0.7)
Titeltext
- Titel:
- Überschriftenebene: H4
- Schrift: Josefin Sans
- Schriftstärke: Mittel
- Textausrichtung: links
- Textgröße: 16px (Desktop und Tablet), 14px (Telefon)
- Zeilenhöhe: 1,5 m
Body text
- Körper :
- Schrift: Josefin Sans
- Textausrichtung: links
- Textfarbe: #aaaaaa
- Buchstabenabstand: 0,05 em
Taste
- Benutzerdefinierte Größe für Schaltfläche verwenden: JA
- Taste :
- Textgröße: 1em
- Textfarbe: Standard (Desktop), #000 (Hover)
- Hintergrundfarbe (Desktop): rgba(255,255,255,0.19)
- Hintergrundfarbe (Hover): #ffffff
- Randbreite: 0 Pixel
- Buchstabenabstand: 0,05 em
- Schrift: Josefin Sans
- Rand: 0px (oben und unten)
- Polsterung: 0px (oben und unten), 0,6em (links und rechts)
Automatische Füllung und Animation
Aktualisieren Sie als Nächstes den Schiebereglerabstand so, dass er kompakt ist, und stellen Sie die gewünschte Geschwindigkeit für die automatische Animation ein.
- Rand: 0px (oben und unten)
- Polsterung: 1em (oben und unten), 5% (links und rechts)
- Automatische Animation: EIN
- Automatische Animationsgeschwindigkeit: 3500
Benutzerdefiniertes CSS
Unter der Registerkarte Fortgeschrittener, fügen Sie das folgende benutzerdefinierte CSS hinzu, um den Stil jedes Slider-Elements (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.
Slide-Taste
position:absolute;
bottom: 1em;
right: 6%;Dadurch erhält der Button eine absolute Position, sodass er deutlich unter dem Titel und rechts neben der Folie sitzt, wodurch der Schieberegler noch kompakter wird.
Pfeile ziehen
font-size: 30px;
margin-top: -15px;Es verkleinert lediglich die Navigationspfeile des Schiebereglers, um der kompakten Größe des Schiebereglers gerecht zu werden.
Tipp: Fügen Sie der Spalte dieselbe Hintergrundfarbe hinzu, um fließendere Folienübergänge zu erzielen
Öffnen Sie dazu die Einstellungen der übergeordneten Spalte des Schiebereglers und fügen Sie die folgende Hintergrundfarbe hinzu:
- Hintergrund: #000000
Hinzufügen von Autoren-Hintergrundbildern zu einer Folie
Wenn Sie ein Autoren-Hintergrundbild für eine Folie einfügen möchten, können Sie dies tun, indem Sie jeder Folie ein Hintergrundbild hinzufügen.
Nachdem Sie das Hintergrundbild zur Folie hinzugefügt haben, erbt das Hintergrundbild die Stile, die bereits unter den Einstellungen des Schiebereglers (nicht der Folie) vorhanden sind.
Ergebnis
Schauen Sie sich das Endergebnis an.
Hinzufügen des kompakten Testimonial-Sliders zu einer Header-Vorlage
Speichern Sie das Modul in der Divi-Bibliothek
Bevor wir den kompakten Testimonial-Slider zu einem globalen Header hinzufügen können, müssen wir das Modul zuerst in der Divi-Bibliothek registrieren.
Sie können dies tun, indem Sie den Mauszeiger über das Slider-Modul bewegen und auf " Zur Bibliothek hinzufügen“. Geben Sie dann dem Layout einen Namen und klicken Sie auf die Schaltfläche " In Bibliothek speichern".
Kompaktes Testimonial-Modul-Layout zu einer Header-Vorlage hinzugefügt
Benutzerdefinierte Kopfzeile bearbeiten
Sobald das neue Testimonial-Slider-Modul in der Bibliothek gespeichert wurde, können wir es einem benutzerdefinierten Header hinzufügen.
Zugang zu Divi > Themenersteller, klicken Sie dann auf das Symbol, mit dem Sie " Benutzerdefinierte Kopfzeile".
Fügen Sie das gespeicherte Testimonial-Slider-Modul aus der Bibliothek ein
Klicken Sie im Header-Layout-Editor auf , um das kompakte Testimonial-Slider-Modul an der Stelle hinzuzufügen, an der es angezeigt werden soll.
Im Mod „Modul einfügen“Wählen Sie die Registerkarte „Aus Bibliothek hinzufügen“. Suchen Sie den kompakten Testimonial-Slider, den Sie zuvor in der Bibliothek gespeichert haben, und wählen Sie ihn aus.
Speichern Sie nach dem Laden die Änderungen.
Siehe auch: Divi: So zeigen Sie das Fullwidth Header-Modul im Vollbildmodus an
Endergebnis
Unten ist der Testimonial-Slider zu einer globalen Kopfzeile hinzugefügt.
Hier haben wir den Testimonial-Slider ohne die Hintergrundbilder des Autors.
Und so sieht es auf dem Handy aus.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Der kompakte Testimonial-Slider kann eine neue Ergänzung zum Header von allem sein Website ist bestrebt, die Glaubwürdigkeit seiner Dienstleistungen an der sichtbarsten Stelle seiner Website zu steigern.
Sie können es auch zum Umleiten verwenden Besucher auf eine Testimonial- oder Verkaufsseite, um die Conversions zu steigern. Wir hoffen, dass dies für Sie bei Ihren nächsten Divi-Projekten nützlich sein wird.
Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
