So erstellen Sie benutzerdefinierte Testimonial-Tabs mit Divi (KOSTENLOSER Download!)

Veröffentlicht: 2020-11-04

Testimonials sind für viele Unternehmen eines der wichtigsten Argumente, um neue Kunden zu gewinnen. Das bedeutet, dass es nie umsonst ist, den Testimonials auf Ihrer Website ein wenig zusätzliche Aufmerksamkeit zu schenken. Innerhalb von Divi gibt es viele verschiedene Möglichkeiten, Testimonials zu teilen, zum Beispiel mit dem Divi Testimonial Module. Wenn Sie jedoch nach einem interaktiveren Ansatz suchen, werden Sie dieses Tutorial lieben. Wir zeigen Ihnen, wie Sie in Divi benutzerdefinierte Testimonial-Tabs erstellen. Sobald jemand links über das Blurb-Modul schwebt, erscheint rechts ein entsprechendes Testimonial. Die Übergangseffekte in diesem Design sind ebenfalls nahtlos, was Ihnen hilft, Ihrer Website ein zusätzliches Gefühl der Anpassung zu verleihen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

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

Desktop

Testimonial-Tabs

Handy, Mobiltelefon

Testimonial-Tabs

Laden Sie das benutzerdefinierte Testimonial-Tabs-Layout KOSTENLOS herunter

Um das kostenlose benutzerdefinierte Layout für Testimonial-Tabs 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.

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 fügen Sie eine Hintergrundfarbe hinzu.

Hintergrundfarbe: #ffefdb

Testimonial-Tabs

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu.

Höchste Marge: 5%
Untere Marge: 5%
Linker Rand: 5%
Rechte Marge: 5%
Linke Polsterung: 5%
Rechte Polsterung: 5%

Testimonial-Tabs

Grenze

Fügen Sie auch einige abgerundete Ecken hinzu.

Alle Ecken: 20px

Testimonial-Tabs

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie die erste Zeile mit der folgenden Spaltenstruktur zum Abschnitt hinzufügen:

Testimonial-Tabs

Abstand

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie einen unteren Rand hinzu.

Untere Marge: 3%

Testimonial-Tabs

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem Textmodul, das einige H2-Inhalte enthält.

Testimonial-Tabs

H2-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H2-Texteinstellungen entsprechend:

Überschrift 2 Schriftart: Montserrat
Überschrift 2 Schriftstärke: Halbfett
Überschrift 2 Textgröße: 31px
Überschrift 2 Buchstabenabstand: -1px

Testimonial-Tabs

Trennmodul zur Spalte hinzufügen

Sichtweite

Direkt unter dem Textmodul fügen wir ein Divider-Modul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

Teiler anzeigen: Ja

Testimonial-Tabs

Leitung

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Linienfarbe in Weiß.

Linienfarbe: #ffffff

Testimonial-Tabs

Größe

Ändern Sie auch die Größeneinstellungen.

Teilergewicht: 10px
Breite: 14%
Höhe: 10px

Testimonial-Tabs

Grenze

Und vervollständigen Sie die Moduleinstellungen, indem Sie den Rahmeneinstellungen einige abgerundete Ecken hinzufügen.

Alle Ecken: 10px

Testimonial-Tabs

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe. Verwenden Sie die folgende Spaltenstruktur:

Testimonial-Tabs

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und gleichen Sie die Spaltenhöhen in den Größeneinstellungen an.

Spaltenhöhen ausgleichen: Ja

Testimonial-Tabs

Spalte 2 Einstellungen

Hintergrundfarbe

Öffnen Sie dann die Einstellungen von Spalte 2 und wenden Sie eine Hintergrundfarbe an.

Hintergrundfarbe: #fffbf9

Testimonial-Tabs

Abstand

Wechseln Sie zur Registerkarte "Design" der Spalte und wenden Sie bei kleineren Bildschirmgrößen einige obere und untere Abstände an.

Obere Polsterung:
- Desktop: Keine
- Tablet & Telefon: 300px
Bodenpolsterung
- Desktop: Keine
- Tablet & Telefon: 300px

