Umwandeln von Textmodulen in eindeutige Personenbeschreibungen beim Hover mit Divi

Veröffentlicht: 2018-12-05

Sie suchen eine kreative Art und Weise Beschreibungen zu den Bildern hinzufügen? Mit den integrierten Hover-Optionen von Divi ist es jetzt einfacher denn je. Sie können diesen Ansatz für verschiedene Zwecke auf Ihrer Website verwenden, von Erfahrungsberichten bis hin zu Beschreibungen von Teammitgliedern und mehr. In diesem Tutorial gehen wir auf 4 verschiedene Beispiele ein, die Ihnen helfen, ein beeindruckendes Webdesign zu erzielen. Wir erstellen alle vier Beispiele nur mit den integrierten Optionen von Divi.

Lasst uns anfangen!

Vorschau

Bevor wir in die Schritt-für-Schritt-Anleitung eintauchen, werfen wir einen kurzen Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Personenbeschreibung

Handy, Mobiltelefon

Personenbeschreibung

Allgemeine Schritte

Neuen Abschnitt hinzufügen

Damit dieses Tutorial einfacher zu befolgen ist, beginnen wir mit einigen allgemeinen Schritten. Danach behandeln wir die Schritte, die für jedes der Beispiele einzigartig sind. Beginnen Sie mit dem Hinzufügen eines neuen regulären Abschnitts zu einer neuen oder bestehenden Seite.

Personenbeschreibung

Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort und wählen Sie die folgende Spaltenstruktur (Sie können dies auch mit anderen Spaltenstrukturen durchführen):

Personenbeschreibung

Spalte 1 Hintergrundbild

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie der ersten Spalte ein Hintergrundbild hinzu.

Spalte 1 Hintergrundbild wiederholen: Keine Wiederholung

Personenbeschreibung

Größe

Fahren Sie fort, indem Sie die Größeneinstellungen der Zeile ändern.

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

Personenbeschreibung

Abstand

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

Obere Polsterung: 150px
Untere Polsterung: 150px

Personenbeschreibung

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Um die Beschreibung beim Hover anzuzeigen, verwenden wir für jedes der vier Beispiele ein Textmodul. Fahren Sie fort und fügen Sie dieses Textmodul derselben Spalte hinzu, zu der Sie ein Hintergrundbild hinzugefügt haben.

Personenbeschreibung

Standardtexteinstellungen

Gehen Sie dann zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

Textfarbe: rgba(255,255,255,0)
Textgröße: 0.7vw (Desktop), 12px (Tablet & Telefon)
Textausrichtung: Begründen

Personenbeschreibung

Hover-Texteinstellungen

Ändern Sie die Textfarbe beim Schweben.

Textfarbe: #000000

Personenbeschreibung

Standardeinstellungen für Überschriftentext

Ändern Sie auch die H3-Texteinstellungen.

Überschrift 3 Schriftstärke: Ultra Bold
Überschrift 3 Schriftstil: Großbuchstaben
Überschrift 3 Textfarbe: rgba(255,255,255,0)
Überschrift 3 Textgröße: 2.5vw (Desktop), 40px (Tablet), 30px (Telefon)
Überschrift 3 Zeilenhöhe: 2.2em

Personenbeschreibung

Hover-Überschrift-Texteinstellungen

Und wenden Sie beim Schweben eine andere H3-Textfarbe an.

Überschrift 3 Textfarbe: #000000

Personenbeschreibung

Zeile dreimal klonen

Nachdem wir nun alle allgemeinen Schritte durchlaufen haben, können wir die erstellte Zeile dreimal klonen, sodass wir für jedes der vier Beispiele eine Zeile haben. Stellen Sie sicher, dass Sie zu Beginn jedes Beispiels mit der nächsten Zeile fortfahren.

Personenbeschreibung

Beispiel 1

Personenbeschreibung

Textmodul ändern

Standardhintergrundfarbe

Beginnen wir mit dem ersten Beispiel! Öffnen Sie das Textmodul in der ersten Spalte und fügen Sie eine Hintergrundfarbe hinzu.

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

Personenbeschreibung

Hintergrundfarbe schweben

Ändern Sie diese Hintergrundfarbe beim Schweben.

Hintergrundfarbe: rgba(255,255,255,0.73)

Personenbeschreibung

Standardabstand

Fügen Sie als nächstes einen benutzerdefinierten Rand und eine Auffüllung hinzu.

Oberer Rand: -500px
Unterer Rand: 500px
Obere Polsterung: 250px
Untere Polsterung: 250px
Linke Polsterung: 70px
Rechte Polsterung: 70px

Personenbeschreibung

Hover-Abstand

Ändern Sie die Werte beim Hover.

Oberer Rand: 0px
Unterer Rand: 0px
Obere Polsterung: 100px
Untere Polsterung: 100px

Personenbeschreibung

Übergänge

Erstellen Sie schließlich einen reibungslosen Übergang, indem Sie die Übergangsdauer auf der Registerkarte „Erweitert“ erhöhen.

Übergangsdauer: 1000ms

Personenbeschreibung