Es ist kein Geheimnis, dass „Über uns“-Seiten sehr gut darin sind, Klicks zu Ihnen zu führen Webseite. Es ist auch diese Art von Seite, die den menschlichen Teil des Geschäfts dahinter hervorhebt Website. Wenn wir dies wissen, erkennen wir, dass es wichtig ist, darauf zu achten, wie wir Seiten strukturieren, welche Art von Informationen wir teilen und wie wir Interaktionen erstellen.

Sie können das Seitenerlebnis unter anderem verbessern, indem Sie einen Bereich für Teammitglieder bereitstellen, in dem Ihre Mitarbeiter im Rampenlicht stehen. Darüber hinaus können Sie Fotos von Teammitgliedern einen biologischen Hover-Effekt hinzufügen, indem Sie nur die integrierten Optionen von Divi verwenden.

Auf diese Weise können Sie auf der Seite, an der Sie gerade arbeiten, Platz sparen und eine Hover-Interaktion zwischen Ihnen und Ihrem erstellen Besucher.

In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie dorthin gelangen. Sobald Sie den Ansatz gefunden haben, können Sie den Designstil 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.

Büro

Divi-bio-Hover-Effekt-Desktop-gif.gif

Mobil

Divi-bio-Hover-Effekt-mobile-gif.gif

Beginnen wir mit der Neuerstellung

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:

  • Beste Polsterung: 100px
  • Polsterung unten: 100px

Bio-Hover-Effekt

Fügen Sie die Zeile 1 hinzu

Spaltenstruktur

Sobald Sie die benutzerdefinierte Füllung zu Ihrem Abschnitt hinzugefügt haben, können Sie die Abschnittseinstellungen schließen und eine neue Zeile mithilfe einer einzelnen Spalte hinzufügen.

Bio-Hover-Effekt

Fügen Sie ein Textmodul hinzu

Fügen Sie H2-Inhalte hinzu

Fügen Sie der Spalte einen Textbausteintitel mit der gewünschten H2-Größe hinzu.

Bio-Hover-Effekt

H2-Texteinstellungen

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

  • Überschrift 2-Schriftart: Cinzel
  • Titel 2-Schriftstil: Small Caps
  • Titel 2 Textausrichtung: Mitte
  • Titel 2 Textgröße: 70px

Bio-Hover-Effekt

Fügen Sie ein Divisionsmodul hinzu

Sichtbarkeit

Fügen Sie direkt unter dem Titel des Textmoduls ein neues Trennungsmodul hinzu.

  • Teiler anzeigen: Ja

Bio-Hover-Effekt

Farbe des Trennzeichens

Gehen Sie zur Registerkarte Design, öffnen Sie die Farbeinstellungen und ändern Sie Ihre Teilerfarbe entsprechend:

  • Farbe des Trennzeichens: # 333333

Bio-Hover-Effekt

Sizing

Dann verkleinern wir den Teiler und zentrieren ihn.

  • Breite: 26%
  • Ausrichtung des Moduls: Mitte

Bio-Hover-Effekt

Fügen Sie die 2-Zeile hinzu

Spaltenstruktur

Fahren Sie direkt unter der zuvor hinzugefügten Zeile fort und fügen Sie eine neue Zeile mit drei Spalten gleicher Größe hinzu.

Bio-Hover-Effekt

Sizing

Öffnen Sie die Linienparameter, ohne weitere Module hinzuzufügen, und nehmen Sie einige Änderungen an den Größenparametern vor.

  • Verwenden Sie eine benutzerdefinierte Breite: Ja
  • Einheit: PX
  • Benutzerdefinierte Breite: 2000px
  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Spaltenhöhen ausgleichen: Ja

Bio-Hover-Effekt

Abstand

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

  • Oberer Rand: 50px
  • Unterer Rand: 50px
  • Top Polsterung: 10px
  • Polsterung unten: 10px
  • Linke Polsterung: 5px
  • Polsterung Rechts: 5px
  • Spalte 1, 2 und 3 Auffüllung links: 5px
  • Spalte 1, 2 und 3 Auffüllung rechts: 5px

Bio-Hover-Effekt

Schattenkiste

Wir geben unserer Linie auch eine kleine Tiefe, indem wir einen Kastenschatten mit den folgenden Parametern hinzufügen:

  • Box-Schattenunschärfekraft: 80px
  • Box Schattenausbreitungskraft: -14px
  • Schattenfarbe: rgba (0,0,0,0,3)

Bio-Hover-Effekt

Fügen Sie Spalte 1 ein Bildmodul hinzu

Laden Sie ein Bild in ein Bildmodul

Es ist Zeit, Module hinzuzufügen! Um den biologischen Hover-Effekt zu erzielen, benötigen wir insgesamt zwei Module. ein Bildmodul und ein Klappentextmodul. Das Bildmodul enthält das Bild des Teammitglieds, das Sie präsentieren möchten.

