Gør dit Elementor-websted mere mobilvenligt lydhør

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

Google har brugt mobil sidehastighed som en nøgledeterminant for ethvert websteds søgerangering. Det skyldes hovedsageligt, at 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 webstedsdesign
• 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 justeres vidunderligt på tværs af alle enheder
• Skift baggrundsbillede som pr. Mobil / desktop-visning
• Skift synlighed for alle sektioner på desktop / mobilvisning
• Skift kolonne rækkefølge
• Opret en alternativ sektion
• Juster kolonnebredden
• Konklusion

Hvad er Elementors responsive webstedsdesign

Et responsivt layout fungerer innovativt ved automatisk at skalere alt indholdet efter hver skærmstørrelse. Det ændrer automatisk størrelsen på billeder og indhold på mobilskærmen, så dine seere kunne se dit indhold uden nogen anstrengelse.

De fleste af os køber også et tema, der hævder at være mobile lydhør; ting kan dog være frustrerende, når dit temas design helt nedbrydes på mobilskærmen.

For at overvinde sådanne situationer har vi fundet frem til en mobil responsiv løsning, hvor du kan bygge dit webstedsdesign 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 indstillinger for at justere i henhold til mobillayoutet.

1. Kontroller, om en overskrift ser for stor ud på en mobilskærm.
2. Kontroller polstring af indholdet eller mellemrummet på siderne af indholdet
3. Kontroller sidekolonnejusteringen, hvordan ser den perfekt ud; centreret, højre eller venstre
4. Kontroller kolonnens rækkefølge, hvis de vises i den rigtige rækkefølge, eller du er nødt til at ændre den.

Lad os nu grave dig dybere ud og finde ud af, hvordan tingene går i gang 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å responsiv tilstand nederst i menuen

Juster overskrift på din mobilskærm

Nogle gange vil vi gerne have en fed og fremtrædende overskrift på vores skrivebordsside, og det ser perfekt ud på skrivebordsskærmen, men når du tænder for mobilvisningen, tager overskriften hele skærmen og ser ikke ud som den passer ind.

Du kan justere tekststørrelsen på ethvert tekstelement på fanen og Mobile. Du kan også indstille forskellige tekststørrelser til mobile overskrifter, der ser godt ud på mobilskærmen og passer ind på skærmen på en bedre måde. På denne demoside har jeg oprettet en overskrift, der ser godt ud på skrivebordssiden, mens det på mobilskærmen tager hele skærmen.

Hvis jeg klikker på redigeringsindstillingen i overskriftskolonnen, kan jeg gå ind i typografisektionen, hvor jeg kan justere overskriftsstørrelsen, der ser fin ud på skrivebordet og også på mobilskærmen. Jeg kan styre begge hver for sig. For min desktopwebsidevisning er overskriftens størrelse 49px, men i mobilvisning passer det ikke ind

For at justere igen skal jeg klikke på den responsive mobiltilstand> stil> typografi> justere px-størrelse til 30, som let passer ind på mobilskærmen.

Juster polstring eller marginer til mobil

Ved justering af polstring anbefales det ikke at bruge værdier i Pixels i stedet for indstillede værdier i EM eller procentdel, fordi det vil bevare 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; dog er mobilvisning til denne indstilling 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 vises i et felt uden behov for at justere skærmen på både desktop- eller mobilvisning. det justerer automatisk indholdet i feltet.

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

Når du opretter kolonne vandret, som designerne foretrækker mest, kan du duplikere sektionerne og spare tid. Opret et afsnit ad gangen og brug derefter det igen, hvis det går godt at spare tid.

Skift baggrundsbillede som pr. Mobil / desktop-visning

Nogle baggrundsbilleder ser godt ud på skrivebordsvisningen, men muligheden er, at billedet ikke ser 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 skal du klikke på afsnittet> faneformat> klik på enhedsikonet og vælge mobilvisning. Uanset hvilket billede du vælger vises det kun på mobilvisningen.

Skift synlighed for alle sektioner på desktop / mobilvisning

Du kan også kontrollere synligheden af ​​alle sektioner eller kolonner 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. Derfor kan Elementor skjule det afsnit, som du ikke kan lide at vise i mobilvisning.

Gå til> sektionsindstillinger> avanceret> lydhør Her kan 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 kolonne rækkefølge

Du kan også ændre søjlerækkefølgen fra indstillingsafsnittet. Gå til; sektionsindstillinger> Avanceret> Responsiv> Omvendt kolonne og klik på ja.

Opret en alternativ sektion

Opret alternative sektioner på mobil- og desktopvisning. Undertiden ser glidesektionen ikke så nyttig ud på Mobil som på skrivebordet, så du kan bruge ethvert andet afsnit i stedet for at bruge skyderen. Du kan gøre dette ved at gå til fanen Avanceret> tænde / slukke synligheden af ​​det afsnit, du ikke ønsker at vise, og tilføje et alternativt billede på det.

Juster kolonnebredden

Alle søjlesektionerne får 100% bredde, når du ser dem på mobilvisningen. Imidlertid kan bredden ændres som pr. Søjlebredde på Mobile. Hvis du har to kolonner, kan du indstille maksimal bredde for hvert afsnit til 50%.

Konklusion

Elementor leveres med alle de kraftfulde funktioner til at kontrollere det responsive søjlelayout i alle skærmstørrelser. Det giver dig mulighed for at justere hvert afsnit efter valg af visningstilstand. Det er uundgåeligt at opbevare et mobilvenligt websted, fordi Google-algoritmen vurderer at placere mobilvenlige websteder mest. Responsive websteder er ikke kun vigtige for at få bedre SEO, men du skal også få mere trafik, fordi mere end 80% af trafikken kommer fra mobilvisninger.

Nu leveres Elementor-sidebygger med eksklusive funktioner, der giver brugerne mulighed for at oprette et mobilvenligt websted uden stor indsats. Forhåbentlig finder du, at min artikel er nyttig og fik alle dine svar på, hvordan man opretter et responsivt websted ved hjælp af Elementor.