Gjør Elementor-nettstedet ditt mer mobilvennlig responsivt

En mobilresponsiv nettside er en viktig del av enhver nettbasert virksomhet.

Google har brukt lastehastigheten til mobilsider som en viktig faktor for et nettsteds søkerangering. Dette er hovedsakelig fordi mer enn halvparten av den globale nettrafikken kommer fra mobiltrafikk.

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

• Hva er Elementors responsive nettsteddesign
• Slik justerer du innstillinger for mobil, datamaskin og faneblad
• Juster overskriften på mobilskjermen din
• Juster polstring eller marginer for mobil
• Opprett hver kolonne horisontalt, og den vil justeres fantastisk på tvers av alle enheter
• Endre bakgrunnsbilde i henhold til mobil-/skrivebordsvisning
• Endre synligheten til en hvilken som helst seksjon i skrivebords-/mobilvisning
• Endre kolonnerekkefølgen
• Opprett en alternativ seksjon
• Juster kolonnebredden
• Konklusjon

Hva er Elementors responsive nettsteddesign

En responsiv layout fungerer innovativt ved å automatisk skalere alt innhold i henhold til hver skjermstørrelse. Den endrer automatisk størrelsen 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å; det kan imidlertid være frustrerende når temaets design fullstendig bryter sammen på mobilskjermen.

For å håndtere slike situasjoner har vi kommet opp med en mobilresponsiv løsning der du kan bygge webdesignet ditt fra bunnen av ved hjelp av Elementors sidebyggers responsive layoutverktøy. Ved hjelp av disse mobilresponsive verktøyene kan du justere ethvert hjørne av weblayouten din, spesielt typografi, polstring, marg- og mobiljustering. Du vil også kunne endre kolonneinnstillinger og rekkefølge på mobil.

Nå kan du redigere sidens mobilinnstillinger ved å bytte til mobilvisningsmodus og sjekke følgende alternativer for å justere i henhold til mobiloppsettet.

1. Sjekk om noen overskrifter ser for store ut på en mobilskjerm.
2. Sjekk polstringen av innholdet eller plassen på sidene av innholdet
3. Sjekk kolonnejusteringen på siden, hvordan ser den perfekt ut; sentrert, høyre eller venstre
4. Sjekk kolonnerekkefølgen, om de vises i riktig rekkefølge, eller om du må endre den.

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

Slik justerer du innstillinger for mobil, datamaskin og faneblad

Nesten alle redigerbare funksjoner har muligheten til å justere innstillinger for mobil, skrivebord og faneblad. Hvis du klikker på responsiv modus nederst i menyen

Juster overskriften på mobilskjermen din

Noen ganger ønsker vi en dristig og fremtredende overskrift på nettstedet vårt, og det ser helt fint ut på skrivebordsskjermen, men når du slår på mobilvisningen, tar overskriften opp hele skjermen og ser ikke ut som den passer inn.

Du kan justere tekststørrelsen på ethvert tekstelement på fanen og mobil. Du kan også angi forskjellige tekststørrelser for mobiloverskrifter som ser bra ut på mobilskjermen og passer bedre inn i skjermen. På denne demosiden har jeg laget en overskrift som ser bra ut på datamaskinens nettsted, mens den på mobilskjermen tar opp hele skjermen.

Hvis jeg klikker på redigeringsalternativet i overskriftskolonnen, kan jeg gå inn i typografiseksjonen hvor jeg kan justere overskriftsstørrelsen, noe som ser fint ut på datamaskin og mobilskjerm. Jeg kan kontrollere begge separat. For datamaskinvisningen min er overskriftsstørrelsen 49 piksler, men i mobilvisning får den ikke plass

For å justere, klikker jeg på mobilresponsiv modus > stil > typografi > juster pikselstørrelsen til 30, som enkelt passer inn i mobilskjermen.

Juster polstring eller marginer for mobil

Når du justerer marginer, anbefales det å ikke bruke verdier i piksler i stedet for å angi 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 marging som 70 piksler til høyre og venstre, noe som ser bra ut på datamaskinens nettsted; mobilvisningen for denne innstillingen er imidlertid et komplett rot.

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

Alternativt kan du sette innstillingen for hele kolonnen til 750 piksler, der innholdet ditt vises i en boks uten at du trenger å justere skjermen på verken skrivebords- eller mobilvisning. Innholdet i boksen justeres automatisk.

Opprett hver kolonne horisontalt, og den vil justeres fantastisk på tvers av alle enheter

Når du har opprettet en horisontal kolonne, noe 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å skrivebordsskjermen, men det er en mulighet for at bildet ikke vil se like bra ut som på mobilskjermen. Tenk derfor 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, vil det bare vises i mobilvisningen.

Endre synligheten til en hvilken som helst seksjon i skrivebords-/mobilvisning

Du kan også kontrollere synligheten til en hvilken som helst seksjon eller kolonne i henhold til enheten.

Noen ganger viser vi innhold eller bilder i to eller tre seksjoner eller forskjellige kolonner, men vi liker ikke å vise det på mobil. Derfor kan Elementor skjule seksjoner du ikke liker å vise i mobilvisningen.

Gå til > seksjonsinnstillinger > avansert > responsiv. Der ser du forskjellige muligheter eller visuelle preferanser. Du kan skjule seksjonen på datamaskin, i fanen eller på mobil, avhengig av hva du foretrekker.

Endre kolonnerekkefølgen

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

Opprett en alternativ seksjon

Opprett alternative seksjoner i mobil- og skrivebordsvisning. Noen ganger ser ikke glidebryterdelen like nyttig ut på mobil som på skrivebordet, så du kan bruke en hvilken som helst annen seksjon i stedet for å bruke glidebryterdelen. Du kan gjøre dette ved å gå til Avansert-fanen > slå av/på synligheten til seksjonen 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 i mobilvisningen. Bredden kan imidlertid endres i henhold til kolonnebredden på mobil. Hvis du har to kolonner, kan du sette maksimal bredde for hver seksjon til 50 %.

Konklusjon

Elementor kommer med alle de kraftige funksjonene for å kontrollere den responsive kolonneoppsettet for alle skjermstørrelser. Den lar deg justere hver seksjon i henhold til valg av visningsmodus. Det er uunngåelig å ha et mobilvennlig nettsted fordi Googles algoritme vurderer rangeringen av mobilvennlige nettsteder best. Responsive nettsteder er ikke bare viktige for å få bedre SEO, men du trenger også å få mer trafikk, fordi mer enn 80 % av trafikken kommer fra mobilvisninger.

Nå kommer Elementor-sidebyggeren med eksklusive funksjoner som lar brukerne lage et mobilvennlig nettsted uten mye innsats. Forhåpentligvis synes du artikkelen min er nyttig og har fått alle svarene dine på hvordan du lager et responsivt nettsted med Elementor.