So erstellen Sie mit Divi . einzigartige Hover-Überlappungen für Testimonials

Veröffentlicht: 2018-11-14

Testimonials sind für viele Websites eine große Sache. Sie zeigen Fachwissen und Besucher suchen sie normalerweise, wenn sie herausfinden möchten, wie glaubwürdig ein Unternehmen oder eine Person ist. Aus diesem Grund ist es wichtig, darüber nachzudenken, wie Sie Testimonials auf Ihrer Website visuell präsentieren.

Mit Divi können Sie Ihre Testimonials genau so anzeigen, wie Sie es möchten. Um Sie zu inspirieren, zeigen wir Ihnen, wie Sie mit Hover-Überlappungen eine atemberaubende und einzigartige Möglichkeit schaffen, Testimonials zu präsentieren.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Endergebnis.

schweben überlappt

Neuen Abschnitt hinzufügen

Lass uns anfangen! Fügen Sie eine neue Seite hinzu oder öffnen Sie eine vorhandene und fügen Sie einen neuen regulären Abschnitt hinzu.

schweben überlappt

Neue Zeile hinzufügen 1

Spaltenstruktur

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

schweben überlappt

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen.

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

schweben überlappt

Abstand

Fügen Sie auch einige benutzerdefinierte Abstandswerte hinzu.

Obere Polsterung: 0px
Untere Polsterung: 0px
Spalte 2 linke Polsterung: 2vw (Desktop), 3vw (Tablet & Telefon)
Spalte 2 Rechte Polsterung: 11vw (Desktop), 3vw (Tablet & Telefon)

schweben überlappt

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Zeit, die verschiedenen Module hinzuzufügen! Beginnen Sie mit einem Bildmodul in der ersten Spalte. Laden Sie ein Porträtbild Ihrer Wahl hoch.

schweben überlappt

Bildausrichtung

Öffnen Sie die Bildeinstellungen und ändern Sie die Bildausrichtung.

Bildausrichtung: Links

schweben überlappt

Größe

Ändern Sie als nächstes die Größeneinstellungen.

Breite: 78 % (Desktop), 70 % (Tablet & Telefon)
Modulausrichtung: Links

schweben überlappt

Hover Overlap-Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie direkt unter dem Bildmodul ein Textmodul hinzu. Geben Sie die Daten der Person in das Inhaltsfeld ein.

schweben überlappt

Standardhintergrund

Fahren Sie fort, indem Sie eine Hintergrundfarbe hinzufügen.

Hintergrundfarbe: rgba(255,255,255,0)

schweben überlappt

Hintergrund schweben

Fügen Sie beim Schweben eine andere Hintergrundfarbe hinzu.

Hintergrundfarbe: #0f1bff

schweben überlappt

Standardtexteinstellungen

Ändern Sie dann die Texteinstellungen.

Textfarbe: #ffffff
Textgröße: 0px
Textzeilenhöhe: 0px

schweben überlappt

Hover-Texteinstellungen

Nehmen Sie einige Anpassungen für die Texteinstellungen beim Schweben vor.

Textgröße: 19px
Textzeilenhöhe: 2em

schweben überlappt

Standardeinstellungen für Überschriftentext

Die Einstellungen für den Überschriftentext müssen ebenfalls geändert werden.

Überschrift 3 Schriftstärke: Ultra Bold
Überschrift 3 Schriftstil: Großbuchstaben
Überschrift 3 Textfarbe: #ffffff
Überschrift 3 Textgröße: 0px
Überschrift 3 Zeilenhöhe: 0em

schweben überlappt

Hover-Überschrift-Texteinstellungen

Fügen Sie beim Hover verschiedene Werte hinzu.

Überschrift 3 Textgröße: 35px
Überschrift 3 Zeilenhöhe: 1.1em

schweben überlappt

Abstand

Gehen Sie als Nächstes zu den Abstandseinstellungen und fügen Sie einige Werte hinzu.

Oberer Rand: -100px
Linker Rand: 50px
Rechter Rand: 50px
Obere Polsterung: 40px
Untere Polsterung: 60px

schweben überlappt

Textausrichtung ändern

Gehen Sie zurück zu den Texteinstellungen und ändern Sie die Textausrichtung.

Textausrichtung: Mitte

schweben überlappt

Standard-Box-Schatten

Fügen Sie dann dem Textmodul einen Standardfeldschatten hinzu. Dieser Boxschatten wird Teil des Gesamtdesigns sein.

Horizontale Position des Kastenschattens: 1000px
Vertikale Position des Boxschattens: -400px
Stärke der Box-Schattenunschärfe: 0px
Stärke der Box-Schattenausbreitung: 250px
Schattenfarbe: rgba(175,175,175,0,13)

schweben überlappt

Hoverbox-Schatten

Um den speziellen Hover-Überlappungseffekt zu erzeugen, fügen Sie auch einen Hover-Box-Schatten hinzu.

Horizontale Position des Boxschattens: -73px
Vertikale Position des Boxschattens: -49px
Stärke der Box-Schattenunschärfe: 0px
Stärke der Box-Schattenausbreitung: 10px
Schattenfarbe: rgba(255,182,12,0.53)

schweben überlappt

Übergänge

Um einen reibungslosen Übergang zu erstellen, ändern Sie die Übergangsdauer auf der Registerkarte Erweitert.

Übergangsdauer: 1000ms

schweben überlappt

Testimonial-Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

In der zweiten Spalte benötigen wir als erstes ein Titel-Textmodul. Fahren Sie fort und fügen Sie eine Zusammenfassung des Testimonials hinzu.

schweben überlappt

Überschriftstexteinstellungen

Ändern Sie dann die Einstellungen für den Überschriftentext.

Überschrift 3 Schriftart: Goudy Bookletter 1911
Überschrift 3 Textausrichtung: Links
Überschrift 3 Textgröße: 3.5vw (Desktop), 40px (Tablet), 30px (Telefon)
Überschrift 3 Zeilenhöhe: 1.1em

schweben überlappt

Abstand

Fahren Sie fort, indem Sie einige benutzerdefinierte Abstandswerte hinzufügen.

Obere Marge: 7vw (Desktop), 100px (Tablet), 50px (Telefon)

schweben überlappt

Beschreibungstextmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie ein weiteres Textmodul mit dem gesamten Testimonial direkt unter dem Titel Textmodul hinzu.

schweben überlappt

Texteinstellungen

Nachdem Sie das Testimonial hinzugefügt haben, können Sie die Texteinstellungen ändern.

Textzeilenhöhe: 2.2em
Textausrichtung: Links

schweben überlappt

Abstand

Fügen Sie auch einen benutzerdefinierten oberen Rand hinzu.

Obere Marge: 4vw (Desktop), 50px (Tablet & Telefon)

schweben überlappt