So gestalten Sie die Paginierung im filterbaren Portfolio-Modul von Divi

Das filterbare Portfolio-Modul von Divi ist eine großartige und einfache Möglichkeit, Ihre Arbeit und Projekte auf Ihrer Website anzuzeigen. Sie können Kategorien verwenden, um verschiedene Filter für Ihr Portfolio-Modul zu erstellen, und es bietet eine einfache Möglichkeit, ein aktuelles Portfolio zu halten, ohne jedes Mal Ihr Website-Design ändern zu müssen. Fügen Sie einfach ein neues Projekt im WordPress-Dashboard hinzu, dann wird es automatisch im Portfolio-Modul auf Ihrer Website ausgefüllt, solange es richtig kategorisiert ist.

In diesem Tutorial zeigen wir Ihnen 3 verschiedene Möglichkeiten, die Paginierung im filterbaren Portfolio-Modul von Divi zu gestalten. Indem Sie dieses Design anpassen, können Sie das Portfolio-Modul an das Gesamtdesign Ihrer Website anpassen und die Aufmerksamkeit auf die Arbeit lenken, die Sie anzeigen möchten.

Lass uns anfangen!

Vorgeschmack

Hier ist eine Vorschau dessen, was wir entwerfen werden

Paginierungsstil Eins

Paginierungsstil Zwei

Paginierungsstil Drei

Was Sie für den Einstieg benötigen

Installieren und aktivieren Sie Divi

Bevor wir beginnen, installieren und aktivieren Sie das Divi-Design und stellen Sie sicher, dass Sie die neueste Version von Divi auf Ihrer Website haben.

Portfolio-Projekte hinzufügen

Damit das Portfolio mit Projekten gefüllt wird, nachdem wir es zu unserer Seite hinzugefügt haben, müssen wir zuerst die Projekte im WordPress-Dashboard hinzufügen. Wählen Sie in der Seitenleiste des WordPress-Dashboards Projekte aus und fügen Sie dann ein neues Projekt hinzu. Stellen Sie sicher, dass das Projekt ein vorgestelltes Bild und eine Kategorie hat, damit es gefiltert werden kann.

Jetzt können Sie loslegen!

So gestalten Sie die Paginierung im filterbaren Portfolio-Modul von Divi

Erstellen Sie eine neue Seite mit einem vorgefertigten Layout

Beginnen wir mit der Verwendung eines vorgefertigten Layouts aus der Divi-Bibliothek. Für dieses Design verwenden wir die Painter-Portfolioseite aus dem Painter-Layoutpaket.

Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie die Option Divi Builder verwenden.

Wir werden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek verwenden, also wählen Sie Layouts durchsuchen.

Suchen Sie nach dem Seitenlayout Painter-Portfolio und wählen Sie es aus.

Wählen Sie Dieses Layout verwenden aus, um das Layout zu Ihrer Seite hinzuzufügen.

Jetzt sind wir bereit, unser Design zu erstellen.

Fügen Sie das Modul „Filterbares Portfolio“ hinzu

Wir werden die bestehenden Portfolio-Inhalte auf dieser Seite durch das filterbare Portfolio-Modul ersetzen. Löschen Sie zuerst den vorhandenen Portfolioabschnitt.

Fügen Sie als Nächstes einen neuen Abschnitt auf der Seite unterhalb des Abschnitts „Neueste Arbeiten“ ein.

Fügen Sie dann dem Abschnitt eine Zeile mit einer einzelnen Spalte hinzu.

Fügen Sie das filterbare Portfolio-Modul zur neuen Zeile hinzu.

Ihr filterbares Portfolio sollte mit Ihren Projekten gefüllt sein, solange sie zum Projektbereich des WordPress-Dashboards hinzugefügt wurden.

Filterbare Portfolio-Einstellungen

Lassen Sie uns nun das Design des filterbaren Portfolios anpassen. Öffnen Sie die Moduleinstellungen und ändern Sie die Anzahl der Beiträge auf 6.

• Beitragsanzahl: 6

Deaktivieren Sie unter Elemente Kategorien anzeigen.

• Kategorien anzeigen: Nein

Wechseln Sie zum Design-Tab und öffnen Sie die Layout-Einstellungen. Stellen Sie das Layout auf Raster ein.

• Layout: Gitter

Öffnen Sie als Nächstes die Overlay-Einstellungen. Legen Sie die Zoom-Symbolfarbe, die Hover-Overlay-Farbe und die Hover-Symbolauswahl wie folgt fest:

• Farbe des Zoom-Symbols: #fdd23a
• Hover-Overlay-Farbe: rgba(61,61,61,0,28)
• Hover-Symbolauswahl: Plus-Symbol

Öffnen Sie die Bildeinstellungen und fügen Sie dann einen Bildfeldschatten hinzu.

Stellen Sie dann die Schattenfarbe ein.

• Schattenfarbe: #f2f2f2

Ändern Sie als Nächstes die Einstellungen für die Titelschriftart wie folgt:

• Titelschriftart: Merriweather
• Schriftstärke des Titels: Fett
• Titeltextfarbe#000000

Legen Sie die Titeltextgröße und die Zeilenhöhe fest.

• Titeltextgröße: 25px
• Titelzeilenhöhe: 2em

