Maak uw Elementor-website mobielvriendelijker en responsiever

Een mobiel responsieve website is een essentieel onderdeel van elk online bedrijf.

Google gebruikt de laadsnelheid van mobiele pagina's als een belangrijke bepalende factor voor de zoekresultaten van elke website. Dit komt vooral omdat meer dan de helft van het wereldwijde webverkeer afkomstig is van mobiel verkeer.

Daarom is een mobiel responsieve website onvermijdelijk, zowel voor de gezondheid van uw site als voor een betere ranking in de Google-zoekmachine. In dit artikel concentreren we ons op hoe we een mobiel responsieve website met de Elementor-paginabuilder.

• Wat is het responsieve website-ontwerp van Elementor
• Hoe u de instellingen voor mobiel, desktop en tabblad kunt aanpassen
• Pas de kop aan op uw mobiele display
• Pas de opvulling of marges voor mobiel aan
• Maak elke kolom horizontaal en deze past zich prachtig aan op alle apparaten
• Wijzig de achtergrondafbeelding volgens de mobiele/desktopweergave
• Wijzig de zichtbaarheid van elke sectie in de desktop-/mobiele weergave
• Wijzig de kolomvolgorde
• Maak een alternatieve sectie
• Pas de kolombreedte aan
• Conclusie

Wat is het responsieve website-ontwerp van Elementor

Een responsieve lay-out werkt innovatief door automatisch alle inhoud te schalen volgens elke schermgrootte. Het formaat van afbeeldingen en inhoud op het mobiele scherm wordt automatisch aangepast, zodat uw kijkers uw inhoud zonder enige moeite kunnen bekijken.

De meesten van ons kopen een thema dat beweert ook mobiel responsief te zijn; Het kan echter frustrerend zijn als het ontwerp van uw thema volledig mislukt op het mobiele scherm.

Om dergelijke situaties te overwinnen, hebben we een mobiel responsieve oplossing bedacht waarmee u uw website-ontwerp helemaal opnieuw kunt bouwen met behulp van van Elementor-paginabuilder . Met behulp van deze mobiel responsieve tools kunt u elke hoek van uw website-indeling aanpassen, met name typografie, opvulling, marge en mobiele uitlijning. U kunt ook de kolominstellingen wijzigen en bestellen op mobiel.

Nu kunt u de mobiele instelling van uw pagina bewerken door over te schakelen naar de mobiele weergavemodus en de volgende opties aan te vinken om deze aan te passen aan de mobiele lay-out.

1. Controleer of een kop er te groot uitziet op een mobiel scherm.
2. Controleer de opvulling van de inhoud of de ruimte aan de zijkanten van de inhoud
3. Controleer de uitlijning van de paginakolommen, hoe ziet deze er perfect uit; gecentreerd, rechts of links
4. Controleer de kolomvolgorde, als ze in de juiste volgorde verschijnen of als u deze moet wijzigen.

Laten we nu dieper graven en ontdekken hoe het gaat werken met Elementor Page Builder.

Hoe u de instellingen voor mobiel, desktop en tabblad kunt aanpassen

Bijna alle bewerkbare functies hebben de mogelijkheid om mobiel-, desktop- en tabbladinstellingen aan te passen. als u op de responsieve modus onderaan het menu klikt

Pas de kop aan op uw mobiele display

Soms willen we een gedurfde en prominente kop op onze desktopsite, en deze ziet er prima uit op het desktopscherm, maar wanneer u de mobiele weergave inschakelt, neemt de kop het hele scherm in beslag en lijkt deze niet te passen.

U kunt de tekstgrootte van elk tekstelement op het tabblad en mobiel aanpassen. U kunt ook verschillende tekstformaten instellen voor mobiele koppen die er geweldig uitzien op een mobiel scherm en beter op het scherm passen. Op deze demopagina heb ik een kop gemaakt die er geweldig uitziet op de desktopsite, terwijl deze op het mobiele scherm het volledige scherm beslaat.

Als ik op de bewerkingsoptie van de kopkolom klik, kan ik naar het typografiegedeelte gaan waar ik de kopgrootte kan aanpassen, wat er goed uitziet op de desktop en ook op het mobiele scherm. Ik kan beide afzonderlijk bedienen. Voor mijn desktopsiteweergave is de kopgrootte 49 px, maar in de mobiele weergave past dit niet

Om het aan te passen, klik ik op de mobiele responsieve modus> stijl> typografie> pas de px-grootte aan op 30, wat gemakkelijk op het mobiele scherm past.

