Sådan justeres lodret og vandret sektioner, rækker, kolonner og moduler i DIVI Builder

Når du opbygger et websted ved hjælp af Divi, kan muligheden for at justere indhold lodret være en værdifuld tilføjelse til dit designværktøjssæt. Afhængigt af layoutet skal indholdet muligvis justeres lodret på forskellige måder (centreret, bund, top). Det mest almindelige behov er, at dit materiale er lodret justeret. Det tilføjer et dejligt strejf af symmetrisk afstand til dit indhold, hvilket er meget nyttigt, når du bruger flere kolonnelayouts. Desuden forbliver lodret centreret indhold centreret på tværs af browserbredder, hvilket eliminerer behovet for tilpasset polstring eller marginer for at opnå lignende reaktionsevne.

I denne lektion vil jeg lære dig, hvordan du vertikalt justerer indhold i en hvilken som helst kolonne ved hjælp af et par enkle linjer med CSS. Til demonstrationsformål vil jeg bruge flere af Divis præfabrikerede layouts. Du behøver ikke være bekymret, hvis du ikke er bekendt med CSS. I løbet af få sekunder vil du være i stand til at anvende dette på dit design.

• Forstå forskellen mellem Flex og Divi
• Er dette påkrævet?
• Tilføj det forudkonfigurerede layout til din side.
• Metode 1: Lodret justering af indhold med Flex og Auto Margin
• Justering af indholdet i bunden
• Lodret indholdsjustering for din rækkes kolonner
• Metode 2: Justering af indhold lodret ved hjælp af kolonnefleksiretning
• Hvad med layouts med kun én kolonne?
• Afsluttende tanker om DIVI's vertikale og horisontale justering

Forstå forskellen mellem Flex og Divi

Flex (eller Flexbox) CSS-attributten er kun et middel til at arrangere elementer i vandrette og lodrette stakke (lignende en tabel). I modsætning til typiske tabeller giver flex-funktionen dig dog mulighed for at bygge kasser, der "flekterer" til størrelsen af ​​det indhold, de indeholder.

Divi bruger flex-attributten, når du vælger "Udlign kolonnehøjder" som din rækkeindstilling. Kort sagt sikrer dette, at størrelsen på alle dine kolonner tilpasser sig størrelsen på kolonnen med flest oplysninger. Fordi "Equalize Column Heights" udløser flexet for rækkebeholderen, kan du gøre brug af det ved at tilføje CSS til dine kolonner for at ændre indholdet af hver kolonne (eller boks).

Hvis du føjer "margin: auto" til en hvilken som helst kolonne i en række, for amp , vil indholdet af den kolonne (uanset om det er et eller flere moduler) centreres lodret.

Alle dine kolonner (og deres indhold) vil være lodret centreret, hvis du tilføjer "align-items: center;" til din række.

Selvfølgelig har flex-ejendommen mange flere applikationer inden for webdesign og mere avanceret CSS, som du kan bruge i dit tema. Jeg ønskede dog at holde tingene enkle for denne tutorial.

Er dette påkrævet?

I teknisk forstand, nej. Du kan bruge tilpasset afstand til at placere dit indhold/moduler lodret i en kolonne (udfyldning og margen). For amp kan du bruge Divis mellemrumsmuligheder til at centrere modulet/modulerne lodret i køen for at give en søjle ens top- og bundudfyldning. Du kan også gøre indholdet bundjusteret ved at tilføje toppolstring til en kolonne. Når du tilføjer mere indhold til din side, skal du muligvis ændre mellemrummet. Desuden kan det være problematisk at opretholde denne justering på tværs af flere browserstørrelser.

Så hvis du søger efter en måde at justere information lodret på uden at skulle bekymre dig om specifik afstand, tror jeg, du vil finde dette en fordel.

Lad os starte denne fest!

Tilføj det forudkonfigurerede layout til din side.

Jeg vil starte med Interior Design Company Portfolio Side Layout. Opret en ny side for at have dette layout på din side. Giv derefter din side et navn. Vælg "Brug Divi Builder" og derefter "Brug Visual Builder" fra rullemenuen. Vælg derefter "Vælg et foruddefineret layout" fra rullemenuen. Vælg derefter Interior Design Company Layout Pack fra vinduet Load From Library. Til sidst, fra at vælge layout, skal du vælge Portfolio-siden og klikke på "Brug dette layout."

Du er klar til at starte, når layoutet er indlæst på din side.

Metode 1: Lodret justering af indhold med Flex og Auto Margin

Åbn rækkeindstillingerne for den anden række (den direkte under rækken med sidetitlen). Åbn indstillingsgruppen Størrelse til/fra i designindstillingerne og bemærk, at "Udlign kolonnehøjder" allerede er aktiv; Dette betyder, at flex-egenskaben ("display: flex;") er blevet tilføjet til rækken.

Under indtastningsfeltet Kolonne 2 Hovedelement skal du gå til fanebladet Avanceret indstillinger for den samme række og tilføje følgende CSS-kodestykke.

