Divi Footer: Social Media Icon Hover Effekt

von wplo | 11.12.2017 | 0 Kommentare

Standardmäßig haben die Divi Social Media Icons im Footer eine relativ langweiligen Hover-Effekt. Das können wir mit ein paar Zeilen CSS Code besser, indem wir den Effekt auf das Farbschema unserer Webseite abstimmen.
Dabei können wir jedem Symbol eine individuelle Hover-Farbe einzeln geben oder aber, allen Icons die gleiche Farbe.

Hover Farbe für Divi Social Media Icon

Möchtest du allen Symbolen die gleiche Farbe für den Hover-Effekt zuweisen, dann füge den folgenden CSS-Befehl in das Feld benutzerdefiniertest CSS oder dein Divi Child Theme ein:

#footer-bottom .et-social-icons a:hover {
color:#dd5a5c;
}

#footer-bottom .et-social-icons a:hover {

color:#dd5a5c;

}

Um deine Wunschfarbe zu übernehmen, solltest du Hex-Wert ändern: color:#dd5a5c;. Falls du noch keinen passenden Hex-Wert für deine Farbe gefunden hast, wird dir eine entsprechende Farbtabelle weiterhelfen.

Möchtest du jedem Icon eine individuelle Hover-Farbe zuweisen, kannst du den folgenden Code übernehmen:

/****Hover facebook Icon****/
#footer-bottom .et-social-icons .et-social-facebook a:hover {
color:#0099FF !important;
}
/****Hover twitter Icon****/
#footer-bottom .et-social-icons .et-social-twitter a:hover {
color:#33CCFF !important;
}
/****Hover google plus Icon****/
#footer-bottom .et-social-icons .et-social-google-plus a:hover {
color:#FF0000 !important;
}
/****Hover RSS Icon****/
#footer-bottom .et-social-icons .et-social-rss a:hover {
color:#FF9933 !important;
}

/****Hover facebook Icon****/

#footer-bottom .et-social-icons .et-social-facebook a:hover {

color:#0099FF !important;

}

/****Hover twitter Icon****/

#footer-bottom .et-social-icons .et-social-twitter a:hover {

color:#33CCFF !important;

}

/****Hover google plus Icon****/

#footer-bottom .et-social-icons .et-social-google-plus a:hover {

color:#FF0000 !important;

}

/****Hover RSS Icon****/

#footer-bottom .et-social-icons .et-social-rss a:hover {

color:#FF9933 !important;

}

Wenn dir der Artikel gefallen hat, dann freuen wir uns über ein Follow auf Twitter und Facebook. Mehr WordPress und Divi Video Tutorials findest du auf unserem YouTube Channel.