Maak uw Elementor-website mobielvriendelijker en responsiever

Een mobielvriendelijke website is een essentieel onderdeel van elk online bedrijf.

Google gebruikt de laadsnelheid van mobiele pagina's als een belangrijke factor voor de zoekranking van een website. Dit komt voornamelijk doordat meer dan de helft van het wereldwijde webverkeer afkomstig is van mobiele apparaten.

Een mobielvriendelijke website is daarom onmisbaar, zowel voor de gezondheid van je site als voor een betere ranking in de Google-zoekresultaten. In dit artikel gaan we dieper in op hoe je met de Elementor page builder mobielvriendelijke website

• Wat is het responsieve websiteontwerp van Elementor?
• Hoe pas ik de instellingen voor mobiel, desktop en tablet aan?
• De koptekst aanpassen op je mobiele scherm
• Pas de opvulling of marges aan voor mobiele apparaten
• Maak elke kolom horizontaal aan, en hij zal zich perfect aanpassen aan alle apparaten
• Achtergrondafbeelding aanpassen aan de weergave op mobiel/desktop
• De zichtbaarheid van een sectie wijzigen in de desktop-/mobiele weergave
• Wijzig de kolomvolgorde
• Maak een alternatieve sectie aan
• Kolombreedte aanpassen
• Conclusie

Wat is het responsieve websiteontwerp van Elementor?

Een responsieve lay-out werkt innovatief door alle content automatisch aan te passen aan de schermgrootte. Afbeeldingen en content worden automatisch op mobiele schermen verkleind, zodat uw bezoekers uw content moeiteloos kunnen bekijken.

De meesten van ons kopen een thema dat beweert ook geschikt te zijn voor mobiele apparaten; het kan echter frustrerend zijn als het ontwerp van je thema volledig mislukt op het mobiele scherm.

Om dergelijke situaties te verhelpen, hebben we een mobielvriendelijke oplossing ontwikkeld waarmee u uw websiteontwerp helemaal vanaf nul kunt opbouwen met behulp van van Elementor Page Builder . Met deze mobielvriendelijke tools kunt u elk aspect van uw website-lay-out aanpassen, met name typografie, opvulling, marges en mobiele uitlijning. Ook kunt u de kolominstellingen en -volgorde op mobiele apparaten wijzigen.

Je kunt nu de mobiele instellingen van je pagina bewerken door over te schakelen naar de mobiele weergavemodus en de volgende opties aan te vinken om de lay-out aan te passen aan de mobiele weergave.

1. Controleer of een koptekst te groot wordt weergegeven 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 het er perfect uit? Gecentreerd, rechts of links?
4. Controleer de kolomvolgorde; als de kolommen in de juiste volgorde staan, moet u deze mogelijk wijzigen.

Laten we nu eens dieper ingaan op hoe Elementor Page Builder precies werkt.

Hoe pas ik de instellingen voor mobiel, desktop en tablet aan?

Bijna alle bewerkbare functies bieden de mogelijkheid om de instellingen voor mobiel, desktop en tablet aan te passen. Klik hiervoor op de responsieve modus onderaan het menu

De koptekst aanpassen op je mobiele scherm

Soms willen we een opvallende en prominente kop op onze desktopwebsite, en die ziet er prima uit op het scherm, maar wanneer je overschakelt naar de mobiele weergave, vult de kop het hele scherm en past hij niet meer.

Je kunt de tekstgrootte van elk tekstelement aanpassen op zowel tablets als mobiele apparaten. Je kunt ook verschillende tekstgroottes instellen voor mobiele koppen, zodat ze er op mobiele schermen goed uitzien en beter in het scherm passen. Op deze demopagina heb ik een kop gemaakt die er op de desktopversie van de website geweldig uitziet, maar op een mobiel scherm het hele scherm vult.

Als ik op de bewerkingsoptie van de koptekstkolom klik, kan ik naar de typografie-sectie gaan waar ik de koptekstgrootte kan aanpassen. Deze ziet er goed uit op zowel desktop- als mobiele schermen. Ik kan beide afzonderlijk aanpassen. Op mijn desktopweergave is de koptekstgrootte 49px, maar op mobiel past deze niet