Testimonial-Tabs

Grenze

Fügen Sie auch einige abgerundete Ecken hinzu.

Alle Ecken: 10px

Testimonial-Tabs

Fügen Sie Blurb-Modul Nr. 1 zu Spalte 1 hinzu

Inhalt hinzufügen

Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem ersten Blurb-Modul in Spalte 1. Fügen Sie Inhalte Ihrer Wahl hinzu.

Testimonial-Tabs

Bild im Verhältnis 1:1 hochladen

Laden Sie als Nächstes ein Bild mit einem Seitenverhältnis von 1:1 hoch.

Testimonial-Tabs

Hintergrundfarbe

Wenden Sie dann die folgende Hintergrundfarbe an:

Hintergrundfarbe: #d5d6ea

Testimonial-Tabs

Bildeinstellungen

Nehmen Sie auch Änderungen an den Bildeinstellungen vor.

Bild-/Symbolplatzierung: Links
Bild abgerundete Ecken: 100px

Testimonial-Tabs

Einstellungen für Titeltext

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

Titelschriftart: Montserrat
Schriftstärke des Titels: Semi Bold
Abstand der Titelbuchstaben: -1px

Testimonial-Tabs

Textkörpereinstellungen

Wir ändern auch die Textkörpereinstellungen.

Körperschriftart: Lato
Körpertextgröße: 13px

Testimonial-Tabs

Abstand

Als Nächstes fügen wir etwas Platz um den Inhalt unseres Moduls hinzu, indem wir die folgenden Füllwerte anwenden:

Obere Polsterung: 5%
Untere Polsterung: 5%
Linke Polsterung: 5%
Rechte Polsterung: 5%

Testimonial-Tabs

Grenze

Fügen Sie auch einige abgerundete Ecken hinzu.

Alle Ecken: 10px

Testimonial-Tabs

Animation

Standardmäßig wird auf das Bild des Blurb-Moduls ein Animationseffekt angewendet. Wir entfernen diese Animation in den Animationseinstellungen.

Bild-/Symbolanimation: Keine Animation

Testimonial-Tabs

CSS-ID

Um das Design der Testimonial-Registerkarte zu erstellen, müssen wir am Ende dieses Tutorials etwas Code hinzufügen. Zur Vorbereitung fügen wir dem erweiterten Tab des Blurb-Moduls eine CSS-ID hinzu.

CSS-ID: testimonial-person-1

Testimonial-Tabs

Bild- und Titel-CSS überblenden

Wir verwenden auch auf der Registerkarte "Erweitert" zwei Zeilen CSS-Code. Einer für das Klappenbild und der andere für den Klappentitel.

width: 25% !important;

margin-top: 25px;

Testimonial-Tabs

Blurb-Modul dreimal klonen

Sobald Sie das erste Blurb-Modul abgeschlossen haben, können Sie es dreimal klonen.

Testimonial-Tabs

Inhalt & Bilder ändern

Stellen Sie sicher, dass Sie den Inhalt und die Bilder für jedes duplizierte Blurb-Modul ändern.

Testimonial-Tabs

Hintergrundfarben ändern

Zusammen mit den Hintergrundfarben.

Duplikat 1: #fffed6
Duplikat 2: #d7ecd9
Duplikat 3: #f5d5cb

Testimonial-Tabs

CSS-IDs ändern

Und natürlich die CSS-IDs. Verwenden Sie eine fortlaufende Nummerierung.

Duplikat 1: Testimonial-Person-2
Duplikat 2: Testimonial-Person-3
Duplikat 3: Testimonial-Person-4

Testimonial-Tabs

Angebotstextmodul zu Spalte 2 hinzufügen

Angebot zum Inhaltsfeld hinzufügen

Weiter zur zweiten Spalte. Dort benötigen wir als erstes Modul ein Textmodul mit Anführungszeichen.

Testimonial-Tabs

Texteinstellungen

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

