Eine praktische Anleitung zum Stylen der Paginierung in Divi

Die Paginierung ist eines der Elemente einer Website, die oft übersehen werden, insbesondere wenn es um das Design geht. Und es gibt mehrere Stellen, an denen die Paginierung für die Verwendung in Ihrer Website geeignet sein kann. Grundsätzlich ermöglicht die Paginierung (oder ein Paginierungsmenü) den Benutzern, durch mehrere Seiten mit Elementen zu navigieren (z. B. ein Archiv von Beiträgen). Dies ist besonders hilfreich, um den anfänglichen Seiteninhalt zu reduzieren.

Divi verfügt über mehrere Module, die Paginierung enthalten (wie das Galeriemodul), die mit integrierten Einstellungen gestaltet werden können. Einige dieser Module (wie Blog und Portfolio) erben die Standard-Paginierung des Divi-Themes (oder WordPress), die für einige Websites zu stark vereinfacht werden kann. Aber mit Hilfe eines Plugins können Sie die Paginierung Ihres gesamten Themes durch eine komplexere ersetzen. Dann können Sie es mit CSS so gestalten, wie Sie es benötigen.

In diesem Tutorial zeige ich Ihnen, wie Sie die Paginierung in Divi gestalten. Hier ist, was wir durchgehen werden:

• Dinge, die Sie beim Stylen der Paginierung in Divi . beachten sollten
• Styling des Divi-Galerie-Moduls und der filterbaren Portfolio-Modul-Paginierung
• Erweiterte Paginierungsstile für das Galeriemodul und das filterbare Portfoliomodul
• Blog-Modul und Portfolio-Modul-Paginierung gestalten
• Hinzufügen komplexer Paginierung zu Divi mit dem WP-PageNavi-Plugin
• WP-PageNavi-Paginierung mit benutzerdefiniertem CSS gestalten

Lass uns anfangen.

Vorgeschmack

In diesem Beitrag geht es hauptsächlich darum, wie man die Paginierung gestaltet. Hier sind jedoch einige komplexe Paginierungsstile, die ich Ihnen zeige, wie Sie sie erstellen.

Einstieg

Abonnieren Sie unseren Youtube-Kanal

Für dieses Tutorial benötigen Sie Folgendes:

• das Divi-Theme installiert und aktiv ist.
• Um die Paginierungsdesigns verschiedener Module zu testen, benötigen Sie einige simulierte Inhalte. Um zum Beispiel die Paginierung des Portfolios (oder des filterbaren Portfolios) zu gestalten, benötigen Sie etwa 12-16 Projekte, die zu Ihrem Thema hinzugefügt werden, damit Sie über genügend Inhalt verfügen, damit die Paginierung wirksam wird. Für das Galeriemodul benötigen Sie außerdem etwa 12-16 Bilder, um die Galerie zu füllen.
• Wenn Sie das WP-PageNavi-Plugin verwenden möchten, müssen Sie das Plugin installieren und aktivieren. Dies ist ein kostenloses Plugin, das aus dem WordPress-Verzeichnis im WordPress-Dashboard deiner Website heruntergeladen werden kann. Navigieren Sie einfach zu Plugin > Neu hinzufügen und suchen Sie nach WP-PageNavi.
  

Sobald Sie einige simulierte Inhalte erstellt haben, können Sie eine neue Seite erstellen. Navigieren Sie in Ihrem WordPress-Dashboard zu Seiten > Neu hinzufügen. Geben Sie Ihrer Seite einen Titel und stellen Sie den Divi Builder bereit. Wählen Sie die Option „Von Grund auf neu erstellen“. Klicken Sie dann auf Build on the Front End.

Jetzt können Sie mit dem Testen einiger Paginierungsdesigns beginnen.

Dinge, die Sie beim Stylen der Paginierung in Divi . beachten sollten

Im Allgemeinen möchten Sie sich mit der Gestaltung der Paginierung wahrscheinlich nicht zu verrückt machen, denn wie bei jedem Navigationsmenü ist es wichtig, es einfach und intuitiv zu halten. Hier sind jedoch einige Dinge, die Sie beim Entwerfen der Paginierung in Divi beachten sollten.

Paginierung Schriftart

