Gå till innehållet

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

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Möjligheten att justera innehållet vertikalt när du skapar en webbplats med Divi kan vara ett praktiskt tillskott till ditt designverktyg. Ibland kräver en viss layout att innehållet justeras vertikalt på olika sätt (centrerat, nederst, överst). Det vanligaste behovet är att centrera ditt 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 visar jag dig hur du lägger till några små CSS-utdrag i vilken kolumn som helst för att justera innehållet vertikalt. Jag kommer att använda några av Divis fördefinierade layouter för exempel på hur man gör det. Om du inte vet så mycket om CSS behöver du inte oroa dig. Det blir 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 flex-egenskapen när du väljer "Utjämna kolumnhöjder" som radparameter. Det säkerställer bara att storleken på dina kolumner kommer att anpassas till storleken på den kolumn som har 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".

mall divi tema wordpress.png

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.

harmonisera höjderna i kolumnerna.png

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.

marginauto;

automatisk marginal divi.png

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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:

marginauto 0;

marginal divi line.png

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.

align-items: center;

justera divi.png-element

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

align-items: flex-end;

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änga huvudelement.png

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.

expandera stilar på divi.png

Nu är allt centrerat vertikalt.

Utseendet av divi.png förändringarna

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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;

Styrning flex-column.png

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

flexinriktning end.png

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.

utseende av boxar.png

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 oskärpa. Som ni vet kommer inte alla blurbs att innehålla den exakta mängd text som används för att beskriva funktionen eller tjänsten. Att centrera dessa oskärpa 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.

blorbds.png justering

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

harmonisera kolumner.png

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:

align-items: center;

Ändra innehållsinriktning divi.png

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

align-items: flex-end;

inriktning längst ner divi.png

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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:

marginauto auto 0;

3-kolumn CSS huvudelement:

margin0 auto auto;

anpassa anpassningen av abstrakterna divi.png

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
4 aktier
del2
tweet
Enregistrer2