Hur man justerar Elementor-sektioner 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 responsiv design?
• Hur justerar man Elementor-sektioner och kolumner?
• Använd Overflow Hidden för att åtgärda responsiv breddproblem
• Ta hand om positionering
• Relativa enheter
• Styr djupet för varje element med hjälp av Z-index
• Tricket om dubblettfunktionalitet
• Offsets
• Den gyllene regeln
• Slutsats

Varför måste vi anpassa oss?

I varje kolumn eller avsnitt kan innehållet vara av olika kategorier. Det kan vara i form av bilder, text och betyg. För ett sammansatt utseende rekommenderas att det finns enhetlighet i innehållets utseende. Det ska inte bara kastas dit - dumpas - bara för fan.

Med bra anpassning kan du få webbplatsen att framstå som mer snygg och stilig – så att den inte ser rörig ut. Med justeringsalternativet kan du justera flera widgets av olika storlekar bredvid varandra i samma kolumn.

Hur fungerar kolumner eller sektioner för en responsiv 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 layout med tre kolumner. Med hjälp av anpassad positionering kan du dra och släppa en widget från högerkolumnen till mittkolumnen, eller hur du vill.

Men att göra det kommer bara att gynna skrivbordsbesökare eftersom det kommer att se OK ut för dem. Det kommer dock att orsaka problem om webbplatsen nås från mobilen eftersom Elementor staplar kolumnerna vertikalt på mobilen.

Så istället för att ha tre kolumner sida vid sida, kan du uppleva alla tre kolumner staplade på varandra. Elementet kommer inte längre att visas i mittenkolumnen som det gör på stationära datorer.

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

För den delen måste du vara uppmärksam på widgetens relation till kolumnen den är inuti.

Hur justerar man Elementor-sektioner och kolumner?

För varje sektion/kolumn landar du på layoutsektionen och ställer in följande justeringsalternativ enligt dina krav:

• Vertikal justering: du kan välja inställningar för widgetarna från följande. 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 det ^* tre nya alternativ som gör det väldigt bekvämt att anpassa innehållet efter dina önskemål.

• ^*Space Between – ställer in avståndet mellan widgets i början och i slutet vid kanten av kolumnen. Widgetarna är jämnt fördelade, dvs det är lika stort utrymme mellan dem.
• ^*Space Around – utrymmet mellan widgetarna är lika stort och kanterna är hälften så stora som utrymmet mellan widgetarna.
• ^*Utrymme Jämnt – utrymmet mellan widgets är enhetligt – det är lika mellan, före och efter dem.

• Horisontell justering: med det här alternativet kan du utföra inline-positionering och justera inline-widgetarna, som finns på samma rad, horisontellt. Du kan justera kolumnernas innehåll horisontellt med dessa alternativ:
• Start - justerar alla ikoner till vänster
• Center: placerar ikonerna i mitten av kolumnen
• End-ställer alla ikoner till höger
• Space Between – mellanrummet mellan widgets i början och i slutet vid kanten av kolumnen. Widgetarna är jämnt fördelade, dvs det är lika stort utrymme mellan dem
• Utrymme runt – avståndet mellan widgetarna är lika och kanterna är hälften så stora som utrymmet mellan widgetarna
• Utrymme Jämnt – utrymmet mellan widgets är enhetligt – det är lika mellan, före och efter dem

Använd Overflow Hidden för att åtgärda responsiv breddproblem

När det kommer till en webbplatss utseende på mobilen är det stor sannolikhet att du stöter på ett problem där en widget med anpassad positionering svämmar över bredden på en kolumn.  

Detta orsakar en riktigt frustrerande situation för mobilbesökare, där de kan scrolla horisontellt. Och det här är inte något du ville ha för din webbplats. Detta kan fixas genom:

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

Genom att göra detta kommer det överskridande området att skäras av, och det kommer inte att behövas rullning horisontellt

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 positioneringen av elementet i förhållande till sektionen eller kolumnen som du är inuti. Så, om du använder absolut positionering för ett element eller en sektion kommer den sektionen inte att flytta längs besökarens fönster.

Den fasta positionen skiljer sig från absolut eftersom den låter sektionen/elementet förbli fixerat till besökarens synvinkel. Så om användaren rullar igenom sidan kommer elementet att stanna där.

Relativa enheter

När du designar 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 kommer att göra responsiv design mer funktionell när det kommer till olika skärmstorlekar.

Den relativa enheten justerar sig själv baserat på skärmens relativa bredd och höjd, vilket gör att elementen eller sektionerna kan ändra storlek 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.

Styr djupet för varje element med hjälp av 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 är staplade "ovanpå" varandra. Du kan undvika detta genom att använda den normala Z-index-inställningen. Detta gör att du kan kontrollera djupet och låta dig välja vilka widgets som visas i förgrunden.

Tricket om dubblettfunktionalitet

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

Men, håll ut. Det är inte sant. Dupliceringsfunktionen har fungerat perfekt och har duplicerat elementet. Det är bara det att eftersom varje element har exakt samma anpassade positionering staplades det duplicerade elementet EXAKT ovanpå det andra elementet (vilket ger ett intryck av att ingen dubblett 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 som du skapar inte använder anpassad positionering. Om det gör det kommer duplicering inte att fungera med högerklicksalternativet. Du kan dock använda dupliceringsfunktionen för att övervinna begränsningen och kopiera kolumnen.

Dra det översta elementet lite och det kommer att avslöja det andra. Båda elementen är väldigt mycket där. Dessutom, när du duplicerar en kolumn, kommer den att staplas ö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 webbsidadesign.

Offsets

Det finns fall där du behöver ställa in förskjutningar till innehållet på din webbsida. Med Elementor kan du enkelt ställa in offset. Så om du ställer in en offset på 500px från vänster, kommer utrymme att finnas kvar runt innehållet baserat på din inmatning. På samma sätt kan du även ställa in offset på höger sida. Det är en bra praxis att ställa in både vänster och höger offset till ett liknande värde eftersom innehållet kommer att vara korrekt justerat på skärmen.

Det finns fall där du behöver ställa in förskjutningar till innehållet på din webbsida. Med Elementor kan du enkelt ställa in offset. Så om du ställer in en offset på 500px från vänster, kommer utrymme att finnas kvar runt innehållet baserat på din inmatning. På samma sätt kan du även ställa in offset på höger sida. Det är en bra praxis att ställa in både vänster och höger offset till ett liknande värde eftersom innehållet kommer att vara korrekt justerat på skärmen.

Den gyllene regeln

För bättre responsiv design, använd relativa enheter. Detta beror på att absolut positionering kan vara knepigt 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 lyhörd design. Förändringen i bredd kan hanteras perfekt med hjälp av relativa enheter. Med "relativ" menar vi varierande enheter som procent eller visningsbredd (VW), snarare än att fixa enheter som pixlar.

Slutsats

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