Maak uw Elementor-website mobielvriendelijker responsief

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 zoekrangschikking van een 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 positie in de Google-zoekmachine. In dit artikel zullen we ons concentreren op hoe we een mobiel responsieve website met de Elementor-paginabuilder.

• Wat is het responsieve websiteontwerp van Elementor
• Hoe u de instellingen voor mobiel, bureaublad en tabbladen aanpast
• Pas de kop aan op uw mobiele display
• Pas opvulling of marges voor mobiel aan
• Maak elke kolom horizontaal en hij past zich prachtig aan op alle apparaten
• Verander de achtergrondafbeelding volgens de weergave mobiel / desktop
• Verander de zichtbaarheid van een sectie op de desktop / mobiele weergave
• Wijzig de kolomvolgorde
• Maak een alternatieve sectie
• Kolombreedte aanpassen
• Conclusie

Wat is het responsieve websiteontwerp van Elementor

Een responsieve lay-out werkt innovatief door alle inhoud automatisch te schalen op basis van elke schermgrootte. Het past automatisch afbeeldingen en inhoud op het mobiele scherm aan, 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 wanneer het ontwerp van uw thema volledig uitvalt op het mobiele scherm.

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

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

1. Controleer of een kop te groot lijkt op een mobiel scherm.
2. Controleer de opvulling van de inhoud of ruimte aan de zijkanten van de inhoud
3. Controleer de uitlijning van de paginakolom, 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 ingaan en kijken hoe het gaat werken met Elementor Page Builder.

Hoe u de instellingen voor mobiel, bureaublad en tabbladen aanpast

Bijna alle bewerkbare functies hebben de mogelijkheid om de instellingen voor mobiel, desktop en tabblad aan te passen. als je klikt op de responsive mode onderaan het menu

Pas de kop aan op uw mobiele display

Soms willen we een gedurfde en prominente kop op onze desktop-site, en het ziet er prima uit op het desktop-display, maar wanneer je de mobiele weergave inschakelt, neemt de kop het hele scherm in beslag en lijkt het er niet in te passen.

U kunt de tekstgrootte van elk tekstelement op tabblad en mobiel aanpassen. U kunt ook verschillende tekstgroottes instellen voor mobiele koppen die er geweldig uitzien op een mobiel scherm en op een betere manier in 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 hele scherm in beslag neemt.

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

Om opnieuw aan te passen, klik ik op de mobiel reagerende modus> stijl> typografie> pas de px-grootte aan tot 30 die gemakkelijk in het mobiele scherm past.

Pas 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 ten opzichte van de algehele schermgrootte behouden blijft.

Je kunt zien dat we padding hebben gebruikt als 70px rechts en links, wat er goed uitziet op de desktop-site; 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 de hele kolommen instellen op 750 px, waar uw inhoud in een vak wordt weergegeven zonder dat u het scherm op zowel desktop- als mobiele weergave hoeft aan te passen; het past automatisch de inhoud in de doos aan.

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

Zodra u een kolom horizontaal hebt gemaakt, wat de ontwerpers het liefst hebben, kunt u de secties dupliceren en tijd besparen. Maak één sectie tegelijk en hergebruik deze vervolgens als het goed gaat om tijd te besparen.

Verander de achtergrondafbeelding volgens de weergave mobiel / desktop

Sommige achtergrondafbeeldingen zien er goed uit op de desktopweergave, maar de mogelijkheid is dat de afbeelding er niet zo groot uitziet als op het mobiele scherm. Denk dus creatief na en kies een andere afbeelding op het mobiele scherm. Klik voor het selecteren van een andere mobiele weergave op de sectie> tabblad Stijl> klik op het apparaatpictogram en selecteer de mobiele weergave. Welk beeld u ook kiest, het verschijnt alleen op de mobiele weergave.

Verander de zichtbaarheid van een sectie op de desktop / mobiele weergave

U kunt ook de zichtbaarheid van een sectie of kolom regelen op basis 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 op de mobiele weergave wilt weergeven.

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

Wijzig de kolomvolgorde

U kunt de kolomvolgorde ook wijzigen in het instellingengedeelte. Ga naar; sectie-instellingen> Geavanceerd> Responsief> Omgekeerde kolom en klik op ja.

Maak een alternatieve sectie

Maak alternatieve secties op mobiele en desktopweergave. Soms ziet het schuifgedeelte er niet zo handig uit op mobiel als op het bureaublad, dus u kunt elk ander gedeelte gebruiken in plaats van het schuifgedeelte. U kunt dit doen door naar het tabblad Geavanceerd te gaan> de zichtbaarheid van de sectie die u niet wilt weergeven aan / uit te zetten en er een alternatieve afbeelding aan toe te voegen.

Kolombreedte aanpassen

Alle kolomsecties krijgen 100% breedte wanneer u ze op de mobiele weergave bekijkt. De breedte kan echter worden gewijzigd per 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 behouden van een mobielvriendelijke website is onvermijdelijk omdat het Google-algoritme het rangschikken van mobielvriendelijke websites het meest in overweging neemt. Responsieve websites zijn niet alleen essentieel voor een betere SEO, maar je moet ook meer bezoekers trekken, want meer dan 80% van het verkeer komt van mobiele weergaven.

Nu wordt 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 het maken van een responsieve website met Elementor.