Divi: Sådan tilpasser du et element i "Filterable Portfolio"-modulgitteret

Kunne du tænke dig at vide, hvordan du tilpasser gitterelementerne i modulet Filtrerbar portefølje af Divi ? Følg os i denne tutorial...

Hav en zone på din Websted at fremvise dit arbejde er vigtigt. Hvis du er stylist, kan du lave flere projekter på din Websted WordPress for at vise dine koncepter frem. Hvis du er en brandbygger, kan du bruge en portefølje til at fremvise dit arbejde. Desuden kan vi endda gå længere og tilføje forskellige kategorier til vores projekter. Det er her hvad gør Divi's Filterable Portfolio-modul? .

Med dette modul er vi i stand til at vise vores hårde arbejde på en nem og organiseret måde. 

I dagens selvstudie tilpasser vi de individuelle gitterelementer i modulet Filtrerbar portefølje. Vi vil bruge layouts fra gratis layoutpakker Divi konference et Divi Online Yoga instruktør leveres ved hvert køb af Divi . 

Som med alt vedr Divi, har vi mulighed for at tilpasse dette modul, så det passer til vores behov og ønsker. Men før vi kommer ind på styling, lad os lære lidt mere om modulet.

Hvad er Divi's Filterable Portfolio-modul?

Projekter er en del af en tilpasset indlægstype, der fungerer på samme måde som indlæg. Du kan finde dem i dit WordPress-dashboard.

Det er her, du vil oprette dine individuelle projekter, der vil udfylde dit Filtrerbare Portfolio-modul. Modulet giver os to måder at vise vores projekter på: i et gitterformat ou i et format i fuld bredde. For os vil vi bruge og tilpasse gitterformatet. 

Med modulet Filterable Portfolio vil vi være i stand til at præsentere vores seneste projekter. Brugere af vores websted vil se en filterbjælke øverst i vores porteføljegitter. Derfra kan de gennemse de forskellige porteføljekategorier, som vi tillader at vise i modulet.

Her er et eksempel på en gitterkonfiguration af modulet med nogle eksempelprojekter:

Områder at overveje, når du opretter Divi's filtrerbare portefølje

Som alle mods Divi, Filterable Portfolio-modulet kommer med en række funktioner, som vi kan tilpasse til vores behov og ønsker. De fleste funktioner, der følger med modulet, kan således ændres i fanen Design fra modulets indstillingsmodal. Vi kan redigere følgende områder og mere:

• Projekt titel
• Projektkategori
• Vignette
• Filtrer tekst
• Miniaturebillede ved at svæve
• Paginering

Dette er ikke en komplet liste, og vi er ikke engang begyndt at tale om, hvordan CSS tilføjede dybere tilpasninger til dette modul!

Hvordan vi tilpasser Divi's Filterable Portfolio-modul

Som tidligere nævnt vil vi til denne tutorial bruge to layouts: Divi konference et Divi Online Yoga instruktør. Nedenfor kan du få et overblik over det arbejde, vi skal udføre i løbet af denne vejledning.

Arrangement af elementerne i "Divi Conference" layoutet

Arrangement af elementerne i "Divi Online Yoga Instructor" layoutet

Du kan nemt downloade begge layouts fra Divi Bygger. 

Lad os nu komme i gang!

Se også: Divi: Vælg mellem gitteret og layoutet i fuld bredde af modulet Filtrerbar portefølje

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

Først skal vi installere begivenhedssideskabelonen fra Divi Conference Layout Pack. Efter at have oprettet din nye side i WordPress og aktiveret Divi Builder, kommer vi ind i Divi Library.

Gå ind i Divi Layout Library

Klik på ikonet « Indlæs fra bibliotek for at komme ind i Divi Layout Library

Find layoutet i Divi Layout Library

Ved at bruge søgefunktionen i Divis layoutbibliotek, leder dispositionen" Konferencebegivenhedsside".

Installer layout

