Laden Sie ein KOSTENLOSES Motion Testimonial-Layout für Divi . herunter

Es ist kein Geheimnis, dass Testimonials ein wesentlicher Bestandteil vieler Unternehmen und ihrer Website sind. Sie verleihen den von Ihnen angebotenen Dienstleistungen oder Produkten ein Gefühl der Glaubwürdigkeit. Ein besonderes Augenmerk auf die Art und Weise, wie Sie Ihre Testimonials darstellen, zahlt sich oft aus. Mit Divi gibt es unzählige Möglichkeiten, Ihren Testimonial-Bereich zu gestalten, es gibt sogar ein Testimonial-Modul, das ihm gewidmet ist. Wenn Sie jedoch nach einer einzigartigen Möglichkeit suchen, Ihren Erfahrungsberichten Interaktionen hinzuzufügen, werden Sie diesen Beitrag lieben. Wir teilen ein wunderschönes benutzerdefiniertes Motion-Testimonial-Layout, das mit den neuen Scroll-Effekten von Divi erstellt wurde. Wir werden auch das Design Schritt für Schritt neu erstellen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Motion Testimonial-Layout KOSTENLOS herunter

Um das kostenlose Testimonial-Layout 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!

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe in Schwarz.

• Hintergrundfarbe: #000000

Abstand

Wechseln Sie zum Design-Tab des Abschnitts und fügen Sie benutzerdefinierte obere und untere Abstände für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 10 % (Desktop), 20 % (Tablet), 30 % (Telefon)
• Untere Polsterung: 10 % (Desktop), 20 % (Tablet), 30 % (Telefon)

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine erste Zeile mit der folgenden Spaltenstruktur hinzufügen:

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Das erste Modul, das wir in der Spalte dieser Zeile benötigen, ist ein Textmodul mit einigen H2-Inhalten.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Textmoduls und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Questrial
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textgröße: 85px (Desktop), 45px (Tablet), 35px (Telefon)
• Überschrift 2 Buchstabenabstand: 2px
• Überschrift 2 Zeilenhöhe: 1.1em

Trennmodul zur Spalte hinzufügen

Sichtweite

Fügen Sie dann direkt unter dem Textmodul ein Teilermodul hinzu und stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitungseinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Linieneinstellungen wie folgt:

• Linienfarbe: #161616
• Linienstil: Solid
• Linienposition: Oben

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 14px
• Breite: 13 % (Desktop), 20 % (Tablet), 30 % (Telefon)
• Modulausrichtung: Mitte

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe! Diese Zeile ist unserem ersten Testimonial gewidmet. Verwenden Sie die folgende Spaltenstruktur:

Desktop-Hintergrundbild

Laden Sie dann das blaue Desktop-Hintergrundbild hoch, das Sie im Download-Ordner finden, den Sie zu Beginn dieses Beitrags herunterladen konnten.

• Hintergrundbildgröße: Fit
• Hintergrundbild Position: Mitte

Hintergrundbild für Tablet und Telefon

Wir verwenden eine gedrehte Version des blauen Hintergrundbilds auf kleineren Bildschirmgrößen. Dieses Hintergrundbild finden Sie auch im Download-Ordner.

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Mitte

Größe

Wechseln Sie zum Design-Tab der Zeile und ändern Sie die maximale Breite in den Größeneinstellungen.

• Maximale Breite: 2000px

Abstand

Nehmen Sie auch einige Änderungen an den Abstandseinstellungen vor.

• Oberer Rand: 100px
• Obere Polsterung: 15%
• Untere Polsterung: 15%

Horizontaler Bewegungs-Scroll-Effekt

Gehen Sie dann zur Registerkarte Erweitert und aktivieren Sie einige horizontale Bewegungen in den Bildlaufeffekten.

• Horizontale Bewegung aktivieren: Ja
• Startversatz: -4
• Mittlerer Offset: 0 (bei 50%)
• End-Offset: 0
• Bewegungseffekt-Trigger: Top of Element

Ein- und Ausblenden des Scroll-Effekts

Wir werden auch einen benutzerdefinierten Ein- und Ausblendeffekt hinzufügen.

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 0 % (bei 19 %)
• Mittlere Deckkraft: 100 % (von 25 % bis 88 %)
• Endopazität: 0% (bei 93%)
• Bewegungsauslöser-Effekt: Top of Element

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Das erste Modul, das wir in dieser Zeile benötigen, ist ein Textmodul. Platzieren Sie den Testimonial-Inhalt in der Inhaltsbox.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Questrial
• Schriftstärke des Textes: Fett
• Textfarbe: #ffffff
• Textgröße: 50px (Desktop), 30px (Tablet), 25px (Telefon)
• Textzeilenhöhe: 1.5em
• Textausrichtung: Mitte

