Gör din Elementor-webbplats mer mobilvänlig och lyhörd

En mobil responsiv webbplats är en viktig del av alla onlineföretag.

Google har använt mobil sidhastighet som en nyckeldeterminant för vilken webbplats som helst på webbplatsen. Det beror främst på att mer än hälften av den globala webbtrafiken kommer från mobiltrafik.

Därför är en mobil responsiv webbplats oundviklig både för din webbplats hälsa och bättre ranking i Googles sökmotor. I den här artikeln kommer vi att fokusera på hur vi kan skapa en mobil responsiv webbplats med Elementors sidbyggare.

• Vad är Elementors responsiva webbplatsdesign
• Hur du justerar inställningar för mobil, skrivbord och flik
• Justera rubriken på din mobilskärm
• Justera stoppning eller marginaler för mobil
• Skapa varje kolumn horisontellt, så kommer den att anpassas underbart över alla enheter
• Ändra bakgrundsbild enligt mobil / skrivbordsvy
• Ändra synligheten för alla avsnitt i skrivbords- / mobilvy
• Ändra kolumnordningen
• Skapa ett alternativt avsnitt
• Justera kolumnens bredd
• Slutsats

Vad är Elementors responsiva webbplatsdesign

En responsiv layout fungerar innovativ genom att automatiskt skala allt innehåll enligt varje skärmstorlek. Det ändrar automatiskt storlek på bilder och innehåll på mobilskärmen så att dina tittare kan se ditt innehåll utan ansträngning.

De flesta av oss köper ett tema som påstår sig också vara mobilkänsligt; saker kan dock vara frustrerande när ditt temas design helt går sönder på mobilskärmen.

För att övervinna sådana situationer har vi tagit fram en mobil responsiv lösning där du kan bygga din webbdesign från grunden med hjälp av Elementors sidbyggares responsiva layoutverktyg. Med hjälp av dessa mobila responsiva verktyg kan du justera vilket hörn av din webbplatslayout som helst, särskilt typografi, utfyllnad och marginal och mobilanpassning. Du kommer också att kunna ändra kolumninställningarna och ordningen på mobilen.

Nu kan du redigera din sidas mobilinställning genom att växla till mobilvisningsläget och kontrollera följande alternativ för att justera efter mobillayouten.

1. Kontrollera om någon rubrik ser för stor ut på en mobil skärm.
2. Kontrollera stoppningen av innehållet eller utrymmet på sidorna av innehållet
3. Kontrollera sidans kolumninriktning, hur ser den perfekt ut; centrerad, höger eller vänster
4. Kontrollera kolumnordningen, om de visas i rätt ordning eller om du behöver ändra den.

Låt oss nu gräva djupare och ta reda på hur saker och ting går ut med Elementor Page builder.

Hur du justerar inställningar för mobil, skrivbord och flik

Nästan alla redigerbara funktioner har möjlighet att justera inställningar för mobil, skrivbord och flik. om du klickar på det responsiva läget längst ner i menyn

Justera rubriken på din mobilskärm

Ibland vill vi ha en djärv och framträdande rubrik på vår skrivbordssida, och det ser perfekt ut på skrivbordsskärmen, men när du slår på mobilvyn tar rubriken hela skärmen och ser inte ut som passar in.

Du kan justera textstorleken för alla textelement på fliken och mobil. Du kan också ställa in olika textstorlekar för mobilrubriker som ser bra ut på mobilskärmen och passar in på skärmen på ett bättre sätt. På den här demosidan har jag skapat en rubrik som ser bra ut på skrivbordssidan, medan den på hela skärmen tar hela skärmen.

Om jag klickar på redigeringsalternativet i rubrikkolumnen kan jag gå in i typografisektionen där jag kan justera rubrikstorleken som ser bra ut på skrivbordet och även på mobilskärmen. Jag kan styra båda separat. För min skrivbordsplatsvy är rubrikstorleken 49px, men i mobilvy passar den inte in