Indholdet af den anden kolonne er nu flyttet til lodret centrering.

01	margin: auto;

Justering af indholdet i bunden

Du kan ændre margenværdien på følgende måde for at få dit indhold til at være bundjusteret, så alle moduler stables i bunden af ​​din kolonne:

01	margin: auto 0;

Lodret indholdsjustering for din rækkes kolonner

Du kan centrere indholdet af alle kolonner i din række lodret ved at tilføje følgende uddrag til hovedelementet i dine rækkeindstillinger i stedet for at tilføje "margin: auto" til hver kolonne individuelt.

01	align-items: center;

Du kan også bruge dette uddrag, hvis du ønsker, at alle oplysningerne i dine kolonner skal justeres i bunden:

01	align-items: flex-end;

Husk, at du kan bruge Divi's Extend Styles-funktion ved at højreklikke på hovedelementet med dit CSS-kodestykke og vælge "Udvid hovedelement".

For derefter at centrere alt indholdet i hver kolonne på siden lodret, skal du anvende hovedelementet CSS på alle rækker på hele siden (eller afsnittet).

Alt er nu lodret afbalanceret.

Du har dog muligvis bemærket, at den hvide kolonnebaggrundsfarve ikke længere dækker hele rækken på grund af kolonnens tilføjelse af "margin: auto." Du kan afhjælpe dette ved at ændre rækkens baggrundsfarve til hvid og fjerne rækkepolstringen. I stedet vil jeg lære dig, hvordan du centrerer indholdet af din kolonne uden at skulle ændre margenen.

Metode 2: Justering af indhold lodret ved hjælp af kolonnefleksiretning

Vi brugte flex-egenskaben, som først blev tilføjet til rækken. Som et resultat blev hver af vores kolonner en "fleksboks", der kunne justeres lodret ved at ændre marginen.

Vi kan dog bruge flex-direction til at justere teksten i vores kolonne uden at ofre "Equalize Column Height"-effekten, som holder vores kolonner (og kolonnebaggrunde) i samme størrelse. For at opnå dette vil vi tilføje et par linjer CSS til vores kø, hvilket får alle modulerne i den til at blive stablet lodret og derefter centreret.

Lad os vende tilbage til det forrige amp række. Ved at højreklikke på Custom CSS og vælge "Nulstil Custom CSS Styles", kan du fjerne enhver tilpasset CSS, du måtte have i rækkeindstillingerne.

Anvend derefter følgende CSS i hovedelementet i kolonne 2:

010203

display: flex;flex-direction: column;justify-content: center;

Skift "justify-content: center" til "justify-content: flex-end" for at justere indholdet nederst.

Jeg kan godt lide denne konfiguration, fordi hvis jeg placerer mit indhold lodret og gør rækken i fuld bredde, forbliver indholdet centreret.

Lav vertikalt justerede blurbs med forskellige mængder tekst

At gøre indholdet af dine kolonner lodret centreret kan også hjælpe med blurbs. Som du måske er klar over, vil ikke alle forklaringer have den samme mængde tekst til at beskrive en funktion eller tjeneste. At gøre disse forklaringer lodret centreret kan hjælpe dit layout til at se smukt ud.

For startsidelayoutet for digitale betalinger vil jeg justere forklaringerne lodret for dette amp .

For at skabe en mere realistisk skildring af et websteds udseende, vil jeg først tilføje forskellige mængder kropsindhold til blurbs.

Nu skal jeg "Udligne kolonnehøjder" i rækkeindstillingerne.

Nu kan jeg justere min tekst og justere designet ved hjælp af CSS-uddrag.

Vi kan centrere indholdet af vores kolonner lodret ved at tilføje følgende til sektionen Hovedelement på fanen Avanceret i vores rækkeindstillinger:

01	align-items: center;

Skift det til følgende for at justere dem i bunden.

01	align-items: flex-end;

Du kan også lave den første kolonne bundjusteret og den tredje kolonne topjusteret ved at nulstille dine tilpassede CSS-stile og tilføje følgende tilpassede margener.

 Kolonne 1 Hovedelement CSS:

01	margin: auto auto 0;

 Kolonne 3 Hovedelement CSS:

01	margin: 0 auto auto;

Hvad med layouts med kun én kolonne?

Du behøver ikke et CSS-uddrag eller flex for at få dit indhold med én kolonne lodret centreret. Alt du skal gøre er at sørge for, at din tekst har lige store mellemrum over og under (eller moduler). De fleste forbrugere kræver lodret centreret indhold på layouts med mange kolonner, fordi de ønsker, at det tilstødende materiale skal placeres korrekt.

Afsluttende tanker om DIVI's vertikale og horisontale justering

Selvom denne løsning er afhængig af et par mindre uddrag af tilpasset CSS, føler jeg, at den kan være nyttig for folk, der leder efter en hurtig kur mod en tidskrævende procedure. Du er velkommen til at dele dine meninger om denne tilgang, såvel som amp lektioner om, hvordan det tidligere har sparet dig tid og kræfter.