Die Paginierung ist ein großartiger Ort, um sich von den wichtigsten Schriftarten zu lösen, die Sie für Ihre Website verwenden. Sie möchten die besten Schriftarten auswählen, die auf Benutzeroberflächen und Navigation ausgerichtet sind. Und da die Paginierung hauptsächlich Zahlen enthält, möchten Sie sicherstellen, dass die Schriftart alle Zahlen mit gleicher Höhe und Breite anzeigt (was Typografieexperten als Lining und Tabular bezeichnen). Einige meiner konservativen Favoriten sind Oxygen, Nunito Sans und Source Sans Pro. Und wenn Sie viele Seiten in Ihrer Paginierung haben, müssen Sie möglicherweise etwas Platz schaffen, indem Sie eine komprimierte Schriftart wie Fjalla One oder Roboto Condensed verwenden.

Paginierung Schriftstil

Sie können auch einige Schriftstile ausprobieren, um Ihre Paginierung zu unterscheiden. Sie können beispielsweise den Großbuchstaben-Schriftstil verwenden, um die "nächsten" und "zurück"-Links ausgeprägter und gleich der Höhe der Seitenzahlen zu machen. Das Hinzufügen des Unterstrich-Schriftstils kann jedoch etwas überflüssig sein, wenn man bedenkt, dass sich die Links bereits in einem Navigationsmenü befinden.

Paginierung Buchstabenabstand

Der Buchstabenabstand ist eine großartige Möglichkeit, Ihrer Paginierung etwas mehr horizontalen Abstand hinzuzufügen. Dies kann ein schönes Designelement hinzufügen und die Navigation hervorheben.

Paginierung Textausrichtung

In Divi können Sie Ihre Paginierung ganz einfach links, mittig oder rechts auf der Seite ausrichten. Vergessen Sie dies also nicht, wenn Sie Ihre Webseite gestalten.

Anklickbarer Bereich

Es ist wichtig, genügend anklickbaren Platz für Ihre Paginierungslinks zu haben. Standardmäßig ist dies ziemlich klein. Sie können den anklickbaren Raum vergrößern, indem Sie größeren Text verwenden oder die Zeilenhöhe erhöhen. Sie können diese Links jedoch auch mit etwas CSS auffüllen.

Paginierungstextgröße

Die Paginierungstextgröße ist normalerweise ziemlich klein. Dies soll wahrscheinlich verhindern, dass Benutzer vom Inhalt der Seite abgelenkt werden. Eine größere Textgröße kann jedoch den anklickbaren Raum des Paginierungslinks vergrößern und für Benutzer auffälliger machen. Ich verwende gerne eine vw-Längeneinheit für größeren Paginierungstext, damit er gut mit dem Browser und dem Inhalt skaliert.

Paginierungszeilenhöhe

Da die Paginierung normalerweise in einer Zeile bleibt, können Sie den Links etwas mehr Zeilenhöhe hinzufügen, um zusätzlichen anklickbaren Platz hinzuzufügen.

Paginierung Textschatten

Textschatten kann ablenken, wenn er schlecht verwendet wird. Lassen Sie es am besten weg, es sei denn, Sie planen, es subtil zu halten. Es kann auch verwendet werden, um Ihrem Text einen kreativen Glanz zu verleihen, wenn Sie so etwas möchten.

Paginierung Aktive Seite

Dieser Aspekt der Paginierung ist wichtig, damit Benutzer wissen, auf welcher Seite sie sich gerade befinden, wenn sie navigieren. Es sollte ein klarer Kontrast zwischen dem Stil des aktiven Seitenlinks und der nicht aktiven Seitenlinks bestehen. Standardmäßig verwendet Divi die im Theme Customizer festgelegte primäre Akzentfarbe als Farbe des aktiven Seitenlinks in Divi. Sie können dies jedoch mit einer CSS-Zeile überschreiben.

Für Module mit Paginierung bietet Divi integrierte Designoptionen zum Gestalten verschiedener Elemente der Paginierung. Außerdem können Sie ganz einfach einige CSS-Schnipsel in der Registerkarte „Erweitert“ hinzufügen, um noch mehr Kontrolle über das Design an einem praktischen Ort zu erhalten.

Aber für die Paginierung auf Theme-Ebene können Sie eine komplexe Lösung mit dem WP-PageNavi-Plugin mit benutzerdefiniertem CSS erhalten (mehr dazu später).

Beginnen wir zunächst damit, wie man die Paginierung in Divi-Modulen gestaltet.

Styling des Divi-Galerie-Moduls und der filterbaren Portfolio-Modul-Paginierung

Wenn der Divi Builder auf einer neuen Seite aktiv ist, erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann der Zeile ein filterbares Portfoliomodul hinzu. Stellen Sie, wie bereits erwähnt, sicher, dass Sie 12-16 Projekte erstellt haben, damit Sie die Paginierung sehen können.

Aktualisieren Sie in den filterbaren Portfolioeinstellungen Folgendes:

