Sie möchten mit DIVI eine Biografie Ihrer Teammitglieder mit Hover-Effekt erstellen?
Es ist kein Geheimnis, dass die Seiten Über uns sind ideal zum Erstellen von Interaktionen auf Ihrem Website. Es ist auch diese Art von Seite, die den menschlichen Teil des Unternehmens dahinter hervorhebt Website.
Eines der Dinge, die Sie tun können, um sich zu verbessern Erfahrung der Seite Über uns ist es, einen Bereich für Teammitglieder bereitzustellen, der Ihre Mitarbeiter ins Rampenlicht rückt.
Lesen Sie auch: Divi: So erstellen Sie einen transparenten und klebrigen globalen Header
In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie es geht. Sobald Sie den Ansatz verstanden haben, können Sie ihn an Ihre eigenen Bedürfnisse anpassen.
Lassen Sie uns gehen!
Übersicht
Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.
Desktop-Computer
Mobil
Einen 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 Füllwerten hinzu:
- Interner Rand (oben und unten): 100px
Zeile 1 hinzufügen
Struktur der Spalte
Sobald Sie die benutzerdefinierten Auffüllungen zu Ihrem Abschnitt hinzugefügt haben, können Sie die Abschnittseinstellungen schließen und eine neue Zeile mit einer einzelnen Spalte hinzufügen.
Fügen Sie ein Textmodul hinzu
Fügen Sie der Spalte ein Textmodul mit einem Titel Ihrer Wahl in H2-Größe hinzu.
H2-Texteinstellungen
Gehen Sie als Nächstes zu den H2-Texteinstellungen und nehmen Sie einige Änderungen vor.
- Kopfzeilenschrift: Cinzel
- Header Copy Style: Tt (Siehe Capture)
- Textausrichtung: Zentriert
- Kopfzeilentextgröße: 70px
Fügen Sie ein Trennmodul hinzu
Sichtbarkeit
Fahren Sie fort, indem Sie ein neues Trennmodul direkt unter dem Textmodul hinzufügen.
- Teiler anzeigen: Ja
Teilerfarbe
Gehen Sie zur Registerkarte Stil, öffnen Sie die Farbeinstellungen und ändern Sie die Trennfarbe entsprechend:
- Etikettenfarbe: #333333
Sizing
Dann verkleinern wir den Teiler und zentrieren ihn.
- Maximale Breite: 26%
- Textausrichtung: Zentriert
Zeile 2 hinzufügen
Struktur der Spalte
Fahren Sie direkt unter der zuvor hinzugefügten Zeile fort und fügen Sie eine neue Zeile mit drei Spalten gleicher Größe hinzu.
Sizing
Öffnen Sie die Leitungseinstellungen, ohne Module hinzuzufügen, und nehmen Sie einige Änderungen an den Größeneinstellungen vor.
- Benutzerdefinierte Bundstegbreite verwenden: Ja
- Spaltenabstand: 1
- Maximale Breite: 2 Pixel
- Säulenhöhen harmonisieren: Ja
Abstand
Gehen Sie als Nächstes zu den Abstandseinstellungen und fügen Sie benutzerdefinierte Randwerte hinzu.
- Rand (oben und unten): 50 px
- Interner Rand: (Oben und Unten: 10px), (Links und Rechts: 5px)
Geben Sie die Parameter jeder Spalte ein und ändern Sie auch die Werte der inneren Ränder wie folgt:
- Interner Rand (links und rechts): 5px
Schattenkiste
Wir verleihen unserer Linie auch etwas Tiefe, indem wir ihr mit den folgenden Einstellungen einen Kastenschatten hinzufügen:
- Box-Schattenunschärfe-Stärke: 80px
- Box-Schatten-Ausbreitungsstärke: -14px
- Schriftfarbe Untertitel: rgba(0,0,0,0.3)
Fügen Sie Spalte 1 ein Bildmodul hinzu
Laden Sie ein Bild in das Bildmodul
Es ist Zeit, Module hinzuzufügen!
Um den Bio-Hover-Effekt zu erzielen, benötigen wir insgesamt zwei Module; ein Bildmodul und ein Zusammenfassungsmodul.
Siehe auch: Divi: So erstellen Sie ein responsives Bildraster mit Links und Hover-Effekten
Das Bildmodul enthält das Bild des Teammitglieds, das Sie vorstellen möchten. Das Zusammenfassungsmodul hingegen wird verwendet, um das Symbol in der unteren linken Ecke und die Biografie beim Schweben hinzuzufügen.
Fügen Sie der ersten Spalte ein Bildmodul mit einem quadratischen Bild hinzu.
Filter
Das von uns erstellte Design ist vollständig in Graustufen gehalten. Um diese Graustufen zu unserem Bild hinzuzufügen, gehen Sie zu den Filtereinstellungen und entfernen Sie die gesamte Sättigung.
- Sättigung: 0 %
Fügen Sie das Zusammenfassungsmodul zu Spalte 1 hinzu
Fahren Sie fort, indem Sie direkt unter dem Bildmodul in Spalte 1 ein neues Zusammenfassungsmodul hinzufügen. Fügen Sie den Namen des Teammitglieds in das Titelfeld ein und geben Sie einige zusätzliche Informationen über das Teammitglied in das Feld ein. Inhalt.
Symbol auswählen
Als nächstes wählen wir ein Auswahlsymbol aus, das angezeigt wird Besucher dass es mehr als nur ein Bild gibt.
Standard-Hintergrundfarbe
Als nächstes wählen wir eine vollständig transparente Hintergrundfarbe.
- Hintergrund: rgba (255,255,255,0)
Hintergrundfarbe beim Hover
Und wir werden diese Farbe beim Hover ändern.
- Hintergrundfarbe: rgba (255,255,255,0.88)
Standard-Symboleinstellungen
Wir wollen ein sichtbares Symbol, das hilft Besucher zu verstehen, dass sie darüber fliegen können. Ändern Sie die Symboleinstellungen, um ein Symbol wie dieses zu erhalten.
- Symbolfarbe: #ffffff
- Hintergrundfarbe für Bild/Symbol: #000000
- Bild-/Symbolplatzierung: Links
- Bild-/Symbolbreite: 50px
- Abgerundetes Rechteck für Bild/Symbol: 100 Pixel
Hover-Icon-Einstellungen
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)
- Hintergrundfarbe für Bild/Symbol: rgba(255,255,255,0)
Standardeinstellungen für den Titeltext
Gehen Sie als Nächstes zu den Titeltexteinstellungen und nehmen Sie einige Änderungen vor.
- Schrifttitel: Cinzel
- Weicher heller Text: Fetter Text
- Stil der Titelkopie: Tt
- Titeltextfarbe: #000000
- Titeltextgröße: 0px
Hover-Titeleinstellungen
Ändern Sie die Textgröße beim Hover.
- Titeltextgröße: 30px
Standardwerte für Präsentationstext
Ändern Sie auch die Klappentexteinstellungen.
- Schriftkörper: Open Sans
- Farbe des Textkörpers: #000000
- Körpertextgröße: 0px
Body-Text-Hover-Einstellungen
Und ändern Sie erneut die Größe des Textkörpers beim Hover.
- Körpertextgröße: 14px
Standardabstand
Schließlich müssen wir eine Überlappung zwischen dem Zusammenfassungsmodul und dem Bildmodul erstellen, indem wir einen negativen oberen Rand verwenden.
- Oberer Rand: -3,7 vw (Desktop), -9 vw (Tablet und Telefon)
- Unterer Rand: 1,5 vw (Tablet), 2 vw (Telefon)
Abstand beim Schweben
Ändern Sie die Randwerte beim Hover.
- Marge (oben): -11,38 vw
- Interner Rand: (Oben und Unten: 20px), (Rechts: 50px)
Spalte 1 zweimal klonen
Wir haben unseren ersten Bio-Hover-Effekt fertig erstellt. Um Zeit zu sparen, können wir Spalte 1 einfach zweimal aus den Zeilenparametern klonen. Löschen Sie zuerst die anderen beiden Spalten und doppelklicken Sie dann, um Spalte 1 zu klonen
Bild und Inhalt des Zusammenfassungsmoduls in geklonten Spalten ändern
Vergessen Sie nicht, das Bild im Bildmodul und die Beschreibung im Zusammenfassungsmodul zu ändern, um den Vorgang abzuschließen!
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Desktop-Computer
Mobil
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie einen Hover-Effekt auf Fotos von Teammitgliedern erstellen, indem Sie nur die integrierten Optionen von Divi verwenden. Wir haben erwähnt, wie wichtig es ist, gute "Über"-Seiten zu erstellen, da es sich um eine der meistbesuchten Webseiten handelt.
Die Verwendung von Hover-Effekten für Fotos von Teammitgliedern bringt nicht nur Ihre About-Seite auf die nächste Ebene, sondern schafft auch eine Interaktion mit Ihnen Besucher. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
