5 fantastische Möglichkeiten, wie Sie das Testimonial-Modul von Divi gestalten können

Das einzige, wonach Besucher auf einer Website immer suchen, sind Testimonials. Sie stehen für Glaubwürdigkeit und beeinflussen den Entscheidungsprozess, den Leads oder potenzielle Kunden beim Besuch Ihrer Website haben. Neben der Sicherstellung, dass Sie starke Referenzen teilen können, spielt auch die visuelle ansprechende Gestaltung eine wichtige Rolle. In diesem Beitrag zeigen wir Ihnen 5 fantastische Möglichkeiten, wie Sie das Divi-Testimonial-Modul gestalten können, während Sie nur die integrierten Optionen verwenden.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Beispiel 1 neu erstellen

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Beginnen wir mit dem ersten Beispiel! Erstellen Sie eine neue Seite und fügen Sie einen regulären Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Zeit, Module hinzuzufügen! Das erste Modul, das wir benötigen, ist ein Bildmodul in Spalte 1. Laden Sie ein kariertes Bild Ihrer Wahl hoch.

Filter

Gehen Sie dann zu den Filtereinstellungen und spielen Sie mit den verschiedenen Effekten herum.

• Sättigung: 40%
• Kontrast: 126%

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das zweite und letzte Modul, das wir in Spalte 1 benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Gehen Sie dann zu den Schaltflächeneinstellungen und nehmen Sie einige Änderungen am Erscheinungsbild Ihrer Schaltfläche vor.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 14px
• Farbe 1: #5400ff
• Farbe 2: #00fff6
• Verlaufsrichtung: 100deg
• Breite des Tastenrahmens: 0px
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Fügen Sie auch einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Box Schatten

Und schließen Sie mit einem subtilen Kastenschatten ab.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.3)

Testimonial-Modul zu Spalte 2 hinzufügen

Inhalt hinzufügen

In der zweiten Spalte ist das einzige Modul, das wir benötigen, ein Testimonial-Modul. Fügen Sie den verschiedenen Feldern und dem Inhaltsfeld Inhalt hinzu.

Hintergrundfarbe

Als nächstes fügen Sie eine leicht transparente Hintergrundfarbe hinzu.

• Hintergrundfarbe: rgba(255,255,255,0.96)

Einstellungen für Angebotssymbole

Ändern Sie auch die Einstellungen für das Zitatsymbol.

• Farbe des Zitatsymbols: #0c0c0c
• Zitat Symbol Hintergrundfarbe: rgba(245,245,245,0)

Textkörpereinstellungen

Ändern Sie dann die Textkörpereinstellungen.

• Körperschriftart: Verdana
• Körperlinienhöhe: 1.7em

Abstand

Fahren Sie fort, indem Sie in den Abstandseinstellungen verschiedene benutzerdefinierte Rand- und Abstandswerte hinzufügen.

• Obere Marge: 15vw (Desktop & Tablet), 0vw (Telefon)
• Unterer Rand: 50px (Tablet & Telefon)
• Linker Rand: -10vw (Desktop & Tablet), 0vw (Telefon)
• Rechter Rand: 5vw
• Obere Polsterung: 70px
• Untere Polsterung: 70px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Fügen Sie auch einen linken Rand hinzu.

• Linker Randbreite: 7px
• Farbe des linken Rands: #5400ff

Box Schatten

Fügen Sie schließlich einen subtilen Kastenschatten hinzu, um das Testimonial-Modul zu formen.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(0,0,0,0.49)

Klonen Sie beide Module und platzieren Sie Duplikate in Spalte 3 und 4

Nachdem Sie die Module in Spalte 1 und 2 geändert haben, können Sie die Module klonen und die Duplikate in die beiden verbleibenden Spalten einfügen.

Bild ändern

Vergessen Sie nicht, das Bild Ihres zweiten Testimonials zu ändern.

Schaltflächenhintergrund mit Farbverlauf ändern

Ändern Sie auch den Hintergrund des Schaltflächenverlaufs.

• Farbe 1: #ff001d
• Farbe 2: #3700ff
• Verlaufsrichtung: 100deg

Ändern Sie die Farbe des Testimonial-Rahmens

Passen Sie die Rahmenfarbe an den neuen Farbverlaufshintergrund der Schaltfläche an.

• Farbe des linken Rands: #ff001d

Beispiel 2 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum zweiten Beispiel! Fügen Sie Ihrer Seite einen neuen regulären Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

