Vill du använda modulen Filterable Portfolio från Divi och du vet inte vilken layout du ska välja?
Modulen « Filterbar portfölj 'Of Divi ger dig två layoutalternativ att välja mellan. Båda alternativen har fördelar och fungerar mycket bra för vissa ändamål.
I den här artikeln kommer vi att jämföra fullbredds- och rutnätslayouterna för denna modul för att hjälpa dig att bestämma vad du behöver för din webbplats.
Vi kommer också att anpassa båda layouterna för att se hur de fungerar i en layout Divi.
Låt oss börja!
undersökningen
Låt oss först se vad vi ska skapa i den här handledningen.
Desktopversion av rutnätslayouten
Ladda ner DIVI nu!!!
Telefonversion av rutnätslayout
Desktopversion av Fullwidth-layouten
Läs också: Divi: Hur man använder skugg- och sväveffekter för att skapa interaktivt innehåll
Telefonversion av Fullwidth-layout
Så här ändrar du layouten för den filtrerbara portföljmodulen
Som standard visar modulen "Filterbar portfölj" layouten i full bredd. Du kan ändra layouten för att visa objekt i ett rutnät. Öppna först modulparametrar.
Välj sedan fliken Design. Det första alternativet är Layout. Den har en rullgardinslista med några val. Välj den att välja mellan Full bredd et Rutnät.
Om du väljer det alternativ som för närvarande inte är valt, kommer modulen att laddas om och visa portföljobjekten i denna layout. Exemplet nedan visar rutnätslayouten.
Jämförelse av filterbar portföljmodullayout
De två layouterna är väldigt olika, men de har vissa likheter. Båda visar filtret högst upp i modulen, titeln och meta under objektbilderna och sidnumren längst ned i modulen.
Här är en titt på hur de är olika.
Full bredd layout
Full bredd visar en stor bild med ett portföljelement som tar upp portföljområdets fulla bredd. Bilderna visas i sin ursprungliga form och expanderas för att passa den tillgängliga bredden.
Det ger inte mycket utrymme mellan plånboken. Vi rekommenderar att du begränsar antalet inlägg till ett fåtal. Exemplet nedan visar layouten i full bredd med 2 stolpar.
Rutnätslayout
Rutnätslayouten visar upp till 4 objekt i rad. Det lägger till mer utrymme mellan elementen. Bilder beskärs för att skapa miniatyrer av samma storlek oavsett bildstorlek och form.
För den här begränsade vi modulen till att visa fyra inlägg för att visa pagineringen.
När du ska använda varje layout i modulen Filtrera portföljen
Båda arrangemangen har sina fördelar. Här är några tips om när du ska använda varje layout.
Full bredd layout
Använd Fullwidth-layouten när du bara har ett fåtal objekt att visa eller vill fokusera på ett fåtal objekt.
Använd även denna layout när du vill framhäva eller uppmärksamma utvalda bilder.
Rutnätslayout
Använd rutnätslayouten när du vill visa många objekt eller när du vill ha en layout för att visa fler objekt på ett mindre utrymme.
Hur man anpassar filterbara portföljmodullayouter
Nu när vi har sett hur man väljer layouter, hur de fungerar och när de ska användas, låt oss se hur man anpassar dessa två layouter.
Vi kommer att använda portföljsidan för Gratis Painter Layout Pack finns i Divi. Här är originalsidan.
Vi kommer att ersätta portföljen med modulen Filterable Portfolio och använda samma bilder och titlar.
Vi kommer att skapa två versioner: en med fullbreddslayout och en med rutnätslayout.
Hur man anpassar rutnätslayouten för den filtrerbara portföljmodulen
Vi börjar med rutnätslayouten. Jag kommer att använda färgerna och typsnitten från den ursprungliga layouten.
Innehåll
Öppna dem modulparametrar och ange 4 för Antal inlägg. Välj alla kategorier som du vill visa i modulen.
- Antal inlägg: 4
- Inkluderade kategorier: Välj kategorier
Disposition
Välj sedan fliken Designa och välj Rutnät i layoutalternativen.
- Layout: Rutnät
Bild
Bläddra till Bild och välj alternativet BoxShadow. Ändra det skugga färg i rgba(0,0,0,0.05).
- Box Shadow: 4ème alternativ
- Skuggfärg: rgba(0,0,0,0.05)
Texte
Scrolla sedan ner till Texte och ändra inriktning I mitten. Detta centrerar filtret, titeln, meta och paginering.
- Textjustering: Center
Titeltext
Scrolla sedan ner till Titeltext och ändra följande inställningar.
- Titeltypsnitt : Merriweather
- Titel Text Färg: #000000
Ändra storleken på polis vid 26px för stationära datorer, 20px för surfplattor och 18px för telefoner.
- Titel Textstorlek: Desktop 26px, surfplatta 20px, telefon 18px
Filterkriterietext
Scrolla sedan ner till Filterkriterietext och ändra följande inställningar:
- Filterkriterier:
- Typsnitt: Montserrat
- Teckensnittsvikt: Fet
- Stil: TT
- Textfärg: #fd6927
- Textstorlek: 12px
Metatext
Scrolla sedan ner till Meta text. Ändra det polis i Montserrat och färg i #fd6927.
- Metatextstorlek: Montserrat
- Metatextfärg: #fd6927
Ställ in Taille på 12 pixlar, denteckenavstånd på 2 pixlar och hauteur av linje på 1,2 em.
- Textstorlek: 12px
- Metabokstavsavstånd: 2px
- Meta Line Höjd: 1,2 em
Pagineringstext
Till sist, scrolla ner till Pagineringstext och ändra det polis i Montserrat, och ställ in färg teckensnitt på svart. Stäng modulen och spara dina inställningar.
- Teckensnitt för paginering: Montserrat
- Pagineringstextfärg: #000000
Hur man anpassar den filtrerbara portföljmodulen i en fullbreddslayout
Låt oss nu konfigurera modulen i en layout i full bredd.
Vi kommer att använda samma designtips som rutnätslayouten, men vi kommer att göra några ändringar som fungerar bra för den här layouten. Vi kommer att använda lite enkel CSS för att göra några mindre justeringar.
Innehåll
Öppna dem modulparametrar och ändra antalet publikationer till 2. Detta håller sidan mindre och mer hanterbar med stora bilder. Välj alla kategorier som du vill visa i modulen.
- Antal inlägg: 2
- Inkluderade kategorier: Välj Kategorier
Element
Bläddra till Elements och inaktivera Visa kategorier. Lämna de andra aktiverade. Kategorier kommer fortfarande att vara aktiverade för filtret, men de visas inte med titeln.
- Visa kategorier: NEJ
Disposition
Välj fliken Design. Sous Layout, lämna Layout inställd på Full bredd, vilket är dess standardinställning.
- Layout: Fullbredd
Bild
Scrolla sedan ner till Bild . Välj alternativet Box skugga och ändra det färg nyans i rgba (0,0,0,0.05).
- Box Shadow: 4ème alternativ
- Skuggfärg: rgba(0,0,0,0.05)
Texte
Scrolla sedan ner till text. Ändra inriktning I mitten. Filtret, titeln och pagineringen kommer att centreras med bilderna.
- Textjustering: Center
Titeltext
Scrolla sedan ner till Titeltext . Ändra det polis till Merriweather och ändra färg i svart.
- Titeltypsnitt : Merriweather
- Titel Text Färg: #000000
Ändra storleken på polis vid 40px för stationära datorer, 20px för surfplattor och 18px för telefoner.
- Titel Textstorlek: Desktop 40px, surfplatta 20px, telefon 18px
Filterkriterietext
Scrolla sedan ner till Filterkriterietext och ändra följande inställningar:
- Filterkriterier:
- Typsnitt: Montserrat
- Teckensnittsvikt: Fet
- Stil: TT
- Textfärg: #fd6927
Pagineringstext
Scrolla sedan ner till Pagineringstext. Ändra det polis i Montserrat, ändra vikt halvfet och ställ in fontfärg på #fd6927. Stäng modulen och spara dina inställningar.
- Teckensnitt för paginering: Montserrat
- Färg: #fd6927
- Teckensnittsvikt: Halvfet
CSS-titeltext
Öppna fliken Advanced Open water och bläddra till Portföljens titel. Välj skrivbordsikonen. Kopiera koden nedan för olika skärmstorlekar. Stäng modulen och spara dina inställningar.
Portföljens titel:
- Desktop
padding-bottom:40px- Tablett
padding-bottom:30px- Telefon
padding-bottom:20px
Résultats
Desktopversion av rutnätslayouten
Telefonversion av rutnätslayout
Ladda ner DIVI nu!!!
Desktopversion av layouten i full bredd
Se även: Divi: Hur man ändrar gradienten för en bakgrund vid hovring
Telefonversion av layouten i full bredd
Ladda ner DIVI nu!!!
Slutsats
Detta är vår syn på att använda en fullbreddslayout kontra ett rutnät i modulen Filtrerbar portfölj av Divi. Att välja mellan de två layoutalternativen är lätt.
Varje alternativ har fördelar och bör utformas annorlunda för att fungera med din webbplats. Gör bara några justeringar för att säkerställa att din modul fungerar bra med alla Divi-layouter.
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.
.