Når du har valgt layoutet, skal du klikke på " Brug dette layout for at installere layoutet på din side.

Fjern og erstat billedmodul

Vi fjerner billedmodulet vist nedenfor for at gøre plads til modulet Filtrerbar portefølje, som vi tilpasser. Klik på " Slette efter at have holdt markøren over billedet for at slette billedet.

Indsæt Divi's Filterable Portfolio-modul

Med billedmodulet fjernet, kan vi nu gøre plads til vores Filtrerbare Portfolio-modul. Vi vil klikke på ikonet " Tilføj modul (det grå plustegnet), og vælg derefter modulet i modulmodalboksen, der vises.

Indstilling af antal stillinger og porteføljelayout

Som standard vil dette modul præsentere dit arbejde i en enkelt kolonne. Vi vil dog bruge gitterlayoutet, som som standard kommer med 4 kolonner. 

Som sådan anbefaler vi at vælge et multiplum af 4 (4, 8, 12, 16 osv.) som antallet af indlæg til din portefølje. 

Til denne tutorial vil vi bruge 12 projekter i vores gitter.

Begynd at tilpasse Divis filtrerbare portefølje: Titel og Metatekst

Nu hvor vores projekter vises i et gitter, lad os linke nogle af designelementerne i vores valgte skabelon. I dette tilfælde vil vi bruge den stil, der følger med Divi Conference Layout Pack i vores nye modul.

Tekststyling

• Tekstjustering: Centreret
• Tekstfarve: Mørk

Titeltekststil

• Titeloverskriftsniveau: H2
• Titelskrifttype : Krona One
• Tekstfarve: #000000

Meta tekst stil

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

Nu hvor vi har fået vores styling til titlerne i porteføljegitteret på plads, lad os lave nogle ændringer i selve formen på selve projektminiaturerne.

Skift projektminiaturekant og afrundede hjørner

I vores Divi Conference Layout-pakke bruger vi en unik kombination af afrundede hjørner for at give en unik form til nogle af keyframes i pakken. Lad os anvende denne stil på thumbnails af vores modul.

Billede

• Billede:
  • Afrundede hjørner: 50px 50px 50px 0px
  • Border Styles: alle
  • Kantbredde: 3px
  • Farve: #000000
  • Border Style: solid

Dette vil give vores thumbnails en form, der matcher resten af ​​de andre billeder i layoutpakken.

Tilpasning af svæveoverlejringen

Lad os gå et skridt videre med vores styling og lave en lille ændring af standardoverlayet, der følger med dette modul. Vi vil ændre farven samt det ikon, der bruges lige ud af kassen.

overlejring

• Zoom ikon farve: #bcf5fd
• Hover Overlay Farve: #ff6651
• Hover ikonvælger: Zoom

Som du nu kan se, har vi tilføjet mærkefarverne for dette layout til overlejringen, samt ændret det ikon, som Divi leverer som standard for overlejringsfunktionen ved svæv i dette modul.

Tilpasning af paginering

Vi vil nu begynde at bruge små uddrag af CSS for at tilføje yderligere tilpasning til vores Filtrerbare Portfolio-modul. Først vil vi tilpasse pagineringen af ​​dette modul. Dernæst fjerner vi grænsen, der vises over den med en enkelt linje CSS

Sideinddelingstekst

• Sideinddeling:
  • Skrifttype: Krona One
  • Tekstjustering: centreret
  • Tekstfarve: #ff6651, #000000 (Hover)

For vores CSS skifter vi til fanen Avanceret af vores modul. For det andet klikker vi på fanen Brugerdefineret CSS. Dernæst indtaster vi følgende kodestykke for at fjerne grænsen over vores paginering, hvilket giver det et renere udseende.

Porteføljepaginering

border-top: 0px;

Brug af Divi-indstillinger og CSS til at tilpasse filtertekst

For filterteksten tager vi den et hak op. Vi vil bruge CSS til at ændre baggrunden såvel som svæveeffekterne. 

