Divi Social Media Icons Hover Effekt

von | 10.11.2017 | 0 Kommentare

In unserem letzten Tutorial haben wir euch gezeigt, wie die Größe der Social Media Icons mit dem Divi Theme individuell angepasst werden kann. Hier wollen jetzt anknüpfen und uns ansehen, wie ein Hover Effekt erzeugt wird. Beim Hover Effekt wechseln die Social Media Icons die Farbe, sobald der Anwender mit dem Mauszeiger herüberschwebt.

Als erstes fügen wir das Social Media Modul zu einer neuen oder bereits bestehenden Sektion hinzu.

Divi Social Media Icons Hover Effekt

Anschließend wechselt ihr in die Divi Modul Optionen und wählt die gewünschten Netzwerke aus.

Divi Soziale Medien Folgen Mouse Over Effekt

Jetzt muss dem Modul noch die individuelle CSS-Klasse zugewiesen werden. Dazu wechselst du in die Registerkarte Erweitert und gibst wplo-social-follow in das Feld CSS-Klasse ein.

Folgen Modul Hover Effekt mit Divi

Die halbe Arbeit ist bereits getan. Wenn du jetzt in die Frontend Ansicht wechselst, sollten die Icons ungefähr so aussehen:

Für den Hover Effekt, muss noch folgender CSS Schnipsel in das Feld benutzerdefiniertes CSS oder dein Divi Child Theme eingefügt werden:

Etwas schöner ist der Effekt, wenn die Hintergrundfarben der Icons, mit der der Seite identisch sind. Die Hintergrundfarbe kannst du in den Optionen des Social Media Moduls anpassen. Für das folgende Beispiel stellen wir die Hintergrundfarbe für alle drei Icons auf Weiß, ändern die Icon-Farbe via CSS zu einem leichten Grau und vergrößern die Icons ein wenig.

Insgesamt sieht unser Code wie folgt aus:

Du kannst jetzt mit dem Mauszeigen über die Icons schweben. Die Farbe wechselst in dem Moment von Grau zu unserem Wplo Rot.

Hast du noch keine passenden Akzentfarbe für deine Website gefunden, lohnt sich der Besuch einer entsprechenden Farbtabelle. Wenn du dich für eine Farbe entschieden hast, kannst du die Farbcodes im CSS Schnipsel, mit dem Hex-Wert deiner Farben ersetzen.

Noch Fragen? Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann schreibt es in die Kommentare.

Das könnte dich auch interessieren

Anzeige Divi Theme kaufen
Aktuelle Beiträge

0 Kommentare

Einen Kommentar abschicken

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