Divi: Hur man anpassar ett element i "Filterable Portfolio"-modulens rutnät

Vill du veta hur du anpassar rutnätselementen i modulen Filterable Portfolio Divi ? Följ oss i denna handledning...

Ha en zon på din webbplats att visa upp ditt arbete är viktigt. Om du är stylist kan du skapa flera projekt på din webbplats WordPress för att visa upp dina koncept. Om du är en varumärkesbyggare kan du använda en portfölj för att visa upp ditt arbete. Dessutom kan vi till och med gå längre och lägga till olika kategorier för våra projekt. Det är här vad gör Divis Filterable Portfolio-modul? .

Med denna modul kan vi visa upp vårt hårda arbete på ett enkelt och organiserat sätt. 

I dagens handledning kommer vi att anpassa de individuella rutnätselementen i modulen Filterable Portfolio. Vi kommer att använda layouter från gratis layoutpaket Divi konferens et Divi Online Yoga Instruktör tillhandahålls vid varje köp av Divi . 

Som med allt om Divi, har vi möjlighet att anpassa denna modul för att passa våra behov och önskemål. Men innan vi går in på styling, låt oss lära oss lite mer om modulen.

Vad är Divis Filterable Portfolio-modul?

Projekt är en del av en anpassad inläggstyp som fungerar på samma sätt som inlägg. Du hittar dem i din WordPress-instrumentpanel.

Det är här du kommer att skapa dina individuella projekt som kommer att fylla din Filterable Portfolio-modul. Modulen ger oss två sätt att visa våra projekt: i ett rutnätsformat ou i fullbreddsformat. För oss kommer vi att använda och anpassa rutformatet. 

Med modulen Filterable Portfolio kommer vi att kunna presentera våra senaste projekt. Användare av vår webbplats kommer att se ett filterfält överst i vårt portföljnät. Därifrån kan de bläddra igenom de olika portföljkategorierna som vi tillåter att visa i modulen.

Här är ett exempel på en rutnätskonfiguration av modulen med några exempelprojekt:

Områden att tänka på när du skapar Divis filtrerbara portfölj

Som alla mods Divi, modulen Filterable Portfolio kommer med ett antal funktioner som vi kan anpassa efter våra behov och önskemål. Således kan de flesta funktioner som följer med modulen ändras i fliken Designa från modulinställningarna. Vi kan redigera följande områden och mer:

• Projekt Titel
• Projektkategori
• Vignette
• Filtrera text
• Miniatyrbild vid muspekaren
• Paginering

Det här är inte en komplett lista, och vi har inte ens börjat prata om hur CSS lade till djupare anpassningar till den här modulen!

Hur vi kommer att anpassa Divis Filterable Portfolio-modul

Som nämnts tidigare kommer vi att använda två layouter för denna handledning: Divi konferens et Divi Online Yoga Instruktör. Nedan kan du få en överblick över det arbete vi ska göra under denna handledning.

Arrangemang av elementen i layouten "Divi Conference".

Arrangemang av elementen i layouten "Divi Online Yoga Instructor".

Du kan enkelt ladda ner båda layouterna från Divi Byggare. 

Nu sätter vi igång!

Se även: Divi: Välj mellan rutnäts- och fullbreddslayouten för modulen Filterable Portfolio

Anpassning av Divis filterbara portföljmodul: "Divi Conference Edition"

Först måste vi installera eventsidemallen från Divi Conference Layout Pack. Efter att ha skapat din nya sida i WordPress och aktiverat Divi Builder kommer vi in ​​i Divi Library.

Gå in i Divi Layout Library

Klicka på ikonen « Ladda från biblioteket för att komma in i Divi Layout Library

Leta reda på layouten i Divi Layout Library

Med hjälp av sökfunktionen i Divis layoutbibliotek, ser dispositionen" Konferens evenemangssida".

Installera layout

När du har valt layout klickar du på " Använd den här layouten för att installera layouten på din sida.

