Seiten-Navigation in Divi-Blogbeiträgen aufhübschen

12. Juni 2022 | CSS-Stylesheet, Divi-Theme, Plugins

Elegant Themes – der Hersteller des Divi-Themes – empfiehlt für eine Paginierung von Blog-Beiträgen das Plugin WP-PageNavi. Nur leider sieht das Resultat standardmässig nicht so hübsch aus. Mit ein wenig CSS wird das Ganze besser lesbar und passt sich besser in das Divi-Design ein.

Zunächst: Das Plugin WP-PageNavi erhalten Sie unter diesem Link. Sie können es im WordPress-Backend unter «Plugins» installieren.

Wenn Sie das Plugin aktivieren werden Sie vielleicht von der Darstellung nicht sehr angetan sein. Den folgenden CSS-Code können Sie nach Ihren Bedürfnissen anpassen und erhalten damit eine aufgehübschte Darstellung. Den CSS-Code fügen Sie ein unter Design/Customizer/Zusätzliches CSS:

 

.wp-pagenavi span, .wp-pagenavi a, .wp-pagenavi :last-child {
  border: 1px solid #bbb !important;
  padding: 6px 12px;
  margin: 0; 
}
.wp-pagenavi span, .wp-pagenavi a { border-right: none !important; }

.wp-pagenavi span, .wp-pagenavi a {
  font-weight: bold !important;
  color: #999 !important
}

.wp-pagenavi span.current,
.wp-pagenavi a:hover {
  color: #666 !important;
  background-color: #ddd !important;
}

.wp-pagenavi :first-child { color: #666 !important; }

.wp-pagenavi .nextpostslink:before { content: 'Weiter '; }
.wp-pagenavi .previouspostslink:after { content: ' Zurück'; }

Hier eine kurze Aufstellung was der Code tut. Sämtliche Einstellungen können Sie natürlich – Ihrem Design entsprechend – anpassen.

  • Zeile 1 bis 6: Ränder und Rahmen der Page-Navigation festlegen
  • Zeile 8 bis 11: Textattribute festlegen
  • Zeile 13 bis 17: Der aktive und der hover-Link wird gestylt
  • Zeile 19: Der Seitenzähler wird gestylt
  • Zeile 21 und 22: Die Texte der Weiter- und Zurück-Links werden festgelegt

Den Code können Sie nach Belieben verändern oder erweitern, bis die Ausgabe dem Design Ihrer Website entspricht.

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