Ohne Änderungen am Abschnitt vorzunehmen, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Fahren Sie fort, indem Sie die Zeileneinstellungen öffnen und einige Änderungen an den Größeneinstellungen vornehmen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie als Nächstes der Zeile und den Spalten einige benutzerdefinierte Auffüllungswerte hinzu.

• Linke Polsterung: 200px (Desktop), 30px (Tablet), 25px (Telefon)
• Rechte Polsterung: 200px (Desktop), 30px (Tablet), 25px (Telefon)
• Spalte 1 linker Abstand: 5px (Desktop), 0px (Tablet & Telefon)
• Spalte 1 Rechter Abstand: 2.5px (Desktop), 0px (Tablet & Telefon)
• Spalte 2 linker Abstand: 2.5px (Desktop), 0px (Tablet & Telefon)
• Spalte 2 Rechte Padding: 2.5px (Desktop), 0px (Tablet & Telefon)
• Spalte 3 linker Abstand: 2.5px (Desktop), 0px (Tablet & Telefon)
• Spalte 3 Rechte Padding: 5px (Desktop), 0px (Tablet & Telefon)

Videomodul zu Spalte 1 hinzufügen

Video-Link

Das erste Modul, das wir in Spalte 1 benötigen, ist ein Videomodul. Verlinken Sie dieses Video mit Ihrem Testimonial-Video.

Bildüberlagerung

Fügen Sie auch ein Bild-Overlay hinzu.

Testimonial-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das zweite und letzte in Spalte 1 benötigte Modul ist ein Testimonial-Modul. Beginnen Sie mit dem Hinzufügen der Testimonial-Details.

Angebotssymbol deaktivieren

Deaktivieren Sie dann das Zitatsymbol in den Elementeinstellungen.

• Angebotssymbol anzeigen: Nein

Hintergrundfarbe

Fügen Sie als nächstes einen weißen Hintergrund hinzu.

• Hintergrundfarbe: #ffffff

Textkörpereinstellungen

Ändern Sie auch die Textkörpereinstellungen.

• Textkörperfarbe: #000000
• Buchstabenabstand: -0.5px
• Körperlinienhöhe: 1.7em

Abstand

Fügen Sie in den Abstandseinstellungen einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Unterer Rand: 30px (Tablet & Telefon)
• Obere Polsterung: 50px
• Untere Polsterung: 50px
• Linke Polsterung: 80px
• Rechte Polsterung: 80px

Grenze

Wir geben dem Modul auch unten links und rechts abgerundete Ecken '30px'.

Box Schatten

Und schließlich geben wir dem Testimonial-Modul einen subtilen Kastenschatten, um etwas Tiefe zu erzeugen.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(0,0,0,0.3)

Module dreimal klonen und Duplikate in verbleibende Spalten platzieren

Sobald Sie beide Module in Spalte 1 geändert haben, klonen Sie sie zweimal und platzieren Sie die Duplikate in den beiden verbleibenden Spalten.

Ändern Sie Videolinks, Inhalt und Bildüberlagerungen

Vergessen Sie nicht, den Videolink, den Inhalt und die Bildüberlagerungen Ihrer neuen Testimonials zu ändern.

Beispiel 3 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum dritten Beispiel! Fügen Sie Ihrer Seite einen neuen regulären Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

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

Spalte 1 Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und fügen Sie der ersten Spalte eine Hintergrundfarbe hinzu.

• Spalte 1 Hintergrundfarbe: #f9f9f9

Spalte 2 Hintergrundfarbe

Die zweite Spalte benötigt eine weiße Hintergrundfarbe.

• Spalte 2 Hintergrundfarbe: #ffffff

Größe

Gehen Sie dann zu den Größeneinstellungen und entfernen Sie die Bundstegbreite.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 0px
• Rechte Polsterung: 0px
• Spalte 1 obere Polsterung: 100px
• Spalte 1 untere Polsterung: 100px
• Spalte 1 linker Abstand: 50px
• Spalte 1 rechts auffüllen: 50px
• Spalte 2 obere Polsterung: 100px
• Spalte 2 untere Polsterung: 100px
• Spalte 2 linker Abstand: 50px
• Spalte 2 rechts auffüllen: 50px

Grenze

Und geben Sie jedem der Ränder '20px'.

Box Schatten

Geben Sie Ihrer Reihe zu guter Letzt einen Kastenschatten.

• Stärke der Box-Schattenunschärfe: 80px