Ta bort och ersätt bildmodul

Vi kommer att ta bort bildmodulen som visas nedan för att göra plats för modulen Filterable Portfolio som vi kommer att anpassa. Klicka på " Radera efter att du håller muspekaren över bilden för att radera bilden.

Sätt i Divis filterbara portföljmodul

Med bildmodulen borttagen kan vi nu göra plats för vår filterbara portföljmodul. Vi kommer att klicka på ikonen " Lägg till modul (det grå plustecknet), välj sedan modulen i modulmodalrutan som visas.

Ställa in antalet inlägg och portföljlayout

Som standard kommer denna modul att presentera ditt arbete i en enda kolumn. Vi kommer dock att använda rutnätslayouten som kommer som standard med 4 kolumner. 

Som sådan rekommenderar vi att du väljer en multipel av 4 (4, 8, 12, 16, etc.) som antalet inlägg för din portfölj. 

För den här handledningen kommer vi att använda 12 projekt i vårt rutnät.

Börja anpassa Divis filtrerbara portfölj: Titel och Metatext

Nu när våra projekt visas i ett rutnät, låt oss länka några av designelementen i vår valda mall. I det här fallet kommer vi att använda stilen som tillhandahålls med Divi Conference Layout Pack i vår nya modul.

Textstil

• Textjustering: Centrerad
• Textfärg: Mörk

Titeltextstil

• Rubriknivå: H2
• Titeltypsnitt: Krona One
• Textfärg: #000000

Meta text stil

• Metafont: Standard (Open Sans)
• Metatextfärg: #ff6651

Nu när vi har fått vår stil för titlarna i portföljrutnätet på plats, låt oss göra några ändringar i själva formen på projektminiatyrerna.

Ändra projektminiatyrkant och rundade hörn

I vårt Divi Conference Layout-paket använder vi en unik kombination av rundade hörn för att ge en unik form till några av nyckelbildrutorna i paketet. Låt oss tillämpa denna stil på miniatyrerna av vår modul.

Bild

• bild:
  • Rundade hörn: 50px 50px 50px 0px
  • Border Styles: alla
  • Kantbredd: 3px
  • Färg: #000000
  • Border Style: solid

Detta kommer att ge våra miniatyrer en form som matchar resten av de andra bilderna i layoutpaketet.

Anpassa svävningsöverlägget

Låt oss gå ett steg längre med vår styling och göra en liten förändring av standardöverlägget som följer med den här modulen. Vi kommer att ändra färgen samt ikonen som används direkt ur lådan.

super~~POS=TRUNC

• Zoomikon Färg: #bcf5fd
• Hover Overlay Färg: #ff6651
• Hover Ikonväljare: Zooma

Som du nu kan se har vi lagt till märkesfärgerna för den här layouten till överlägget, samt ändrat ikonen som Divi tillhandahåller som standard för överläggsfunktionen vid hovring i denna modul.

Anpassa paginering

Vi kommer nu att börja använda små utdrag av CSS för att lägga till ytterligare anpassning till vår filtrerbara portföljmodul. Först kommer vi att anpassa pagineringen av denna modul. Därefter tar vi bort gränsen som visas ovanför den med en enda rad CSS

Pagineringstext

• Paginering:
  • Typsnitt: Krona One
  • Textjustering: centrerad
  • Textfärg: #ff6651, #000000 (Hover)

För vår CSS byter vi till fliken Advanced Open water av vår modul. För det andra klickar vi på fliken Anpassad CSS. Därefter anger vi följande kodavsnitt för att ta bort gränsen ovanför vår paginering, vilket ger det ett renare utseende.

Portföljpaginering

border-top: 0px;

Använda Divi-inställningar och CSS för att anpassa filtertext

För filtertexten tar vi det upp ett snäpp. Vi kommer att använda CSS för att ändra bakgrunden såväl som hovringseffekterna. 

