Så här anpassar du elementen på samma rad på Divi

Möjligheten att vertikalt rikta in innehåll när du skapar en webbplats med Divi kan vara ett praktiskt tillägg till ditt designverktyg. Ibland kräver en viss bestämmelse att innehåll är justerad vertikalt på olika sätt (centrerad, botten, topp). Det vanligaste behovet är att centrera din innehåll vertikalt.

Det ger en utsökt touch av symmetriskt avstånd som är till nytta när du använder flera kolumnlayouter för ditt innehåll. Dessutom förblir vertikalt centrerat innehåll centrerat i olika webbläsarbredder, vilket eliminerar besväret med att använda anpassad utfyllnad eller marginaler för att uppnå liknande respons.

I den här handledningen kommer jag att visa dig hur du lägger till några små CSS-utdrag till valfri kolumn för att vertikalt anpassa innehållet. Jag ska använda några av de färdiga layouterna från Divi för exempel på hur man gör detta. Om du inte kan mycket om CSS behöver du inte oroa dig. Det kommer att vara ganska enkelt att applicera på dina egna layouter på några sekunder.

Förstå Flex och Divi

Egenskapen css Flex (eller Flexbox) är helt enkelt ett sätt att placera objekt i horisontella och / eller vertikala staplar (ungefär som ett bord). Förutom till skillnad från traditionella tabeller, kan du med flex-egenskapen skapa rutor som anpassar sig till storleken på innehållet det innehåller.

Divi använder egenskapen flex när du väljer "Equalize Column Heights" som en radparameter. Detta säkerställer helt enkelt att storleken på dina kolumner anpassas till storleken på kolumnen med mest innehåll. Och eftersom "Equalize Column Heights" möjliggör flex för radbehållaren, kan du enkelt dra nytta av det genom att lägga till css i dina kolumner för att justera innehållet i varje kolumn (eller område).

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

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

Naturligtvis finns det många andra användningsområden för Flex-egenskapen inom webbdesign, liksom mer avancerade CSS som du kan använda för ditt tema. Men för den här handledningen ville jag hålla det enkelt.

Är det verkligen nödvändigt?

Tekniskt sett nej. Du kan justera ditt innehåll / moduler vertikalt i en kolumn med anpassat avstånd (stoppning och marginal). Du kan till exempel använda Divis avståndsalternativ för att ge en kolumn lika med den övre och nedre stoppningen för att centrera modulen (erna) vertikalt i kolumnen. Du kan också lägga till endast toppdynning i en kolumn för att justera botteninnehållet. Du kan dock behöva justera avståndet när du uppdaterar din sida med mer innehåll. Dessutom kan det vara svårt att upprätthålla denna anpassning över olika webbläsarbredder.

Så om du letar efter en lösning för att justera innehåll vertikalt utan att behöva tänka på anpassat avstånd, tror jag att du kommer att hitta det här användbart.

Låt oss börja!

Ladda den fördefinierade layouten på din sida

Till att börja med använder jag layouten från Interiördesignföretagets portföljserie. Skapa en ny sida för att få denna layout på din sida. Ge sedan din sida en titel. Klicka på "Använd Divi Builder" och sedan på "Använd Visual Builder". Välj sedan alternativet "Välj en grundläggande layout". Välj sedan layout kit för inredningsföretag från popupfönstret Ladda från bibliotek. Slutligen markerar du portföljsidan i listan med layouter och klickar på "Använd denna layout".

När layouten har laddats på din sida är du redo att gå.

Metod 1: Hur man justerar innehåll vertikalt med flex och automatisk marginal

Öppna radinställningarna för den andra raden på sidan (den direkt under raden med sidrubriken). Under designinställningarna öppnar du storleksalternativgruppen och märker att "Equalize Column Heights" redan är aktivt. Detta innebär att raden nu har flexegenskapen (”display: flex;”) tillagd.

Gå nu till inställningarna på fliken Avancerat för samma rad och lägg till följande css-utdrag under inmatningsrutan för huvudelementet i kolumn 2.

Nu har innehållet i den andra kolumnen flyttats för att centreras vertikalt.

Gör det lägre innehållet i linje

Om du vill justera ditt innehåll längst ner så att alla moduler staplar längst ner i kolumnen kan du justera marginalen enligt följande:

