Divi: Hvordan tilpasse et element i "Filterable Portfolio"-modulnettet

Vil du vite hvordan du tilpasser rutenettelementene til modulen Filtrerbar portefølje til Divi ? Følg oss i denne opplæringen...

Ha en sone på din nettstedet Web å vise frem arbeidet ditt er viktig. Hvis du er en stylist, kan du lage flere prosjekter på din nettstedet Web WordPress for å vise frem konseptene dine. Hvis du er en merkevarebygger, kan du bruke en portefølje for å vise frem arbeidet ditt. Dessuten kan vi til og med gå lenger og legge til forskjellige kategorier for våre prosjekter. Det er her hva gjør Divis Filterable Portfolio-modul? .

Med denne modulen er vi i stand til å vise vårt harde arbeid på en enkel og organisert måte. 

I dagens veiledning tilpasser vi de individuelle rutenettelementene til modulen Filtrerbar portefølje. Vi vil bruke oppsett fra gratis layoutpakker Divi konferanse et Divi online yogainstruktør følger med hvert kjøp av Divi . 

Som med alt om Divi, har vi muligheten til å tilpasse denne modulen til å passe våre behov og ønsker. Men før vi kommer inn på styling, la oss lære litt mer om modulen.

Hva er Divis Filterable Portfolio-modul?

Prosjekter er en del av en egendefinert posttype som fungerer på samme måte som innlegg. Du finner dem i WordPress-dashbordet.

Det er her du oppretter dine individuelle prosjekter som vil fylle din Filtrerbare Portfolio-modul. Modulen gir oss to måter å vise prosjektene våre på: i et rutenettformat ou i et format i full bredde. For oss vil vi bruke og tilpasse rutenettformatet. 

Med modulen Filterable Portfolio vil vi kunne presentere våre nyeste prosjekter. Brukere av nettstedet vårt vil se en filterlinje øverst i porteføljenettet vårt. Derfra kan de bla gjennom de forskjellige porteføljekategoriene som vi tillater å vise i modulen.

Her er et eksempel på rutenettkonfigurasjon av modulen med noen eksempelprosjekter:

Områder du bør vurdere når du oppretter Divis filtrerbare portefølje

Som alle mods Divi, Filterable Portfolio-modulen kommer med en rekke funksjoner som vi kan tilpasse til våre behov og ønsker. Dermed kan de fleste funksjonene som følger med modulen endres i fanen utforming fra modulinnstillingene. Vi kan redigere følgende områder og mer:

• Prosjekt tittel
• Prosjektkategori
• Vignett
• Filtrer tekst
• Miniatyrbilde ved pekeren
• Paginering

Dette er ikke en komplett liste, og vi har ikke engang begynt å snakke om hvordan CSS la til dypere tilpasninger til denne modulen!

Hvordan vi tilpasser Divis Filterable Portfolio-modul

Som nevnt tidligere, for denne opplæringen vil vi bruke to oppsett: Divi konferanse et Divi online yogainstruktør. Nedenfor kan du få en oversikt over arbeidet vi skal gjøre under denne opplæringen.

Arrangement av elementene i "Divi Conference" layout

Arrangement av elementene i "Divi Online Yoga Instructor" layout

Du kan enkelt laste ned begge layoutene fra Divi Bygger. 

La oss nå komme i gang!

Se også: Divi: Velg mellom rutenettet og oppsettet i full bredde til modulen Filterable Portfolio

Tilpasning av Divis filtrerbare porteføljemodul: "Divi Conference Edition"

Først må vi installere hendelsessidemalen fra Divi Conference Layout Pack. Etter å ha opprettet din nye side i WordPress og aktivert Divi Builder, går vi inn i Divi-biblioteket.

Gå inn i Divi Layout Library

Klikk på ikonet « Last fra biblioteket for å gå inn i Divi Layout Library

Finn oppsettet i Divi Layout Library

Ved å bruke søkefunksjonen i Divis layoutbibliotek, Søk disposisjonen" Side for konferansearrangementer".