Vi vill ha en perfekt kontinuitet mellan den nyligen tillagda modulen och layoutpaketets stil. Låt oss först ange våra Divi-inställningar för typsnittet.

Filterkriterietext

• Filterkriterier:
  • Typsnitt: Krona One
  • Teckensnittsfärg: #ffffff, #000000 (Hover)

Som det ser ut verkar vårt filter vara borta. Faktum är att i standardtillståndet är det vit text på en vit bakgrund. Vi kommer dock att ändra detta med anpassad CSS på två ställen. 

Först lägger vi till ett CSS-utdrag i sidinställningarna som lägger till en bakgrund till filtertexten. För det andra kommer vi att anpassa det aktiva portföljfiltret med hjälp av fliken Advanced Open water av modulen.

Få tillgång till sidinställningar klickar du på de tre prickarna i mitten av skärmen. sedan välj kugghjulsikonen som öppnar sidinställningarna. Sen du navigera till fliken Anpassad CSS och skriv in följande för att lägga till en bakgrund till filtertexten.

Anpassad CSS

I detta CSS-utdrag riktar vi oss mot bakgrundsfärgen för filtret. Vi riktar och stylar också dess svävningstillstånd. Nästa på agendan, låt oss lägga till lite mer CSS till modulen och markera fliken Aktivt filter.

