So gestalten Sie den Kategoriefilter im filterbaren Portfolio-Modul von Divi

Das filterbare Portfolio-Modul von Divi enthält viele Elemente, von denen jedes individuell gestaltet werden kann. Der Filter ist eines der nützlichsten Elemente, wird aber manchmal übersehen. In diesem Beitrag erfahren Sie, wie Sie den Kategoriefilter im Filterable Portfolio Module von Divi gestalten. Wir werden sehen, was mit den Standardeinstellungen gemacht werden kann, und wir werden uns mit CSS befassen, um zu sehen, wie man es noch weiter gestalten kann.

Lass uns anfangen!

Vorschau

Lassen Sie uns zunächst sehen, was wir in diesem Tutorial erstellen werden.

Beispiel 1 für Desktop-Kategoriefilter

Telefonkategorie Filter Beispiel 1

Desktop-Kategoriefilter – Beispiel zwei

Filter für Telefonkategorie, Beispiel 2

Desktop-Kategoriefilter – Beispiel drei

Filter für Telefonkategorie, Beispiel 3

Aufteilen von Projekten in Kategorien

Um den Kategoriefilter optimal zu nutzen, müssen Sie Ihre Projekte in Kategorien aufteilen, die für Ihre Leser am sinnvollsten sind. Um Ihre Kategorien zu erstellen, gehen Sie im WordPress-Dashboard zu Projekte > Kategorien .

Hier sehen Sie Felder zum Hinzufügen von Name, Slug, übergeordneter Kategorie und Beschreibung. Sie sehen auch Ihre Liste mit Kategorien in einer Liste, in der Sie sie bearbeiten können.

Nachdem Sie Ihre Kategorien erstellt haben, achten Sie darauf, für jedes Ihrer Projekte diejenigen auszuwählen, die für den Leser am sinnvollsten sind. Um Ihre Projekte zu erstellen, gehen Sie zu Projekte und klicken Sie im Menü oder oben auf der Seite auf Neu hinzufügen.

Für meine Beispiele habe ich Projekte für eine Wohnungsrenovierungsfirma erstellt. Das Unternehmen würde sich auf Hausrenovierungen konzentrieren, aber auch ähnliche Arbeiten für Unternehmen umfassen und von Grund auf neu bauen. Für Häuser verwende ich die Kategorien Innen und Außen. Für alle anderen Arbeiten habe ich Corporate und Construction hinzugefügt.

Filterbare Portfolio-Moduleinstellungen

In unserem Beispiel ersetze ich den Portfolio-Bereich der Portfolio-Seite aus dem kostenlosen Renovierungs-Layout-Paket durch ein filterbares Portfolio-Modul. Sehen wir uns zunächst an, wie das Modul formatiert wird. Dann gestalten wir den Filter auf drei verschiedene Arten. Hier ist die Seite, bevor ich die Änderungen vornehme.

Hier ist die Seite nach dem Hinzufügen des Filterable Portfolio Module anstelle der Bilder.

Zuerst formatieren wir das Modul. Wir verwenden dieselben Einstellungen für alle drei Beispiele.

Inhalt

Stellen Sie auf der Registerkarte Inhalt die Anzahl der Beiträge auf 8 ein und wählen Sie die Kategorien aus der Liste der enthaltenen Kategorien aus.

• Beitragsanzahl: 8
• Enthaltene Kategorien: Ihre Wahl

Elemente

Scrollen Sie nach unten zu Elements und deaktivieren Sie Show Categories . Wir verwenden nur die Titel und erlauben dem Filter, die Kategorien anzuzeigen.

• Kategorien anzeigen: Nein

Layout

Wechseln Sie als Nächstes zur Registerkarte „ Design “ und wählen Sie „Raster“ unter „Layout“ aus. Ich hatte es bereits für die vorherigen Bilder ausgewählt, aber das Modul zeigt standardmäßig die volle Breite an.

• Layout: Gitter

