So fügen Sie mit Divi . soziale Hover-Symbole zu den Bildern von Teammitgliedern hinzu

Wenn Sie Ihre About-Seite erstellen, können Sie die verschiedenen Teammitglieder Ihres Unternehmens in einem Showcase hinzufügen. Wenn Sie diesen Designprozess beginnen, werden Sie feststellen, dass drei Dinge nicht fehlen dürfen: ein Bild, ein Name und eine Position. Wenn Sie Ihre Teammitglieder jedoch noch mehr hervorheben möchten, können Sie auch deren Links zu sozialen Netzwerken in das Design einfügen. Natürlich können Sie es auch auf die altmodische Weise machen und ein Social Media Follow-Modul unter dem Namen und der Position der Person hinzufügen. Sie können jedoch auch ein kleines bisschen Interaktion hinzufügen, indem Sie die sozialen Symbole auslösen, sobald jemand über eines der Personenbilder schwebt. Im heutigen Tutorial zeigen wir Ihnen genau, wie Sie das mit Divi machen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout KOSTENLOS herunter

Um das kostenlose Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Beginnen wir mit der Neuerstellung!

Abschnitt 1 hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #0f0f0f

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und ändern Sie als Nächstes die Abstandseinstellungen.

• Obere Polsterung
  • Desktop & Tablet: 100px
  • Telefon: 50px
• Untere Polsterung:
  • Desktop & Tablet: 100px
  • Telefon: 50px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Inhalt hinzufügen

Fügen Sie der Spalte der Zeile ein erstes Textmodul mit H1-Inhalten Ihrer Wahl hinzu.

H1-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H1-Texteinstellungen entsprechend:

• Überschrift Schriftart: Alata
• Textfarbe der Überschrift: #ffffff
• Textgröße der Überschrift:
  • Desktop: 50px
  • Tablet: 45px
  • Telefon: 35px
• Höhe der Überschriftslinie: 1.2em

Trennmodul zur Spalte hinzufügen

Sichtweite

Als nächstes fügen wir ein Divider-Modul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Linienfarbe.

• Linienfarbe: #ffffff

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 2px
• Maximale Breite: 100px
• Höhe: 2px

Textmodul #2 zur Spalte hinzufügen

Beschreibungsinhalt hinzufügen

Das nächste und letzte Modul, das wir in dieser Zeile benötigen, ist ein weiteres Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Alata
• Textfarbe: #7c7c7c
• Textgröße: 17px
• Textzeilenhöhe: 1.9em

Abstand

Entfernen Sie auch den standardmäßigen unteren Rand.

• Unterer Rand: 0px

Abschnitt 2 hinzufügen

Hintergrund mit Farbverlauf

Fügen Sie einen weiteren Abschnitt direkt unter dem vorherigen hinzu und verwenden Sie dafür einen Verlaufshintergrund.

• Farbe 1: #0f0f0f
• Farbe 2: #000000
• Startposition: 10%
• Endposition: 10%

Abstand

Ändern Sie als nächstes die Abstandseinstellungen.

• Obere Polsterung: 0px
• Untere Polsterung: 200px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2px

Fügen Sie das Social Media Follow-Modul zu Spalte 1 hinzu

Fügen Sie soziale Netzwerke Ihrer Wahl hinzu

Das erste Modul, das wir in unserer Reihe benötigen, ist ein Social Media Follow Module in Spalte 1. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.

Entfernen Sie jede Hintergrundfarbe des sozialen Netzwerks einzeln

Öffnen Sie dann jedes soziale Netzwerk einzeln und entfernen Sie die Hintergrundfarbe.

Link zu jedem sozialen Netzwerk einzeln hinzufügen

Fügen Sie auch jedem sozialen Netzwerk einen entsprechenden Link hinzu.

Standardhintergrundfarbe

Gehen Sie dann zurück zu den allgemeinen Moduleinstellungen und wenden Sie die folgende Hintergrundfarbe an:

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

Hintergrundfarbe schweben

Ändern Sie die Hintergrundfarbe beim Schweben.

• Hintergrundfarbe schweben: #494949

Hintergrundbild

