Divi: So passen Sie ein Element des Modulrasters "Filterbares Portfolio" an

Möchten Sie wissen, wie Sie die Rasterelemente des Filterable Portfolio-Moduls von anpassen können? Divi ? Folgen Sie uns in diesem Tutorial ...

Haben Sie eine Zone auf Ihrem Website Ihre Arbeit zu präsentieren ist wichtig. Wenn Sie ein Stylist sind, können Sie mehrere Projekte auf Ihrem erstellen Website WordPress, um Ihre Konzepte zu präsentieren. Wenn Sie ein Markenaufbauer sind, können Sie ein Portfolio verwenden, um Ihre Arbeit zu präsentieren. Darüber hinaus können wir sogar noch weiter gehen und verschiedene Kategorien für unsere Projekte hinzufügen. Es ist hier Was macht das filterbare Portfolio-Modul von Divi? .

Mit diesem Modul können wir unsere harte Arbeit auf einfache und organisierte Weise darstellen. 

Im heutigen Tutorial passen wir die einzelnen Rasterelemente des Filterable Portfolio-Moduls an. Wir verwenden Layouts aus kostenlosen Layoutpaketen Divi-Konferenz et Divi Online-Yoga-Lehrer bei jedem Kauf von bereitgestellt Divi . 

Wie bei allem über Divi, haben wir die Möglichkeit, dieses Modul an unsere Bedürfnisse und Wünsche anzupassen. Bevor wir uns jedoch mit dem Styling befassen, wollen wir etwas mehr über das Modul erfahren.

Was ist das filterbare Portfolio-Modul von Divi?

Projekte sind Teil eines benutzerdefinierten Beitragstyps, der genauso funktioniert wie Beiträge. Sie finden sie in Ihrem WordPress-Dashboard.

Hier erstellen Sie Ihre individuellen Projekte, die Ihr Filterbares Portfolio-Modul füllen. Das Modul bietet uns zwei Möglichkeiten, unsere Projekte zu zeigen: im Rasterformat ou im Vollformat. Für uns werden wir das Grid-Format verwenden und anpassen. 

Mit dem Filterable Portfolio-Modul können wir unsere neuesten Projekte präsentieren. Benutzer unserer Website sehen oben in unserem Portfolioraster eine Filterleiste. Von dort aus können sie durch die verschiedenen Portfolio-Kategorien blättern, die wir im Modul anzeigen lassen.

Hier ist eine beispielhafte Grid-Konfiguration des Moduls mit einigen Beispielprojekten:

Bereiche, die bei der Erstellung des filterbaren Portfolios von Divi zu berücksichtigen sind

Wie alle Mods Divi, das Filterable Portfolio-Modul verfügt über eine Reihe von Funktionen, die wir an unsere Bedürfnisse und Wünsche anpassen können. Daher können die meisten Funktionen, die mit dem Modul geliefert werden, auf der Registerkarte geändert werden Design aus den Moduleinstellungen modal. Wir können die folgenden Bereiche und mehr bearbeiten:

• Projekttitel
• Projektkategorie
• Vignette
• Text filtern
• Miniaturbild beim Hover
• Paginierung

Dies ist keine vollständige Liste, und wir haben noch nicht einmal darüber gesprochen, wie CSS diesem Modul tiefere Anpassungen hinzugefügt hat!

Wie wir das filterbare Portfolio-Modul von Divi anpassen

Wie bereits erwähnt, verwenden wir für dieses Tutorial zwei Layouts: Divi-Konferenz et Divi Online-Yoga-Lehrer. Unten können Sie sich einen Überblick über die Arbeit verschaffen, die wir während dieses Tutorials erledigen werden.

Anordnung der Elemente des Layouts „Divi Conference“.

Anordnung der Elemente des Layouts „Divi Online Yoga Instructor“.

Sie können beide Layouts ganz einfach herunterladen Divi Baumeister. 

Jetzt fangen wir an!

