Evnen til at justere lodret indhold når du opretter et websted med Divi kan være en praktisk tilføjelse til dit designværktøj. Nogle gange kræver en bestemt bestemmelse, at indhold er justeret lodret på forskellige måder (centreret, bund, top). Det mest almindelige behov er at centrere din indhold lodret.
Det giver et lækkert strejf af symmetrisk afstand, der er praktisk, når du bruger flere kolonnelayouts til dit indhold. Derudover forbliver vertikalt centreret indhold centreret i forskellige browserbredder, hvilket eliminerer besværet med at anvende tilpasset polstring eller margener for at opnå lignende respons.
I denne tutorial viser jeg dig, hvordan du tilføjer et par små CSS-uddrag til enhver kolonne for at justere indholdet lodret. Jeg vil bruge nogle af de færdige layouts fra Divi for eksempler på, hvordan man gør dette. Hvis du ikke ved meget om CSS, behøver du ikke bekymre dig. Det vil være ret nemt at anvende på dine egne layouts på få sekunder.
Forståelse Flex og Divi
Egenskaben css Flex (eller Flexbox) er simpelthen en måde at placere emner i vandrette og / eller lodrette stakke (ligesom et bord). Bortset fra i modsætning til traditionelle tabeller giver flex-egenskaben dig mulighed for at oprette felter, der vil tilpasse sig størrelsen på det indhold, den indeholder.
Divi bruger flex-egenskaben, hver gang du vælger "Udlign kolonnehøjder" som en rækkeparameter. Dette sikrer ganske enkelt, at størrelsen på dine kolonner vil tilpasse sig størrelsen på den kolonne med mest indhold. Og da "Equalize Column Heights" muliggør flex for rækkebeholderen, kan du nemt drage fordel af det ved at tilføje css til dine kolonner for at justere indholdet af hver kolonne (eller område).
Hvis du f.eks. Tilføjer "margin: auto" til en kolonne i træk, bliver indholdet af denne kolonne (hvad enten det er et eller flere moduler) centreret lodret.
Hvis du tilføjer "align-items: center" til din linje, vil alle dine kolonner (og deres indhold) blive centreret lodret.
Der er selvfølgelig mange andre anvendelser af Flex-ejendommen i webdesign samt mere avanceret CSS, som du kan anvende på dit tema. Men til denne vejledning ønskede jeg at holde det simpelt.
Er det virkelig nødvendigt?
Teknisk set nej. Du kan justere dit indhold / moduler lodret i en kolonne ved hjælp af brugerdefineret afstand (polstring og margen). For eksempel kan du bruge Divis afstandsindstillinger til at give en kolonne svarende til den øverste og nederste polstring for at centrere modulet (modulerne) lodret i kolonnen. Du kan også kun føje toppolstring til en kolonne for at justere bundindholdet. Det kan dog være nødvendigt at justere afstanden, når du opdaterer din side med mere indhold. Derudover kan det være svært at opretholde denne justering på tværs af forskellige browserbredder.
Så hvis du leder efter en løsning til lodret justering af indhold uden at skulle tænke på brugerdefineret afstand, tror jeg, du finder det nyttigt.
Lad os starte!
Indlæs det foruddefinerede layout på din side
Til at begynde med bruger jeg layoutet fra Interior Design Company Portfolio-sortimentet. For at få dette layout på din side skal du oprette en ny side. Giv derefter din side en titel. Klik på "Brug Divi Builder" og derefter på "Brug Visual Builder". Vælg derefter indstillingen "Vælg et grundlæggende layout". Vælg derefter layoutkit for indretningsfirma fra pop op-vinduet Indlæs fra bibliotek. Til sidst skal du vælge siden Portefølje fra listen over layout og klikke på "Brug dette layout".
Når layoutet er indlæst på din side, er du klar til at gå.
Metode 1: Sådan justeres indhold lodret ved hjælp af Flex og Auto Margin
Åbn linjeindstillingerne for den anden linje på siden (den direkte under linjen med sidetitlen). Under designindstillingerne skal du åbne størrelsesindstillingsgruppen og bemærke, at "Udlign kolonnehøjder" allerede er aktiv. Dette betyder, at linjen nu har flex-egenskaben ("display: flex;") tilføjet.
Gå nu til indstillingerne på fanen Avanceret for den samme række, og tilføj følgende css-uddrag under indtastningsfeltet i hovedelementet i kolonne 2.
margin: auto; |
Nu er indholdet af den anden søjle flyttet for at blive centreret lodret.
Lav lavere indhold på linje
Hvis du vil tilpasse dit indhold i bunden, så alle moduler stables i bunden af din kolonne, kan du justere marginværdien som følger:
margin: auto 0; |
Lodret justering af indholdet for alle kolonner i din række
I stedet for at tilføje "margin: auto" til hver kolonne individuelt, kan du også lodret centrere indholdet af alle kolonner i din række ved at tilføje følgende uddrag til hovedelementet i dine rækkeindstillinger.
align-items: center; |
Eller hvis du vil have, at alt indhold i dine kolonner skal justeres i bunden, kan du tilføje dette uddrag:
align-items: flex-end; |
Og glem ikke, at du kan drage fordel af Divis udvidelsesfunktion ved at højreklikke på hovedelementet med dit CSS-uddrag og klikke på "Udvid hovedelement".
Udvid derefter dette css-element til alle siderne på siden (eller sektionen) for at lodret centrere alt indholdet i hver kolonne på siden.
Nu er alt centreret lodret.
Men du har måske bemærket, at baggrundsfarven på den hvide søjle ikke længere dækker hele rækkehøjden. Dette skyldes, at vi tilføjede "margin: auto" til kolonnen. For at løse dette problem kan du ændre linjens baggrundsfarve til hvid og fjerne fyldet fra linjen. Men i stedet viser jeg dig en måde at centrere dit kolonneindhold på uden at ændre margenen.
Metode 2: Juster indholdet lodret ved hjælp af kolonnefleksretning
I den første metode udnyttede vi den flex-egenskab, der blev føjet til rækken. Dette gjorde hver af vores kolonner til en "fleksibel boks", der kunne justeres lodret ved blot at justere margenen.
Men der er også en flexretnings måde at justere vores kolonneindhold på uden at miste "Equalize Column Height" -effekten, der holder vores kolonner (og kolonnebaggrund) den samme størrelse. For at gøre dette tilføjer vi bare et par linjer CSS til vores kolonne, så alle modulerne i kolonnen stables lodret og derefter centreres.
Lad os gå tilbage til vores linje i det foregående eksempel. Åbn rækkeindstillinger og fjern eventuelle tilpassede css, du måtte have der, ved at højreklikke på tilpasset CSS og klikke på "Nulstil tilpassede CSS-stilarter".
Tilføj derefter følgende CSS under 2-kolonnen, hovedelement:
display: flex; flex-retning: kolonne; retfærdiggør-indhold: center;
Eller, hvis jeg ville justere indholdet i bunden, skal du bare erstatte "Justify the content: center" med "justify the content: flex-end".
Hvad der er godt ved denne opsætning er, at hvis mit indhold er centreret lodret, og rækkebredden nås, forbliver indholdet centreret.
Lav slør (resume) med forskellige mængder lodret justeret tekst
At gøre dit kolonneindhold lodret centreret kan også være nyttigt til blurbs. Som du ved, vil ikke alle blurbs indeholde den nøjagtige mængde tekst, der bruges til at dskrive funktion eller service. At centrere disse forklaringer lodret kan skabe et smukt design til dit layout.
I dette eksempel justerer jeg sløringen lodret til startsiden til Digital Payments.
Jeg tilføjer forskellige mængder af brødtekst til uskarpheden først for at give en mere realistisk gengivelse af, hvordan et websted kan se ud.
Nu skal jeg gå til linjeindstillingerne og "Harmonisere kolonnehøjder".
Nu kan jeg tilføje mine CSS-uddrag for at justere indholdet og ændre designet.
Under fanen Avanceret i dine rækkeindstillinger kan vi lodret centrere indholdet af vores kolonner ved at tilføje følgende under Hovedelement:
align-items: center; |
Eller skift det ved at følge for at rette dem ned.
align-items: flex-end; |
Du kan også nulstille dine brugerdefinerede CSS-stilarter og tilføje følgende brugerdefinerede margener for at justere den første kolonnebund og den tredje justerede kolonnetop.
1 kolonne CSS hovedelement:
margin: auto auto 0; |
3 kolonne CSS hovedelement:
margin: 0 auto auto; |
Hvad med enkeltkolonnelayouter?
Teknisk set behøver du ikke et CSS-uddrag eller flex for at centrere dit kolonneindhold lodret. Alt du skal gøre er at sikre dig, at du har lige mellemrum over og under dit indhold (eller moduler). For det meste har brugere brug for lodret indhold, der er centreret om layouts med flere kolonner, fordi de ønsker, at tilstødende indhold skal være perfekt.
Det er alt til denne tutorial, der viser dig, hvordan du justerer elementer på samme linje på Divi.
