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.
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.
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!
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.
Ö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.
| 01 | marginal: auto; |
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:
| 01 | marginal: auto 0; |
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.
| 01 | align-items: center; |
Du kan också använda det här utdraget om du vill att all information i dina kolumner ska vara anpassad längst ned:
| 01 | align-items: flex-end; |
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.
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:
| 010203 | visa: flex;flex-riktning: kolumn;justify-content: center; |
Ä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:
| 01 | align-items: center; |
Ändra det till följande för att justera dem längst ned.
| 01 | align-items: flex-end; |
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:
| 01 | marginal: auto auto 0; |
Kolumn 3 Huvudelement CSS:
| 01 | marginal: 0 auto auto; |
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.
Ä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.
En webbplats sidhuvuden och sidfötter är viktiga element. I de flesta fall ger rubriken navigering...
Två av de mest populära WordPress-temanen på marknaden är Astra och OceanWP. Professionell…
Att skapa en utmärkt nyhetswebbplats kräver inte att du blir webbdesigner. Vi…
The Newspaper-temat är ett av de viktigaste WordPress-teman som designats av tagDiv, en...
När det gäller att skapa en onlinebutik är WooCommerce det bästa plugin . Den…
En rubrik är i allmänhet det första en person ser när de besöker din webbplats,...
Visa kommentarer
Tack för den tydliga förklaringen. Detta fungerar dock inte med en bloggmodul. Då finns det bara 1 kolumn i raden. Antalet bloggar bredvid varandra bestäms av modulen (standard 3). Kan kolumnerna här också göras lika?
Hej, Nej, jag är ledsen att den bara är avsedd för klassiska DIVI-kolumner, DIVI-bloggmodulen har en helt annan kod för att justera kolumner.
Vad händer om du vill att modulen ska vara inriktad 2/3 av vägen ner eller 1/3 från toppen - och inte perfekt i mitten upptill eller nedtill?
Hej, jag är rädd att det kommer att kräva att göra lite anpassad CSS, som standard finns det inget sådant alternativ.
Du kanske kan försöka justera innehåll i mitten och lägga till lite utfyllnad till ditt innehåll, men kontrollera noggrant renderingen på alla enheter.