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
Mobil
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
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.
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.
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
Fügen Sie ein Divisionsmodul hinzu
Sichtbarkeit
Fügen Sie direkt unter dem Titel des Textmoduls ein neues Trennungsmodul hinzu.
- Teiler anzeigen: Ja
Farbe des Trennzeichens
Gehen Sie zur Registerkarte Design, öffnen Sie die Farbeinstellungen und ändern Sie Ihre Teilerfarbe entsprechend:
- Farbe des Trennzeichens: # 333333
Sizing
Dann verkleinern wir den Teiler und zentrieren ihn.
- Breite: 26%
- Ausrichtung des Moduls: Mitte
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.
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
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
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)
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.
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%
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.
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.
Standardhintergrundfarbe
Als nächstes wählen wir eine vollständig transparente Hintergrundfarbe.
- Hintergrundfarbe: rgba (255,255,255,0)
Hintergrundfarbe auf der Überführung
Und wir werden diese Farbe schweben lassen.
- Hintergrundfarbe: rgba (255,255,255,0.88)
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
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)
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
Bewegen Sie den Mauszeiger über die Texteinstellungen des Titels
Ändern Sie die Größe des Textes durch Schweben.
- Texttitelgröße: 30px
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
Parameter des Körpers bei Überflug
Ändern Sie erneut die Körpergröße des schwebenden Texts.
- Körpertextgröße: 14px
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)
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
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.
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!
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussah.
Büro
Mobil
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!
Guten Tag,
Vielen Dank für dieses Tutorial, es war sehr nützlich für mich.
Ich habe jedoch zwei kleine Probleme:
- Der Hintergrund im Schwebeflug trifft nicht zu (ich habe den Eindruck, dass er sich hinter dem Bild befindet ...)
- Die Überführung öffnet sich nicht auf die gleiche Weise wie im Beispiel (mein Text bleibt auf der gleichen Höhe wie das Symbol und öffnet sich nicht nach oben), was ein schönes Aussehen ergibt.
Hast du eine lösung Danke.
Bonne soirée
Guten Tag,
Können Sie einen Screenshot teilen?
Guten Tag,
Vielen Dank für dieses Tutorial, es ist sehr gut erklärt.
Ich habe jedoch ein Problem, wenn das Bewegen der Maus über meinen Schwebeflug zittert und nicht fließt. Wissen Sie, woran das liegt?
Danke
Hallo Sal,
Keine Ahnung, tut mir leid.