Testimonial-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Das erste Modul, das wir in Spalte 1 benötigen, ist ein Testimonial-Modul. Fügen Sie den Inhalt hinzu.

Bild hochladen

Fahren Sie fort, indem Sie in den Bildeinstellungen ein Bild hochladen.

Angebotssymbol deaktivieren

Deaktivieren Sie als Nächstes das Zitatsymbol.

• Angebotssymbol anzeigen: Nein

Hintergrundfarbe deaktivieren

Deaktivieren Sie auch die Hintergrundfarbe.

• Hintergrundfarbe verwenden: Nein

Textkörpereinstellungen

Fahren Sie fort, indem Sie zur Registerkarte "Design" gehen und einige Änderungen an den Textkörpereinstellungen vornehmen.

• Körperschrift: Abril Fatface
• Textkörperfarbe: #000000
• Körpertextgröße: 20px

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das zweite Modul, das wir in Spalte 1 benötigen, ist ein Textmodul. Fügen Sie die Testimonial-Kopie dem Inhaltsfeld hinzu.

Abstand

Gehen Sie dann zur Registerkarte Design und fügen Sie einen benutzerdefinierten oberen und unteren Rand hinzu.

• Oberer Rand: 50px
• Unterer Rand: 50px

Bildmodul zu Spalte 1 hinzufügen

Firmenlogo hochladen

Das dritte und letzte Modul, das wir in Spalte eins benötigen, ist ein Image-Modul. Mit diesem Modul können Sie das zum Testimonial gehörende Firmenlogo hinzufügen.

Alle Module klonen und Duplikate in Spalte 2 platzieren

Sobald Sie alle Module in Spalte 1 geändert haben, können Sie sie klonen. Platzieren Sie anschließend die Duplikate in der zweiten Spalte.

Testimonial-Bild und -Kopie ändern

Stellen Sie sicher, dass Sie den Inhalt des Testimonials zusammen mit den Bildern ändern.

Beispiel 4 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum vierten Beispiel! Fügen Sie Ihrer Seite einen neuen Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Spalte 1 Hintergrundbild

Öffnen Sie die Zeileneinstellungen und fügen Sie der ersten Spalte ein Hintergrundbild hinzu.

• Spalte 1 Hintergrundbild wiederholen: Keine Wiederholung

Spalte 3 Hintergrundbild

Machen Sie dasselbe für die dritte Spalte.

• Spalte 3 Hintergrundbild wiederholen: Keine Wiederholung

Größe

Gehen Sie dann zu den Größeneinstellungen und nehmen Sie einige Änderungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Entfernen Sie als nächstes die standardmäßige obere und untere Polsterung.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Testimonial-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der ersten Spalte ein Testimonial-Modul hinzufügen. Sobald Sie dies getan haben, fügen Sie die Testimonial-Details hinzu.

Hintergrund mit Farbverlauf

Geben Sie dem Modul auch einen Hintergrund mit Farbverlauf.

• Farbe 1: #8b32ff
• Farbe 2: #ff35ae
• Steigungsrichtung: 120deg

Einstellungen für Angebotssymbole

Nehmen Sie dann einige Änderungen an den Symboleinstellungen vor.

• Farbe des Zitatsymbols: #000000
• Zitat Symbol Hintergrundfarbe: #ffffff

Texteinstellungen

Und ändern Sie die Textfarbe in den Texteinstellungen.

• Textfarbe: Hell

Abstand

Um dem Modul eine quadratische Form zu geben, fügen wir in den Abstandseinstellungen einige benutzerdefinierte Auffüllungen hinzu.

• Obere Polsterung: 100px
• Untere Polsterung: 100px
• Linke Polsterung: 100px
• Rechte Polsterung: 100px

Box Schatten

Sie sollten dem Testimonial auch etwas Tiefe verleihen, indem Sie einen subtilen Kastenschatten verwenden.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: #ff35ae

Standardfilter

Die Idee hinter diesem Testimonial ist, dass das Testimonial verschwindet und das Bild angezeigt wird, sobald Sie mit der Maus darüber fahren. Um diesen Effekt zu erzielen, verwenden wir den Deckkraftfilter in den Filtereinstellungen. Stellen Sie sicher, dass die Standarddeckkraft „100%“ beträgt.

• Deckkraft: 100%

Hover-Filter

Und entfernen Sie alle Deckkraft beim Schweben.

• Deckkraft: 0%

Testimonial-Modul in Spalte 3 klonen

Sobald Sie das Testimonial-Modul in Spalte 1 geändert haben, klonen Sie es und platzieren Sie das Duplikat in der dritten Spalte.

