Vil du gerne vise din DIVI-blogside som et gitter med flere kolonner?
Divi's Blog-modul kan vise blogindlæg i fuld bredde eller gitterlayout. Hvis du vælger gitterlayoutet, er det maksimale antal kolonner, du kan have, tre.
I denne øvelse, med blot nogle få CSS-uddrag, din blog vil blive til et smukt flersøjlet gitterlayout. Derudover vil kolonnerne være glatte og responsive på tværs af alle browserstørrelser, så du ikke behøver at bekymre dig om at opdatere disse medieforespørgsler eller responsive indstillinger.
Du kan også konsultere vores artikel for at vide Sådan opretter du en blogside med DIVI Blog-modulet.
undersøgelse
Før vi hopper ind i denne tutorial, lad os først tage et kig på det resultat, vi ønsker at opnå.
Download DIVI nu!!!
Konfiguration af et blogmodul med et fuldskærmslayout
DIVI's Blog-modul kan bruges til at tilføje en blog hvor som helst på din Websted. Det gør det virkelig nemt at oprette en blogside i Divi. Alt du skal gøre er at tilføje et blogmodul til siden ved hjælp af Divi Builder.
Til denne tutorial skal vi bruge et færdiglavet bloglayout fra en af gratis layoutpakker af DIVI, som allerede indeholder et blogmodul med en grundlæggende stil.
Sådan indlæses det færdiglavede bloglayout:
- Opret en ny side fra WordPress-dashboardet
- Giv det et relevant navn og klik på 'Brug Divi Builder'
- Klik på "Vælg layout"
- Indtast 'Fashion Designer' i søgefeltet, og vælg layoutet 'Fashion Designer Blog Page'
- Sørg for at vælge Blog Layout og klik derefter på "Vælg layout"
Når layoutet er indlæst, skal du finde blogmodulet, der bruges til at vise blogindlæg, og åbne indstillingerne.
Indstil antal indlæg
I blogindstillingerne skal du opdatere indhold at begrænse antallet af indlæg til 10. (Dette er hovedsageligt af æstetiske årsager, da vores gitter med tiden vil omfatte to rækker med fem blogindlæg).
- Antal positioner: 10
Vælg layout i fuld skærm
Da vi kommer til at lægge vores blog op i kolonner ved hjælp af CSS Grid, skal vi sørge for, at layoutet af blogmodulet er 'Fuld skærm' (ikke 'Grid'). Dette vil sikre, at blogindlæg er stablet lodret i deres normale siderækkefølge.
For at ændre layoutet af Blog-modulet skal du åbne modulindstillingerne og under fanen Stil åbne rullemenuen Skabelon og vælg Fuld skærm .
Nu vil hvert blogindlæg spænde over hele bredden af kolonnen (eller den overordnede container).
Lad os tilføje en kant til blogindlæg. Opdater grænseindstillingerne som følger:
- Kantbredde: 1px
- Kantfarve: rgba (150,104,70,0.35)
Tilføjelse af en tilpasset CSS-klasse til blogmodulet
For effektivt at målrette dette særlige blog-modul (ikke et andet) med vores CSS, er vi nødt til at give vores modul en tilpasset CSS-klasse. Tilføj følgende CSS-klasse under fanen avanceret:
- CSS-klasse: et-blog-css-grid
Oprettelse af multi-kolonne layout med CSS Grid
Nu hvor vores blogmodul er sat op med et fuldskærmslayout, er vi klar til at tilføje vores tilpassede CSS.
Vi vil indsætte et kodemodul under blogmodulet for at tilføje CSS til siden.
I kodeindtastningsfeltet skal du tilføje de nødvendige stiltags for at ombryde enhver CSS-kode, der er tilføjet til en side.
Indsæt følgende CSS-kodestykke inde i stiltags:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Den første linje af CSS præsenterer indhold (eller moduler) i gitterform.
display: grid;Den anden linje i CSS definerer gitterkolonnemodellen.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Den tredje række bestemmer afstanden mellem gitterelementer.
gap : 20px ;På dette tidspunkt er det responsive gitter med fem kolonner klar til brug. Faktisk, hvis du ikke ønsker at bruge paginering eller grænser til dine blogindlæg, kan du stoppe her.
Her er resultatet hidtil.
Tilpas gitterelementer
Derefter kan vi tilføje et par linjer med CSS, der er målrettet mod gitterelementerne, så de er justeret til toppen af hver række og har noget polstring.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Fjernet gitterpaginering
I øjeblikket, hvis du har paginering aktiv på blogmodulet, vil det blive behandlet som det sidste gitterelement i CSS-gitteret. For helt at fjerne pagineringen fra gitteret kan vi give den en absolut position og placere den direkte under blogmodulet. For at gøre dette skal du tilføje følgende CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Lad os se resultatet indtil videre!
Tip: Juster størrelsen på alle fremhævede billeder (eller miniaturebilleder)
På dette tidspunkt vil du muligvis bemærke inkonsistensen i højden af billederne på hvert blogindlæg. Hvis du vil have dem alle i samme højde, kan du også bruge ekstra CSS til at gøre 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 top intern margin på 56,25 % burde vi få et billedformat på 16:9 for alle vores billeder.
Juster gerne polstringen på billedbeholderen for at få det billedformat, du ønsker til dit billede.
Endelig resultat
Og her er et sidste eksempel på vores blogmodul med vores nye kolonner og gitter. Og som vi kan se, reagerer gitteret fuldt ud.
Download DIVI nu!!!
Konklusion
Det er gjort ! Vi har vist dig i denne vejledning, hvordan du arrangerer dine blogindlæg i spalter.
Vi var i stand til at omstrukturere hele Divi Blog-modulet til et flydende layout med fem kolonner. Håber dette sparer dig tid og giver dig flere muligheder for at skabe smukke blogsider. Du kan også konsultere Sådan opretter du en blogside med Divi's blogmodul
Se også vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved 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.