Größe

Ändern Sie dann die Breite über verschiedene Bildschirmgrößen auf der Registerkarte Design.

• Breite: 63 % (Desktop), 100 % (Tablet & Telefon)
• Modulausrichtung: Mitte

Personenmodul zur Spalte hinzufügen

Inhalt hinzufügen

Weiter zum nächsten Modul, das ein Personenmodul ist. Fügen Sie den Namen, die Position und die Social-Media-Links hinzu.

Bild hochladen

Laden Sie als nächstes ein quadratisches Bild Ihrer Wahl hoch.

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symbolfarbe in den Symboleinstellungen.

• Symbolfarbe: #2b302e

Bild

Verwandeln Sie das Bild in einen Kreis, indem Sie einige abgerundete Ecken hinzufügen.

• Alle Ecken: 100px

Einstellungen für Titeltext

Ändern Sie dann die Einstellungen für den Titeltext wie folgt:

• Titelschriftart: Questrial
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #ffffff
• Titeltextgröße: 24px

Textkörpereinstellungen

Nehmen Sie auch einige Änderungen an den Textkörpereinstellungen vor.

• Körperschriftart: Questrial
• Textkörperfarbe: #ffffff
• Körpertextgröße: 15px

Texteinstellungen positionieren

Wir ändern auch die Positionstexteinstellungen.

• Position Schriftart: Questrial
• Positionstextfarbe: #1b66ff
• Positionstextgröße: 17px

Größe

Zusammen mit der Breite über verschiedene Bildschirmgrößen.

• Breite: 25 % (Desktop), 100 % (Tablet & Telefon)
• Modulausrichtung: Mitte

Abstand

Navigieren Sie als nächstes zu den Abstandseinstellungen und fügen Sie einen oberen Rand hinzu.

• Oberer Rand: 100px

Hauptelement

Um sicherzustellen, dass alle Inhalte in unserem Personenmodul ausgerichtet sind, gehen wir zur Registerkarte Erweitert und fügen dem Hauptelement des Moduls zwei Zeilen CSS-Code hinzu.

display: flex;
align-items: center;

Mitgliedsbild

Wir werden auch auf kleineren Bildschirmgrößen eine benutzerdefinierte Breite für das Mitgliedsbildelement verwenden.

Tablette:

width: 20% !important;

Telefon:

width: 30% !important;
margin-right: 5%;

Zeile 2 klonen

Nachdem Sie die Zeile mit dem Testimonial ausgefüllt haben, können Sie die gesamte Zeile einmal klonen.

Zeilenhintergrundbilder ändern

Wir müssen einige Änderungen an dieser doppelten Zeile vornehmen, beginnend mit den Hintergrundbildern auf dem Desktop und kleineren Bildschirmgrößen. Die roten Versionen der Hintergrundbilder finden Sie im Download-Ordner.

Zeilenabstand ändern

Fügen Sie der nächsten Zeile einen negativen oberen Rand hinzu.

• Höchste Marge: -15%

Textfarbe der Position des Personenmoduls ändern

Und vervollständigen Sie die Einstellungen für duplizierte Zeilen, indem Sie die Positionstextfarbe in den Einstellungen des Personenmoduls ändern.

• Positionstextfarbe: #ff233e

Letzte Zeile klonen

Sobald Sie die doppelte Testimonial-Zeile ausgefüllt haben, können Sie sie klonen.

Zeilenhintergrundbilder ändern

Ändern Sie die Hintergrundbilder der Zeile mit den gelben Versionen, die Sie im Download-Ordner finden.

Textfarben der Position des Personenmoduls ändern

Ändern Sie die Textfarbe der Position auch in den Einstellungen des Personenmoduls und Sie sind fertig!

• Positionstextfarbe: #ffbc1b

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir ein wunderschönes Motion-Testimonial-Layout geteilt, das Sie kostenlos herunterladen konnten! Wir haben benutzerdefinierte Hintergründe verwendet und konnten jedes einzelne Testimonial mit Divis Scroll-Effekten hervorheben. Auch das Design haben wir Schritt für Schritt neu erstellt! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.