Trick # 495 | Dieser Beitrag beinhaltet 387 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Mit dem Divi-Theme können Sie einige der gängigsten SocialMedia-Symbole in die Kopf- und Fusszeile einfügen. Diese werden in einer festen Reihenfolge angezeigt. Sie haben aber die Möglichkeit, die Reihenfolge anzupassen – hier einige Möglichkeiten, die SocialMedia-Icon-Reihenfolge in der Fusszeile anzupassen.
Als erstes zeigen wir Ihnen, wie Sie die Reihenfolge der Icons einfach umdrehen und die Icons in umgekehrter Reihenfolge anzeigen. Das funktioniert mit dem folgenden CSS-Code, den Sie in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen:
#main-footer .et-social-icons {
display: flex;
flex-direction: row-reverse;
}Neben dieser reinen Umkehrung der Icons, können Sie die SocialMedia-Symbol-Reihenfolge auch selbst bestimmen. Dies geschieht mittels folgendem Code, den Sie unter Design/Customizer/Zusätzliches CSS in Ihr CSS-Stylesheet einbinden:
#main-footer .et-social-icons {
display: flex;
}
#main-footer .et-social-icons li:nth-of-type(1) {
order: 2;
}
#main-footer .et-social-icons li:nth-of-type(2) {
order: 2;
}
#main-footer .et-social-icons li:nth-of-type(3) {
order: 3;
}
#main-footer .et-social-icons li:nth-of-type(4) {
order: 5;
}
#main-footer .et-social-icons li:nth-of-type(5) {
order: 1;
}DerPart nth-of-type(...) identifiziert ein Symbol anhand seiner ursprünglichen Position, und der Teil order gibt seine neue Position an. Die letzte CSS-Regel besagt zum Beispiel, dass das Symbol, das sich ursprünglich an der fünften Position befand, an die Position eins der Reihenfolge gesetzt wird. Das gesamte Beispiel kann an jede gewünschte Reihenfolge angepasst werden.
Werbung
Werbung
