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?

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.

Ahmad

Visa kommentarer

  • Var hittar du dessa alternativ? De finns inte. Är detta för Premium Elementor? Om så är fallet bör du nämna det i din artikel så att folk inte slösar tid på att läsa igenom den.

  • Hallå,

    Estoy maquetando med Elementor Pro.
    Quiero poner dos banderoller, uno pegado a la izquierda y otro pegado a la derecha de la pantalla. Para ello he creado: - una seccion para cada banner.
    - un encabezado con un frase, a la cual he puesto de fondo una imagen.

    Una de ella deberia ir pegada a la derecha de la pantalla (marginaler izquierda 0 imagino). Algun consejo? Stort tack!

  • Hej, det första jag skulle titta på skulle vara inställningen för kolumn vertikal justering som beskrivs i den första delen av det här inlägget.
    Skål,

  • Buongiorno, tutto chiaro, grazie!
    Ma mi stavo domandando se è possibile inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa colonna. Cerco di spiegarmi meglio: vorrei dividere un sezione in due colonne.
    När det gäller ett foto med ett omslag och en kolonna av en sinistra med en kontinuerlig puls (unsopra l'altro), på samma avstånd och central position för sinistras pelargång, rimandano med modellen av smartphone enligt dess kvalitet och tillgänglighetsomslag på bilden. Sto cercando ovunque, ma non trovo nulla che indichi che si possa fare.
    Så ingen aperta a tutti jag föreslår
    Grazie

  • Scusate, ho appena capito come fare (l'ho capito per errore). Scusate il disturbo e grazie lo stesso

    • Hej, okej bra, visst är det möjligt, du kan till och med centrera innehållet vertikalt i varje kolumn

  • Det finns ett problem med stycket utan logotyplösningsmedel. El contenido se queda a lado, la imagen, titulo y texto. No logro centarlo (solo hay una columna pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar. Det är redan redigerat av tamaño móvil, så det är en quedado såväl som en lado todo cuando cambio a escritorio! Alguien sabe que puede ser? Han försökte göra sitt jobb och articulo and parece que nada funciona 🤗

    • Hej, jag tror att du måste börja med att kontrollera alla dina justeringar i sektioner, sedan kolumner och sedan innehållsblock. Det är också möjligt att CSS för ditt tema kommer att spela en roll i denna anpassning.

  • bonjour!
    Du m'arrache les cheveux bil je n'arrive pas à aligner 3 colones à l'horizontale.
    Runt designen med all den perfekta inriktningen kan du visualisera modifieringarna, kolonnerna med eftermonterade imbrikéer och de olika midjelinjerna (större och hauthors) på kranens mått. ditt val är formen på kroppen och formen på alignern. Kommentera faire?

  • Hej, tengo instalado elementor pero cuando agrego une noweva sección no parecen las opciones de paragraphción horisontal y paragraphción vertikal.
    Hur installerade du en complemento adicional? Tack

  • Hallå,

    Jag har flera widgets i sidfoten. Det är alltid en rubrik, en djärvare poäng. På så sätt behöver jag inte skriva oskrivna texter i en ruta (h4 och p) om jag inte skriver det i 2 avsnitt. Hur kan jag nu hitta nästa wordpress-sektioner? Det finns fortfarande plats för rubriken och texten.

    tack för din hjälp

    • Hej, det finns flera alternativ för att moderera utrymmet mellan texter: det kan vara avsnitt, kolumn eller widgetmarginal eller utfyllnad ELLER det kan vara teckensnittsalternativ som radhöjd.

Nya Inlägg

Hur man använder sidhuvuden och sidfötter med Elementor

En webbplats sidhuvuden och sidfötter är viktiga element. I de flesta fall ger rubriken navigering...

6 januari 2022

WordPress-temajämförelse: Astra vs OceanWP

Två av de mest populära WordPress-temanen på marknaden är Astra och OceanWP. Professionell…

2 januari 2022

Jämförelse av WordPress-nyhetstema: Tidning vs. Astra

Att skapa en utmärkt nyhetswebbplats kräver inte att du blir webbdesigner. Vi…

25 oktober 2021

Skapa en nyhetsrelaterad webbplats med tidningstema

The Newspaper-temat är ett av de viktigaste WordPress-teman som designats av tagDiv, en...

18 oktober 2021

Hur man bygger en e-handel med Avada WooCommerce Builder

När det gäller att skapa en onlinebutik är WooCommerce det bästa plugin . Den…

4 oktober 2021

Hur man använder sticky header och rullningseffekter med Elementor

En rubrik är i allmänhet det första en person ser när de besöker din webbplats,...

21 september 2021