Gjør Elementor-nettstedet ditt mer mobilvennlig responsivt

Et mobilt responsivt nettsted er en viktig del av enhver nettvirksomhet.

Google har brukt mobilsideinnlastingshastighet som en nøkkeldeterminant for ethvert nettsteds søkerangering. Det er hovedsakelig fordi mer enn halvparten av den globale nettrafikken 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 vil vi fokusere på hvordan vi kan lage et mobilt responsivt nettsted med Elementor-sidebyggeren.

• Hva er Elementors responsive nettstedsdesign
• Hvordan justere innstillinger for mobil, skrivebord og fane
• Juster overskrift på mobilskjermen
• Juster polstring eller marger for mobil
• Lag hver kolonne horisontalt, og den vil justere seg fantastisk på tvers av alle enheter
• Endre bakgrunnsbilde i henhold til mobil/skrivebordsvisning
• Endre synligheten for en hvilken som helst seksjon på skrivebords-/mobilvisning
• Endre kolonnerekkefølgen
• Lag en alternativ seksjon
• Juster kolonnebredden
• Konklusjon

Hva er Elementors responsive nettstedsdesign

En responsiv layout fungerer nyskapende ved automatisk å skalere alt innhold i henhold til hver skjermstørrelse. Den endrer automatisk størrelse på bilder og innhold på mobilskjermen slik at seerne dine kan se innholdet ditt uten anstrengelse.

De fleste av oss kjøper et tema som hevder å være mobilresponsivt også; Ting kan imidlertid være frustrerende når designen til temaet ditt bryter fullstendig sammen på mobilskjermen.

For å overvinne slike situasjoner har vi kommet opp med en mobil responsiv løsning der du kan bygge ditt nettsteddesign fra bunnen av ved hjelp av Elementors sidebyggers 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 sidens mobilinnstilling ved å bytte til mobilvisningsmodus og sjekke følgende alternativer for å justere i henhold til mobiloppsettet.

1. Sjekk om en overskrift ser for stor ut på en mobilskjerm.
2. Sjekk utfyllingen av innholdet eller mellomrommet på sidene av innholdet
3. Sjekk sidekolonnejusteringen, hvordan ser den perfekt ut; sentrert, høyre eller venstre
4. Sjekk kolonnerekkefølgen, hvis de vises i riktig rekkefølge eller du må endre den.

La oss nå grave dypere og finne ut hvordan ting kommer til å fungere med Elementor Page builder.

Hvordan justere innstillinger for mobil, skrivebord og fane

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

Juster overskrift på mobilskjermen

Noen ganger vil vi ha en dristig og fremtredende overskrift på skrivebordssiden vår, og den ser helt fin ut på skrivebordsskjermen, men når du slår på mobilvisningen, tar overskriften hele skjermen og ser ikke ut som den passer inn.

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

Hvis jeg klikker på redigeringsalternativet i overskriftskolonnen, kan jeg gå inn i typografiseksjonen der jeg kan justere overskriftsstørrelsen som ser bra ut på skrivebordet og også på mobilskjermen. Jeg kan kontrollere begge separat. For min skrivebordssidevisning er overskriftstørrelsen 49px, men på mobilvisning passer den ikke inn

For å justere, klikker jeg på mobilresponsmodus > stil > typografi > juster px-størrelse til 30 som enkelt passer inn i mobilskjermen.

Juster polstring eller marger for mobil

Når du justerer polstring, anbefales det å ikke bruke verdier i piksler i stedet for innstilte verdier i EM eller prosent, fordi det vil beholde størrelsen i forhold til den generelle skjermstørrelsen.

Du kan se at vi har brukt padding som 70px høyre og venstre, som ser bra ut på skrivebordssiden; Imidlertid er mobilvisning for denne innstillingen et komplett 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 vil vises i en boks uten behov for å justere skjermen på både skrivebords- eller mobilvisning; den vil automatisk justere innholdet i boksen.

Lag hver kolonne horisontalt, og den vil justere seg fantastisk på tvers av alle enheter

Når du har opprettet kolonne horisontalt, som designerne foretrekker mest, kan du duplisere seksjonene og spare tid. Opprett én seksjon om gangen og bruk den deretter på nytt hvis det går bra for å spare tid.

Endre bakgrunnsbilde i henhold til mobil/skrivebordsvisning

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

Endre synligheten for en hvilken som helst seksjon på skrivebords-/mobilvisning

Du kan også kontrollere synligheten til en hvilken som helst seksjon eller kolonne 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. Det er derfor Elementor kan skjule delen du ikke liker å vise på mobilvisning.

Gå til > seksjonsinnstillinger > avansert >responsiv Der vil du se ulike muligheter eller visuelle preferanser; du kan skjule seksjonen på skrivebordet, gjemme på fanen eller gjemme på mobil avhengig av dine preferanser.

Endre kolonnerekkefølgen

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 glidebryteren ikke like nyttig ut på mobil som på skrivebordet, så du kan bruke hvilken som helst annen seksjon i stedet for å bruke glidebryteren. Du kan gjøre dette ved å gå til Avansert-fanen > slå på/av synligheten til delen du ikke vil vise og legge til et alternativt bilde på den.

Juster kolonnebredden

Alle kolonneseksjonene får 100 % bredde når du ser dem på mobilvisningen. Imidlertid kan bredden endres i henhold til kolonnebredden på mobil. Hvis du har to kolonner, kan du angi maksimal bredde for hver seksjon til 50 %.

Konklusjon

Elementor kommer med alle de kraftige funksjonene for å kontrollere det responsive kolonneoppsettet for alle skjermstørrelsene. Den lar deg justere hver seksjon i henhold til valg av visningsmodus. Å beholde et mobilvennlig nettsted er uunngåelig fordi Googles algoritme vurderer å rangere mobilvennlige nettsteder mest. Responsive nettsider 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 innsats. Forhåpentligvis finner du artikkelen min nyttig og fikk alle svarene dine om hvordan du lager et responsivt nettsted ved hjelp av Elementor.