Så här justerar du Elementorsektioner och kolumner

Medan du arbetar med Elementor kommer du att märka att det är lite knepigt att anpassa dina sektioner och kolumner. Du måste justera kolumner och sektioner vertikalt och horisontellt för att uppnå en lyhörd "stretch-to-fill"-layout. Utan denna justering kommer elementen i kolumner med varierande höjd inte att kunna justeras på skärmen.

• Varför måste vi anpassa oss?
• Hur fungerar kolumner eller sektioner för en lyhörd design?
• Hur anpassar man elementorsektioner och kolumner?
• För att fixa responsiva breddproblem använder du överflödet dold
• Att ta hand om positionering
• Relativa enheter
• Kontrollera djupet för varje element med Z-index
• Tricket om dubbla funktionalitet
• Förskjutningar
• Den gyllene regeln
• Slutsats

Varför måste vi anpassa oss?

I varje kolumn eller avsnitt kan innehållet ha olika kategorier. Det kan vara i form av bilder, text och betyg. För ett sammansatt utseende rekommenderas det att enhetligheten i innehållet ser ut. Det ska inte bara kastas där - dumpas - bara för det.

Med bra anpassning kan du göra webbplatsen mer snygg och elegant - så att den inte ser rörig ut. Med justeringsalternativet kan du justera flera widgets i olika storlekar bredvid varandra i samma kolumn.

Hur fungerar kolumner eller sektioner för en lyhörd design?

Med Elementor 2.5 kan du anpassa din design och ditt innehåll. Med den nya anpassade positioneringsfunktionen kan du flytta widgetarna till vilken plats som helst. Men du kan inte riktigt göra det utöver ett visst avsnitt. Dessa widgetar är relativa till kolumnen de är inuti. Detta kan orsaka problem i designens lyhördhet.

Anta att du har en tre-kolonns layout. Med hjälp av anpassad positionering kan du dra och släppa en widget från den högra kolumnen till mittkolumnen, eller hur du vill.

Men om du gör det kommer det bara att gynna stationära besökare eftersom det ser bra ut för dem. Det kommer dock att orsaka problem om webbplatsen nås från mobil eftersom Elementor staplar kolumnerna vertikalt på mobilen.

Så istället för att ha tre kolumner sida vid sida, kan du uppleva alla tre kolumnerna staplade på varandra. Elementet visas inte längre i mittkolumnen som på skrivbord.

Även om du smart kan finjustera mobilvyn med en dold inställning, men det finns ingen garanti för att majoriteten av människor kan hitta den. Så varför frustrerar användarna? Att göra designen lyhörd och anpassningsbar är rätt lösning. Så att det inte kraschar någonstans.

För den delen måste du vara uppmärksam på widgetens förhållande till kolumnen i den.

Hur anpassar man elementorsektioner och kolumner?

Landa på layoutavsnittet för varje sektion / kolumn och ställ in följande justeringsalternativ enligt dina krav:

• Vertikal justering: du kan välja inställningar för widgets från att följa. Men en sak du måste tänka på är att innehållet i en kolumn inte kan anpassas till de tre första kolumnens vertikala alternativ, dvs. topp, mitt och botten.
• Topp
• Mitten
• Botten

För den delen finns ^* tre nya alternativ som gör det väldigt bekvämt att anpassa innehållet enligt dina önskemål.

• ^*Mellanslag mellan - ställer in utrymmet mellan widgetar i början och i slutet vid kolumnens kant. Widgetsna är jämnt fördelade, dvs det finns lika utrymme mellan dem.
• ^*Utrymme runt - utrymmet mellan widgets är lika, och kanterna är halva storleken på utrymmet mellan widgets.
• ^*Rymd jämnt - utrymmet mellan widgets är enhetligt - det är lika mellan, före och efter dem.

• Horisontell inriktning: med det här alternativet kan du utföra inline-positionering och justera inline-widgetsna, som ligger i samma rad, horisontellt. Du kan justera kolumnernas innehåll horisontellt med följande alternativ:
• Startjusterar alla ikoner till vänster
• Mitt: placerar ikonerna i mitten av kolumnen
• End- sätter alla ikoner till höger
• Mellanslag - mellanslag mellan widgets i början och i slutet vid kolumnens kant. Widgetarna är lika med varandra, dvs. det finns lika stort utrymme mellan dem
• Utrymme runt - utrymmet mellan widgetarna är lika och kanterna är halva storleken på utrymmet mellan widgetarna
• Utrymme jämnt - utrymmet mellan widgetar är enhetligt - det är lika mellan, före och efter dem

För att fixa responsiva breddproblem använder du överflödet dold

När det gäller en webbplatss utseende på mobil är det stor sannolikhet för att du kan stöta på ett problem där en widget med anpassad positionering översvämmer bredden på en kolumn.  

