Springe zum Hauptinhalt

So fügen Sie einen Rollover-Effekt mit Details für Divi-Bilder hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Es ist kein Geheimnis, dass „Wer wir sind“-Seiten großartig sind, um Klicks auf Ihre Website zu bringen. Es ist auch diese Art von Seite, die sich auf den menschlichen Teil des Geschäfts hinter der Website konzentriert. Aus diesem Grund wissen 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 sparen Sie Platz auf der Seite, an der Sie gerade arbeiten, und schaffen eine schwebende Interaktion zwischen Ihnen und Ihren Besuchern.

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

Mobile

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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • 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 einen neuen Blurb-Mod direkt unter dem Bild-Mod in Spalte 1 hinzufügen. Fügen Sie den Namen des Teammitglieds zum Titelfeld hinzu und geben Sie zusätzliche Informationen über das Teammitglied in den Inhaltsbereich ein.

Bio-Hover-Effekt

Wählen Sie ein Symbol

Als Nächstes wählen wir ein Symbol Ihrer Wahl, das den Besuchern zeigt, dass es mehr als nur ein Bild gibt.

Bio-Hover-Effekt

Standardhintergrundfarbe

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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • 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 möchten ein sichtbares Symbol, das den Besuchern hilft, zu verstehen, dass sie darüber schweben 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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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

Mobile

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!

Dieser Artikel enthält Kommentare 4

  1. 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

  2. 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

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren