Trick # 475 | Dieser Beitrag beinhaltet 719 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Die Standard-Fusszeile des Divi-Themes bietet die Möglichkeit, SocialMedia-Icons zu platzieren. Schön und gut; doch die Gestaltungsmöglichkeiten dieser Icons sind eher dürftig. Mit ein wenig CSS-Code lassen sich die einschlägigen Symbole aber einfach aufpeppen – etwa aus der Footerzeile herausragen.
So sehen sie aus, wenn sie ohne weiteres Zutun aktiviert werden; die Icons für Facebook, Twitter, Instagram und den RSS-Feed:
Mit dem folgenden Code lassen sich die Icons einfach stylen. Die einzelnen Buttons werden abgerundet und überlappen den oberen Rand des Standardfooters. Kopieren Sie den Code und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – im Backend unter Design/Customizer/Zusätzliches CSS:
#footer-info {
float: none;
padding-bottom: 10px;
color: #666;
text-align: center;
}
#footer-bottom .et-social-icons {
float: none;
text-align: center;
margin-top: -32px;
margin-bottom: 15px;
}
#footer-bottom .et-social-icon a {
display: inline-block;
position: relative;
color: #fff;
font-size: 20px;
text-align: center;
text-decoration: none;
transition: color .3s ease 0s;
background: #171717;
padding: 8px;
border-radius: 25px;
border: 1px solid white;
width: 40px;
height: 40px;
}
#footer-bottom .et-social-icon a:hover {
background: #03a1b5;
opacity: 1!important;
}
#footer-bottom .et-social-icons li {
display: inline-block;
margin-left: 10px;
}Schon stellt sich die Icon-Leiste so dar wie nebenan:
Der Hack funktioniert aber tatsächlich nur mit der Standard-Fusszeile des Divi-Themes. Wenn Sie die Fusszeile stattdessen mit dem Theme-Builder gestalten, haben Sie die Möglichkeit, die Icons im SocialMedia-Modul zu stylen.
Werbung
Werbung