Siehe auch: Divi: Wählen Sie zwischen dem Raster- und dem Layout in voller Breite des Filterable Portfolio-Moduls

Anpassung des filterbaren Portfolio-Moduls von Divi: „Divi Conference Edition“

Zuerst müssen wir die Veranstaltungsseitenvorlage aus dem Divi Conference Layout Pack installieren. Nachdem Sie Ihre neue Seite in WordPress erstellt und den Divi Builder aktiviert haben, betreten wir die Divi-Bibliothek.

Rufen Sie die Divi-Layoutbibliothek auf

Klicken Sie auf das Symbol « Aus Bibliothek laden um die Divi-Layoutbibliothek aufzurufen

Suchen Sie das Layout in der Divi-Layoutbibliothek

Verwenden Sie die Suchfunktion in der Layoutbibliothek von Divi, Suche die Veranlagung“ Veranstaltungsseite der Konferenz".

Layout installieren

Nachdem Sie das Layout ausgewählt haben, klicken Sie auf die Schaltfläche " Verwenden Sie dieses Layout um das Layout in Ihre Seite zu installieren.

Bildmodul entfernen und ersetzen

Wir werden das unten gezeigte Bildmodul entfernen, um Platz für das Modul „Filterbares Portfolio“ zu schaffen, das wir anpassen werden. Klick auf das " Löschen nachdem Sie den Mauszeiger über das Bild bewegt haben, um das Foto zu löschen.

Fügen Sie das Filterable Portfolio-Modul von Divi ein

Nachdem das Bildmodul entfernt wurde, können wir jetzt Platz für unser Filterbares Portfolio-Modul schaffen. Wir werden auf das Symbol „ Modul hinzufügen (das graue Pluszeichen) und wählen Sie dann das Modul im angezeigten Modul-Modalfeld aus.

Einstellen der Anzahl der Posts und des Portfolio-Layouts

Standardmäßig präsentiert dieses Modul Ihre Arbeit in einer einzigen Spalte. Wir werden jedoch das Rasterlayout verwenden, das standardmäßig mit 4 Spalten geliefert wird. 

Daher empfehlen wir, als Anzahl der Beiträge für Ihr Portfolio ein Vielfaches von 4 (4, 8, 12, 16 usw.) zu wählen. 

Für dieses Tutorial verwenden wir 12 Projekte in unserem Grid.

Beginnen Sie mit der Anpassung des filterbaren Portfolios von Divi: Titel und Metatext

Nachdem unsere Projekte nun in einem Raster angezeigt werden, verknüpfen wir einige der Designelemente unserer ausgewählten Vorlage. In diesem Fall verwenden wir den mit dem Divi Conference Layout Pack bereitgestellten Stil in unserem neuen Modul.

Textstil

• Textausrichtung: Zentriert
• Textfarbe: Dunkel

Titeltextstil

• Titelüberschriftenebene: H2
• Titelschrift: Krona One
• Textfarbe: #000000

Meta-Textstil

• Meta-Schriftart: Standard (Open Sans)
• Meta-Textfarbe: #ff6651

Nachdem wir nun unser Styling für die Titel im Portfolio-Raster festgelegt haben, nehmen wir einige Änderungen an der tatsächlichen Form der Projekt-Miniaturansichten selbst vor.

Ändern Sie den Rahmen der Projekt-Miniaturansicht und die abgerundeten Ecken

In unserem Divi Conference Layout-Paket verwenden wir eine einzigartige Kombination aus abgerundeten Ecken, um einigen der Keyframes im Paket eine einzigartige Form zu geben. Wenden wir diesen Stil auf die Miniaturansichten unseres Moduls an.

Bild

• Bild:
  • Abgerundete Ecken: 50px 50px 50px 0px
  • Rahmenstile: alle
  • Randbreite: 3px
  • Farbe: #000000
  • Randstil: solide

Dadurch erhalten unsere Thumbnails eine Form, die zu den anderen Bildern im Layoutpaket passt.

