Vil du bruge modulet Filtrerbar Portfolio af Divi og du ved ikke hvilket layout du skal vælge?
Modulet « Filtrerbar portefølje "At Divi giver dig to layoutmuligheder at vælge imellem. Begge muligheder har fordele og fungerer meget godt til visse formål.
I denne artikel vil vi sammenligne fuldbredde- og gitterlayouterne for dette modul for at hjælpe dig med at beslutte, hvad du har brug for Websted.
Vi vil også tilpasse begge layouts for at se, hvordan de fungerer i ét layout Divi.
Lad os starte!
undersøgelse
Lad os først se, hvad vi skal lave i denne tutorial.
Desktop version af gitterlayoutet
Download DIVI nu!!!
Telefonversion af gitterlayout
Desktopversion af Fullwidth-layoutet
Læs også: Divi: Sådan bruger du skygge- og svæveeffekter til at skabe interaktivt indhold
Telefonversion af layout i fuld bredde
Sådan ændres layoutet af det filtrerbare porteføljemodul
Som standard viser modulet "Filtrerbar portefølje" layoutet i fuld bredde. Du kan ændre layoutet for at vise elementer i et gitter. Åbn først modul parametre.
Vælg derefter fanen Design. Den første mulighed er Layout. Den har en rulleliste med et par valgmuligheder. Vælg det at vælge imellem Fuld bredde et Grid.
Hvis du vælger den mulighed, der ikke er valgt i øjeblikket, vil modulet genindlæse og vise porteføljeelementerne i dette layout. Eksemplet nedenfor viser gitterlayoutet.
Sammenligning af filtrerbar porteføljemodullayout
De to layouts er meget forskellige, men de har nogle ligheder. Begge viser filteret øverst i modulet, titlen og metaen under elementbillederne og pagineringen i bunden af modulet.
Her er et kig på, hvordan de er forskellige.
Fuld bredde layout
Fuld bredde viser et stort billede med et porteføljeelement, der optager hele bredden af porteføljeområdet. Billeder vises i deres originale form og udvides, så de passer til den tilgængelige bredde.
Det tilføjer ikke meget plads mellem pungartikler. Vi anbefaler at begrænse antallet af indlæg til nogle få. Eksemplet nedenfor viser layoutet i fuld bredde med 2 stolper.
Gitter layout
Gitterlayoutet viser op til 4 elementer i træk. Det tilføjer mere plads mellem elementerne. Billeder beskæres for at skabe miniaturebilleder af samme størrelse uanset billedstørrelse og form.
For denne begrænsede vi modulet til at vise fire indlæg for at vise pagineringen.
Hvornår skal hvert layout af Filtrerbar Portfolio-modulet bruges
Begge arrangementer har deres fordele. Her er nogle tips til, hvornår du skal bruge hvert layout.
Fuld bredde layout
Brug Fuldbredde-layoutet, når du kun har nogle få elementer at vise eller ønsker at fokusere på nogle få elementer.
Brug også dette layout, når du vil fremhæve eller henlede opmærksomheden på fremhævede billeder.
Gitterlayout
Brug gitterlayoutet, når du vil vise mange elementer, eller når du vil have et layout for at vise flere elementer på et mindre rum.
Sådan tilpasser du filtrerbare porteføljemodullayouts
Nu hvor vi har set, hvordan man vælger layouts, hvordan de fungerer, og hvornår de skal bruges, lad os se, hvordan man tilpasser disse to layouts.
Vi vil bruge Portfolio-siden for Gratis Painter Layout Pack tilgængelig i Divi. Her er den originale side.
Vi vil erstatte porteføljen med modulet Filtrerbar portefølje og bruge de samme billeder og titler.
Vi laver to versioner: en med et layout i fuld bredde og en med et gitterlayout.
Sådan tilpasser du gitterlayoutet for det filtrerbare porteføljemodul
Vi starter med gitterlayoutet. Jeg vil bruge farverne og skrifttyperne fra det originale layout.
Indhold
Åbn dem modul parametre og indtast 4 for Posttælling. Vælg alle kategorier som du ønsker at få vist i modulet.
- Antal indlæg: 4
- Inkluderede kategorier: Vælg kategorier
Disposition
Vælg derefter fanen Design og vælg Grid i layoutmulighederne.
- Layout: Gitter
Billede
Rul til Billede og vælg indstillingen BoxShadow. Ændre det skygge farve i rgba(0,0,0,0.05).
- Box Shadow: 4ème option
- Skyggefarve: rgba(0,0,0,0.05)
Tekster
Rul derefter ned til Tekster og ændre justering I centrum. Dette centrerer filteret, titlen, metaen og pagineringen.
- Tekstjustering: Center
Titeltekst
Rul derefter ned til Titeltekst og ændre følgende indstillinger.
- Titelskrifttype : Merriweather
- Titel Tekstfarve: #000000
Skift størrelsen på politi ved 26px for desktops, 20px for tablets og 18px for telefoner.
- Titel Tekststørrelse: Desktop 26px, tablet 20px, telefon 18px
Filterkriterietekst
Rul derefter ned til Filterkriterietekst og ændre følgende indstillinger:
- Filterkriterier:
- Skrifttype: Montserrat
- Skrifttypevægt: Fed
- Stil: TT
- Tekstfarve: #fd6927
- Tekststørrelse: 12px
Meta tekst
Rul derefter ned til Meta tekst. Ændre det politi i Montserrat og farve i #fd6927.
- Metatekststørrelse: Montserrat
- Metatekstfarve: #fd6927
Indstil taille på 12 pixels, denbogstavmellemrum på 2 pixels og hauteur af linje på 1,2 em.
- Tekststørrelse: 12px
- Metabogstavafstand: 2px
- Meta Line Højde: 1,2 em
Sideinddelingstekst
Rul til sidst ned til Sideinddelingstekst og ændre det politi i Montserrat, og sæt den farve skrifttype på sort. Luk modulet og gem dine indstillinger.
- Sideinddeling skrifttype: Montserrat
- Sideinddeling Tekstfarve: #000000
Sådan tilpasser du det filtrerbare porteføljemodul i et layout i fuld bredde
Lad os nu konfigurere modulet i et layout i fuld bredde.
Vi bruger de samme designelementer som gitterlayoutet, men vi laver et par ændringer, der fungerer godt til dette layout. Vi vil bruge nogle simple CSS til at lave nogle mindre justeringer.
Indhold
Åbn dem modul parametre og ændre antallet af publikationer til 2. Dette holder siden mindre og mere overskuelig med store billeder. Vælg alle kategorier som du ønsker at få vist i modulet.
- Antal indlæg: 2
- Inkluderede kategorier: Vælg kategorier
Elementer
Rul til Elements og deaktiver Vis kategorier. Lad de andre være aktiveret. Kategorier vil stadig være aktiveret for filteret, men de vises ikke sammen med titlen.
- Vis kategorier: NEJ
Disposition
Vælg fanen Design. under Layout, lad Layout være indstillet til Fuld bredde, som er standardindstillingen.
- Layout: Fuld bredde
Billede
Rul derefter ned til Billede . Vælg muligheden Box Shadow og ændre det farve skygge i rgba (0,0,0,0.05).
- Box Shadow: 4ème option
- Skyggefarve: rgba(0,0,0,0.05)
Tekster
Rul derefter ned til tekst. Skift justering I centrum. Filteret, titlen og pagineringen vil blive centreret med billederne.
- Tekstjustering: Center
Titeltekst
Rul derefter ned til Titeltekst . Ændre det politi til Merriweather og ændre farve i sort.
- Titelskrifttype : Merriweather
- Titel Tekstfarve: #000000
Skift størrelsen på politi ved 40px for desktops, 20px for tablets og 18px for telefoner.
- Titel Tekststørrelse: Desktop 40px, tablet 20px, telefon 18px
Filterkriterietekst
Rul derefter ned til Filterkriterietekst og ændre følgende indstillinger:
- Filterkriterier:
- Skrifttype: Montserrat
- Skrifttypevægt: Fed
- Stil: TT
- Tekstfarve: #fd6927
Sideinddelingstekst
Rul derefter ned til Sideinddelingstekst. Ændre det politi i Montserrat, ændre poids semi-fed og indstil skrift farve på #fd6927. Luk modulet og gem dine indstillinger.
- Sideinddeling skrifttype: Montserrat
- Farve: #fd6927
- Skrifttypevægt: Semi fed
CSS titeltekst
Åbn fanen Avanceret og scroll til Porteføljetitel. Vælg skrivebordsikonet. Kopier koden nedenfor for forskellige skærmstørrelser. Luk modulet og gem dine indstillinger.
Porteføljetitel:
- desktop
padding-bottom:40px- Tablet
padding-bottom:30px- Telefon
padding-bottom:20px
résultats
Desktop version af gitterlayoutet
Telefonversion af gitterlayout
Download DIVI nu!!!
Desktopversion af layoutet i fuld bredde
Se også: Divi: Sådan ændres gradienten af en baggrund ved svævning
Telefonversion af layoutet i fuld bredde
Download DIVI nu!!!
Konklusion
Dette er vores bud på at bruge et layout i fuld bredde versus et gitter i modulet Filtrerbar portefølje af Divi. Det er nemt at vælge mellem de to layoutmuligheder.
Hver mulighed har fordele og bør designes forskelligt til at fungere med din Websted. Bare lav et par justeringer for at sikre, at dit modul fungerer godt med ethvert Divi-layout.
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.
...
