So fügen Sie den Bios von Teammitgliedern in Divi . einen Hover-Effekt hinzu

Es ist kein Geheimnis, dass über Seiten großartig sind, um Klicks auf Ihrer Website zu erstellen. Es ist auch diese eine Art von Seite, die den menschlichen Teil des Unternehmens hinter der Website hervorhebt. Dieses Wissen macht uns bewusst, dass es wichtig ist, auf die Art und Weise zu achten, wie wir Seiten strukturieren, welche Art von Informationen wir teilen und wie wir Interaktionen erstellen. Eines der Dinge, die Sie tun können, um die Erfahrung mit der About-Seite zu verbessern, besteht darin, einen Abschnitt für Teammitglieder bereitzustellen, der Ihre Mitarbeiter ins Rampenlicht rückt. Darüber hinaus können Sie den Fotos von Teammitgliedern nur mit den integrierten Optionen von Divi einen Bio-Hover-Effekt hinzufügen. Auf diese Weise können Sie auf der Seite, an der Sie arbeiten, Platz sparen und eine Hover-Interaktion zwischen Ihnen und Ihren Besuchern erstellen.

In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie dorthin gelangen. Sobald Sie den Ansatz verstanden haben, können Sie den Designstil an Ihre eigenen Bedürfnisse anpassen.

Lasst uns anfangen!

Vorschau

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

Desktop

Handy, Mobiltelefon

Beginnen wir mit der Neuerstellung

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Abstand

Erstellen Sie eine neue Seite oder öffnen Sie eine vorhandene und fügen Sie einen neuen Abschnitt mit den folgenden benutzerdefinierten Abstandswerten hinzu:

• Obere Polsterung: 100px
• Untere Polsterung: 100px

Zeile 1 hinzufügen

Spaltenstruktur

Nachdem Sie den benutzerdefinierten Abstand zu Ihrem Abschnitt hinzugefügt haben, können Sie die Abschnittseinstellungen schließen und eine neue Zeile mit nur einer Spalte hinzufügen.

Textmodul hinzufügen

H2-Inhalt hinzufügen

Fügen Sie der Spalte ein Titel-Textmodul mit einer H2-Kopie Ihrer Wahl hinzu.

H2-Texteinstellungen

Gehen Sie dann zu den H2-Texteinstellungen und nehmen Sie einige Änderungen am Erscheinungsbild der Kopie vor.

• Überschrift 2 Schriftart: Cinzel
• Überschrift 2 Schriftstil: Kapitälchen
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textgröße: 70px

Trennmodul hinzufügen

Sichtweite

Fahren Sie fort, indem Sie ein neues Trennmodul direkt unter dem Titel Textmodul hinzufügen.

• Teiler anzeigen: Ja

Teilerfarbe

Gehen Sie zum Design-Tab, öffnen Sie die Farbeinstellungen und ändern Sie die Farbe Ihres Teilers entsprechend:

• Teilerfarbe: #333333

Größe

Als Nächstes verringern wir die Größe des Teilers und zentrieren ihn.

• Breite: 26%
• Modulausrichtung: Mitte

Zeile 2 hinzufügen

Spaltenstruktur

Direkt unter der vorherigen Zeile, die Sie hinzugefügt haben, fahren Sie fort und fügen Sie eine neue Zeile mit drei gleich großen Spalten hinzu.

Größe

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

• Benutzerdefinierte Breite verwenden: Ja
• Einheit: PX
• Benutzerdefinierte Breite: 2000px
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte Rand- und Abstandswerte hinzu.

• Oberer Rand: 50px
• Unterer Rand: 50px
• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 5px
• Rechte Polsterung: 5px
• Spalte 1, 2 & 3 Linker Abstand: 5px
• Spalte 1, 2 & 3 Rechte Padding: 5px

Box Schatten

Wir verleihen unserer Zeile auch ein wenig Tiefe, indem wir ihr einen Kastenschatten mit den folgenden Einstellungen hinzufügen:

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

Bildmodul zu Spalte 1 hinzufügen

Bild in Bildmodul hochladen

Zeit, Module hinzuzufügen! Um den Bio-Hover-Effekt zu erzielen, benötigen wir insgesamt zwei Module; ein Bildmodul und ein Blurb-Modul. Das Bildmodul enthält das Bild des Teammitglieds, das Sie präsentieren möchten. Das Blurb-Modul hingegen wird verwendet, um das Symbol in der linken unteren Ecke und die Bio beim Schweben hinzuzufügen. Fügen Sie der ersten Spalte ein Bildmodul mit einem quadratischen Bild hinzu.

