Gör din Elementor-webbplats mer mobilvänlig responsiv

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

Google har använt laddningshastighet för mobilsidor som en avgörande faktor för alla webbplatsers sökrankning. 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 webbdesign
• Hur man justerar inställningarna för mobil, skrivbord och flik
• Justera rubriken i din mobilskärm
• Justera stoppning eller marginaler för mobil
• Skapa varje kolumn horisontellt, och den kommer att anpassa sig underbart över alla enheter
• Ändra bakgrundsbild enligt mobil/skrivbordsvy
• Ändra synlighet för valfri sektion på skrivbords-/mobilvy
• Ändra kolumnordningen
• Skapa ett alternativt avsnitt
• Justera kolumnbredden
• Slutsats

Vad är Elementors responsiva webbdesign

En responsiv layout fungerar innovativt genom att automatiskt skala allt innehåll för varje skärmstorlek. Den ä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 vara mobilt responsivt också; men saker och ting kan vara frustrerande när ditt temas design går sönder helt 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 alla hörn av din webbplatslayout, 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 byta till mobilvisningsläget och markera följande alternativ för att justera enligt mobillayouten.

1. Kontrollera om någon rubrik ser för stor ut på en mobilskärm.
2. Kontrollera utfyllnaden av innehållet eller utrymmet på sidorna av innehållet
3. Kontrollera sidkolumnjusteringen, 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 kommer att fungera med Elementor Page builder.

Hur man justerar inställningarna för mobil, skrivbord och flik

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

Justera rubriken i din mobilskärm

Ibland vill vi ha en fet och framträdande rubrik på vår skrivbordswebbplats, och den ser helt ok ut på skrivbordsskärmen, men när du slår på mobilvyn tar rubriken hela skärmen och ser inte ut att passa in i den.

Du kan justera textstorleken för alla textelement på flik 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å mobilskä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 webbplatsvy på skrivbordet är rubrikstorleken 49px, men i mobilvyn passar den inte in

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

Justera stoppning eller marginaler för mobil

När du justerar utfyllnad, rekommenderas det att inte använda värden i pixlar istället för inställda värden i EM eller procent, eftersom det kommer att behålla storleken i förhållande till den totala skärmstorleken.

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

Vi kan justera om stoppningen till 17 px på varje sida så visar det sig vara helt okej.

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

Skapa varje kolumn horisontellt, och den kommer att anpassa sig underbart över alla enheter

När du väl har skapat kolumn horisontellt, vilket designarna föredrar mest, kan du duplicera sektionerna och spara tid. Skapa ett avsnitt i taget och återanvänd det sedan om det går bra för att spara tid.

Ändra bakgrundsbild enligt mobil/skrivbordsvy

Vissa bakgrundsbilder ser bra ut på skrivbordsvyn, men möjligheten är att bilden inte ser lika större 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, klicka på avsnittet > stilfliken > klicka på enhetsikonen och välj mobilvyn. Nu, vilken bild du än väljer, kommer den bara att visas på mobilvyn.

Ändra synlighet för valfri sektion på skrivbords-/mobilvy

Du kan också styra synligheten för valfri sektion eller kolumn beroende på enheten.

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

Gå till > sektionsinställningar > avancerat > responsiv 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å vad du föredrar.

Ändra kolumnordningen

Du kan också ändra kolumnordningen från inställningssektionen. Gå till; avsnittsinställningar> Avancerat>Responsiv> Omvänd kolumn och klicka på Ja.

Skapa ett alternativt avsnitt

Skapa alternativa avsnitt i mobil- och skrivbordsvyn. Ibland ser skjutreglaget inte lika användbart ut på mobilen som på skrivbordet, så du kan använda vilken annan sektion som helst istället för att använda skjutreglaget. Du kan göra detta genom att gå till fliken Avancerat > slå på/av synligheten för avsnittet du inte vill visa och lägg till en alternativ bild på den.

Justera kolumnbredden

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

Slutsats

Elementor kommer med alla kraftfulla funktioner för att styra den responsiva kolumnlayouten för alla skärmstorlekar. Det låter dig justera varje avsnitt enligt val av visningsläge. Att behålla en mobilvänlig webbplats är oundvikligt eftersom Googles algoritm överväger att ranka mobilanpassade webbplatser mest. Responsiva webbplatser är inte bara väsentliga för att få bättre SEO, utan du behöver också få mer trafik, eftersom mer än 80 % av trafiken kommer från mobilvisningar.

Nu kommer Elementor sidbyggare med exklusiva funktioner som gör att dess användare kan skapa en mobilvänlig webbplats utan större ansträngning. Förhoppningsvis hittar du min artikel användbar och fick alla dina svar om hur du skapar en responsiv webbplats med Elementor.