Om het aan te passen, klik ik op de mobielvriendelijke modus > stijl > typografie > pas de pixelgrootte aan naar 30, wat gemakkelijk op het mobiele scherm past.

Pas de opvulling of marges aan voor mobiele apparaten

Bij het aanpassen van de opvulling wordt aangeraden geen waarden in pixels te gebruiken, maar waarden in EM of percentages, omdat de grootte dan relatief blijft ten opzichte van de totale schermgrootte.

Zoals je kunt zien, hebben we een opvulling van 70px aan de linker- en rechterkant gebruikt, wat er goed uitziet op de desktopversie van de website; op mobiele apparaten is deze instelling echter een complete ramp.

Als we de opvulling aan elke kant aanpassen naar 17 px, dan is het helemaal in orde.

Als alternatief kunt u de instelling voor de hele kolom op 750 px zetten. Uw inhoud wordt dan in een kader weergegeven zonder dat u het scherm hoeft aan te passen, zowel op desktop als op mobiel; de inhoud wordt automatisch binnen het kader geplaatst.

Maak elke kolom horizontaal aan, en hij zal zich perfect aanpassen aan alle apparaten

Zodra je een kolom horizontaal hebt gemaakt, wat de voorkeur heeft van de meeste ontwerpers, kun je de secties dupliceren en tijd besparen. Maak één sectie tegelijk en hergebruik deze als het goed gaat om tijd te besparen.

Achtergrondafbeelding aanpassen aan de weergave op mobiel/desktop

Sommige achtergrondafbeeldingen zien er goed uit op een desktop, maar de kans bestaat dat ze er op een mobiel scherm minder mooi uitzien. Wees daarom creatief en kies een andere afbeelding voor de mobiele weergave. Om een ​​andere mobiele weergave te selecteren, ga je naar het gedeelte > tabblad Stijl > klik je op het apparaatpictogram en selecteer je de mobiele weergave. De afbeelding die je kiest, wordt nu alleen op mobiele apparaten weergegeven.

De zichtbaarheid van een sectie wijzigen in de desktop-/mobiele weergave

Je kunt de zichtbaarheid van elke sectie of kolom ook aanpassen aan het apparaat.

Soms tonen we onze content of afbeeldingen in twee of drie secties of verschillende kolommen, maar willen we dit niet op mobiele apparaten weergeven. Daarom kan Elementor de sectie die je niet op mobiele apparaten wilt tonen, verbergen.

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

Wijzig de kolomvolgorde

Je kunt de kolomvolgorde ook wijzigen via de instellingen. Ga naar: instellingen > Geavanceerd > Responsief > Kolommen omkeren en klik op 'Ja'.

Maak een alternatieve sectie aan

Maak alternatieve secties aan voor de mobiele en desktopweergave. Soms ziet de schuifregelaar er op mobiel minder aantrekkelijk uit dan op de desktop. In dat geval kunt u een andere sectie gebruiken. Ga hiervoor naar het tabblad 'Geavanceerd' > schakel de zichtbaarheid van de sectie die u niet wilt weergeven in of uit en voeg een alternatieve afbeelding toe.

Kolombreedte aanpassen

Alle kolomsecties krijgen een breedte van 100% wanneer je ze op mobiele apparaten bekijkt. De breedte kan echter worden aangepast aan de kolombreedte op mobiel. Als je twee kolommen hebt, kun je de maximale breedte van elke sectie instellen op 50%.

Conclusie

Elementor biedt alle krachtige functies om de responsieve kolomindeling voor alle schermformaten te beheren. Je kunt elke sectie aanpassen aan de geselecteerde weergavemodus. Een mobielvriendelijke website is essentieel, omdat het Google-algoritme mobielvriendelijke websites het zwaarst meetelt in de ranking. Responsieve websites zijn niet alleen belangrijk voor betere SEO, maar zorgen ook voor meer verkeer, aangezien meer dan 80% van het verkeer afkomstig is van mobiele apparaten.

De Elementor paginabouwer beschikt nu over exclusieve functies waarmee gebruikers moeiteloos een mobielvriendelijke website kunnen maken. Hopelijk vond je mijn artikel nuttig en heb je alle antwoorden gekregen op de vraag hoe je een responsieve website kunt maken met Elementor.