Hur man justerar vertikalt och horisontellt sektioner, rader, kolumner och moduler i DIVI Builder

När du bygger en webbplats med Divi kan alternativet att vertikaljustera innehåll vara ett värdefullt tillägg till din designverktygslåda. Beroende på layouten kan innehållet behöva justeras vertikalt på olika sätt (centrerad, botten, topp). Det vanligaste behovet är att ditt material är vertikalt inriktat. Det lägger till en härlig touch av symmetriskt avstånd till ditt innehåll, vilket är mycket användbart när du använder flera kolumnlayouter. Dessutom förblir vertikalt centrerat innehåll centrerat över webbläsarens bredd, vilket eliminerar behovet av anpassad utfyllnad eller marginaler för att uppnå liknande respons.

I den här lektionen kommer jag att lära dig hur du vertikalt justerar innehåll i valfri kolumn med några enkla rader med CSS. I demonstrationssyfte kommer jag att använda flera av Divis prefabricerade layouter. Du behöver inte bry dig om du inte är bekant med CSS. På några sekunder kommer du att kunna tillämpa detta på din design.

• Förstå skillnaden mellan Flex och Divi
• Behövs detta?
• Lägg till den förkonfigurerade layouten på din sida.
• Metod 1: Justera innehåll vertikalt med Flex och Auto Margin
• Justera innehållet längst ner
• Vertikal innehållsjustering för din rads kolumner
• Metod 2: Justera innehåll vertikalt med kolumnflexriktning
• Vad sägs om layouter med endast en kolumn?
• Slutliga tankar om DIVI:s vertikala och horisontella inriktning

Förstå skillnaden mellan Flex och Divi

CSS-attributet Flex (eller Flexbox) är bara ett sätt att ordna objekt i horisontella och vertikala staplar (som en tabell). Till skillnad från vanliga tabeller låter flex-funktionen dig dock bygga lådor som "flexar" till storleken på innehållet de innehåller.

Divi använder flex-attributet när du väljer "Equalize Column Heights" som din radinställning. Enkelt uttryckt säkerställer detta att storleken på alla dina kolumner anpassas till storleken på kolumnen med mest information. Eftersom "Equalize Column Heights" utlöser flexen för radbehållaren, kan du använda den genom att lägga till CSS i dina kolumner för att ändra innehållet i varje kolumn (eller ruta).

Om du lägger till "marginal: auto" i valfri kolumn i rad, till amp , kommer innehållet i den kolumnen (oavsett om det är en eller flera moduler) att centreras vertikalt.

Alla dina kolumner (och deras innehåll) kommer att centreras vertikalt om du lägger till "align-items: center;" till din rad.

Naturligtvis har flex-egendomen många fler applikationer inom webbdesign och mer avancerad CSS som du kan använda i ditt tema. Jag ville dock hålla det enkelt för den här handledningen.

Behövs detta?

I teknisk mening, nej. Du kan använda anpassat mellanrum för att placera ditt innehåll/moduler vertikalt i en kolumn (utfyllnad och marginal). Du kan till amp använda Divis avståndsalternativ för att centrera modulen/modulerna vertikalt i kön för att ge en kolumn lika med topp- och bottenutfyllnad. Du kan också göra innehållet bottenjusterat genom att lägga till toppstoppning i en kolumn. När du lägger till mer innehåll på din sida kan du behöva ändra avståndet. Dessutom kan det vara problematiskt att upprätthålla denna anpassning över flera webbläsarstorlekar.

Så om du letar efter ett sätt att justera information vertikalt utan att behöva oroa dig för specifikt avstånd, tror jag att du kommer att tycka att detta är fördelaktigt.

Låt oss få igång den här festen!

Lägg till den förkonfigurerade layouten på din sida.

Jag ska börja med Inredningsföretagets Portfolio Sidlayout. Skapa en ny sida för att ha denna layout på din sida. Efter det, ge din sida ett namn. Välj "Använd Divi Builder" och sedan "Använd Visual Builder" från rullgardinsmenyn. Välj sedan "Välj en förgjord layout" från rullgardinsmenyn. Välj sedan Interior Design Company Layout Pack från fönstret Ladda från bibliotek. Slutligen, från att välja layouter, välj portföljsidan och klicka på "Använd denna layout."

Du är redo att börja efter att layouten har laddats på din sida.

Metod 1: Justera innehåll vertikalt med Flex och Auto Margin

Öppna radinställningarna för den andra raden (den direkt under raden med sidtiteln). Växla och öppna storleksalternativgruppen i designalternativen och notera att "Equalize Column Heights" redan är aktivt; Detta betyder att flex-egenskapen (“display: flex;”) har lagts till i raden.