Text

Scrollen Sie als Nächstes zu Text und stellen Sie die Textausrichtung auf Zentrieren ein. Dadurch werden der Filter und die Paginierung mit dem Modul und die Titel mit den Projektbildern zentriert.

• Textausrichtung: Zentriert

Titeltext

Scrollen Sie als Nächstes zu Titeltext . Ändern Sie die Schriftart in Kanit und stellen Sie das Gewicht auf Semi Bold ein. Stellen Sie die Farbe auf Schwarz ein.

• Schrift: Kanit
• Gewicht: Halbfett
• Farbe: #000000

Ändern Sie die Schriftgröße auf 20 Pixel für Desktops, 18 Pixel für Tablets und 16 Pixel für Telefone. Stellen Sie den Zeilenabstand auf 1px und die Zeilenhöhe auf 1,3em ein.

• Größe: 20 Pixel Desktop, 18 Pixel Tablet, 16 Pixel Telefon
• Buchstabenabstand: 1px
• Zeilenhöhe: 1,3 m

Paginierungstext

Scrollen Sie als Nächstes nach unten zu Paginierungstext und ändern Sie die Schriftart in Kanit. Ändern Sie die Farbe in Schwarz.

• Schrift: Kanit
• Farbe: #000000

Ändern Sie den Zeilenabstand auf 1 Pixel. Sichere deine Arbeit. Wir können jetzt den Kategoriefilter für unsere Beispiele gestalten.

• Buchstabenabstand: 1px

Beispiele für Kategoriefilter

Jetzt können wir zu unseren Beispielen für Kategoriefilter übergehen. Ich verwende Designhinweise aus dem Layoutpaket.

Kategoriefilter Beispiel 1

Unser erstes Beispiel ist das einfachste der drei. Es verwendet die Grundeinstellungen und macht nichts Besonderes. Es funktioniert gut mit dem Layout-Design.

Filterkriterientext

Scrollen Sie auf der Registerkarte Design nach unten zu Criteria Text . Ändern Sie die Schriftart in Kanit. Ändern Sie den Stil in TT und die Farbe in Schwarz.

• Schrift: Kanit
• Stil: TT
• Farbe: #000000

Stellen Sie den Zeilenabstand auf 1px und die Zeilenhöhe auf 1,3em ein. Das war's fürs Erste. Speichern Sie nun Ihre Einstellungen und schließen Sie das Modul.

• Buchstabenabstand: 1px
• Zeilenhöhe: 1,3 m

Kategoriefilter Beispiel 2

Unser zweites Beispiel verwendet einfaches CSS für das Modul und die Seite, um abgerundete Ecken und einen Kastenschatten zu erstellen. Diese hier sieht am unterschiedlichsten aus.

Filterkriterientext

Wechseln Sie zur Registerkarte Design und scrollen Sie nach unten zu Filter Criteria Text . Ändern Sie die Schriftart in Kanit. Stellen Sie die Farbe auf Schwarz, die Größe auf 16 Pixel und die Zeilenhöhe auf 1,5 m ein. Die Schriftgröße funktioniert gut auf allen Bildschirmgrößen, sodass wir sie nicht für Tablets oder Telefone anpassen müssen.

• Schrift: Kanit
• Farbe: #000000
• Größe: 16px
• Zeilenhöhe: 1,5 m

Modul CSS

Wechseln Sie als Nächstes zur Registerkarte Erweitert . Scrollen Sie nach unten zu Active Portfolio Filter und fügen Sie CSS für die Hintergrundfarbe hinzu und schließen Sie das Modul. Dadurch ändert sich die Hintergrundfarbe des aktiven Filters. Jeder Filter, auf den der Benutzer klickt, wechselt zu dieser Hintergrundfarbe und der vorherige Filter kehrt zur normalen Farbe zurück.

• Aktives Portfolio-Filter-CSS:

  background-color:#ffd000;

Seiteneinstellungen CSS