Beitragsnummer: 4 (damit Sie mehr Seitenlinks in der Paginierung sehen können)

Titel anzeigen: NO
Kategorien anzeigen: Nein

Standardmäßig zeigt Divi Pagination an, also lassen Sie diese Option auf JA gesetzt.

Sie sollten die Paginierung unten rechts im Portfolio sehen.

Um die Paginierung zu gestalten, gehen Sie zur Design-Registerkarte und öffnen Sie den Paginierungstext-Schalter, um alle verfügbaren Optionen anzuzeigen. Aktualisieren Sie Folgendes:

Layout: Gitter
Paginierungsschrift: Source Sans Pro
Paginierungs-Schriftart: TT
Paginierung Textausrichtung: Mitte
Paginierungstextfarbe: #cccccc
Paginierungstextgröße: 4vw (Desktop), 38px (Tablet und Telefon)
Paginierung Buchstabenabstand: 1vw
Paginierungszeilenhöhe: 2em

Klicken Sie dann auf die Registerkarte "Erweitert" und fügen Sie unter Pagination Active Page das folgende CSS-Snippet hinzu:

color: #0096eb !important;

Indem Sie den Text mit einer größeren Zeilenhöhe vergrößern, haben Benutzer mehr anklickbaren Platz. Wenn Sie die Ausrichtung in die Mitte ändern und einen kleinen Buchstabenabstand hinzufügen, wird die Paginierung deutlicher. Und die benutzerdefinierte Paginierungstextfarbe mit der kontrastierenden aktiven Seitenfarbe hilft dem Benutzer zu wissen, auf welcher Seite er sich befindet.

Andere schnelle CSS-Snippets

Hier sind ein paar schnelle und einfache CSS-Schnipsel, um das Paginierungsdesign zu ändern.

Um die Standard-Umrandungslinie, die direkt über der Paginierung sitzt, herauszunehmen, können Sie unter Portfolio-Paginierung das folgende CSS eingeben:

border: none;

Um Ihrer Paginierung einen vollständigen Rahmen zu geben, können Sie unter Portfolio-Paginierung folgendes CSS eingeben:

border: 2px solid #dddddd;

Um der Paginierung eine Hintergrundfarbe zu geben, können Sie unter Portfolio-Paginierung folgendes CSS eingeben:

background: #333333;

Funktioniert auch für das Galeriemodul

Dieselben Designeinstellungen funktionieren auch für das Galeriemodul. Tatsächlich können Sie die Paginierungstextstile aus dem filterbaren Portfolio-Modul kopieren und in ein Galerie-Modul einfügen! Stellen Sie nur sicher, dass Sie auch alle CSS-Snippets übertragen.

Erweiterte Paginierungsstile für das Galeriemodul und das filterbare Portfoliomodul

Wenn Sie ein fortgeschritteneres Design für die Paginierung Ihrer filterbaren Portfolio- und Galeriemodule erhalten möchten, können Sie etwas fortgeschritteneres benutzerdefiniertes CSS verwenden. Was mir an diesem speziellen Beispiel gefällt, ist, dass das benutzerdefinierte CSS mit den integrierten Einstellungen des Moduls zusammenarbeitet.

Zur Veranschaulichung verwenden wir erneut das filterbare Portfolio. Aktualisieren Sie diesmal die Designoptionen mit den folgenden Elementen:

Layout: Gitter
Paginierungstextgröße: 16px
Paginierungszeilenhöhe: 2.5em

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

CSS-Klasse: pagi-space

Dadurch kann unser CSS nur auf dieses Modul angewendet werden.

Speichern Sie nun Ihre Einstellungen und öffnen Sie das Popup-Modal für die Seiteneinstellungen. Fügen Sie auf der Registerkarte "Erweitert" den folgenden CSS-Code in das Feld "Benutzerdefiniertes CSS" ein.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

Wenn der Code vorhanden ist, können Sie sehen, dass die Paginierung jetzt mehr anklickbaren Platz für jeden der Seitenlinks hat. Und den Links wurden auch Hintergrundfarben hinzugefügt, damit sie eher wie anklickbare Schaltflächen aussehen. Ein subtiler Rahmen wird auch jedem der Links beim Hover hinzugefügt. Der aktive Seitenlink zeichnet sich durch einen kontrastierenden dunklen Hintergrund mit hellerer Textfarbe aus.

Dieser Code gestaltet die Paginierung sowohl für das filterbare Portfolio-Modul als auch für das Galerie-Modul. Stellen Sie nur sicher, dass Sie dem Modul die CSS-Klasse „pagi-space“ hinzufügen, damit es wirksam wird.