Anpassen des Hover-Overlays

Lassen Sie uns mit unserem Styling noch einen Schritt weiter gehen und das Standard-Overlay, das mit diesem Modul geliefert wird, geringfügig ändern. Wir werden die Farbe sowie das Symbol ändern, das direkt aus der Box verwendet wird.

Überlagerung

• Farbe des Zoom-Symbols: #bcf5fd
• Hover-Overlay-Farbe: #ff6651
• Hover-Symbolauswahl: Zoom

Wie Sie jetzt sehen können, haben wir die Markenfarben für dieses Layout zum Overlay hinzugefügt und das Symbol geändert, das Divi standardmäßig für die Overlay-Funktion beim Hover in diesem Modul bereitstellt.

Paginierung anpassen

Wir werden jetzt damit beginnen, kleine CSS-Snippets zu verwenden, um unserem Filterable Portfolio-Modul zusätzliche Anpassungen hinzuzufügen. Zuerst werden wir die Paginierung dieses Moduls anpassen. Als Nächstes entfernen wir den Rahmen, der darüber erscheint, mit einer einzigen CSS-Zeile

Paginierungstext

• Seitennummerierung:
  • Schriftart: Krona One
  • Textausrichtung: zentriert
  • Textfarbe: #ff6651, #000000 (Hover)

Für unser CSS wechseln wir zum Tab Fortgeschrittener unseres Moduls. Zweitens klicken wir auf die Registerkarte Benutzerdefinierte CSS. Als Nächstes geben wir das folgende Code-Snippet ein, um den Rahmen über unserer Paginierung zu entfernen und ihr ein saubereres Aussehen zu verleihen.

Portfolio-Paginierung

border-top: 0px;

Verwenden von Divi-Einstellungen und CSS zum Anpassen von Filtertext

Für den Filtertext gehen wir eine Stufe höher. Wir werden CSS verwenden, um den Hintergrund sowie die Hover-Effekte zu ändern. 

Wir möchten eine perfekte Kontinuität zwischen dem neu hinzugefügten Modul und dem Stil des Layoutpakets haben. Lassen Sie uns zunächst unsere Divi-Einstellungen für die Schriftart eingeben.

Filterkriterientext

• Filterkriterien:
  • Schriftart: Krona One
  • Schriftfarbe: #ffffff, #000000 (Hover)

So wie es aussieht, scheint unser Filter weg zu sein. In der Tat ist es im Standardzustand weißer Text auf weißem Hintergrund. Wir werden dies jedoch an zwei Stellen mit benutzerdefiniertem CSS ändern. 

Zuerst fügen wir in den Seiteneinstellungen ein CSS-Snippet hinzu, das dem Filtertext einen Hintergrund hinzufügt. Zweitens werden wir den Filter für aktive Portfolios mithilfe der Registerkarte anpassen Fortgeschrittener du Modul.

Zugreifen Seiteneinstellungen klicken Sie auf die drei Punkte in der Mitte des Bildschirms. ensuite, Wählen Sie das Zahnradsymbol Dadurch werden die Seiteneinstellungen geöffnet. Dann Sie Navigieren Sie zur Registerkarte Benutzerdefiniertes CSS und geben Sie Folgendes ein, um dem Filtertext einen Hintergrund hinzuzufügen.

Benutzerdefiniertes CSS

In diesem CSS-Snippet zielen wir auf die Hintergrundfarbe des Filters ab. Wir zielen auch auf seinen Schwebezustand ab und gestalten ihn. Als Nächstes fügen wir dem Modul weitere CSS hinzu und heben unsere Registerkarte „Aktiver Filter“ hervor.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

Aktiver Tab-Stil des Portfolio-Filters

Die aktive Registerkarte des fPortfolio-Filter lenkt die Aufmerksamkeit der Benutzer auf die aktuelle Portfolio-Kategorie, die sie besuchen. Derzeit hat dieser Filter weißen Text und einen hellen Hintergrund. 