Wechseln Sie zum Abschnitt Filter Criteria Text und ändern Sie die Schriftarteinstellungen wie folgt:

• Filterkriterien Schriftart: Montserrat
• Filterkriterien Schriftstärke: Fett
• Textfarbe für Filterkriterien: #000000

Jetzt, da der größte Teil unseres Moduldesigns abgeschlossen ist, können wir mit der Anpassung der Paginierungsstile fortfahren.

Paginierungsstil Eins

Für den ersten Paginierungsstil legen wir eine andere Schriftfarbe für die aktive Seite fest. Außerdem werden wir die Größe des Paginierungstextes so einstellen, dass sie sich beim Hover erhöht. Lass uns anfangen.

Öffnen Sie in den filterbaren Portfolioeinstellungen die Paginierungstexteinstellungen. Passen Sie die Schriftart wie folgt an:

• Paginierungsschrift: Montserrat
• Paginierung Schriftstärke: Fett
• Paginierungstextausrichtung: Rechts
• Paginierungstextfarbe: #000000

Legen Sie die Textgröße fest. Dann. Verwenden Sie die Hover-Einstellungen, um die Textgröße beim Hover zu erhöhen.

• Paginierungstextgröße: 17px
• Paginierungstextgröße beim Hover: 21px

Navigieren Sie schließlich zur Registerkarte „Erweitert“ und fügen Sie das folgende benutzerdefinierte CSS zum CSS-Abschnitt „Pagination Active Page“ hinzu. Dadurch wird die gelbe Farbe auf der aktiven Seite aktiviert.

color: #FDD23A !important;

Endgültiges Design

Und hier ist der endgültige Look für unser erstes Design.

Paginierungsstil Zwei

Der zweite Paginierungsstil, den wir entwerfen, umfasst eine Hintergrundfarbe hinter der Paginierung, einige Hover-Farbeffekte und eine andere Farbe für die aktive Seite.

Öffnen Sie in den filterbaren Portfolioeinstellungen die Paginierungstexteinstellungen. Passen Sie die Schriftart wie folgt an:

• Paginierungsschriftart: Merriweather
• Paginierung Schriftstärke: Fett
• Paginierung Textausrichtung: Zentriert
• Paginierungstextfarbe: #9e9e9e
• Paginierungstextfarbe beim Hover: #000000

Stellen Sie als Nächstes die Textgröße und die Zeilenhöhe ein.

• Paginierungstextgröße: 26px
• Höhe der Paginierungszeile: 2em

Wechseln Sie zur Registerkarte „Erweitert“ und fügen Sie das folgende benutzerdefinierte CSS zum CSS-Abschnitt „Portfolio-Paginierung“ hinzu. Dadurch wird eine Hintergrundfarbe hinzugefügt und der Rand entfernt:

background:#f2f2f2;
border:none;

Fügen Sie abschließend das folgende CSS zum CSS-Abschnitt „Pagination Active Page“ hinzu, um eine andere Textfarbe für die aktive Seite festzulegen.

color: #000000 !important;

Endgültiges Design

Hier ist das endgültige Design für unseren zweiten Paginierungsstil.

Paginierungsstil Drei

Für unser endgültiges Paginierungsdesign fügen wir einen gelben Kreis hinter der aktiven Seite hinzu. Wir werden auch eine andere Schriftfarbe für die aktive Seite und beim Hover festlegen.

Öffnen Sie in den filterbaren Portfolioeinstellungen die Paginierungstexteinstellungen. Passen Sie dann die Schriftart wie folgt an:

• Paginierungsschriftart: Merriweather
• Paginierung Schriftstärke: Fett
• Paginierung Textausrichtung: Zentriert
• Paginierungstextfarbe: #000000
• Paginierungstextfarbe beim Hover: #FDD23A
• Paginierungstextgröße: 26px

Wechseln Sie zur Registerkarte „Erweitert“ und fügen Sie das folgende benutzerdefinierte CSS zum CSS-Abschnitt „Portfolio-Paginierung“ hinzu, um den Rahmen zu entfernen:

border:none;

Fügen Sie abschließend das folgende CSS zum CSS-Abschnitt „Pagination Active Page“ hinzu. Dieses CSS legt eine andere Textfarbe und einen kreisförmigen Hintergrund für die aktive Seite fest.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

Endgültiges Design

Hier ist das endgültige Design für unser letztes Layout.

Endergebnis

Werfen wir nun einen Blick auf alle drei endgültigen Designs mit unseren verschiedenen Paginierungsstilen.

Paginierungsstil Eins

Paginierungsstil Zwei

Paginierungsstil Drei

Abschließende Gedanken

Das filterbare Portfolio-Modul lässt sich einfach an das Design Ihrer Website anpassen, und Sie können schnell neue Projekte aus dem WordPress-Dashboard hinzufügen, um Ihr Portfolio auf dem neuesten Stand zu halten. Dieses Modul eignet sich hervorragend für Designer, Künstler, Fotografen und andere Kreative, um ihre Arbeit mit schönen Bildern und einfacher Navigation zu präsentieren. Weitere einzigartige Portfolio-Designideen finden Sie in diesem Tutorial zum Erstellen einer dynamischen Portfolio-Projektvorlage. Haben Sie das filterbare Portfolio-Modul auf Ihrer Website verwendet? Lass es uns in den Kommentaren wissen!