Laden Sie dann ein Hintergrundbild hoch.

• Hintergrundbildgröße: Cover
• Hintergrundbild-Mischung: Multiplizieren

Ausrichtung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Ausrichtung.

• Modulausrichtung: Mitte

Symbol

Ändern Sie auch die Symbolfarbe.

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

Abstand

Gehen Sie dann zu den Abstandseinstellungen und wenden Sie die folgenden Werte an:

• Unterer Rand: 0px
• Obere Polsterung:
  • Desktop: 250px
  • Tablet: 450px
  • Telefon: 200px
• Untere Polsterung: 20px

Grenze

Wir ändern auch die Grenzeinstellungen.

• Alle Ecken: 100px
• Rahmenbreite: 2px
• Rahmenfarbe: rgba(255,255,255,0)

Grenze schweben

Verwenden Sie beim Schweben eine andere Rahmenfarbe.

• Hover-Rahmenfarbe: #ffffff

CSS-Klasse

Gehen Sie dann zur Registerkarte "Erweitert" und wenden Sie eine benutzerdefinierte CSS-Klasse an.

• CSS-Klasse: team-socials

Bewegen Sie den Mauszeiger vor dem Element

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Hover-Einstellung für das Element before aktivieren und die folgenden CSS-Codezeilen kopieren und einfügen:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

Personenmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein Personenmodul. Fügen Sie Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textausrichtung: Mitte
• Textfarbe: Hell

Einstellungen für Titeltext

Stylen Sie den Titeltext als nächstes.

• Titelschriftart: Alata
• Titeltextgröße:
  • Desktop: 27px
  • Tablet: 25px
  • Telefon: 22px

Texteinstellungen positionieren

Ändern Sie dann die Positionstexteinstellungen.

• Position Schriftart: Alata
• Positionstextgröße:
  • Desktop: 17px
  • Tablet & Telefon: 15px

Abstand

Wenden Sie eine benutzerdefinierte obere und untere Auffüllung auf die Abstandseinstellungen an.

• Obere Polsterung: 40px
• Untere Polsterung: 40px

Grenze

Und vervollständigen Sie die Moduleinstellungen, indem Sie die folgenden Rahmeneinstellungen anwenden:

• Randbreite: 1px
• Rahmenfarbe: #ffffff

Verbleibende Spalten der Zeile entfernen

Nachdem Sie die Module in Spalte 1 abgeschlossen haben, können Sie die beiden verbleibenden Spalten der Zeile entfernen.

Spalte zweimal klonen

Verwenden Sie Spalte 1 wieder, indem Sie sie zweimal klonen.

Ganze Zeile klonen

Klonen Sie dann die gesamte Zeile so oft wie nötig.

Alle doppelten Inhalte ändern

Social Media Follow-Links

Natürlich müssen Sie alle doppelten Inhalte ändern, beginnend mit den Links zu sozialen Netzwerken in jedem doppelten Social Media Follow-Modul.

Social Media Folgen Hintergrundbilder

Ändern Sie dann das Hintergrundbild in jedem Social Media Follow-Modul.

Inhalt des Personenmoduls

Und vervollständigen Sie die Änderungen, indem Sie den Inhalt in jedem Personenmodul ändern.

Fügen Sie das Codemodul unter dem letzten Textmodul in Zeile 1 von Abschnitt 1 hinzu

Um sicherzustellen, dass jedes soziale Netzwerk den Stil ändert, sobald das gesamte Modul mit der Maus bewegt wird, benötigen wir einige Zeilen CSS-Code. Wir platzieren diesen Code in einem neuen Codemodul, das wir dem ersten Abschnitt direkt unter der Beschreibung des Textmoduls hinzufügen.

CSS-Code hinzufügen

Kopieren Sie die folgenden Zeilen CSS-Code und fügen Sie sie ein:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit der Präsentation Ihrer Teammitglieder kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie soziale Symbole auslösen können, wenn Sie mit der Maus über eines der Bilder eines Teammitglieds fahren. Dies führt zu einer subtilen, aber unterhaltsamen Interaktion, die Sie für jede Art von Website verwenden können, die Sie erstellen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.