Installer layout

Når du har valgt oppsettet, klikker du på " Bruk denne layouten for å installere layouten på siden din.

Fjern og erstatt bildemodul

Vi fjerner bildemodulen vist nedenfor for å gi plass til den filtrerbare porteføljemodulen som vi tilpasser. Klikk på " Delete etter å ha holdt markøren over bildet for å slette bildet.

Sett inn Divis filtrerbare porteføljemodul

Med bildemodulen fjernet, kan vi nå gjøre plass til vår Filtrerbare Portfolio-modul. Vi skal klikke på ikonet " Legg til modul (det grå plusstegnet), velg deretter modulen i modulmodalboksen som vises.

Innstilling av antall innlegg og porteføljeoppsett

Som standard vil denne modulen presentere arbeidet ditt i en enkelt kolonne. Vi vil imidlertid bruke rutenettoppsettet som kommer som standard med 4 kolonner. 

Som sådan anbefaler vi å velge et multiplum av 4 (4, 8, 12, 16 osv.) som antall innlegg for porteføljen din. 

For denne opplæringen vil vi bruke 12 prosjekter i rutenettet vårt.

Begynn å tilpasse Divis filtrerbare portefølje: Tittel og Metatekst

Nå som prosjektene våre vises i et rutenett, la oss koble til noen av designelementene i den valgte malen. I dette tilfellet vil vi bruke stilen som følger med Divi Conference Layout Pack i vår nye modul.

Tekst stil

• Tekstjustering: Sentrert
• Tekstfarge: Mørk

Titteltekststil

• Tittel Overskrift Nivå: H2
• Tittel Font : Krona One
• Tekstfarge: #000000

Metatekststil

• Metafont: Standard (Open Sans)
• Metatekstfarge: #ff6651

Nå som vi har fått stilen vår for titlene i porteføljenettet på plass, la oss gjøre noen endringer i selve formen på prosjektminiatyrbildene.

Endre prosjektminiatyrkant og avrundede hjørner

I vår Divi Conference Layout-pakke bruker vi en unik kombinasjon av avrundede hjørner for å gi en unik form til noen av nøkkelbildene i pakken. La oss bruke denne stilen på miniatyrbildene til modulen vår.

Bilde

• bilde:
  • Avrundede hjørner: 50px 50px 50px 0px
  • Kantstiler: alle
  • Kantbredde: 3px
  • Farge: #000000
  • Kantstil: solid

Dette vil gi miniatyrbildene våre en form som matcher resten av de andre bildene i layoutpakken.

Tilpasse sveveoverlegget

La oss gå et skritt videre med vår styling og gjøre en liten endring i standardoverlegget som følger med denne modulen. Vi vil endre fargen samt ikonet som brukes rett ut av esken.

super

• Zoomikon Farge: #bcf5fd
• Farge for sveveoverlegg: #ff6651
• Hover ikonvelger: Zoom

Som du nå kan se, har vi lagt til merkefargene for dette oppsettet til overlegget, samt endret ikonet som Divi gir som standard for overleggsfunksjonen ved sveving i denne modulen.

Tilpasse paginering

Vi vil nå begynne å bruke små utdrag av CSS for å legge til ytterligere tilpasning til vår Filterable Portfolio-modul. Først vil vi tilpasse pagineringen av denne modulen. Deretter fjerner vi grensen som vises over den med en enkelt linje med CSS

Pagineringstekst

• Paginering:
  • Font: Krona One
  • Tekstjustering: sentrert
  • Tekstfarge: #ff6651, #000000 (Hover)

For vår CSS bytter vi til fanen Avansert av modulen vår. For det andre klikker vi på fanen Egendefinert CSS. Deretter skriver vi inn følgende kodebit for å fjerne grensen over pagineringen vår, noe som gir den et renere utseende.

Paginering av porteføljen

border-top: 0px;

Bruke Divi-innstillinger og CSS for å tilpasse filtertekst

For filterteksten tar vi det opp et hakk. Vi skal bruke CSS for å endre bakgrunnen så vel som sveveeffektene. 