Pas de opvulling of marges voor mobiel aan

Bij het aanpassen van opvullingen wordt aanbevolen om geen waarden in Pixels te gebruiken in plaats van waarden in EM of percentage in te stellen, omdat hierdoor de grootte relatief blijft ten opzichte van de totale schermgrootte.

Je kunt zien dat we opvulling als 70px rechts en links hebben gebruikt, wat er goed uitziet op de desktopsite; de mobiele weergave voor deze instelling is echter een complete puinhoop.

We kunnen de opvulling aan elke kant aanpassen naar 17 px, dan blijkt het helemaal in orde te zijn.

Als alternatief kunt u de instelling voor hele kolommen instellen op 750 px, waarbij uw inhoud in een vak wordt weergegeven zonder dat u het scherm hoeft aan te passen op zowel desktop- als mobiele weergave; het past automatisch de inhoud van de doos aan.

Maak elke kolom horizontaal en deze past zich prachtig aan op alle apparaten

Zodra u de kolom horizontaal heeft gemaakt, wat de ontwerpers het liefst doen, kunt u de secties dupliceren en tijd besparen. Maak sectie voor sectie en hergebruik deze als het goed gaat om tijd te besparen.

Wijzig de achtergrondafbeelding volgens de mobiele/desktopweergave

Sommige achtergrondafbeeldingen zien er goed uit op de desktopweergave, maar de mogelijkheid is dat de afbeelding er niet zo groter uitziet als op een mobiel scherm. Denk dus creatief na en kies een andere afbeelding op het mobiele scherm. Om een ​​andere mobiele weergave te selecteren, klikt u op het gedeelte > tabblad Stijl > klikt u op het apparaatpictogram en selecteert u de mobiele weergave. Welke afbeelding u ook kiest, deze verschijnt alleen in de mobiele weergave.

Wijzig de zichtbaarheid van elke sectie in de desktop-/mobiele weergave

U kunt ook de zichtbaarheid van elke sectie of kolom regelen, afhankelijk van het apparaat.

Soms geven we onze inhoud of afbeeldingen weer in twee of drie secties of verschillende kolommen, maar we houden er niet van om deze op mobiel weer te geven. Daarom kan Elementor de sectie verbergen die u niet graag in de mobiele weergave wilt weergeven.

Ga naar > sectie-instellingen > geavanceerd >responsief Daar zie je verschillende mogelijkheden of visuele voorkeuren; u kunt de sectie op het bureaublad verbergen, op het tabblad verbergen of op mobiel verbergen, afhankelijk van uw voorkeur.

Wijzig de kolomvolgorde

U kunt de kolomvolgorde ook wijzigen via het instellingengedeelte. Ga naar; sectie-instellingen> Geavanceerd>Responsief>Kolom omkeren en klik op Ja.

Maak een alternatieve sectie

Creëer alternatieve secties in de mobiele en desktopweergave. Soms ziet het schuifregelaargedeelte er op mobiel niet zo handig uit als op de desktop, zodat u een ander gedeelte kunt gebruiken in plaats van het schuifregelaargedeelte. U kunt dit doen door naar het tabblad Geavanceerd te gaan > de zichtbaarheid van de sectie die u niet wilt weergeven in of uit te schakelen en er een alternatieve afbeelding aan toe te voegen.

Pas de kolombreedte aan

Alle kolomsecties krijgen 100% breedte wanneer u ze in de mobiele weergave bekijkt. De breedte kan echter worden gewijzigd volgens de kolombreedte op mobiel. Als u twee kolommen heeft, kunt u de maximale breedte van elke sectie instellen op 50%.

Conclusie

Elementor wordt geleverd met alle krachtige functies om de responsieve kolomindeling van alle schermformaten te regelen. Hiermee kunt u elke sectie opnieuw aanpassen volgens de selectie van de weergavemodus. Het bijhouden van een mobielvriendelijke website is onvermijdelijk omdat het algoritme van Google mobielvriendelijke websites het meest rangschikt. Responsieve websites zijn niet alleen essentieel voor een betere SEO, maar je moet ook meer verkeer genereren, omdat meer dan 80% van het verkeer afkomstig is van mobiele weergaven.

Nu wordt de Elementor-paginabuilder geleverd met exclusieve functies waarmee gebruikers zonder veel moeite een mobielvriendelijke site kunnen maken. Hopelijk vind je mijn artikel nuttig en heb je al je antwoorden gekregen over hoe je een responsieve website kunt maken met Elementor.