Gjør Elementor-nettstedet ditt mer mobilvennlig respons

En mobil responsiv webside er en viktig del av enhver online virksomhet.

Google har brukt hastighet på mobilsiden som en nøkkelbestemmende faktor for nettstedets søkerangering. Det er hovedsakelig fordi mer enn halvparten av den globale webtrafikken kommer fra mobiltrafikk.

Derfor er et mobilt responsivt nettsted uunngåelig både for nettstedets helse og bedre rangering i Googles søkemotor. I denne artikkelen skal vi fokusere på hvordan vi kan lage et mobilt responsivt nettsted med Elementor-sidebyggeren.

• Hva er Elementors responsive nettsteddesign
• Slik justerer du innstillinger for Mobile, Desktop og Tab
• Juster overskrift på mobilskjermen
• Juster polstring eller marginer for mobil
• Lag hver kolonne horisontalt, så justeres den fantastisk på tvers av alle enheter
• Endre bakgrunnsbilde som per mobil / stasjonærvisning
• Endre synligheten til alle seksjoner på stasjonær / mobilvisning
• Endre kolonneordningen
• Lag en alternativ seksjon
• Juster kolonnebredden
• Konklusjon

Hva er Elementors responsive nettsteddesign

Et responsivt oppsett fungerer nyskapende ved automatisk å skalere alt innholdet etter hver skjermstørrelse. Den endrer automatisk størrelsen på bilder og innhold på mobilskjermen, slik at seerne dine kan se innholdet ditt uten noen anstrengelse.

De fleste av oss kjøper et tema som hevder å være mobile responsive også; ting kan imidlertid være frustrerende når temaets design fullstendig brytes ned på mobilskjermen.

For å overvinne slike situasjoner har vi kommet opp med en mobil responsiv løsning der du kan bygge nettstedets design fra bunnen av ved å bruke Elementor-sidebyggerens responsive layoutverktøy. Ved hjelp av disse mobile responsive verktøyene kan du finjustere ethvert hjørne av nettstedets layout, spesielt typografi, polstring og margin og mobiljustering. Du vil også kunne endre kolonneinnstillingene og rekkefølgen på mobil.

Nå kan du redigere mobilinnstillingen på siden din ved å bytte til mobilvisningsmodus og sjekke følgende alternativer for å justere i henhold til mobiloppsettet.

1. Sjekk om noen overskrift ser for stor ut på en mobil skjerm.
2. Sjekk polstring av innholdet eller plassen på sidene av innholdet
3. Sjekk sidekolonnejusteringen, hvordan ser den perfekt ut; sentrert, høyre eller venstre
4. Sjekk kolonneordren, hvis de vises i riktig rekkefølge, eller du må endre den.

La oss grave dypere ut og finne ut hvordan ting kommer til å ordne seg med Elementor Page Builder.

Slik justerer du innstillinger for Mobile, Desktop og Tab

Nesten alle redigerbare funksjoner har muligheten til å justere Mobile, Desktop og Tab-innstillinger. hvis du klikker på responsiv modus nederst på menyen

Juster overskrift på mobilskjermen

Noen ganger ønsker vi en dristig og fremtredende overskrift på skrivebordssiden vår, og det ser helt greit ut på skrivebordet, men når du slår på Mobile-visningen, tar overskriften hele skjermen og ser ikke ut som den passer inn.

Du kan justere tekststørrelsen til hvilket som helst tekstelement på fanen og mobil. Du kan også angi forskjellige tekststørrelser for mobile overskrifter som ser bra ut på mobilskjerm og passer inn i skjermen på en bedre måte. På denne demosiden har jeg laget en overskrift som ser bra ut på skrivebordssiden, mens den på hele skjermen tar hele skjermen.

Hvis jeg klikker på redigeringsalternativet i overskriftskolonnen, kan jeg gå inn i typografiseksjonen der jeg kan justere overskriftsstørrelsen som ser fin ut på skrivebordet og også på mobilskjermen. Jeg kan kontrollere begge hver for seg. For visningen på skrivebordssiden er overskriftstørrelsen 49px, men i mobilvisning passer den ikke inn

