Trick # 191 | Dieser Beitrag beinhaltet 458 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Blogmodul des Divi-Themes bietet eine Handvoll gute Einstellmöglichkeiten; die Paginierung allerdings – also z.B. der «ältere Beiträge»-Link – sieht etwas erbärmlich aus. Er lässt sich aber mit wenig CSS in eine ansprechende Schaltfläche umwandeln. Hier erfahren Sie, wie das geht.
Sie benötigen bloss eine Handvoll Zeilen Code. Kopieren Sie den nachfolgenden Block und fügen Sie ihn in das Stylesheet Ihrer WordPress-Website – unter Design/Customizer/Zusätzliches CSS – ein:
/* Blog-Paginierung stylen und als Button darstellen */
.pagination .alignleft a,
.pagination .alignright a {
color: #ffffff;
background: #293280;
border: 2px solid #293280;
padding: .7em 1.3em;
border-radius: 50px;
text-transform: capitalize;
transition: all 0.3s ease-in-out;
}
/* Blog-Paginierung beim hovern stylen und als Button darstellen */
.pagination .alignleft a:hover,
.pagination .alignright a:hover {
background: #ffffff;
color: #293280;
border: 2px solid #293280;
transition: all 0.3s ease-in-out;
}Ab sofort werden nun die Blog-Paginierungen nicht mehr als dröge Textlinks, sondern als hübsche Buttons dargestellt.
Natürlich sollten Sie noch Anpassungen vornehmen: die verwendeten Farben müssten zum Design Ihrer Website passen. Und noch zahlreiche weitere Darstellungsoptionen können Sie nach Gusto definieren.
Ziemlich easy. Oder?
vorher:
nachher:
Werbung
Werbung
