Gør dit Elementor-websted mere mobilvenligt responsivt

Et mobilt responsivt websted er en vital del af enhver online forretning.

Google har brugt mobilsideindlæsningshastighed som en nøgledeterminant for enhver hjemmesides søgerangering. Det er primært fordi mere end halvdelen af ​​den globale webtrafik kommer fra mobiltrafik.

Derfor er en mobil responsiv hjemmeside uundgåelig både for dit websteds sundhed og bedre placering i Googles søgemaskine. I denne artikel vil vi fokusere på, hvordan vi kan skabe et mobilt responsivt websted med Elementor-sidebyggeren.

• Hvad er Elementors responsive hjemmesidedesign
• Sådan justeres Mobile, Desktop og Tab-indstillinger
• Juster overskrift på din mobilskærm
• Juster polstring eller marginer til mobil
• Opret hver kolonne vandret, og den vil justere vidunderligt på tværs af alle enheder
• Skift baggrundsbillede i henhold til mobil-/skrivebordsvisning
• Skift synligheden af ​​enhver sektion på desktop/mobilvisning
• Skift kolonnerækkefølgen
• Opret en alternativ sektion
• Juster kolonnebredden
• Konklusion

Hvad er Elementors responsive hjemmesidedesign

Et responsivt layout virker innovativt ved automatisk at skalere alt indhold efter hver skærmstørrelse. Det ændrer automatisk størrelsen på billeder og indhold på mobilskærmen, så dine seere kan se dit indhold uden besvær.

De fleste af os køber et tema, der også hævder at være mobilresponsivt; Tingene kan dog være frustrerende, når dit temas design går helt i stykker på mobilskærmen.

For at overkomme sådanne situationer har vi fundet frem til en mobil responsiv løsning, hvor du kan bygge dit websitedesign fra bunden ved hjælp af Elementors sidebyggers responsive layoutværktøjer. Ved hjælp af disse mobile responsive værktøjer kan du justere ethvert hjørne af dit websteds layout, især typografi, polstring og margin og mobiljustering. Du vil også være i stand til at ændre kolonneindstillingerne og rækkefølgen på mobilen.

Nu kan du redigere din sides mobilindstilling ved at skifte til mobilvisningstilstand og kontrollere følgende muligheder for at justere i henhold til mobillayoutet.

1. Tjek, om en overskrift ser for stor ud på en mobilskærm.
2. Tjek udfyldningen af ​​indholdet eller mellemrummet på siderne af indholdet
3. Tjek sidekolonnejusteringen, hvordan ser den perfekt ud; centreret, højre eller venstre
4. Tjek kolonnerækkefølgen, hvis de vises i den rigtige rækkefølge, eller du skal ændre den.

Lad os nu grave dybere ud og finde ud af, hvordan tingene kommer til at fungere med Elementor Page builder.

Sådan justeres Mobile, Desktop og Tab-indstillinger

Næsten alle redigerbare funktioner har mulighed for at justere Mobile, Desktop og Tab-indstillinger. hvis du klikker på den responsive tilstand nederst i menuen

Juster overskrift på din mobilskærm

Nogle gange vil vi gerne have en fed og fremtrædende overskrift på vores desktop-side, og det ser helt fint ud på skrivebordsskærmen, men når du tænder for Mobile-visningen, tager overskriften hele skærmen og ser ikke ud til at passe ind.

Du kan justere tekststørrelsen for ethvert tekstelement på faneblad og mobil. Du kan også indstille forskellige tekststørrelser til mobiloverskrifter, der ser godt ud på mobilskærmen og passer ind i skærmen på en bedre måde. På denne demoside har jeg lavet en Overskrift, der ser godt ud på desktop-siden, mens den på mobilskærmen tager hele skærmen.

Hvis jeg klikker på redigeringsmuligheden i overskriftskolonnen, kan jeg gå ind i typografisektionen, hvor jeg kan justere overskriftsstørrelsen, som ser fin ud på skrivebordet og også på mobilskærmen. Jeg kan styre begge separat. For min desktop-sidevisning er overskriftsstørrelsen 49px, men på mobilvisning passer den ikke ind