Wir gehen zur Registerkarte Fortgeschrittener des Filterable Portfolio-Moduls und fügen Sie Text zu den Standard- und Hover-Status dieser Funktion hinzu. Hier sind die CSS-Eigenschaften, die wir in einem Standardzustand hinzufügen werden:

background: #ff6651;
color: #ffffff !important;

Status beim Hover

Beim Hover ändern wir den Hintergrund in Schwarz.

color: #000000!important;

Endgültiger Blick auf das Design des filterbaren Portfolios von Divi mit „Divi Conference“

Hier ist der finale Look!

Und jetzt sieht es so aus, wenn Sie schweben!

Anpassung des filterbaren Portfolio-Moduls von Divi: „Divi Online Yoga Instructor“

Wie bei der Divi Conference Edition finden Sie Ihr Layout im Online Yoga Instructor Layout Pack in Divi Builder. 

Wir werden das Landing Page Layout für dieses Tutorial verwenden. Scrollen Sie nach unten zum Abschnitt Abschnittsklassen mit dem Titel Abschnitt Alle kommenden Klassen.

Einfügen des Filterable Portfolio-Moduls

Von hier aus entfernen wir die Zeilen mit den Klassen. Klicken Sie auf das violette Symbol mit den drei Punkten darauf . Dann, Wählen Sie die Drahtgitteransicht. Schließlich löschen Sie die zwei Zeilen mit drei Spalten.

Dann werden wir sie durch eine einzelne Spalte in der Zeile darin ersetzen. Dann fügen wir unser Filterbares Portfolio-Modul hinzu.

Wie im vorherigen Beispiel verwenden wir für dieses Modul das Rasterlayout mit einem Vielfachen von 4 für die Anzahl der Beiträge. 

Lassen Sie uns jetzt etwas anderes mit den Informationen machen, die wir auf der Karte präsentieren. 

In der Registerkarte Inhalt, navigieren Sie zu Elemente und abwählen Kategorien anzeigen . Das bedeutet, dass das Portfolio-Modul nur den Namen des Projekts ohne den Namen der Kategorie anzeigt, in der es sich befindet.

Anpassung von Filterkriterientext, Projekttitel und Paginierungstext

Lassen Sie uns die Stilbasis für die Textteile unseres Moduls definieren. Der Haupttext dieses Layouts ist Offene Sans und die für die Hauptüberschriften verwendete Schriftart ist Cinzel. Daher werden wir während des gesamten Stylingprozesses eine Kombination dieser beiden Schriftarten verwenden.

Text

• Textausrichtung: Zentriert
• Textfarbe: Hell

Titeltext

• Titelschrift: Cinzel
• Titeltextfarbe: #ffffff

Filterkriterientext

• Filterkriterien Schriftstärke: Fett
• Textfarbe für Filterkriterien: #ffffff

Paginierungstext

• Paginierung Schriftstärke: Fett

So sieht unser filterbares Portfolio-Modul derzeit aus. Es ist nicht viel, aber wir kommen langsam dorthin!

Erstellen Sie ein durchscheinendes Hover-Overlay

Lassen Sie sich von den verschiedenen Modulen und schönen Farbverläufen in diesem Layout inspirieren. Dazu erstellen wir ein durchscheinendes Hover-Overlay und passen das Symbol an, das auch beim Hover angezeigt wird.

• Farbe des Zoom-Symbols: #323741
• Hover-Overlay-Farbe: rgba (255 201 165, 0,85)
• Hover Icon Picker: Suchen Sie nach einem Blatt und sehen Sie das Symbol oben

Hinzufügen von Rahmen zu Portfolio-Rasterelementen mit benutzerdefiniertem CSS

Ähnlich wie in unserem ersten Beispiel werden wir jetzt CSS verwenden, um unser Filterable Portfolio-Modul interessanter zu machen. 