Textschrift: Playfair Display
Textfarbe: #ffefdb
Textgröße: 200px
Textzeilenhöhe: 1em

Testimonial-Tabs

Position

Positionieren Sie auch das Modul neu.

Position: Absolut
Ort: Oben links
Horizontaler Versatz: 5%

Testimonial-Tabs

Testimonial-Textmodul zu Spalte 2 hinzufügen

Testimonial-Inhalt hinzufügen

Weiter zum nächsten Textbaustein. Dieser wird unserem ersten Testimonial gewidmet sein. Das Testimonial, das Sie in das Inhaltsfeld einfügen, muss mit dem ersten Blurb-Modul in Spalte 1 übereinstimmen.

Testimonial-Tabs

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls entsprechend:

Textschriftart: Lato
Textfarbe: #000000
Textgröße: 20px
Textzeilenhöhe: 2.1em
Textausrichtung: Mitte

Testimonial-Tabs

Größe

Stellen Sie sicher, dass die Breite auch auf „100%“ eingestellt ist.

Breite: 100%

Testimonial-Tabs

Abstand

Fügen Sie dann den Abstandseinstellungen einige benutzerdefinierte Rand- und Abstandswerte hinzu.

Höchste Marge: 30%
Linke Polsterung: 10%
Rechte Polsterung: 10%

Testimonial-Tabs

CSS-ID

Und fügen Sie der Registerkarte "Erweitert" eine CSS-ID hinzu. Die Zahl am Ende dieser CSS-ID muss mit der Zahl am Ende der CSS-ID des entsprechenden Blurb-Moduls übereinstimmen.

CSS-ID: testimonial-copy-1

Testimonial-Tabs

Textmodul dreimal klonen

Nachdem Sie das erste Testimonial-Textmodul fertiggestellt haben, können Sie es dreimal klonen.

Testimonial-Tabs

Testimonial-Inhalt ändern

Stellen Sie sicher, dass Sie den Testimonial-Inhalt in den duplizierten Modulen ändern.

Testimonial-Tabs

CSS-IDs ändern

Zusammen mit den CSS-IDs. Stellen Sie sicher, dass Sie einer fortlaufenden Reihenfolge folgen.

Duplikat 1: Testimonial-Kopie-2
Duplikat 2: Testimonial-Kopie-3
Duplikat 3: Testimonial-Kopie-4

Testimonial-Tabs

CSS-Klasse zum ersten Testimonial-Textmodul hinzufügen

Und wir müssen dem Testimonial, das wir zu Beginn aktivieren möchten, eine CSS-Klasse hinzufügen. In diesem Fall ist das der erste.

CSS-Klasse: show-testimonial

Testimonial-Tabs

Codemodul unter Teilermodul hinzufügen (Zeile 1)

Jetzt, da wir alle Elemente an Ort und Stelle haben, ist es an der Zeit, die Magie zu verwirklichen. Fügen Sie direkt unter dem Trennmodul in der ersten Zeile des Abschnitts ein neues Codemodul hinzu.

Testimonial-Tabs

CSS-Code hinzufügen

Fügen Sie die folgenden Zeilen CSS-Code zwischen Style-Tags ein, wie Sie im Druckbildschirm unten sehen können.

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

Testimonial-Tabs

JQuery-Code hinzufügen

Als nächstes fügen Sie die folgenden Zeilen des JQuery-Codes zwischen Skript-Tags ein, wie Sie im Druckbildschirm unten sehen können, und fertig!

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

Testimonial-Tabs

Vorschau

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

Desktop

Testimonial-Tabs

Handy, Mobiltelefon

Testimonial-Tabs

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein interaktives Testimonial-Design für jede Art von Website erstellen, die Sie erstellen. Genauer gesagt haben wir Ihnen gezeigt, wie Sie benutzerdefinierte Testimonial-Tabs erstellen, die ausgelöst werden, sobald jemand mit der Maus über eines der Blurb-Module auf der linken Seite fährt. Sie konnten die JSON-Datei auch kostenlos herunterladen! 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.