För att justera om, klickar jag på det mobila responsiva läget> stil> typografi> justerar px-storleken till 30 som lätt passar in på mobilskärmen.

Justera stoppning eller marginaler för mobil

När du justerar paddningar rekommenderas att du inte använder värden i Pixlar istället för inställda värden i EM eller procent eftersom det kommer att behålla storleken relativt den totala skärmstorleken.

Du kan se att vi har använt stoppning som 70px höger och vänster, vilket ser bra ut på skrivbordssidan; men mobilvy för den här inställningen är en fullständig röra.

Vi kan justera stoppningen till 17 px på vardera sidan då det visar sig vara helt bra.

Alternativt kan du ställa in hela kolumninställningen till 750 px där ditt innehåll visas i en ruta utan att du behöver justera skärmen på både skrivbords- eller mobilvy. det justerar automatiskt innehållet i rutan.

Skapa varje kolumn horisontellt, så kommer den att anpassas underbart över alla enheter

När du skapar kolumn horisontellt, som designarna föredrar mest, kan du duplicera avsnitten och spara tid. Skapa ett avsnitt åt gången och återanvänd det sedan om det går bra att spara tid.

Ändra bakgrundsbild enligt mobil / skrivbordsvy

Vissa bakgrundsbilder ser bra ut på skrivbordsvyn, men möjligheten är att bilden inte ser lika stor ut som på mobilskärmen. Så tänk kreativt och välj en annan bild på mobilskärmen. För att välja en annan mobilvy klickar du på avsnittet> stilfliken> klickar på enhetsikonen och väljer mobilvyn. Oavsett vilken bild du väljer kommer den bara att visas i mobilvyn.

Ändra synligheten för alla avsnitt i skrivbords- / mobilvy

Du kan också kontrollera synligheten för alla sektioner eller kolumner enligt enheten.

Ibland visar vi vårt innehåll eller bilder i två eller tre sektioner eller olika kolumner, men vi vill inte visa det på mobil. Det är därför Elementor kan dölja det avsnitt som du inte vill visa i mobilvy.

Gå till> sektionsinställningar> avancerat> lyhörd Där ser du olika möjligheter eller visuella preferenser; du kan dölja avsnittet på skrivbordet, dölja på fliken eller dölja på mobil beroende på dina önskemål.

Ändra kolumnordningen

Du kan också ändra kolumnordningen i inställningsavsnittet. Gå till; sektionsinställningar> Avancerat> Responsiv> Omvänd kolumn och klicka på ja.

Skapa ett alternativt avsnitt

Skapa alternativa avsnitt i mobil- och stationärvy. Ibland ser skjutreglaget inte så användbart på Mobile som på skrivbordet så att du kan använda valfritt annat avsnitt istället för att använda reglaget. Du kan göra detta genom att gå till fliken Avancerat> slå på / av synligheten för det avsnitt som du inte vill visa och lägga till en alternativ bild på den.

Justera kolumnens bredd

Alla kolumnavsnitt får 100% bredd när du visar dem i mobilvyn. Men bredden kan ändras enligt kolumnbredd på Mobile. Om du har två kolumner kan du ställa in maxbredden för varje sektion till 50%.

Slutsats

Elementor levereras med alla de kraftfulla funktionerna för att styra den responsiva kolumnlayouten för alla skärmstorlekar. Det låter dig justera varje sektion enligt valet av visningsläge. Att hålla en mobilvänlig webbplats är oundviklig eftersom Googles algoritm anser att rankning av mobilvänliga webbplatser är mest. Responsiva webbplatser är inte bara viktiga för att få bättre SEO, utan du måste också få mer trafik, eftersom mer än 80% av trafiken kommer från mobilvyer.

Nu kommer Elementor-sidbyggare med exklusiva funktioner som gör det möjligt för sina användare att skapa en mobilvänlig webbplats utan mycket ansträngning. Förhoppningsvis tycker du att min artikel är användbar och fick alla dina svar på hur du skapar en lyhörd webbplats med Elementor.