Jetzt fügen wir einen Rahmen um jedes einzelne Element im Portfolioraster hinzu. Verwenden Sie das CSS-Snippet unten im benutzerdefinierten CSS-Teil der Seiteneinstellungen, um unseren Rahmen hinzuzufügen. 

Wir werden auch „border“ als CSS-Klasse für dieses Modul verwenden.

• CSS-Klasse: Grenze

Benutzerdefiniertes CSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

Hier haben wir jetzt unser Filterbares Portfolio-Modul mit einem schönen Rahmen – und Polsterung – um jedes Rasterelement.

CSS hinzugefügt, um den Paginierungsrand zu gestalten

Im Gegensatz zu unserem vorherigen Beispiel fügen wir dem Rand unserer Paginierung mit CSS Farbe hinzu. Das wird auch in die Gegend gehen Einstellungen > Benutzerdefinierte CSS-Seite .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

Textstil für Filterkriterien

Ähnlich dem Stil unseres Divi Conference Portfolio-Moduls möchten wir unseren Kategoriefiltern Jazz hinzufügen. Auch hier wollen wir auf den Stil zurückgreifen, der bereits in der uns zur Verfügung gestellten Vorlage vorhanden ist. 

Hier ist das CSS, das wir in unserem benutzerdefinierten CSS-Abschnitt hinzufügen werden, um auf den Hintergrund und den Mauszeiger unserer Filterleiste abzuzielen.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

Mit diesen beiden neuen Ergänzungen zu unserem benutzerdefinierten CSS sieht unser Filterbares Portfolio-Modul so aus.

Beachten Sie jedoch, wie der aktive Portfoliofilter verloren geht. Es hat immer einen hellen Hintergrund mit weißem Text darauf. Gehen wir zu den Moduleinstellungen und fügen etwas CSS hinzu, um das zu ändern.

Benutzerdefiniertes CSS

Aktiver Portfoliofilter:

background: #ffffff;
color: #323741 !important;

Modulanimation entfernen

Um ein übersichtlicheres Erlebnis zu bieten, werden wir die Standardanimation entfernen, die mit dem Filterable Portfolio-Modul geliefert wird. Dazu müssen wir zunächst zu unseren Seiteneinstellungen zurückkehren und einige CSS hinzufügen, die auf die Portfolio-Rasterelemente abzielen und die entfernen gleitender Übergang das passiert out of the box.

Benutzerdefiniertes CSS

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

Lesen Sie auch: Divi: So ändern Sie die Anzahl der Spalten in einem Blog

Ändern Sie das Portfolioraster von vier auf drei Spalten

Unsere neueste CSS-Ergänzung wird sein, unser Filterbares Portfolio-Modul von vier auf drei Spalten umzuwandeln. Dies gibt uns mehr Raum, um unsere Projekte zu sehen. 

Außerdem werden wir unserem Modul eine zusätzliche Zeile hinzufügen. Dort finden Sie auch das neueste CSS-Snippet, mit dem Sie Ihre Spalten konvertieren können.

Benutzerdefiniertes CSS

Für dieses letzte Snippet fügen wir die CSS-ID hinzu #Drei-Spalten-Gitter zu unserem Modul. Wir werden unsere CSS-Klasse von vorher immer noch intakt lassen.

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

Laden Sie DIVI jetzt herunter!!!

Zusammenfassung

Wie bei den meisten Divi-Modulen können die mit Divi gelieferten Einstellungen mit CSS weiterentwickelt werden. Die Präsentation Ihrer Arbeit ist ein wichtiger Teil der Führung eines Online-Geschäfts, Blogs oder einer Marke. 

Daher ist es wichtig, eine organisierte Art und Weise zu haben, Ihre Arbeit zu präsentieren. Verdienen Sie Tipps, die heute geteilt wurden, um an Ihrer eigenen Designreise des Filterable Portfolio-Moduls von Divi teilzunehmen.

Hoffentlich wird diese Technik eine weitere nützliche Designfähigkeit für zukünftige Projekte hinzufügen.

Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.

Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.

Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...