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

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 mobilvylä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 omjustera klickar jag på mobilt svarsläge > 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 stoppningar 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/datorvy

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 synligheten för valfri sektion i skrivbords-/mobilvyn

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 gillar att 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 mobilvänliga 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.

Holderkhu

live:.cid.e495888558d5265f

Visa kommentarer

  • Snyggt inlägg! Bardzo odpowiada na moje potrzeby. Stworzyłam stronę ale widok mobilny mi się rozjechał. Dziękuję za wskazówki. Są bardzo pomocne 🙂

  • Super! Du kanske inte kan använda denna information förrän du har läst klart den. Wielkie dzięki za pomoc :)

    • Hej, för att ändra kolumnordning kan du använda dra och släpp direkt eller sektionsutforskaren. Om synligheten är det den avancerade inställningen av avsnittet, du måste stänga av synligheten för skrivbordet, surfplattan och mobilen.

    • Hej, stoppningen är inte exakt responsiv, detta är ett fast värde. Om du har ett responsivt problem måste du definiera olika stoppningsvärden för stationära datorer, surfplattor och telefoner

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