Vil du vise DIVI-bloggsiden din som et rutenett med flere kolonner?
Divis bloggmodul kan vise blogginnlegg i full bredde eller rutenettoppsett. Hvis du velger rutenettoppsettet, er det maksimale antallet kolonner du kan ha tre.
I denne opplæringen, med bare noen få CSS-snutter, bloggen din vil bli til et vakkert rutenett med flere kolonner. I tillegg vil kolonnene være jevne og responsive på tvers av alle nettleserstørrelser, så du trenger ikke å bekymre deg for å oppdatere disse mediespørringene eller responsive innstillingene.
Du kan også konsultere artikkelen vår for å vite det Hvordan lage en bloggside med DIVI Blog-modulen.
undersøkelsen
Før vi hopper inn i denne opplæringen, la oss først ta en titt på resultatet vi ønsker å oppnå.
Last ned DIVI nå!!!
Konfigurere en bloggmodul med fullskjermoppsett
DIVIs bloggmodul kan brukes til å legge til en blogg hvor som helst på din nettstedet Web. Det gjør det virkelig enkelt å lage en bloggside i Divi. Alt du trenger å gjøre er å legge til en bloggmodul på siden ved hjelp av Divi Builder.
For denne opplæringen skal vi bruke et ferdiglaget bloggoppsett fra en av gratis layoutpakker av DIVI som allerede inneholder en bloggmodul med en grunnleggende stil.
Slik laster du det ferdiglagde bloggoppsettet:
- Opprett en ny side fra WordPress-dashbordet
- Gi den et relevant navn og klikk på "Bruk Divi Builder"
- Klikk på "Velg layout"
- Skriv inn "Motedesigner" i søkefeltet og velg layouten "Bloggside for motedesigner"
- Sørg for å velge Blog Layout og klikk deretter på "Velg Layout"
Når oppsettet er lastet, finn bloggmodulen som brukes til å vise blogginnlegg og åpne innstillingene.
Angi antall innlegg
I blogginnstillingene oppdaterer du innhold å begrense antall innlegg til 10. (Dette er hovedsakelig av estetiske årsaker, siden rutenettet vårt til slutt vil inkludere to rader med fem blogginnlegg.)
- Antall stillinger: 10
Velg Fullskjermoppsett
Siden vi skal legge ut bloggen vår i kolonner ved hjelp av CSS Grid, må vi sørge for at oppsettet til bloggmodulen er 'Fullskjerm' (ikke 'Grid'). Dette vil sikre at blogginnlegg er stablet vertikalt i sin normale siderekkefølge.
For å endre oppsettet til bloggmodulen, åpne modulinnstillingene og under Stil-fanen åpne rullegardinmenyen Mal og velg Fullskjerm .
Nå vil hvert blogginnlegg spenne over hele bredden av kolonnen (eller den overordnede beholderen).
La oss legge til en kantlinje til blogginnlegg. Oppdater kantalternativene som følger:
- Kantbredde: 1px
- Kantfarge: rgba (150,104,70,0.35)
Legge til en tilpasset CSS-klasse i bloggmodulen
For å effektivt målrette denne bloggmodulen (ikke en annen) med vår CSS, må vi gi modulen vår en tilpasset CSS-klasse. Under Avansert-fanen legger du til følgende CSS-klasse:
- CSS-klasse: et-blog-css-grid
Opprette flerkolonneoppsettet med CSS Grid
Nå som bloggmodulen vår er satt opp med fullskjermsoppsett, er vi klare til å legge til vår egendefinerte CSS.
Vi skal sette inn en kodemodul under bloggmodulen for å legge til CSS på siden.
I kodeinntastingsboksen legger du til de nødvendige stiltaggene for å pakke inn eventuell CSS-kode som er lagt til en side.
Inne i stiltaggene limer du inn følgende CSS-kodebit:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Den første linjen i CSS presenterer innhold (eller moduler) i rutenettform.
display: grid;Den andre linjen i CSS definerer rutenettkolonnemodellen.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Den tredje raden bestemmer avstanden mellom rutenettelementer.
gap : 20px ;På dette tidspunktet er det responsive rutenettet med fem kolonner klar til bruk. Faktisk, hvis du ikke vil bruke paginering eller grenser for blogginnleggene dine, kan du stoppe her.
Her er resultatet så langt.
Tilpass rutenettelementer
Deretter kan vi legge til noen få linjer med CSS som retter seg mot rutenettelementene slik at de er justert til toppen av hver rad og har litt polstring.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Fjernet rutenettpaginering
For øyeblikket, hvis du har paginering aktiv på bloggmodulen, vil den bli behandlet som det siste rutenettelementet i CSS-nettet. For å fjerne pagineringen helt fra rutenettet, kan vi gi den en absolutt posisjon og plassere den rett under bloggmodulen. For å gjøre dette, legg til følgende CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
La oss se resultatet så langt!
Tips: juster størrelsen på alle fremhevede bilder (eller miniatyrbilder)
På dette tidspunktet kan du legge merke til inkonsekvensen i høyden på bildene som vises på hvert blogginnlegg. Hvis du vil at alle skal ha samme høyde, kan du også bruke ekstra CSS for å gjø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 intern toppmargin på 56,25 % bør vi få et sideforhold på 16:9 for alle bildene våre.
Juster gjerne polstringen på bildebeholderen for å få sideforholdet du ønsker for bildet ditt.
Endelig resultat
Og her er en siste forhåndsvisning av bloggmodulen vår med nye kolonner og rutenett. Og som vi kan se, er rutenettet fullt responsivt.
Last ned DIVI nå!!!
konklusjonen
Det er gjort ! Vi har vist deg i denne opplæringen hvordan du kan ordne blogginnleggene dine i kolonner.
Vi var i stand til å omstrukturere hele Divi Blog-modulen til et flytende oppsett med fem kolonner. Håper dette sparer deg for tid og gir deg flere muligheter for å lage vakre bloggsider. Du kan også konsultere Hvordan lage en bloggside med Divis bloggmodul
Se også ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