Öffnen Sie als Nächstes die Seiteneinstellungen im Seitenmenü . Wählen Sie im Modal Seiteneinstellungen die Registerkarte Erweitert und fügen Sie das benutzerdefinierte CSS in das Feld ein. Dieses CSS entfernt den Rand von den Filterelementen, erstellt einen Randradius von 25 Pixel und fügt einen Rand von 5 Pixel zwischen den Elementen hinzu. Es fügt auch einen kleinen Kästchenschatten am unteren Rand der Elemente hinzu und ändert die Farbe des Schattens. Schließen Sie das Modul und speichern Sie Ihre Einstellungen.

• Benutzerdefinierte CSS:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

Kategoriefilter Beispiel 3

Unser drittes Beispiel folgt ähnlichen CSS-Designideen aus dem vorherigen Beispiel. Es enthält keine abgerundeten Ecken und ändert die Schrift- und Hintergrundfarben beim Hover. Es verwendet auch CSS sowohl für das Modul als auch für die Seite.

Filterkriterientext

Wechseln Sie zur Registerkarte Design und scrollen Sie nach unten zu Filter Criteria Text . Wählen Sie Kanit für die Schriftart , stellen Sie den Stil auf TT und die Farbe auf Weiß ein.

• Schrift: Kanit
• Stil: TT
• Farbe: #ffffff

Wählen Sie als Nächstes die Hover-Option für die Textfarbe und ändern Sie die Farbe in Schwarz. Dies kümmert sich um die Schriftarten beim Hover. Wir kümmern uns um die Hintergründe mit CSS. Ändern Sie den Buchstabenabstand auf 1px und die Zeilenhöhe auf 1,3em .

• Hover-Farbe: #000000
• Buchstabenabstand: 1px
• Zeilenhöhe: 1,3 m

Modul CSS

Gehen Sie als Nächstes zur Registerkarte Erweitert und scrollen Sie nach unten zu Active Portfolio Filter . Fügen Sie das folgende CSS hinzu , um den Hintergrund des aktiven Filters zu ändern. Schließen Sie das Modul.

• Aktives Portfolio-Filter-CSS:

  background-color:#ffd000

Seiteneinstellungen CSS

Öffnen Sie abschließend die Seiteneinstellungen . Gehen Sie zur Registerkarte Erweitert und geben Sie das folgende benutzerdefinierte CSS ein. Schließen Sie das Modul und speichern Sie Ihre Einstellungen. Dadurch wird der Hintergrund schwarz, es werden oben und unten 15 Pixel Polsterung und links und rechts 30 Pixel Polsterung hinzugefügt. Dadurch wird die Größe der Filterelemente so angepasst, dass sie den Schaltflächen im Layout genau entsprechen, und hilft, die Farbänderung für den Hover-Effekt zu erzeugen. Beim Hover wird der Hintergrund weiß.

• Benutzerdefinierte CSS:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

Ergebnisse

Beispiel 1 für Desktop-Kategoriefilter

Telefonkategorie Filter Beispiel 1

Desktop-Kategoriefilter – Beispiel zwei

Filter für Telefonkategorie, Beispiel 2

Desktop-Kategoriefilter – Beispiel drei

Telefonkategoriefilter Beispiel 3

Endgedanken

Das ist unser Blick auf die Gestaltung des Kategoriefilters in Divi's Filterable Portfolio Module. Der Kategoriefilter enthält die gleichen Styling-Tools wie die anderen Elemente, sodass er einfach so gestaltet werden kann, dass er mit jedem Divi-Layout funktioniert. Indem wir sowohl dem Modul als auch der Seite CSS hinzufügen, können wir den Kategoriefilter auf viele einzigartige Arten gestalten, um sich von der Masse abzuheben.

Wir wollen von dir hören. Haben Sie Ihren Kategoriefilter im Filterable Portfolio Module von Divi gestaltet? Lass es uns in den Kommentaren wissen.