For at justere, klikker jeg på den mobile responsive tilstand > stil > typografi > juster px-størrelse til 30, som nemt passer ind i mobilskærmen.

Juster polstring eller marginer til mobil

Når du justerer polstring, anbefales det ikke at bruge værdier i Pixels i stedet for indstillede værdier i EM eller procent, fordi det vil holde størrelsen i forhold til den samlede skærmstørrelse.

Du kan se, at vi har brugt polstring som 70px højre og venstre, hvilket ser godt ud på skrivebordssiden; Men mobilvisning for denne indstilling er et komplet rod.

Vi kan justere polstringen til 17 px på hver side, så viser det sig at være helt fint.

Alternativt kan du indstille hele kolonnerne til 750 px, hvor dit indhold vil blive vist i en boks uden behov for at justere skærmen på både desktop- eller mobilvisning; det vil automatisk justere indholdet i boksen.

Opret hver kolonne vandret, og den vil justere vidunderligt på tværs af alle enheder

Når du først har oprettet kolonne vandret, hvilket designerne foretrækker mest, så kan du duplikere sektionerne og spare tid. Opret én sektion ad gangen og genbrug den så, hvis det går godt for at spare tid.

Skift baggrundsbillede i henhold til mobil-/skrivebordsvisning

Nogle baggrundsbilleder ser godt ud på skrivebordsvisningen, men muligheden er, at billedet ikke vil se så større ud som på mobilskærmen. Så tænk kreativt og vælg et andet billede på mobilskærmen. For at vælge en anden mobilvisning, klik på sektionen > stilfanen > klik på enhedsikonet og vælg mobilvisningen. Uanset hvilket billede du vælger, vises det nu kun på mobilvisningen.

Skift synligheden af ​​enhver sektion på desktop/mobilvisning

Du kan også kontrollere synligheden af ​​enhver sektion eller kolonne i henhold til enheden.

Nogle gange viser vi vores indhold eller billeder i to eller tre sektioner eller forskellige kolonner, men vi kan ikke lide at vise det på mobil. Det er derfor Elementor kan skjule den sektion, som du ikke kan lide at vise på mobilvisning.

Gå til > sektionsindstillinger > avanceret > responsiv Der vil du se forskellige muligheder eller visuelle præferencer; du kan skjule sektionen på skrivebordet, skjule på fanen eller skjule på mobil afhængigt af dine præferencer.

Skift kolonnerækkefølgen

Du kan også ændre kolonnerækkefølgen fra indstillingssektionen. Gå til; sektionsindstillinger> Avanceret>Responsiv> Omvendt kolonne og klik på Ja.

Opret en alternativ sektion

Opret alternative sektioner på mobil- og skrivebordsvisning. Nogle gange ser skyderafsnittet ikke så nyttigt ud på mobil som på skrivebordet, så du kan bruge en hvilken som helst anden sektion i stedet for at bruge skyderafsnittet. Du kan gøre dette ved at gå til fanen Avanceret > slå synligheden til/fra for den sektion, du ikke vil have vist, og tilføje et alternativt billede på det.

Juster kolonnebredden

Alle kolonnesektionerne får 100 % bredde, når du ser dem på mobilvisningen. Bredden kan dog ændres i henhold til kolonnebredden på Mobil. Hvis du har to kolonner, kan du indstille maks. bredden af ​​hver sektion til at være 50 %.

Konklusion

Elementor kommer med alle de kraftfulde funktioner til at styre det responsive kolonnelayout af alle skærmstørrelser. Det giver dig mulighed for at justere hver sektion i henhold til valg af visningstilstand. At beholde et mobilvenligt websted er uundgåeligt, fordi Googles algoritme overvejer at rangere mobilvenlige websteder mest. Responsive hjemmesider er ikke kun afgørende for at få bedre SEO, men du skal også få mere trafik, fordi mere end 80 % af trafikken kommer fra mobilvisninger.

Nu kommer Elementor sidebygger med eksklusive funktioner, der giver brugerne mulighed for at skabe et mobilvenligt websted uden stor indsats. Forhåbentlig finder du min artikel nyttig og fik alle dine svar på, hvordan du opretter en responsiv hjemmeside ved hjælp af Elementor.