Vill du visa din DIVI-bloggsida som ett rutnät med flera kolumner?
Divis bloggmodul kan visa blogginlägg i full bredd eller rutnätslayout. Om du väljer rutnätslayout är det maximala antalet kolumner du kan ha tre.
I den här handledningen, med bara några CSS-utdrag, din blogg kommer att förvandlas till en vacker rutnätslayout med flera kolumner. Dessutom kommer kolumnerna att vara smidiga och responsiva i alla webbläsarstorlekar, så du behöver inte oroa dig för att uppdatera dessa mediefrågor eller responsiva inställningar.
Du kan också konsultera vår artikel för att veta Hur man skapar en bloggsida med modulen DIVI Blog.
undersökningen
Innan vi hoppar in i denna handledning, låt oss först ta en titt på resultatet vi vill uppnå.
Ladda ner DIVI nu!!!
Konfigurera en bloggmodul med helskärmslayout
DIVI:s bloggmodul kan användas för att lägga till en blogg var som helst på din webbplats. Det gör det verkligen enkelt att skapa en bloggsida i Divi. Allt du behöver göra är att lägga till en bloggmodul på sidan med hjälp av Divi Builder.
För den här handledningen kommer vi att använda en förgjord blogglayout från en av gratis layoutpaket av DIVI som redan innehåller en bloggmodul med en grundläggande stil.
Så här laddar du den färdiga blogglayouten:
- Skapa en ny sida från WordPress-instrumentpanelen
- Ge det ett relevant namn och klicka på "Använd Divi Builder"
- Klicka på "Välj layout"
- Skriv i sökfältet "Modedesigner" och välj layouten "Bloggsida för modedesigner"
- Se till att välja blogglayout och klicka sedan på "Välj layout"
När layouten har laddats hittar du bloggmodulen som används för att visa blogginlägg och öppna inställningarna.
Ställ in antal inlägg
Uppdatera i blogginställningarna innehåll att begränsa antalet inlägg till 10. (Detta är främst av estetiska skäl, eftersom vårt rutnät så småningom kommer att innehålla två rader med fem blogginlägg.)
- Antal positioner: 10
Välj helskärmslayout
Eftersom vi kommer att lägga upp vår blogg i kolumner med CSS Grid, måste vi se till att layouten på bloggmodulen är 'Helskärm' (inte 'Grid'). Detta kommer att säkerställa att blogginlägg staplas vertikalt i sin normala sidordning.
För att ändra layouten för Bloggmodulen, öppna modulinställningarna och under fliken Stil öppna rullgardinsmenyn Mall och välj Helskärm .
Nu kommer varje blogginlägg att sträcka sig över hela bredden av kolumnen (eller den överordnade behållaren).
Låt oss lägga till en ram till blogginlägg. Uppdatera gränsalternativen enligt följande:
- Kantbredd: 1px
- Kantfärg: rgba (150,104,70,0.35)
Lägga till en anpassad CSS-klass till bloggmodulen
För att effektivt kunna rikta in den här bloggmodulen (inte en annan) med vår CSS, måste vi ge vår modul en anpassad CSS-klass. Lägg till följande CSS-klass under fliken Avancerat:
- CSS-klass: et-blog-css-grid
Skapa flerkolumnslayouten med CSS Grid
Nu när vår bloggmodul har konfigurerats med en helskärmslayout är vi redo att lägga till vår anpassade CSS.
Vi kommer att infoga en kodmodul under bloggmodulen för att lägga till CSS på sidan.
I kodinmatningsrutan lägger du till de nödvändiga stiltaggarna för att omsluta eventuell CSS-kod som lagts till på en sida.
Klistra in följande CSS-kodavsnitt inuti stiltaggarna:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Den första raden i CSS presenterar innehåll (eller moduler) i rutnätsform.
display: grid;Den andra raden i CSS definierar rutkolumnmodellen.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Den tredje raden bestämmer avståndet mellan rutnätsobjekt.
gap : 20px ;Vid det här laget är det responsiva rutnätet med fem kolumner redo att användas. Faktum är att om du inte vill använda paginering eller gränser för dina blogginlägg kan du sluta här.
Här är resultatet hittills.
Anpassa rutnätsobjekt
Sedan kan vi lägga till några rader med CSS som riktar sig mot rutnätselementen så att de är anpassade till toppen av varje rad och har lite utfyllnad.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Borttagen rutnätspaginering
För närvarande, om du har paginering aktiv på bloggmodulen, kommer den att behandlas som det sista rutnätselementet i CSS-rutnätet. För att helt ta bort pagineringen från rutnätet kan vi ge den en absolut position och placera den direkt under bloggmodulen. För att göra detta, lägg till följande CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Låt oss se resultatet så här långt!
Tips: justera storleken på alla utvalda bilder (eller miniatyrer)
Vid det här laget kanske du märker inkonsekvensen i höjden på bilderna som visas på varje blogginlägg. Om du vill att alla ska ha samma höjd kan du också använda ytterligare CSS för att göra det.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
Med en övre intern marginal på 56,25 % bör vi få ett bildförhållande på 16:9 för alla våra bilder.
Justera gärna stoppningen på bildbehållaren för att få det bildförhållande du vill ha för din bild.
Slutresultat
Och här är en sista förhandsvisning av vår bloggmodul med våra nya kolumner och rutnät. Och som vi kan se är nätet fullt känsligt.
Ladda ner DIVI nu!!!
Slutsats
Det är klart ! Vi har visat dig i den här handledningen hur du ordnar dina blogginlägg i kolumner.
Vi kunde omstrukturera hela Divi Blog-modulen till en flytande layout med fem kolumner. Hoppas detta sparar tid och ger dig fler alternativ för att skapa vackra bloggsidor. Du kan också konsultera Hur man skapar en bloggsida med Divis bloggmodul
Se också våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att 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.