Hier ist das Ergebnis auf dem filterbaren Portfolio-Modul.

Blog-Modul und Portfolio-Modul-Paginierung gestalten

Das Blog-Modul und das Portfolio-Modul erben die standardmäßige WordPress-Paginierung, die es Ihnen ermöglicht, mit einem Link zu „Ältere Einträge“ und einem Link zu „Nächste Einträge“ durch Ihr Post-Archiv zu navigieren.

So sieht die Standard-Paginierung auf der Blog-Archivseite im Divi-Theme aus:

Dieselbe Paginierung wird vom Blog-Modul und Portfolio-Modul verwendet.

Wenn Sie das Blog-Modul (oder Portfolio-Modul) verwenden, können Sie den Paginierungstext mithilfe der integrierten Einstellungen formatieren.

Dies ist in den meisten Fällen eine einfache und elegante Lösung. Wenn Sie jedoch nach einer komplexeren Paginierung suchen, um die standardmäßige Divi/WordPress-Paginierung zu ersetzen, gibt es eine Lösung, die so einfach ist, dass Sie sie überraschen kann.

Hinzufügen komplexer Paginierung zu Divi mit dem WP-PageNavi-Plugin

Wenn Sie eine erweiterte Paginierung für Ihr gesamtes Divi-Theme wünschen, einschließlich des Blog-Moduls und des Portfolio-Moduls, können Sie die standardmäßige WordPress-Paginierung mithilfe des beliebten Plugins namens WP-PageNavi durch eine andere ersetzen. Dieses Plugin funktioniert gut mit Divi. Das Design ist einfach, kann aber mit CSS leicht angepasst werden.

Hinzufügen des Plugins zu Divi

Falls noch nicht geschehen, installieren Sie das Plugin wie im Abschnitt „Erste Schritte“ oben im Beitrag beschrieben. Sobald das Plugin installiert und aktiv ist, wird die neue Form der Paginierung automatisch in Ihrem Design angezeigt.

Es betrifft auch das Blog-Modul und das Portfolio-Modul.

Plugin-Einstellungen

Sie können die Plugin-Einstellungen in Ihrem WordPress-Dashboard finden, indem Sie zu Einstellungen > WP-PageNavi navigieren.

Die Einstellungen dienen in erster Linie der Anpassung der Funktionalität und des angezeigten Textinhalts. Wenn Sie jedoch die Paginierung gestalten möchten, müssen Sie benutzerdefiniertes CSS verwenden.

WP-PageNavi-Paginierung mit benutzerdefiniertem CSS gestalten

Da Sie wahrscheinlich die Paginierung für das gesamte Theme formatieren möchten, ist es am sinnvollsten, das CSS zum Theme Customizer oder Ihrer Child Theme style.css Datei hinzuzufügen. Fahren Sie fort und fügen Sie das folgende CSS in das Feld Theme Customizer Additional CSS ein:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

Hier ist das Endergebnis.

Styling von WP-PageNavi im Blog-Modul und Portfolio-Modul

Wie bereits erwähnt, erben das Blog-Modul und das Portfolio-Modul die standardmäßige WordPress-Seitennavigation. Da dies durch die neue komplexe Paginierung von WP-PageNavi ersetzt wurde, werden die Module auch diese neue Paginierung anzeigen.

Sie können die integrierten Paginierungstext-Designoptionen verwenden, um der Paginierung weitere Formatierungen hinzuzufügen.

Beachten Sie jedoch, dass einige der Optionen mit externem benutzerdefiniertem CSS möglicherweise nicht wie erwartet funktionieren.

Abschließende Gedanken

Die Paginierung muss beim Erstellen einer Website in Divi nicht nur ein nachträglicher Gedanke sein. Es gibt einige hilfreiche integrierte Optionen, die bei Modulen helfen, die Paginierung verwenden. Und mit etwas benutzerdefiniertem CSS können Sie jeden gewünschten Stil erstellen. Das WP-PageNavi-Plugin ist eine elegante Lösung zum Hinzufügen einer komplexen Paginierung im gesamten Divi-Theme. Es funktioniert nicht nur nahtlos mit Divi, es bietet Ihnen auch zusätzliche Optionen, die Sie leicht anpassen können. Das Styling der WP-PageNavi-Paginierung erfordert etwas CSS, aber hoffentlich bringt Sie die in diesem Artikel verwendete Vorlage auf den richtigen Weg.

Die Beispieldesigns in diesem Beitrag waren absichtlich einfach.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!