Vi ønsker å ha en perfekt kontinuitet mellom den nye modulen og stilen til layoutpakken. La oss først gå inn i Divi-innstillingene for fonten.

Filterkriterietekst

• Filterkriterier:
  • Font: Krona One
  • Skriftfarge: #ffffff, #000000 (Hover)

Som det står, ser det ut til at filteret vårt er borte. Faktisk, i standardtilstanden, er det hvit tekst på en hvit bakgrunn. Vi vil imidlertid endre dette med tilpasset CSS på to steder. 

Først legger vi til en CSS-kodebit i sideinnstillingene som vil legge til en bakgrunn til filterteksten. For det andre vil vi tilpasse det aktive porteføljefilteret ved å bruke fanen Avansert du modul.

Å få tilgang sideinnstillinger klikker du på de tre prikkene midt på skjermen. deretter velg tannhjulikonet som vil åpne sideinnstillingene. Så du naviger til fanen Egendefinert CSS og skriv inn følgende for å legge til en bakgrunn til filterteksten.

Tilpasset CSS

I denne CSS-kodebiten målretter vi mot bakgrunnsfargen til filteret. Vi målretter og stiler også dens svevetilstand. Neste på agendaen, la oss legge til litt mer CSS til modulen og fremheve fanen 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;
}

Porteføljefilter aktiv fanestil

Den aktive fanen til fporteføljefilter trekker brukernes oppmerksomhet til den aktuelle porteføljekategorien de besøker. For øyeblikket har dette filteret hvit tekst og en lys bakgrunn. 

Vi går til fanen Avansert av den filtrerbare porteføljemodulen og legg til tekst til standard- og svevetilstanden for denne funksjonen. Her er CSS-egenskapene som vi vil legge til i en standardtilstand:

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

Stat på hover

Når du holder musepekeren, endrer vi bakgrunnen til svart.

color: #000000!important;

Endelig utseende av designet til Divis filtrerbare portefølje med "Divi Conference"

Her er det endelige utseendet!

Og nå, her er hvordan det ser ut når du svever!

Tilpasning av Divis filtrerbare porteføljemodul: "Divi Online Yoga Instructor"

Som med Divi Conference Edition, finn layouten din i Online Yoga Instructor Layout Pack inne i Divi Builder. 

Vi vil bruke landingssideoppsettet for denne opplæringen. Rull ned til Seksjonsklasser-delen med tittelen Seksjon Alle kommende klasser.

Sette inn den filtrerbare porteføljemodulen

Herfra fjerner vi radene med klassene. Klikk på det lilla ikonet med tre prikker på . Deretter, velg wireframe-visningen. Til slutt vil du slette de to radene som inneholder tre kolonner.

Da vil vi erstatte dem med en enkelt kolonne i raden inne. Deretter legger vi til vår filtrerbare porteføljemodul.

Som i forrige eksempel vil vi bruke rutenettoppsettet for denne modulen med et multiplum på 4 for antall poster. 

La oss nå gjøre noe litt annerledes med informasjonen vi presenterer på kartet. 

I fanen Innhold, navigere til Elements og fjern valget Vis kategorier . Dette betyr at porteføljemodulen kun vil vise navnet på prosjektet uten navnet på kategorien det er i.

Tilpasning av filterkriterietekst, prosjekttittel og pagineringstekst

La oss definere stilgrunnlaget for tekstdelene i modulen vår. Brødteksten til denne layouten er Åpne Sans og fonten som brukes for hovedoverskriftene er Cinzel. Derfor vil vi bruke en kombinasjon av disse to fontene gjennom hele stylingprosessen.

Texte

• Tekstjustering: Sentrert
• Tekstfarge: Lys

Titteltekst

• Tittelfont: Cinzel
• Tittel Tekstfarge: #ffffff

Filtrer kriterietekst

• Filterkriterier Skriftvekt: fet skrift
• Filterkriterietekst Farge: #ffffff

Pagineringstekst

