Möchten Sie Social-Media-Symbole anzeigen, wenn Sie den Mauszeiger über Fotos bewegen Divi ?
Wenn Sie Ihre About-Seite erstellen, können Sie die verschiedenen Teammitglieder Ihres Unternehmens zu einer Präsentation hinzufügen.
Wenn Sie diesen Designprozess starten, werden Sie feststellen, dass drei Dinge von Anfang an nicht fehlen dürfen: ein Bild, ein Name und eine Position. Aber wenn Sie Ihre Teammitglieder noch mehr hervorheben möchten, können Sie auch deren Social-Media-Links zum Design hinzufügen.
Natürlich können Sie den altmodischen Weg gehen und unter dem Namen und der Position der Person ein Modul „Folgen Sie uns in sozialen Medien“ hinzufügen. Sie können jedoch auch ein wenig Interaktion hinzufügen, indem Sie diese Symbole anzeigen, sobald jemand mit der Maus über eines der Bilder der Person fährt.
Im heutigen Tutorial zeigen wir Ihnen genau, wie Sie dies mit tun Divi.
Gehen wir.
Übersicht
Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.
Ergebnis auf Laptop
Ergebnis auf dem Handy
Beginnen wir die Umsetzung mit Divi!
Abschnitt 1 hinzufügen
Hintergrundfarbe
Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu.
Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.
- Hintergrund: #0f0f0f
Abstand
Wechseln Sie zur Registerkarte Design Dropdown-Option Abstand und ändern Sie dann die Abstandseinstellungen.
- Polsterung (oben und unten): 100px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Modul „Text“ Nr. 1 zur Spalte hinzufügen
Fügen Sie einen Titel der Größe H1 hinzu
Fügen Sie ein erstes Modul hinzu "Text" zu Zeile Spalte
Fügen Sie einige hinzu Inhalt Größe H1 (Überschrift 1) Ihrer Wahl.
H1-Texteinstellungen
Wechseln Sie zur Registerkarte Design, ziehen Sie die Option herunter Überschrift Text und ändern Sie die H1-Texteinstellungen entsprechend:
- Überschriftenschrift: Alata
- Textfarbe der Überschrift: #ffffff
- Textgröße:
- Desktop: 50px
- Tablet: 45px
- Telefon: 35px
- Höhe der Kopfzeile: 1,2 cm
Fügen Sie der Spalte ein "Divider"-Modul hinzu
Sichtbarkeit
Als nächstes werden wir ein „Divider“-Modul hinzufügen. Stellen Sie sicher, dass die Option „Teiler anzeigen“ aktiviert ist.
- Teiler anzeigen: JA
Linie
Wechseln Sie zur Registerkarte Design, ziehen Sie die Option herunter Line und ändern Sie die Linienfarbe.
- Linienfarbe: #ffffff
Sizing
Drop-down-Option Größe und ändern Sie auch die Größeneinstellungen.
- Teilergewicht: 2px
- Maximale Breite: 100 Pixel
- Höhe: 2px
Modul „Text“ Nr. 2 zur Spalte hinzufügen
Beschreibungsinhalt hinzufügen
Das nächste und letzte Modul, das wir in dieser Zeile benötigen, ist ein weiteres „Text“-Modul mit a Inhalt Beschreibung Ihrer Wahl.
Texteinstellungen
Wechseln Sie zur Registerkarte Design, ziehen Sie die Option herunter Text und ändern Sie die Texteinstellungen wie folgt:
- Textschriftart: Alata
- Textfarbe: #7c7c7c
- Größe: 17px
- Textzeilenhöhe: 1,9 cm
Abstand
Entfernen Sie auch den standardmäßigen unteren Rand.
- Rand (unten): 0px
Abschnitt 2 hinzufügen
Hintergrund mit Farbverlauf
Fügen Sie einen weiteren Abschnitt direkt unter dem vorherigen hinzu und verwenden Sie für diesen einen Hintergrund mit Farbverlauf.
- Linke Farbe: #0f0f0f
- Rechte Farbe: #000000
- Linke Position: 10 %
- Richtige Position: 90 %
Abstand
Wechseln Sie zur Registerkarte Design, ziehen Sie die Option herunter Abstand und ändern Sie dann die Abstandseinstellungen.
- Polsterung (oben): 0px
- Polsterung (unten): 200px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Sizing
Öffnen Sie die Leitungseinstellungen und ändern Sie die Größeneinstellungen wie folgt:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Bundstegbreite: 2px
Fügen Sie Spalte 1 das Modul „Social Media Follow“ hinzu
Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu
Das erste Modul, das wir in unserer Zeile benötigen, ist das Modul „Social Media Follow“ in Spalte 1. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.
Entfernen Sie die Farbe einzeln aus jedem sozialen Netzwerk
Öffnen Sie jedes soziale Netzwerk einzeln
Entfernen Sie die Hintergrundfarbe.
Fügen Sie jedem sozialen Netzwerk einzeln einen Link hinzu
Fügen Sie auch einen Link hinzu, der jedem sozialen Netzwerk entspricht.
Standard-Hintergrundfarbe
Gehen Sie dann zurück zu den allgemeinen Moduleinstellungen und wenden Sie die folgende Hintergrundfarbe an:
- Hintergrund: rgba(0,0,0,0)
Hintergrundfarbe beim Hover
Ändern Sie die Hintergrundfarbe beim Hover.
- Hintergrund (Hover): #494949
Hintergrundbild
Laden Sie als Nächstes ein Hintergrundbild hoch.
- Hintergrundbildgröße: Cover
- Hintergrundbildmischung: Multiplizieren
Ausrichtung
Wechseln Sie zur Registerkarte Design und die Ausrichtung ändern.
- Ausrichtungsmodul: Mitte
Symbol
Ändern Sie auch die Symbolfarbe.
- Symbolfarbe: rgba(0,0,0,0)
Abstand
Gehen Sie dann zu den Abstandseinstellungen (Abstand) und wenden Sie die folgenden Werte an:
- Rand (unten): 0px
- Polsterung (oben):
- Desktop: 250px
- Tablet: 450px
- Telefon: 200px
- Polsterung (unten): 20px
Grenze
Wir ändern auch die Randeinstellungen.
- Abgerundete Ecken: 100px
- Randbreite: 2px
- Randfarbe: rgba(255,255,255,0)
Grenze beim Schweben
Verwenden Sie beim Hover eine andere Rahmenfarbe.
- Rahmenfarbe (Hover): #ffffff
CSS-Klasse
Dann gehen Sie auf die Registerkarte Fortgeschrittener und wenden Sie eine benutzerdefinierte CSS-Klasse an.
- CSS-Klasse: Teams-Socials
Benutzerdefiniertes CSS (vorher)
Und vervollständigen Sie die Moduleinstellungen, indem Sie die Hover-Einstellung für das Element aktivieren "Vor" und durch Kopieren und Einfügen der folgenden CSS-Codezeilen:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
Fügen Sie Spalte 1 ein Modul „Person“ hinzu
Beschreibungsinhalt hinzufügen
Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein „Person“-Modul. Fügen Sie etwas hinzu Inhalt Beschreibung Ihrer Wahl.
Texteinstellungen
Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen wie folgt:
- Textausrichtung: Zentriert
- Textfarbe: Hell
Einstellungen für den Titeltext
Passen Sie dann den Titeltext an.
- Titelschrift: Alata
- Titeltext Größe des Titels:
- Desktop: 27px
- Tablet: 25px
- Telefon: 22px
Texteinstellungen für die Stellenbeschreibung
Bearbeiten Sie dann die Texteinstellungen für die Stellenbeschreibung.
- Position Schriftart: Alata
- Positionstextgröße:
- Desktop: 17px
- Tablet und Telefon: 15px
Abstand
Ändern Sie die Abstandseinstellungen wie folgt:
- Polsterung (oben und unten): 40px
Grenze
Und vervollständigen Sie die Moduleinstellungen, indem Sie die folgenden Randeinstellungen anwenden:
- Randbreite: 1px
- Rahmenfarbe: #ffffff
Entfernen Sie die verbleibenden Spalten aus der Zeile
Nachdem Sie die Module von Spalte 1 abgeschlossen haben, können Sie die verbleibenden zwei Spalten aus der Zeile entfernen.
Spalte zweimal klonen
Verwenden Sie Spalte 1 erneut, indem Sie sie zweimal klonen.
Klonen Sie die ganze Reihe
Klonen Sie dann die gesamte Reihe so oft wie nötig.
Bearbeiten Sie alle doppelten Inhalte
Fügen Sie das Code-Modul unter dem letzten Textmodul in Zeile 1 von Abschnitt 1 hinzu
Um nun sicherzustellen, dass jedes soziale Netzwerk seinen Stil ändert, sobald der Mauszeiger über das gesamte Modul bewegt wird, benötigen wir ein paar Zeilen CSS-Code. Wir platzieren diesen Code in einem neuen Codemodul, das wir dem ersten Abschnitt hinzufügen, direkt unter dem Beschreibungstext
CSS-Code hinzufügen
Kopieren Sie die folgenden CSS-Codezeilen und Sie sind fertig:
<style>
.team-socials:hover li a.icon:before {
color: black !important;
}
.team-socials:hover li a.icon {
background-color: white;
}
</style>
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Büro
Laden Sie DIVI jetzt herunter!!!
Mobil
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie bei der Vorstellung Ihrer Teammitglieder kreativ werden können.
Insbesondere haben wir Ihnen gezeigt, wie Sie Symbole für soziale Medien anzeigen, wenn Sie mit der Maus über eines der Bilder eines Teammitglieds fahren. Das Ergebnis ist eine subtile, aber unterhaltsame Interaktion, die Sie für jede Art von verwenden können Website die du erschaffst.
Wenn Sie weitere Elemente benötigen, um Ihre Projekte zur Erstellung von Websites abzuschließen, lesen Sie auch unseren Leitfaden zum Thema WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Aber inzwischen, Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