Detta orsakar en riktigt frustrerande situation för mobilbesökare, där de kan rulla horisontellt. Och detta är inte något du ville ha på din webbplats. Detta kan åtgärdas med:

Layoutinställningar > Ställ in överflödesalternativet till Dold

Genom att göra detta kommer det överskridande området att avskäras och det finns inget behov av att rulla horisontellt

Att ta hand om positionering

Du måste också ta hand om placeringen av kolumnerna. Du kan ställa in anpassad positionering med Elementor 2.5 — absolut och fast.

Den absoluta positioneringen är placeringen av elementet i förhållande till den sektion eller kolumn du befinner dig i. Så om du använder absolut positionering till ett element eller ett avsnitt kommer det avsnittet inte att röra sig längs besökarens fönster.

Den fasta positionen skiljer sig från absolut eftersom den låter sektionen / elementet hålla sig fast vid besökarens synvinkel. Så om användaren rullar genom sidan kommer elementet att stanna kvar.

Relativa enheter

När du utformar din webbsida kommer du att upptäcka att det finns flera sätt att placera elementen på. För absolut positionering är det en bra idé att använda relativa enheter eftersom det gör responsiv design mer funktionell när det gäller olika skärmstorlekar.

Den relativa enheten anpassar sig baserat på den relativa bredden och höjden på skärmen, vilket gör att elementen eller sektionerna kan ändra storlek på sig själva och en bättre responsiv design. Om du väljer att använda pixlar måste du skapa flera responsiva sektioner för olika skärmstorlekar.

Kontrollera djupet för varje element med Z-index

Om du ska använda "absolut" eller "fast" positionering för widgetarna kommer det att finnas många situationer där två eller flera widgets kan överlappa varandra, dvs. de staplas "ovanpå varandra". Du kan undvika detta genom att använda den normala Z-indexinställningen. Detta gör att du kan kontrollera djupet och låta dig välja vilka widgets som ska visas i förgrunden.

Tricket om dubbla funktionalitet

Om du använder högerklicka för att duplicera ett element med anpassad positionering kan det se ut som att högerklicket inte har fungerat.

Men se. Det är inte sant. Dubblettfunktionen har fungerat perfekt och har duplicerat elementet. Det är bara det att eftersom varje element har exakt samma anpassade positionering staplas det duplicerade elementet EXAKT ovanpå det andra elementet (vilket ger intryck av att ingen duplikat har skapats.).

Enkelt uttryckt, om du skapar en kolumn framgångsrikt kan du duplicera kolumnen när det behövs. Se också till att kolumnerna du skapar inte använder anpassad positionering. Om det gör det fungerar inte duplicering med högerklickalternativet. Du kan dock använda dubblettfunktionen för att övervinna begränsningen och kopiera kolumnen.

Dra det övre elementet lite så avslöjar det andra. Båda elementen finns väldigt mycket där. När du duplicerar en kolumn staplas den också över den gamla. Du kan bli förvirrad. Men oroa dig inte, du kan helt enkelt dra den och sedan använda den i din webbdesign.

Förskjutningar

Det finns fall där du måste kompensera ditt innehåll på webbsidan. Med Elementor kan du enkelt ställa in offset. Så om du ställer in en förskjutning på 500 pixlar från vänster, kommer det att finnas utrymme runt innehållet baserat på din inmatning. På samma sätt kan du också ställa in offset på höger sida. Det är en bra metod att ställa in både vänster och höger förskjutning i ett liknande värde eftersom innehållet kommer att justeras ordentligt på skärmen.

Det finns fall där du måste kompensera ditt innehåll på webbsidan. Med Elementor kan du enkelt ställa in offset. Så om du ställer in en förskjutning på 500 pixlar från vänster, kommer det att finnas utrymme runt innehållet baserat på din inmatning. På samma sätt kan du också ställa in offset på höger sida. Det är en bra metod att ställa in både vänster och höger förskjutning i ett liknande värde eftersom innehållet kommer att justeras ordentligt på skärmen.

Den gyllene regeln

För bättre responsiv design, använd relativa enheter. Detta beror på att absolut positionering kan vara svårt när webbplatsen nås från en annan plattform. Att använda relativa enheter för att designa dina sektioner kommer att resultera i en mer responsiv design. Breddförändringen kan hanteras perfekt med hjälp av relativa enheter. Med "relativ" menar vi olika enheter som procent eller visningsbredd (VW) snarare än att fixera enheter som pixlar.

Slutsats

Elementor är en super användarvänlig webbplatsbyggare. Ibland kan det innebära utmaningar i webbplatsvisning om webbplatsen nås från mobil eller surfplatta. Med hjälp av sektions- och kolumninriktning kan du göra dina webbplatser perfekta med lätthet.