Vi ønsker at have en perfekt kontinuitet mellem det nyligt tilføjede modul og layoutpakkens stil. Lad os først indtaste vores Divi-indstillinger for skrifttypen.

Filterkriterietekst

• Filterkriterier:
  • Skrifttype: Krona One
  • Skriftfarve: #ffffff, #000000 (Hover)

Som det står, ser vores filter ud til at være væk. I sin standardtilstand er det faktisk hvid tekst på en hvid baggrund. Vi vil dog ændre dette med tilpasset CSS to steder. 

Først tilføjer vi et CSS-uddrag i sideindstillingerne, der tilføjer en baggrund til filterteksten. For det andet vil vi tilpasse det aktive porteføljefilter ved hjælp af fanen Avanceret af modulet.

Adgang sideindstillinger, skal du klikke på de tre prikker i midten af ​​skærmen. Ensuite, vælg tandhjulsikon som åbner sideindstillingerne. Så er det dig naviger til fanen Custom CSS og indtast følgende for at tilføje en baggrund til filterteksten.

Tilpasset CSS

I dette CSS-uddrag målretter vi filterets baggrundsfarve. Vi målretter og stiler også dens svævetilstand. Næste på dagsordenen, lad os tilføje noget mere CSS til modulet og fremhæve 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 fane i fportefølje ilter henleder brugernes opmærksomhed på den aktuelle porteføljekategori, de besøger. I øjeblikket har dette filter hvid tekst og en lys baggrund. 

Vi går til fanen Avanceret i modulet Filtrerbar portefølje og tilføje tekst til standard- og svævetilstandene for denne funktion. Her er de CSS-egenskaber, som vi tilføjer i en standardtilstand:

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

Stat på hover

Når du svæver, ændrer vi baggrunden til sort.

color: #000000!important;

Endeligt udseende af designet af Divis filtrerbare portefølje med "Divi Conference"

Her er det endelige look!

Og nu, her er, hvordan det ser ud, når du svæver!

Tilpasning af Divis filtrerbare porteføljemodul: "Divi Online Yoga Instruktør"

Som med Divi Conference Edition kan du finde dit layout i Online Yoga Instructor Layout Pack inde i Divi Builder. 

Vi vil bruge landingssidelayoutet til denne vejledning. Rul ned til afsnittet Sektionsklasser med titlen Sektion Alle kommende klasser.

Indsættelse af det filtrerbare porteføljemodul

Herfra fjerner vi rækkerne med klasserne. Klik på det lilla ikon med tre prikker på . Derefter, vælg wireframe-visningen. Til sidst vil du slette de to rækker, der indeholder tre kolonner.

Så vil vi erstatte dem med en enkelt kolonne i rækken indeni. Derefter tilføjer vi vores Filtrerbare Portfolio-modul.

Som i det foregående eksempel vil vi bruge gitterlayoutet for dette modul med et multiplum af 4 for antallet af indlæg. 

Lad os nu gøre noget lidt anderledes med de oplysninger, vi præsenterer på kortet. 

I fanen Indhold, naviger til Elementer og fravælg Vis kategorier . Det betyder, at porteføljemodulet kun vil vise navnet på projektet uden navnet på den kategori, det er i.

Tilpasning af filterkriterietekst, projekttitel og pagineringstekst

Lad os definere stilgrundlaget for tekstdelene i vores modul. Brødteksten i dette layout er Åbne Sans og den skrifttype, der bruges til hovedoverskrifterne er Mejsel. Derfor vil vi bruge en kombination af disse to skrifttyper gennem hele stylingprocessen.

Tekster

• Tekstjustering: Centreret
• Tekstfarve: Lys

Titeltekst

• Titelskrifttype: Cinzel
• Titel Tekstfarve: #ffffff

Filtrer kriterietekst

• Filterkriterier Skrifttypevægt: Fed
• Filterkriterietekst Farve: #ffffff

Sideinddelingstekst

• Sideinddeling Skrifttypevægt: Fed

