Divi Social Follow Modul Hover Effekt

Divi Social Media Icons Hover Effekt

7. November 2018

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 angezeigt werden.

 

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

/******Icon Hover Farbe*******/
.wplo-social-follow li a.icon:hover::before {
color:#dd5a5c;

Wenn du jetzt den Zeiger deiner Maus über die Icons bewegst, wechseln diese ihre Farbe.

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:

 

 

/******Icon Farbe*******/
.wplo-social-follow li a.icon::before {
color:#d3d3d3;
}
/******Icon Hover Farbe*******/
.wplo-social-follow li a.icon:hover::before {
color:#dd5a5c;
}
/******Icon Größe*******/
.wplo-social-follow li a.icon::before { 
font-size:30px; 
}

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. Als Full Service Agentur helfen wir gerne mit der Umsetzung von Entwicklung bis Design und Film.

SIE KÖNNEN SICH BEI UNS BEDANKEN!

Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!

 

Bitte hinterlassen Sie uns eine positive Bewertung.

 

Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen

Kommentare

Sag uns deine Meinung! Jetzt antworten

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