Blog-Modul-Special #4: Blog-Paginierung im Divi-Theme als Schaltflächen darstellen

22. Dezember 2022 | CSS-Stylesheet, Divi-Theme

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This