Vertikal inriktning av innehållet för alla kolumner i din rad

Istället för att lägga till "margin: auto" i varje kolumn individuellt kan du också centrera innehållet i alla kolumner i raden vertikalt genom att lägga till följande kodavsnitt i huvudelementet i dina radinställningar.

Eller om du vill att allt innehåll i dina kolumner ska justeras längst ner kan du lägga till detta utdrag:

Och glöm inte att du kan dra nytta av Divis Extend Styles-funktion genom att högerklicka på huvudelementet med ditt CSS-kodavsnitt och klicka på "Extend main element".

Förläng sedan detta huvud-css-element till alla rader på sidan (eller avsnitt) för att vertikalt centrera allt innehåll i varje kolumn på sidan.

Nu är allt centrerat vertikalt.

Men du kanske har märkt att den vita kolumnens bakgrundsfärg inte längre täcker hela radens höjd. Det beror på att vi lade till "margin: auto" i kolumnen. För att lösa problemet kan du ändra linjens bakgrundsfärg till vit och ta bort fyllningen från raden. Men istället visar jag dig ett sätt att centrera ditt kolumninnehåll utan att ändra marginalen.

Metod 2: Rikta in innehåll vertikalt med kolonnböjningsriktning

I den första metoden utnyttjade vi flexegenskapen som lagts till i raden. Detta gjorde var och en av våra kolumner till en "flexibel ruta" som kunde justeras vertikalt genom att helt enkelt justera marginalen.

Men det finns också ett flexriktnings sätt att justera vårt kolumninnehåll utan att förlora effekten "Utjämna kolumnhöjd" som håller våra kolumner (och kolumnbakgrunder) lika stora. För att göra detta lägger vi bara till några rader CSS i vår kolumn så att alla moduler i kolumnen staplas vertikalt och sedan centreras.

Låt oss gå tillbaka till vår linje i föregående exempel. Öppna radinställningar och ta bort eventuella anpassade css du kan ha där genom att högerklicka på anpassad CSS och klicka på "Återställ anpassade CSS-format".

Lägg sedan till följande CSS under 2-kolumnen, huvudelement:

display: flex; flexriktning: kolumn; justify-content: center;

Eller, om jag ville anpassa innehållet längst ner, ersätt bara "Justify the content: center" med "justify the content: flex-end".

Det som är jättebra med denna inställning är att om mitt innehåll är centrerat vertikalt och radbredden nås, förblir innehållet centrerat.

Gör suddiga (sammanfattning) med olika mängder vertikalt inriktad text

Att göra ditt kolumninnehåll vertikalt centrerat kan också vara användbart för blurbs. Som du vet kommer inte alla blurbs att innehålla den exakta mängden text som används för att dskriva funktion eller tjänst. Att centrera dessa blurbs vertikalt kan skapa en vacker design för din layout.

För det här exemplet kommer jag att justera oskärpa vertikalt till Digital Payments hemsidlayout.

Jag lägger till olika mängder brödtext till oskärpa först för att ge en mer realistisk bild av hur en webbplats kan se ut.

Nu måste jag gå till radinställningarna och "Harmonisera kolumnhöjder".

Nu kan jag lägga till mina CSS-fragment för att anpassa mitt innehåll och ändra designen.

Under fliken Avancerat i dina radinställningar kan vi vertikalt centrera innehållet i våra kolumner genom att lägga till följande under huvudelement:

Eller ändra det genom att följa för att ordna dem.

Du kan också återställa dina anpassade CSS-stilar och lägga till följande anpassade marginaler för att justera den första kolumnens botten och den tredje inriktade kolumnens övre del.

1-kolumn CSS huvudelement:

3-kolumn CSS huvudelement:

Vad sägs om enstaka kolumnlayouter?

Tekniskt sett behöver du inte ett CSS eller flexkod för att vertikalt centrera ditt kolumninnehåll. Allt du behöver göra är att se till att du har lika avstånd över och under ditt innehåll (eller moduler). För det mesta behöver användare vertikalt innehåll centrerat på layouter med flera kolumner eftersom de vill att intilliggande innehåll ska vara perfekt.

Det här är allt för denna handledning som visar hur du justerar element på samma rad på Divi.