Vil du bruke modulen Filterable Portfolio til Divi og du vet ikke hvilken layout du skal velge?
Modulen « Filtrerbar portefølje "Å Divi gir deg to layoutalternativer å velge mellom. Begge alternativene har fordeler og fungerer veldig bra for visse formål.
I denne artikkelen vil vi sammenligne fullbredde- og rutenettoppsettene til denne modulen for å hjelpe deg med å bestemme hva du trenger for nettstedet Web.
Vi vil også tilpasse begge layoutene for å se hvordan de fungerer i ett oppsett Divi.
La oss begynne!
undersøkelsen
La oss først se hva vi skal lage i denne opplæringen.
Desktop-versjon av rutenettoppsettet
Last ned DIVI nå!!!
Telefonversjon av rutenettoppsett
Desktop-versjon av Fullwidth-oppsettet
Les også: Divi: Hvordan bruke skygge- og sveveeffekter for å lage interaktivt innhold
Telefonversjon av Fullwidth-oppsett
Slik endrer du oppsettet til den filtrerbare porteføljemodulen
Som standard viser "Filterable Portfolio"-modulen oppsettet i full bredde. Du kan endre oppsettet for å vise elementer i et rutenett. Først åpner du modul parametere.
Velg deretter fanen Design. Det første alternativet er Layout. Den har en rullegardinliste med noen få valg. Velg den for å velge mellom Full bredde et Grid.
Hvis du velger alternativet som ikke er valgt for øyeblikket, vil modulen laste inn på nytt og vise porteføljeelementene i denne layouten. Eksemplet nedenfor viser rutenettoppsettet.
Sammenligning av filtrerbar porteføljemoduloppsett
De to oppsettene er svært forskjellige, men de har noen likheter. Begge viser filteret øverst i modulen, tittelen og metaen under elementbildene og pagineringen nederst i modulen.
Her er en titt på hvordan de er forskjellige.
Oppsett i full bredde
Full bredde viser et stort bilde med et porteføljeelement som tar opp hele bredden av porteføljeområdet. Bildene vises i sin opprinnelige form og utvides for å passe den tilgjengelige bredden.
Det gir ikke mye plass mellom lommeboken. Vi anbefaler å begrense antall innlegg til noen få. Eksemplet nedenfor viser oppsettet i full bredde med 2 stolper.
Rutenettoppsett
Rutenettoppsettet viser opptil 4 elementer på rad. Det gir mer plass mellom elementene. Bilder beskjæres for å lage miniatyrbilder av samme størrelse uavhengig av bildestørrelse og form.
For denne begrenset vi modulen til å vise fire innlegg for å vise pagineringen.
Når du skal bruke hvert oppsett av den filtrerbare porteføljemodulen
Begge ordningene har sine fordeler. Her er noen tips om når du skal bruke hver layout.
Oppsett i full bredde
Bruk Fullwidth-oppsettet når du bare har noen få elementer å vise eller ønsker å fokusere på noen få elementer.
Bruk også dette oppsettet når du vil fremheve eller trekke oppmerksomhet til utvalgte bilder.
Rutenettoppsett
Bruk rutenettoppsettet når du vil vise mange elementer eller når du vil ha et oppsett for å vise flere elementer på en mindre plass.
Hvordan tilpasse filtrerbare porteføljemoduloppsett
Nå som vi har sett hvordan du velger oppsett, hvordan de fungerer og når de skal brukes, la oss se hvordan du tilpasser disse to oppsettene.
Vi vil bruke Portfolio-siden til Gratis Painter Layout Pack tilgjengelig i Divi. Her er den originale siden.
Vi vil erstatte porteføljen med modulen Filterable Portfolio og bruke de samme bildene og titlene.
Vi lager to versjoner: en med fullbreddeoppsett og en med rutenettoppsett.
Slik tilpasser du rutenettoppsettet til den filtrerbare porteføljemodulen
Vi starter med rutenettoppsettet. Jeg vil bruke fargene og fontene fra den originale layouten.
Innhold
Åpne dem modul parametere og skriv inn 4 for Antall innlegg. Velg alle kategorier som du ønsker å vise i modulen.
- Antall innlegg: 4
- Inkluderte kategorier: Velg kategorier
Disposisjon
Velg deretter fanen utforming og velg Grid i layoutalternativene.
- Layout: Rutenett
Bilde
Bla til Bilde og velg alternativet BoxShadow. Endre det skygge farge i rgba(0,0,0,0.05).
- Box Shadow: 4ème alternativ
- Skyggefarge: rgba(0,0,0,0.05)
Texte
Bla deretter ned til Texte og endre Justering I midten. Dette sentrerer filteret, tittelen, metaen og pagineringen.
- Tekstjustering: Senter
Titteltekst
Bla deretter ned til Titteltekst og endre følgende innstillinger.
- Tittel Font : Merriweather
- Tittel Tekstfarge: #000000
Endre størrelsen på politi ved 26px for stasjonære datamaskiner, 20px for nettbrett og 18px for telefoner.
- Tittel Tekststørrelse: Desktop 26px, nettbrett 20px, Telefon 18px
Filterkriterietekst
Bla deretter ned til Filterkriterietekst og endre følgende innstillinger:
- Filterkriterier:
- Font: Montserrat
- Skriftvekt: Fet
- Stil: TT
- Tekstfarge: #fd6927
- Tekststørrelse: 12px
Metatekst
Bla deretter ned til Metatekst. Endre det politi i Montserrat og farge i #fd6927.
- Metatekststørrelse: Montserrat
- Metatekstfarge: #fd6927
Sett taille på 12 piksler, denavstand mellom bokstavene på 2 piksler og hauteur av linje på 1,2 em.
- Tekststørrelse: 12px
- Metabokstavavstand: 2px
- Metalinjehøyde: 1,2 em
Pagineringstekst
Til slutt, bla ned til Pagineringstekst og endre den politi i Montserrat, og sett farge skrift på svart. Lukk modulen og lagre innstillingene.
- Pagineringsskrift: Montserrat
- Pagineringstekstfarge: #000000
Slik tilpasser du den filtrerbare porteføljemodulen i et oppsett i full bredde
La oss nå konfigurere modulen i et oppsett i full bredde.
Vi bruker de samme designstikkene som rutenettoppsettet, men vi vil gjøre noen endringer som fungerer bra for denne layouten. Vi skal bruke noen enkel CSS for å gjøre noen mindre justeringer.
Innhold
Åpne dem modul parametere og endre antall publikasjoner til 2. Dette holder siden mindre og mer håndterlig med store bilder. Velg alle kategorier som du ønsker å vise i modulen.
- Antall innlegg: 2
- Inkluderte kategorier: Velg kategorier
Elements
Bla til Elements og deaktivere Vis kategorier. La de andre være aktivert. Kategorier vil fortsatt være aktivert for filteret, men de vil ikke vises med tittelen.
- Vis kategorier: NO
Disposisjon
Velg fanen Design. Sous Layout, la Layout være satt til Full bredde, som er standardinnstillingen.
- Layout: Full bredde
Bilde
Bla deretter ned til Bilde . Velg alternativet Box Shadow og endre den farge skygge i rgba (0,0,0,0.05).
- Box Shadow: 4ème alternativ
- Skyggefarge: rgba(0,0,0,0.05)
Texte
Bla deretter ned til tekst. Endre Justering I midten. Filteret, tittelen og pagineringen vil være sentrert med bildene.
- Tekstjustering: Senter
Titteltekst
Bla deretter ned til Titteltekst . Endre det politi til Merriweather og endre farge i svart.
- Tittel Font : Merriweather
- Tittel Tekstfarge: #000000
Endre størrelsen på politi ved 40px for stasjonære datamaskiner, 20px for nettbrett og 18px for telefoner.
- Tittel Tekststørrelse: Desktop 40px, nettbrett 20px, Telefon 18px
Filterkriterietekst
Bla deretter ned til Filterkriterietekst og endre følgende innstillinger:
- Filterkriterier:
- Font: Montserrat
- Skriftvekt: Fet
- Stil: TT
- Tekstfarge: #fd6927
Pagineringstekst
Bla deretter ned til Pagineringstekst. Endre det politi i Montserrat, endre vekt halvfet og still inn skriftfarge på #fd6927. Lukk modulen og lagre innstillingene.
- Pagineringsskrift: Montserrat
- Farge: #fd6927
- Skriftvekt: Semi fet
CSS-titteltekst
Åpne fanen Avansert og bla til Porteføljetittel. Velg skrivebordsikonet. Kopier koden nedenfor for forskjellige skjermstørrelser. Lukk modulen og lagre innstillingene.
Porteføljetittel:
- desktop
padding-bottom:40px- Tablett
padding-bottom:30px- Telefon
padding-bottom:20px
résultats
Desktop-versjon av rutenettoppsettet
Telefonversjon av rutenettoppsett
Last ned DIVI nå!!!
Desktop-versjon av oppsettet i full bredde
Se også: Divi: Hvordan endre gradienten til en bakgrunn ved sveving
Telefonversjon av oppsettet i full bredde
Last ned DIVI nå!!!
konklusjonen
Dette er vårt syn på å bruke et oppsett i full bredde kontra et rutenett i modulen Filtrerbar portefølje av Divi. Det er enkelt å velge mellom de to layoutalternativene.
Hvert alternativ har fordeler og bør utformes annerledes for å fungere med din nettstedet Web. Bare foreta noen få justeringer for å sikre at modulen din fungerer bra med ethvert Divi-oppsett.
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.
...