• Pagineringsskriftvekt: fet skrift

Slik ser vår filtrerbare porteføljemodul ut akkurat nå. Det er ikke mye, men vi kommer sakte frem!

Lag et gjennomsiktig sveveoverlegg

La oss hente inspirasjon fra de forskjellige modulene og vakre gradientene i denne layouten. For dette vil vi lage et gjennomskinnelig sveveoverlegg og tilpasse ikonet som også vises ved sveving.

• Zoom ikon farge: #323741
• Sveveoverleggsfarge: rgba (255 201 165, 0,85)
• Hover Icon Velger: søk etter et ark og se ikonet ovenfor

Legger til kantlinjer til porteføljenettelementer med tilpasset CSS

I likhet med vårt første eksempel, vil vi nå bruke CSS for å legge til mer interesse for vår filtrerbare porteføljemodul. 

Nå legger vi til en kant rundt hvert enkelt element i porteføljenettet. Bruk CSS-kodebiten nedenfor i den tilpassede CSS-delen av sideinnstillingene for å legge til kantlinjen vår. 

Vi vil også bruke "border" som CSS-klassen for denne modulen.

• CSS-klasse: kantlinje

Tilpasset CSS

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

Her har vi nå vår Filterable Portfolio-modul med en fin kant – og polstring – rundt hvert rutenett.

Lagt til CSS for å style pagineringskanten

I motsetning til vårt forrige eksempel, la oss legge til farge på grensen til pagineringen vår med CSS. Dette vil også gå i området Innstillinger > Egendefinert CSS-side .

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

Tekststil for filterkriterier

I likhet med stilen til Divi Conference Portfolio-modulen, ønsker vi å legge til jazz i kategorifiltrene våre. Igjen, vi ønsker å trekke fra stilen som allerede er til stede i malen gitt til oss. 

Her er CSS-en vi vil legge til i vår egendefinerte CSS-seksjon for å målrette mot bakgrunnen og svevingen til filterlinjen vår.

/* 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 disse to nye tilleggene til vår tilpassede CSS, er dette hvordan vår filtrerbare porteføljemodul ser ut til å se ut.

Legg imidlertid merke til hvordan det aktive porteføljefilteret går tapt. Den har alltid en lys bakgrunn med hvit tekst på. La oss gå til modulinnstillingene og legge til litt CSS for å endre det.

Tilpasset CSS

Aktivt porteføljefilter:

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

Fjern modulanimasjon

For å gi en renere opplevelse, fjerner vi standardanimasjonen som følger med modulen Filterable Portfolio. For dette må vi først gå tilbake til sideinnstillingene våre og legge til noe CSS som vil målrette porteføljenettelementene og fjerne glidende overgang som skjer utenfor boksen.

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

Les også: Divi: Hvordan endre antall kolonner i en blogg

Endre porteføljerutenett fra fire kolonner til tre

Vårt siste CSS-tillegg vil være å transformere vår filtrerbare porteføljemodul fra fire kolonner til tre. Dette vil gi oss mer plass til å se prosjektene våre. 

Vi vil også legge til en ekstra linje i modulen vår. Du finner også den nyeste CSS-kodebiten som du kan bruke til å konvertere kolonnene dine.

Tilpasset CSS

For denne siste kodebiten legger vi til CSS-ID #tre-kolonne-rutenett til vår modul. Vi vil fortsatt beholde CSS-klassen vår fra før 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;
}
}

Last ned DIVI nå!!!

konklusjonen

Som med de fleste Divi-moduler kan innstillingene som følger med Divi videreutvikles med CSS. Å vise frem arbeidet ditt er en viktig del av å drive en nettbedrift, blogg eller merkevare. 

Som sådan er det viktig å ha en organisert måte å vise arbeidet ditt på. Tjen tips som ble delt i dag for å ta del i din egen designreise med Divis Filterable Portfolio-modul.

Forhåpentligvis vil denne teknikken legge til en annen nyttig designferdighet for fremtidige prosjekter.

Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.

Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...