For å justere på nytt, klikker jeg på responsiv modus for mobil> stil> typografi> justerer px-størrelse til 30 som lett passer inn på mobilskjermen.

Juster polstring eller marginer for mobil

Når du justerer paddinger, anbefales det at du ikke bruker verdier i Pixels i stedet for angitte verdier i EM eller prosent fordi det vil beholde størrelsen i forhold til den totale skjermstørrelsen.

Du kan se at vi har brukt polstring som 70px høyre og venstre, noe som ser bra ut på skrivebordssiden; Imidlertid er mobilvisning for denne innstillingen et fullstendig rot.

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

Alternativt kan du sette hele kolonneinnstillingen til 750 px der innholdet ditt vises i en rute uten at du trenger å justere skjermen på både stasjonær eller mobil visning; det vil automatisk justere innholdet i boksen.

Lag hver kolonne horisontalt, så justeres den fantastisk på tvers av alle enheter

Når du oppretter kolonne horisontalt, som designerne foretrekker mest, kan du duplisere seksjonene og spare tid. Lag en seksjon om gangen, og bruk den deretter på nytt hvis det går bra å spare tid.

Endre bakgrunnsbilde som per mobil / stasjonærvisning

Noen bakgrunnsbilder ser bra ut på skrivebordsvisningen, men muligheten er at bildet ikke ser like større ut som på mobilskjermen. Så tenk kreativt og velg et annet bilde på mobilskjermen. For å velge en annen mobilvisning, klikk på seksjonen> stilfanen> klikk på enhetsikonet og velg mobilvisningen. Uansett hvilket bilde du velger, vises det bare i mobilvisningen.

Endre synligheten til alle seksjoner på stasjonær / mobilvisning

Du kan også kontrollere synligheten til alle seksjoner eller kolonner i henhold til enheten.

Noen ganger viser vi innholdet eller bildene våre i to eller tre seksjoner eller forskjellige kolonner, men vi liker ikke å vise det på mobil. Derfor kan Elementor skjule delen du ikke liker å vise i mobilvisning.

Gå til> seksjonsinnstillinger> avansert> responsiv Der vil du se forskjellige muligheter eller visuelle preferanser; Du kan skjule delen på skrivebordet, gjemme på fanen eller skjule på Mobile avhengig av din preferanse.

Endre kolonneordningen

Du kan også endre kolonnerekkefølgen fra innstillingsdelen. Gå til; seksjonsinnstillinger> Avansert> Responsiv> Omvendt kolonne og klikk på ja.

Lag en alternativ seksjon

Lag alternative seksjoner på mobil- og skrivebordsvisning. Noen ganger ser glidebrytseksjonen ikke så nyttig ut på Mobile som på skrivebordet, slik at du kan bruke hvilken som helst annen seksjon i stedet for å bruke skyvekontrolldelen. Du kan gjøre dette ved å gå til fanen Avansert> slå på / av synligheten til delen du ikke vil vise og legge til et alternativt bilde på det.

Juster kolonnebredden

Alle kolonnedelene får 100% bredde når du ser dem på mobilvisningen. Imidlertid kan bredden endres som per kolonnebredde på Mobile. Hvis du har to kolonner, kan du stille inn maksbredde for hver seksjon til å være 50%.

Konklusjon

Elementor leveres med alle de kraftige funksjonene for å kontrollere det responsive kolonneoppsettet for alle skjermstørrelser. Den lar deg justere hvert avsnitt i henhold til valg av visningsmodus. Å ha et mobilvennlig nettsted er uunngåelig fordi Google-algoritmen vurderer å rangere mobilvennlige nettsteder mest. Responsive nettsteder er ikke bare avgjørende for å få bedre SEO, men du må også få mer trafikk, fordi mer enn 80% av trafikken kommer fra mobilvisninger.

Nå kommer Elementor sidebygger med eksklusive funksjoner som lar brukerne lage et mobilvennlig nettsted uten mye krefter. Forhåpentligvis synes du at artikkelen min er nyttig og fikk alle svarene dine om hvordan du oppretter et responsivt nettsted ved hjelp av Elementor.