Hintergrund mit Farbverlauf ändern

Ändern Sie als nächstes den Farbverlaufshintergrund des Duplikats.

• Farbe 1: #32b0ff
• Farbe 2: #89009e
• Steigungsrichtung: 120deg

Zeile klonen

Und klonen Sie die gesamte Zeile.

Testimonial-Farbverlaufshintergrund entfernen & Hintergrundfarbe ändern

Als nächstes müssen Sie den Verlaufshintergrund der Testimonial-Module entfernen und stattdessen eine weiße Hintergrundfarbe verwenden.

• Hintergrundfarbe: #ffffff

Testimonial-Texteinstellungen ändern

Nachdem Sie den Verlaufshintergrund entfernt haben, können Sie die Textfarbe in den Texteinstellungen ändern.

• Textfarbe: Dunkel

Beispiel #5 neu erstellen

Neuen Abschnitt hinzufügen

Auf zum nächsten und letzten Beispiel dieses Tutorials! Fügen Sie Ihrer Seite einen neuen regulären Abschnitt hinzu.

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe des Abschnitts.

• Hintergrundfarbe: #ededed

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie dann eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Nehmen Sie auch einige Änderungen an den Größeneinstellungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der ersten Spalte ein Textmodul hinzufügen. Fügen Sie die Testimonial-Kopie dem Inhaltsfeld hinzu.

Hintergrundfarbe

Und ändern Sie die Hintergrundfarbe des Moduls.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Textausrichtung in den Texteinstellungen.

• Textausrichtung: Mitte

Abstand

Fügen Sie auch einige benutzerdefinierte Randwerte hinzu.

• Linker Rand: 50 Pixel (Desktop und Tablet), 20 Pixel (Telefon)
• Rechter Rand: 50px (Desktop & Tablet), 20px (Telefon)

Testimonial-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Direkt unter dem Textmodul können Sie ein Testimonial-Modul hinzufügen. Füllen Sie die Felder Autorname, Berufsbezeichnung und Firmenname aus.

Bild hochladen

Laden Sie auch ein Bild in den Bildeinstellungen hoch.

Hintergrund mit Farbverlauf

Und fügen Sie einen Hintergrund mit Farbverlauf hinzu.

• Farbe 1: #5b32ff
• Farbe 2: #32e5f2
• Verlaufsrichtung: 100deg

Einstellungen für Angebotssymbole

Fahren Sie fort, indem Sie zur Registerkarte Design gehen und die Einstellungen für das Angebotssymbol ändern.

• Farbe des Zitatsymbols: #000000
• Zitat Symbol Hintergrundfarbe: #ffffff

Texteinstellungen

Ändern Sie auch die Textausrichtung in den Texteinstellungen.

• Textausrichtung: Mitte
• Textfarbe: Hell

Textkörpereinstellungen

Spielen Sie als Nächstes mit den Textkörpereinstellungen herum.

• Schriftstärke des Körpers: Ultra Bold
• Körperschriftart: Großbuchstaben
• Körpertextgröße: 15px
• Buchstabenabstand: -0.5px
• Körperlinienhöhe: 2.1em

Abstand

Fügen Sie einen negativen oberen Rand hinzu, um die Überlappung zwischen diesem Modul und dem Textmodul zu erstellen.

• Oberer Rand: -25px

Box Schatten

Und beenden Sie das Testimonial-Design, indem Sie dem Testimonial-Modul einen subtilen Kastenschatten geben.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.3)

Klonen Sie beide Module zweimal und platzieren Sie Duplikate in den verbleibenden Spalten

Nachdem Sie die Module in Spalte 1 geändert haben, können Sie sie zweimal klonen und die Duplikate in die beiden verbleibenden Spalten einfügen.

Testimonial-Inhalt und Bilder ändern

Stellen Sie sicher, dass Sie die in den Modulen verwendeten Inhalte und Bilder ändern.

Testimonial-Verlaufshintergründe ändern

Zusammen mit den Steigungshintergründen.

• Farbe 1: #a632ff
• Farbe 2: #f7a131

• Farbe 1: #3281ff
• Farbe 2: #2cf483

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen 5 fantastische Möglichkeiten gezeigt, wie Sie das Divi Testimonial-Modul gestalten können. Wir haben Sie Schritt für Schritt durch das Tutorial geführt und Testimonials erstellt, die Sie auf praktisch jeder Website verwenden können, an der Sie gerade arbeiten. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.