Sådan ser vores filtrerbare porteføljemodul ud lige nu. Det er ikke meget, men vi kommer langsomt dertil!

Opret en gennemsigtig svæveoverlejring

Lad os få inspiration fra de forskellige moduler og smukke gradienter i dette layout. Til dette opretter vi en gennemsigtig svæveoverlejring og tilpasser ikonet, der også vises ved svævebevægelse.

• Zoom ikon farve: #323741
• Hover Overlay Farve: rgba (255 201 165, 0,85)
• Hover Icon Picker: søg efter et ark og se ikonet ovenfor

Tilføjelse af kant til porteføljegitterelementer med tilpasset CSS

I lighed med vores første eksempel vil vi nu bruge CSS til at tilføje mere interesse til vores Filtrerbare Portfolio-modul. 

Nu tilføjer vi en ramme omkring hvert enkelt element i porteføljegitteret. Brug CSS-kodestykket nedenfor i den tilpassede CSS-del af sideindstillingerne for at tilføje vores kant. 

Vi vil også bruge "border" som CSS-klassen for dette modul.

• CSS-klasse: grænse

Tilpasset CSS

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

Her har vi nu vores Filterable Portfolio-modul med en flot kant – og polstring – rundt om hvert gitterelement.

Tilføjet CSS for at style pagineringskanten

I modsætning til vores tidligere eksempel, lad os tilføje farve til kanten af ​​vores paginering med CSS. Dette vil også gå i området Indstillinger > Brugerdefineret CSS-side .

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

Filterkriterie tekststil

I lighed med stilen i vores Divi Conference Portfolio-modul ønsker vi at tilføje jazz til vores kategorifiltre. Igen vil vi trække fra den stil, der allerede er til stede i den skabelon, vi har fået. 

Her er den CSS, vi vil tilføje i vores tilpassede CSS-sektion for at målrette mod baggrunden og svævemarkeringen af ​​vores filterbjælke.

/* 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 tilføjelser til vores tilpassede CSS er det sådan, vores Filtrerbare Portfolio-modul ser ud til at se ud.

Bemærk dog, hvordan det aktive porteføljefilter går tabt. Den har altid en lys baggrund med hvid tekst på. Lad os gå til modulindstillingerne og tilføje noget CSS for at ændre det.

Tilpasset CSS

Aktivt porteføljefilter:

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

Fjern modulanimation

For at give en renere oplevelse vil vi fjerne standardanimationen, der følger med modulet Filtrerbar portefølje. Til dette skal vi først gå tilbage til vores sideindstillinger og tilføje noget CSS, der vil målrette porteføljegitterets elementer og fjerne glidende overgang det sker ud af 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;
}

Læs også: Divi: Sådan ændrer du antallet af kolonner i en blog

Skift porteføljegitter fra fire kolonner til tre

Vores seneste CSS-tilføjelse vil være at transformere vores Filtrerbare Portfolio-modul fra fire kolonner til tre. Dette vil give os mere plads til at se vores projekter. 

Vi tilføjer også en ekstra linje til vores modul. Du finder også det seneste CSS-uddrag, som du kan bruge til at konvertere dine kolonner.

Tilpasset CSS

Til dette sidste uddrag tilføjer vi CSS-id'et #tre-kolonne-gitter til vores modul. Vi vil stadig beholde vores CSS-klasse 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;
}
}

Download DIVI nu!!!

Konklusion

Som med de fleste Divi-moduler kan indstillingerne, der følger med Divi, videreudvikles med CSS. Fremvisning af dit arbejde er en vigtig del af at drive en online forretning, blog eller brand. 

Som sådan er det vigtigt at have en organiseret måde at vise dit arbejde på. Tjen tips, der blev delt i dag, for at deltage i din egen designrejse med Divi's Filterable Portfolio-modul.

Forhåbentlig vil denne teknik tilføje endnu en nyttig designfærdighed til fremtidige projekter.

Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.

Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...