Filter

Das Design, das wir erstellen, ist vollständig in Graustufen. Um diese Graustufen unserem Bild hinzuzufügen, gehen Sie zu den Filtereinstellungen und entfernen Sie die gesamte Sättigung.

• Sättigung: 0%

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie direkt unter dem Bildmodul in Spalte 1 ein neues Blurb-Modul hinzufügen. Fügen Sie den Namen des Teammitglieds in das Titelfeld ein und geben Sie weitere Informationen über das Teammitglied in das Inhaltsfeld ein.

Symbol auswählen

Als nächstes wählen wir ein gewünschtes Symbol aus, das den Besuchern zeigt, dass es mehr als nur ein Bild gibt.

Standardhintergrundfarbe

Dann wählen wir eine vollständig transparente Hintergrundfarbe.

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

Hintergrundfarbe schweben

Und wir ändern diese Farbe beim Schweben.

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

Standardsymboleinstellungen

Wir möchten ein auffälliges Symbol, das den Besuchern hilft, zu verstehen, dass sie mit der Maus darauf fahren können. Ändern Sie die Symboleinstellungen, um ein solches Symbol zu erhalten.

• Symbolfarbe: #ffffff
• Kreissymbol: Ja
• Kreisfarbe: #000000
• Symbolplatzierung: Links
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 50px

Hover-Symboleinstellungen

Wir möchten jedoch nicht, dass das Symbol beim Hover angezeigt wird. Deshalb verwenden wir stattdessen eine vollständig transparente Farbe.

• Symbolfarbe: rgba(255,255,255,0)
• Kreisfarbe: rgba(255,255,255,0)

Standardeinstellungen für den Titeltext

Gehen Sie als Nächstes zu den Einstellungen für den Titeltext und nehmen Sie einige Änderungen vor.

• Titelschriftart: Cinzel
• Schriftstärke des Titels: Fett
• Titelschriftart: Kapitälchen
• Titeltextfarbe: #000000
• Titeltextgröße: 0px

Hover-Titeltexteinstellungen

Ändern Sie die Textgröße beim Hover.

• Titeltextgröße: 30px

Standardeinstellungen für Textkörper

Ändern Sie auch die Textkörpereinstellungen.

• Körperschriftart: Open Sans
• Textkörperfarbe: #000000
• Körpertextgröße: 0px
• Körperlinienhöhe: 1.8em

Hover-Textkörper-Einstellungen

Und wieder ändern Sie die Größe des Textkörpers beim Bewegen des Mauszeigers.

• Körpertextgröße: 14px

Standardabstand

Zu guter Letzt müssen wir eine Überlappung zwischen dem Blurb-Modul und dem Image-Modul erstellen, indem wir einen negativen oberen Rand verwenden.

• Obere Marge: -3,7 vw (Desktop), -9 vw (Tablet & Telefon)
• Unterer Rand: 1,5 vw (Tablet), 2 vw (Telefon)

Hover-Abstand

Ändern Sie die benutzerdefinierten Werte für Rand und Abstand beim Bewegen des Mauszeigers.

• Obere Marge: -11,38 vw
• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Rechte Polsterung: 50px

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

Wir sind fertig mit der Erstellung unseres ersten Bio-Hover-Effekts. Um Zeit zu sparen, können wir einfach beide Module in Spalte 1 zweimal klonen und die Duplikate in die beiden verbleibenden Spalten platzieren.

Bild und Inhalt des Blurb-Moduls ändern

Denken Sie daran, das Bild im Bildmodul und die Kopie im Blurb-Modul zu ändern, um den Teammitgliederbereich fertigzustellen!

Vorschau

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie nur mit den integrierten Optionen von Divi einen Bio-Hover-Effekt beim Hover für Fotos von Teammitgliedern erstellen. Wir haben erwähnt, wie wichtig es ist, gute Seiten zu erstellen, da sie eine der am häufigsten besuchten Seiten sind. Die Verwendung von Bio-Hover-Effekten für Fotos von Teammitgliedern ermöglicht es Ihnen nicht nur, Ihre About-Seite auf die nächste Ebene zu bringen, sondern auch eine Interaktion mit Ihren Besuchern zu schaffen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!