/* 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;
}

Portföljfilter aktiv flikstil

Den aktiva fliken i fportföljfilter uppmärksammar användarna på den aktuella portföljkategorin de besöker. För närvarande har detta filter vit text och en ljus bakgrund. 

Vi kommer att gå till fliken Advanced Open water i modulen Filterable Portfolio och lägg till text till standardtillstånden och hovringstillstånden för denna funktion. Här är CSS-egenskaperna som vi kommer att lägga till i ett standardtillstånd:

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

Stat på svävaren

När du håller muspekaren, ändrar vi bakgrunden till svart.

color: #000000!important;

Sista utseendet på designen av Divis filtrerbara portfölj med "Divi Conference"

Här är den sista looken!

Och nu, så här ser det ut när du svävar!

Anpassning av Divis Filterable Portfolio-modul: "Divi Online Yoga Instructor"

Som med Divi Conference Edition, hitta din layout i Online Yoga Instructor Layout Pack i Divi Builder. 

Vi kommer att använda målsidans layout för den här handledningen. Scrolla ner till avsnittet Klasser med rubriken Sektion Alla kommande klasser.

Sätta in modulen Filtrera portföljen

Härifrån tar vi bort raderna med klasserna. Klicka på den lila ikonen med tre prickar på . Sedan, välj wireframe-vyn. Slutligen kommer du att ta bort de två raderna som innehåller tre kolumner.

Sedan kommer vi att ersätta dem med en enda kolumn i raden inuti. Sedan kommer vi att lägga till vår filterbar portföljmodul.

Som i föregående exempel kommer vi att använda rutnätslayouten för denna modul med en multipel av 4 för antalet inlägg. 

Låt oss nu göra något lite annorlunda med informationen vi presenterar på kartan. 

På fliken Innehåll, navigera till Element och avmarkera Visa kategorier . Det betyder att portföljmodulen endast kommer att visa namnet på projektet utan namnet på kategorin det är i.

Anpassning av filterkriterietext, projekttitel och pagineringstext

Låt oss definiera stilbasen för textdelarna i vår modul. Brödtexten i denna layout är öppna Sans och typsnittet som används för huvudrubrikerna är Cinzel. Därför kommer vi att använda en kombination av dessa två typsnitt under hela stylingprocessen.

Texte

• Textjustering: Centrerad
• Textfärg: Ljus

Titeltext

• Titeltypsnitt: Cinzel
• Titel Text Färg: #ffffff

Filtrera kriterietext

• Filterkriterier Teckensnittsvikt: Fet
• Filterkriterietext Färg: #ffffff

Pagineringstext

• Vikt för paginering Teckensnitt: Fet

Så här ser vår filtrerbara portföljmodul ut just nu. Det är inte mycket, men vi närmar oss sakta!

Skapa en genomskinlig hovring

Låt oss hämta inspiration från de olika modulerna och vackra gradienterna i denna layout. För detta skapar vi en genomskinlig svävöverlagring och anpassar ikonen som också visas vid hovring.

• Zoomikon färg: #323741
• Hover Overlay Färg: rgba (255 201 165, 0,85)
• Hover Icon Picker: sök efter ett ark och se ikonen ovan

Lägger till ramar till portföljrutnätselement med anpassad CSS

I likhet med vårt första exempel kommer vi nu att använda CSS för att lägga till mer intresse för vår filtrerbara portföljmodul. 

Nu lägger vi till en ram runt varje enskild post i portföljrutnätet. Använd CSS-kodavsnittet nedan i den anpassade CSS-delen av sidinställningarna för att lägga till vår kantlinje. 

Vi kommer också att använda "border" som CSS-klassen för denna modul.

• CSS-klass: gräns

Anpassad CSS

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

Här har vi nu vår Filterable Portfolio-modul med en snygg kant – och stoppning – runt varje gridobjekt.

Lade till CSS för att utforma pagineringskanten

Till skillnad från vårt tidigare exempel, låt oss lägga till färg på gränsen för vår paginering med CSS. Detta kommer också att gå i området Inställningar > Anpassad CSS-sida .

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

Filtrera kriterier textstil

I likhet med stilen i vår Divi Conference Portfolio-modul vill vi lägga till jazz i våra kategorifilter. Återigen vill vi dra från den stil som redan finns i mallen som vi fått. 

Här är den CSS vi kommer att lägga till i vår anpassade CSS-sektion för att rikta in oss på bakgrunden och svävningen av vår filterfält.

/* 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;
}

Med dessa två nya tillägg till vår anpassade CSS, är det så här vår filterbara portföljmodul kommer att se ut.

Lägg dock märke till hur det aktiva portföljfiltret går förlorat. Den har alltid en ljus bakgrund med vit text på. Låt oss gå till modulinställningarna och lägga till lite CSS för att ändra det.

Anpassad CSS

Aktivt portföljfilter:

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

Ta bort modulanimering

För att ge en renare upplevelse kommer vi att ta bort standardanimeringen som följer med modulen Filterable Portfolio. För detta måste vi först gå tillbaka till våra sidinställningar och lägga till lite CSS som riktar sig mot portföljrutnätselementen och tar bort glidande övergång som händer utanför lådan.

Anpassad 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;
}

Läs också: Divi: Hur man ändrar antalet kolumner i en blogg

Ändra portföljrutnät från fyra kolumner till tre

Vårt senaste CSS-tillägg kommer att vara att omvandla vår filterbara portföljmodul från fyra kolumner till tre. Detta kommer att ge oss mer utrymme att se våra projekt. 

Dessutom kommer vi att lägga till en extra rad till vår modul. Du hittar också det senaste CSS-kodavsnittet som du kan använda för att konvertera dina kolumner.

Anpassad CSS

För det här sista utdraget lägger vi till CSS-ID #tre-kolumn-rutnät till vår modul. Vi kommer fortfarande att behålla vår CSS-klass från tidigare intakt.

/* 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;
}
}

Ladda ner DIVI nu!!!

Slutsats

Som med de flesta Divi-moduler kan inställningarna som följer med Divi vidareutvecklas med CSS. Att visa upp ditt arbete är en viktig del av att driva ett onlineföretag, blogg eller varumärke. 

Som sådan är det viktigt att ha ett organiserat sätt att visa ditt arbete. Tjäna tips som delades idag för att ta del av din egen designresa av Divis Filterable Portfolio-modul.

Förhoppningsvis kommer denna teknik att lägga till ytterligare en användbar designfärdighet för framtida projekt.

Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.

Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.