Der Blurb-Mod wird unterdessen verwendet, um das Symbol in der unteren linken Ecke und die Schwebebiografie hinzuzufügen. Fügen Sie der ersten Spalte ein Bildmodul mit einem quadratischen Bild hinzu.

Bio-Hover-Effekt

Filter

Das Design, das wir erstellen, ist vollständig in Graustufen. Um diesen Grauton zu unserem Bild hinzuzufügen, gehen Sie zu den Filtereinstellungen und entfernen Sie alle Sättigungen.

  • Sättigung: 0%

Bio-Hover-Effekt

Fügen Sie das Blurb-Modul zur 1-Spalte hinzu

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 zum Titelfeld hinzu und geben Sie zusätzliche Informationen über das Teammitglied in das Feld ein. Inhalt.

Bio-Hover-Effekt

Wählen Sie ein Symbol

Als nächstes wählen wir ein Auswahlsymbol aus, das angezeigt wird Besucher dass es mehr als nur ein Foto gibt.

Bio-Hover-Effekt

Standardhintergrundfarbe

Als nächstes wählen wir eine vollständig transparente Hintergrundfarbe.

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

Bio-Hover-Effekt

Hintergrundfarbe auf der Überführung

Und wir werden diese Farbe schweben lassen.

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

Bio-Hover-Effekt

Standard-Symboleinstellungen

Wir wollen ein sichtbares Symbol, das hilft Besucher um zu verstehen, dass sie darüber fliegen können. Ändern Sie die Symboleinstellungen, um ein solches Symbol zu erhalten.

  • Symbolfarbe: #ffffff
  • Kreissymbol: Ja
  • Kreisfarbe: # 000000
  • Position des Symbols: links
  • Verwenden Sie die Schriftgröße des Symbols: Ja
  • Symbol Schriftgröße: 50px

Bio-Hover-Effekt

Hover-Symboleinstellung

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)
  • Farbe des Kreises: rgba (255,255,255,0)

Bio-Hover-Effekt

Standard-Titeleinstellungen

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

  • Titelpolizei: Cinzel
  • Titelschrift: Fett
  • Schriftstil des Titels: Small Caps
  • Farbtexttitel: # 000000
  • Texttitelgröße: 0px

Bio-Hover-Effekt

Bewegen Sie den Mauszeiger über die Texteinstellungen des Titels

Ändern Sie die Größe des Textes durch Schweben.

  • Texttitelgröße: 30px

Bio-Hover-Effekt

Standardeinstellungen für den Textkörper

Ändern Sie auch die Körpertexteinstellungen.

  • Body Police: Offene Sans
  • Text in Körperfarbe: # 000000
  • Körpertextgröße: 0px
  • Körpergröße: 1.8em

Bio-Hover-Effekt

Parameter des Körpers bei Überflug

Ändern Sie erneut die Körpergröße des schwebenden Texts.

  • Körpertextgröße: 14px

Bio-Hover-Effekt

Standardabstand

Last but not least müssen wir eine Überlappung zwischen dem Blurb-Modul und dem Bildmodul mit einem negativen oberen Rand erstellen.

  • Oberer Rand: -3.7vw (Desktop), -9vw (Tablet und Telefon)
  • Unterer Rand: 1.5vw (Tablet), 2vw (Telefon)

Bio-Hover-Effekt

Stationärer Abstand

Ändern Sie den benutzerdefinierten Rand und füllen Sie die Werte im Rollover.

  • Oberer Rand: -11,38vw
  • Top Polsterung: 20px
  • Polsterung unten: 20px
  • Polsterung Rechts: 50px

Bio-Hover-Effekt

Klonen Sie die beiden Module zweimal und platzieren Sie die Duplikate in den verbleibenden Spalten.

Wir haben unseren ersten biologischen Schwebeeffekt fertiggestellt. Um Zeit zu sparen, können wir die beiden Module einfach zweimal in Spalte 1 klonen und die Duplikate in die verbleibenden zwei Spalten einfügen.

Bio-Hover-Effekt

Bearbeiten Sie das Bild und den Inhalt des Klappentextmoduls

Vergessen Sie nicht, das Bild im Bildmodul zu ändern und es in das Klappentextmodul zu kopieren, um den Abschnitt für Teammitglieder zu vervollständigen!

Bio-Hover-Effekt

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussah.

Büro

Bio-Hover-Effekt

Mobil

Bio-Hover-Effekt

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie einen biologischen Hover-Effekt für Fotos von Teammitgliedern erstellen, indem Sie nur die integrierten Optionen von Divi verwenden. Wir haben betont, wie wichtig es ist, gute Seiten zu erstellen, da diese eine der am häufigsten besuchten Websites sind.

Die Verwendung von Bio-Hover-Effekten für Fotos von Teammitgliedern verbessert nicht nur die Qualität Ihrer Seite, sondern schafft auch eine Interaktion mit Ihren Besuchern. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten!