Slik justerer du vertikale og horisontale seksjoner, rader, kolonner og moduler i DIVI Builder

Når du bygger et nettsted ved hjelp av Divi, kan alternativet for vertikal justering av innhold være et verdifullt tillegg til designverktøysettet ditt. Avhengig av oppsettet kan det hende at innhold må justeres vertikalt på ulike måter (sentrert, nederst, øverst). Det vanligste behovet er at materialet ditt skal være vertikalt justert. Det gir et nydelig preg av symmetrisk avstand til innholdet ditt, noe som er veldig nyttig når du bruker flere kolonneoppsett. Videre forblir vertikalt sentrert innhold sentrert på tvers av nettleserbredder, noe som eliminerer behovet for tilpasset utfylling eller marginer for å oppnå lignende respons.

I denne leksjonen skal jeg lære deg hvordan du vertikalt justerer innhold i en hvilken som helst kolonne ved å bruke noen få enkle linjer med CSS. For demonstrasjonsformål vil jeg bruke flere av Divis prefabrikkerte oppsett. Du trenger ikke være bekymret hvis du ikke er kjent med CSS. I løpet av sekunder vil du kunne bruke dette på designet ditt.

• Forstå forskjellen mellom Flex og Divi
• Er dette nødvendig?
• Legg til den forhåndskonfigurerte layouten på siden din.
• Metode 1: Vertikal justering av innhold med Flex og Auto Margin
• Justere innholdet nederst
• Vertikal innholdsjustering for radens kolonner
• Metode 2: Justere innhold vertikalt ved å bruke kolonnefleksiretning
• Hva med oppsett med bare én kolonne?
• Siste tanker om DIVIs vertikale og horisontale justering

Forstå forskjellen mellom Flex og Divi

Flex (eller Flexbox) CSS-attributtet er bare et middel til å ordne elementer i horisontale og vertikale stabler (som en tabell). I motsetning til typiske tabeller, lar flex-funksjonen deg imidlertid bygge bokser som "flekser" til størrelsen på innholdet de inneholder.

Divi bruker flex-attributtet når du velger «Equalize Column Heights» som radinnstilling. Enkelt sagt sikrer dette at størrelsen på alle kolonnene dine tilpasser seg størrelsen på kolonnen med mest informasjon. Fordi "Equalize Column Heights" utløser bøyningen for radbeholderen, kan du bruke den ved å legge til CSS i kolonnene dine for å endre innholdet i hver kolonne (eller boks).

Hvis du legger til “margin: auto” til en kolonne i en rad, for ex amp le, innholdet i denne kolonnen (om det er en eller flere moduler) vil bli vertikalt sentrert.

Alle kolonnene dine (og innholdet deres) vil bli vertikalt sentrert hvis du legger til «align-items: center;» til raden din.

Selvfølgelig har flex-egenskapen mange flere applikasjoner innen webdesign og mer avansert CSS som du kan bruke i temaet ditt. Jeg ønsket imidlertid å holde ting enkelt for denne opplæringen.

Er dette nødvendig?

I teknisk forstand, nei. Du kan bruke tilpasset mellomrom for å plassere innholdet/modulene dine vertikalt innenfor en kolonne (utfylling og marg). For ex amp le, kan man bruke Divi avstands alternativer for å sentrere modulen (e) vertikalt i køen for å gi en kolonne lik topp og bunn polstring. Du kan også gjøre innholdet bunnjustert ved å legge til topputfylling i en kolonne. Når du legger til mer innhold på siden din, må du kanskje endre avstanden. Videre kan det være problematisk å opprettholde denne justeringen på tvers av flere nettleserstørrelser.

Så hvis du leter etter en måte å justere informasjon vertikalt uten å måtte bekymre deg for spesifikk avstand, tror jeg du vil finne dette fordelaktig.

La oss sette i gang denne festen!

Legg til den forhåndskonfigurerte layouten på siden din.

Jeg skal begynne med Interiørdesign Company Portfolio Side Layout. Opprett en ny side for å ha denne layouten på siden din. Etter det, gi siden din et navn. Velg "Bruk Divi Builder" og deretter "Bruk Visual Builder" fra rullegardinmenyen. Velg deretter "Velg en forhåndsdefinert layout" fra rullegardinmenyen. Velg deretter Interior Design Company Layout Pack fra Last inn fra bibliotek-vinduet. Til slutt, fra å velge oppsett, velg Portfolio-siden og klikk "Bruk denne layouten."

Du er klar til å starte etter at layouten er lastet inn på siden din.

Metode 1: Vertikal justering av innhold med Flex og Auto Margin

Åpne radinnstillingene for den andre raden (den rett under raden med sidetittelen). Slå av og på åpne Størrelsesalternativgruppen i designalternativene og merk at "Utlik kolonnehøyder" allerede er aktiv; Dette betyr at flex-egenskapen ("display: flex;") er lagt til i raden.

Under inndataboksen for hovedelement for kolonne 2 går du til innstillingene for Avansert-fanen for samme rad og legger til følgende CSS-kodebit.

Innholdet i den andre kolonnen er nå flyttet for å være vertikalt sentrert.

Justere innholdet nederst

Du kan endre marginverdien som følger for å gjøre innholdet bunnjustert slik at alle moduler stables nederst i kolonnen:

Vertikal innholdsjustering for radens kolonner

Du kan sentrere innholdet i alle kolonnene i raden vertikalt ved å legge til følgende kodebit i hovedelementet i radinnstillingene dine, i stedet for å legge til "margin: auto" til hver kolonne individuelt.

Du kan også bruke denne kodebiten hvis du vil at all informasjonen i kolonnene dine skal være justert nederst:

Husk at du kan bruke Divis Extend Styles-funksjon ved å høyreklikke på hovedelementet med CSS-kodebiten din og velge "Utvid hovedelement".

Deretter, for å sentrere alt innholdet i hver kolonne på siden vertikalt, bruker du hovedelementet CSS på alle radene på siden (eller delen).

Alt er nå vertikalt balansert.

Du kan imidlertid ha observert at bakgrunnsfargen for den hvite kolonnen ikke lenger dekker hele raden på grunn av kolonnens tillegg av "margin: auto." Du kan avhjelpe dette ved å endre radbakgrunnsfargen til hvit og fjerne radpolstringen. I stedet skal jeg lære deg hvordan du sentrerer innholdet i kolonnen uten å måtte endre margen.

Metode 2: Justere innhold vertikalt ved å bruke kolonnefleksiretning

Vi brukte flex-egenskapen først lagt til i raden. Som et resultat ble hver av kolonnene våre en "fleksboks" som kunne justeres vertikalt ved å endre margen.

Imidlertid kan vi bruke flex-direction for å justere teksten i kolonnen vår uten å ofre "Equalize Column Height"-effekten, som holder kolonnene våre (og kolonnebakgrunnene) i samme størrelse. For å oppnå dette legger vi til noen få linjer med CSS i køen vår, noe som får alle modulene i den til å stables vertikalt og deretter sentrert.

La oss gå tilbake til forrige ex amp le raden. Ved å høyreklikke på Custom CSS og velge "Tilbakestill Custom CSS Styles", kan du fjerne enhver tilpasset CSS du måtte ha i radinnstillingene.

Bruk deretter følgende CSS i hovedelementet i kolonne 2:

Endre "justify-content: center" til "justify-content: flex-end" for å bunnjustere innholdet.

Jeg liker denne konfigurasjonen fordi hvis jeg plasserer innholdet mitt vertikalt og gjør raden i full bredde, forblir innholdet sentrert.

Lage vertikalt justerte blurbs med forskjellige mengder tekst

Å gjøre innholdet i kolonnene vertikalt sentrert kan også hjelpe med blurbs. Som du kanskje er klar over, vil ikke alle tekster ha samme mengde tekst for å beskrive en funksjon eller tjeneste. Å gjøre disse blurbs vertikalt sentrert kan hjelpe layouten din til å se vakker ut.

For startsideoppsettet for digitale betalinger vil jeg vertikaljustere blurbs for dette amp .

For å lage en mer realistisk fremstilling av et nettsteds utseende, vil jeg først legge til varierende mengder kroppsinnhold til tekstene.

Nå må jeg "utjevne kolonnehøyder" i radinnstillingene.

Nå kan jeg justere teksten min og justere designet ved hjelp av CSS-snutter.

Vi kan sentrere innholdet i kolonnene våre vertikalt ved å legge til følgende i hovedelement-delen av Avansert-fanen i radinnstillingene våre:

Vennligst endre den til følgende for å justere dem nederst.

Du kan også gjøre den første kolonnen bunnjustert og den tredje kolonnen toppjustert ved å tilbakestille dine egendefinerte CSS-stiler og legge til følgende egendefinerte marger.

 Kolonne 1 Hovedelement CSS:

 Kolonne 3 Hovedelement CSS:

Hva med oppsett med bare én kolonne?

Du trenger ikke en CSS-kodebit eller flex for å få innholdet med én kolonne vertikalt sentrert. Alt du trenger å gjøre er å sørge for at teksten din har lik avstand over og under (eller moduler). De fleste forbrukere krever vertikalt sentrert innhold på oppsett med mange kolonner fordi de vil at det tilstøtende materialet skal stilles opp på riktig måte.

Siste tanker om DIVIs vertikale og horisontale justering

Selv om denne løsningen er avhengig av noen få mindre utdrag av tilpasset CSS, føler jeg at den kan være nyttig for folk som leter etter en rask kur mot en tidkrevende prosedyre. Del gjerne dine meninger om denne tilnærmingen, samt amp på hvordan den har spart deg for tid og krefter tidligere.