Under kolumn 2 huvudelementinmatningsrutan, gå till fliken Avancerat inställningar för samma rad och lägg till följande CSS-kodavsnitt.

Innehållet i den andra kolumnen har nu flyttats till vertikalt centrerad.

Justera innehållet längst ner

Du kan ändra marginalvärdet enligt följande för att göra ditt innehåll bottenjusterat så att alla moduler staplas längst ned i kolumnen:

Vertikal innehållsjustering för din rads kolumner

Du kan vertikalt centrera innehållet i alla kolumner i din rad genom att lägga till följande kodavsnitt till huvudelementet i dina radinställningar, istället för att lägga till "marginal: auto" till varje kolumn individuellt.

Du kan också använda det här utdraget om du vill att all information i dina kolumner ska vara anpassad längst ned:

Kom ihåg att du kan använda Divi's Extend Styles-funktion genom att högerklicka på huvudelementet med ditt CSS-kodavsnitt och välja "Utöka huvudelement".

Sedan, för att vertikalt centrera allt innehåll i varje kolumn på sidan, tillämpa huvudelementet CSS på alla rader på sidan (eller avsnittet).

Allt är nu vertikalt balanserat.

Men du kanske har observerat att den vita kolumnbakgrundsfärgen inte längre täcker hela raden på grund av att kolumnen har lagt till "marginal: auto." Du kan åtgärda detta genom att ändra radens bakgrundsfärg till vit och ta bort radstoppningen. Istället ska jag lära dig hur du centrerar innehållet i din kolumn utan att behöva ändra marginalen.

Metod 2: Justera innehåll vertikalt med kolumnflexriktning

Vi använde flex-egenskapen som först lades till i raden. Som ett resultat blev var och en av våra kolumner en "flexbox" som kunde justeras vertikalt genom att ändra marginalen.

Däremot kan vi använda flex-direction för att anpassa texten i vår kolumn utan att offra effekten "Equalize Column Height", som håller våra kolumner (och kolumnbakgrunder) i samma storlek. För att åstadkomma detta lägger vi till några rader CSS i vår kö, vilket gör att alla moduler i den staplas vertikalt och sedan centreras.

Låt oss återgå till föregående amp rad. Genom att högerklicka på anpassad CSS och välja "Återställ anpassade CSS-stilar" kan du ta bort alla anpassade CSS du kan ha i radinställningarna.

Använd sedan följande CSS i huvudelementet i kolumn 2:

Ändra "justify-content: center" till "justify-content: flex-end" för att bottenjustera innehållet.

Jag gillar den här konfigurationen för om jag placerar mitt innehåll vertikalt och gör raden i full bredd förblir innehållet centrerat.

Gör vertikalt inriktade blurbs med olika mängder text

Att göra innehållet i dina kolumner vertikalt centrerat kan också hjälpa till med blurbs. Som du kanske är medveten om kommer inte alla texter att ha samma mängd text för att beskriva en funktion eller tjänst. Att göra dessa blurbs vertikalt centrerade kan hjälpa din layout att se vacker ut.

För startsidan för digitala betalningar kommer jag att justera texterna vertikalt för det här amp .

För att skapa en mer realistisk skildring av en webbplatss utseende, lägger jag först till olika mängder kroppsinnehåll till blurbs.

Nu måste jag "utjämna kolumnhöjder" i radinställningarna.

Nu kan jag justera min text och justera designen med CSS-snuttar.

Vi kan vertikalt centrera innehållet i våra kolumner genom att lägga till följande i huvudelementsektionen på fliken Avancerat i våra radinställningar:

Ändra det till följande för att justera dem längst ned.

Du kan också göra den första kolumnen bottenjusterad och den tredje kolumnen toppjusterad genom att återställa dina anpassade CSS-stilar och lägga till följande anpassade marginaler.

 Kolumn 1 Huvudelement CSS:

 Kolumn 3 Huvudelement CSS:

Vad sägs om layouter med endast en kolumn?

Du behöver inte ett CSS-utdrag eller flex för att få ditt innehåll med en kolumn vertikalt centrerat. Allt du behöver göra är att se till att din text har lika mellanrum ovanför och under (eller moduler). De flesta konsumenter kräver vertikalt centrerat innehåll på layouter med många kolumner eftersom de vill att det intilliggande materialet ska placeras korrekt.

Slutliga tankar om DIVI:s vertikala och horisontella inriktning

Även om den här lösningen förlitar sig på några mindre utdrag av anpassad CSS, tror jag att den kan vara till hjälp för personer som letar efter ett snabbt botemedel mot en tidskrävande procedur. Dela gärna med dig av dina åsikter om detta tillvägagångssätt, samt exempel amp lektioner om hur det har sparat dig tid och ansträngning tidigare.