Veel beginners ondervinden een probleem: als ze een pagina op een computer ontwerpen, wordt de tekst op een mobiele telefoon te compact weergegeven en staan de afbeeldingen niet op de juiste plek. Dit komt doordat er geen rekening is gehouden met 'responsief ontwerp'. Elementor beschikt over krachtige responsieve bewerkingsfuncties, waardoor websites er op een computer, tablet of mobiele telefoon mooi en gebruiksvriendelijk uitzien, zonder dat hier veel voor hoeft te worden ingesteld.
Wat is responsief ontwerp?
Om het simpel te zeggen,Responsief ontwerp houdt in dat de lay-out van een webpagina automatisch wordt aangepast aan de grootte van het scherm van het apparaat.：
- Op een computer (met een groot scherm) wordt de inhoud mogelijk naast elkaar weergegeven (bijvoorbeeld drie rijen met afbeeldingen);
- Op een tablet (schermdiagonaal) worden de items automatisch in twee kolommen weergegeven;
- Op mobiele telefoons (met kleine schermen) worden teksten automatisch in één kolom weergegeven, zodat de tekst niet te klein is of overloopt.
Elementor past zich automatisch aan de meeste scenario's aan, maar het is nog steeds nodig om de details handmatig te optimaliseren om ervoor te zorgen dat elk apparaat de beste ervaring heeft.
De eerste stap: het leren kennen van de responsieve bewerkingsmodus van Elementor.
Na het betreden van de editieomgeving van Elementor, zie je rechts in de bovenste werkbalk drie pictogrammen die overeenkomen met de weergave op drie verschillende apparaten:
- 🖥️ Desktopweergave(Standaard weergave)
- 📱 Platte weergave(Een breedte van ongeveer 768 pixels)
- 📱 Mobiele weergave(Ongeveer 375 pixels breed)
De werkwijzeKlik op het bijbehorende pictogram om naar de previewmodus van het apparaat te gaan. Alle stijlwijzigingen (zoals lettergrootte, tussenruimte en lay-out) kunnen afzonderlijk voor elk apparaat worden ingesteld, zonder dat dit invloed heeft op de andere apparaten.
De tweede stap: de kerinstellingen voor responsief ontwerp (3 vereiste acties)
1. De grootte van de tekst: voorkom dat de tekst op je telefoon te klein of te groot is.
De tekst die op een computer goed leesbaar is, is op een mobiele telefoon mogelijk niet goed leesbaar (te klein) of bevat te veel witruimte (te groot) en vereist extra aanpassingen:
- Selecteer de tekstmodule (kop, alinea, etc.) en ga naar het 'Stijl'-paneel aan de rechterkant.
- Zoek de instelling 'Lettergrootte' en klik op het 'responsieve pictogram' naast de waarde (het pictogram van een kleine computer). Als je hierop klikt, worden drie invoervelden weergegeven voor respectievelijk desktops, tablets en mobiele telefoons.
- Switch naar de 'mobiele weergave' en voer direct de juiste afmetingen in (bijvoorbeeld 24-32 px voor koppen en 14-16 px voor alinea's op mobiele apparaten).
de aandacht op iets vestigenDe tekstgrootte moet voldoen aan het principe 'hoe kleiner het scherm, hoe kleiner de tekst, maar wel duidelijk genoeg', zodat de tekst op een mobiele telefoon zonder vergroting goed leesbaar is.
2. Afbeeldingen en de breedte van de module: voorkom dat ze buiten het scherm komen.
Een afbeelding die op een computer is ingesteld op '80% breedte', kan op een mobiele telefoon nog steeds te breed zijn of te veel witruimte aan de zijkanten hebben:
- Selecteer de afbeelding of module en ga naar het 'Stijl'-paneel aan de rechterkant (de afbeelding bevindt zich onder 'Stijl' → 'Breedte'; voor andere modules kan dit onder 'Geavanceerd' → 'Breedte' zijn).
- Klik op het 'responsieve pictogram' naast de waarde 'Breedte' om naar de 'Mobiele weergave' te schakelen.
- Stel de breedte in op '100%' (zodat de afbeelding of module de volledige breedte van het scherm van de telefoon bedekt en er geen witruimte aan de zijkanten is) of pas dit aan naar wens (bijvoorbeeld 90%, waarbij er een kleine marge wordt behouden).
Let opAls de afbeelding zelf te klein is, wordt deze wazig als je de resolutie instelt op 100%. Het wordt aanbevolen om van tevoren een afbeelding met een hoge resolutie voor te bereiden (met een breedte van ten minste 1000 pixels).
3. Ruimte en marges: voorkom dat de inhoud te dicht op elkaar komt te staan.
De schermruimte op mobiele telefoons is beperkt. Als de afstand tussen de modules te groot is, wordt ruimte verspild, en als deze te klein is, ziet het er te druk uit:
- Selecteer een willekeurige module (bijvoorbeeld een knop of alinea) en ga naar het 'Geavanceerde'-paneel aan de rechterkant.
- Zoek de 'buitenrand' (de afstand tussen de module en andere elementen) of de 'binnenrand' (de afstand tussen de inhoud van de module en de rand) en klik op het 'responsieve pictogram' naast de waarde.
- Switch naar de 'mobiele weergave' en verminder de waarden (bijvoorbeeld, verander de bovenrand van 50px naar 20px, zodat de module compacter wordt).
Technieken: Houd het ingedrukt Ctrl Door meerdere modules tegelijkertijd te selecteren met de toets, kun je de spatiëring in bulk aanpassen, waardoor je efficiënter werkt.
De derde stap: aanpassing van de lay-out (optimalisatie van de kolomlay-out op mobiele apparaten)
Als je op je startpagina gebruik maakt van een 'meer kolommen-lay-out' (bijvoorbeeld 3 kolommen met een beschrijving van de diensten of 2 kolommen met afbeeldingen en teksten), kan dit op mobiele apparaten te druk worden. Het is beter om over te schakelen naar één kolom:
- Zoek een 'Section (blok)' met meerdere kolommen (klik op het blauwe stippellijntje buiten de module om het hele blok te selecteren).
- Ga naar het paneel 'Layout' aan de rechterkant en zoek de instelling 'Columns' (momenteel is dit '3 kolommen').
- Klik op het responsieve pictogram naast de kolomwaarden en schakel over naar de 'Mobiele weergave'.
- Wijzig het aantal kolommen in '1 kolom'. Op deze manier worden de items op je telefoon automatisch in één kolom weergegeven, waardoor de inhoud overzichtelijker wordt.
VoorbeeldOp een computer worden producten in drie kolommen weergegeven, op een tablet in twee kolommen en op een mobiele telefoon in één kolom. Hierdoor wordt zowel de ruimte op het grote scherm optimaal benut als wordt de leesbaarheid op kleinere schermen gewaarborgd.
Stap 4: Verberg onnodige elementen (voor kleine schermen)
Er zijn bepaalde elementen die een pagina op een computer verrijken, maar die op een mobiele telefoon overbodig zijn (zoals complexe decoratieve pictogrammen en lange teksten met uitleg). Deze kunnen op een mobiele telefoon worden verborgen:
- Selecteer de module die je wilt verbergen en ga naar het 'Geavanceerd'-paneel aan de rechterkant.
- Scrol omlaag naar de instellingen voor 'responsief' en zoek de optie 'Verberg op mobiele apparaten' (of selecteer 'Verberg op desktops' en 'Verberg op tablets').
- Vink het vakje 'Verbergen op mobiele apparaten' aan. De module verdwijnt automatisch uit het mobiele weergavevenster en heeft geen invloed op de weergave op computers en tablets.
Toepasselijke scenario'sDecoratieve zijbalkpictogrammen en contactformulieren die speciaal bedoeld zijn voor computers (en die op mobiele apparaten kunnen worden vervangen door eenvoudigere formulieren).
Stap 5: Voorvertoning en testen (een cruciale stap)
Als de instellingen zijn voltooid, moet je ze op een echt apparaat testen (of ze nauwkeurig controleren met de preview-functie van Elementor):
- Preview binnen ElementorKlk achtereenvolgens op de pictogrammen 'Desktop', 'Tablet' en 'Mobiel', en scroll op de pagina om elke module te controleren:
- Wird de tekst volledig weergegeven (zonder afkapping of overlapping)?
- Zijn de foto's scherp en bedekken ze het scherm volledig (zonder dat ze worden uitgerekt of vervormd)?
- Is de knop groot genoeg (ten minste 44 bij 44 pixels op een mobiele telefoon, zodat deze gemakkelijk te klikken is)?
- Testen op echte apparatenScan de 'QR-code' bovenin Elementor met je mobiele telefoon en open de pagina op je eigen telefoon. Probeer de bedieningsknoppen en invoervelden uit en ervaar hoe soepel het schuift.
- Het oplossen van veelvoorkomende problemen.：
- Als de tekst op een onoverzichtelijke manier wordt afgebroken: verklein de lettergrootte op je mobiele telefoon of vergroot de breedte van de module.
- Als de afbeelding vervormd is: stel 'Objectaanpassing' op 'Overlappen' in de mobiele versie (Afbeelding → Stijl → Objectaanpassing).
- Als de knop te klein is: vergroot de 'interne marges' van de knop op mobiele apparaten (minimaal 15 pixels aan de boven- en onderkant en 20 pixels aan de zijkanten).
De principes van responsief ontwerp die elke beginner moet onthouden
- Mobiel eerstHet ontwerp begint met het mobiele weergavevenster en wordt vervolgens uitgebreid naar de computer (om grote wijzigingen in een latere fase te voorkomen).
- Minder is meer.De schermruimte op mobiele telefoons is beperkt, dus er wordt alleen de kerninhoud weergegeven en worden overbodige elementen verwijderd.
- ConsistentieDe kleuren en lettertypen blijven op alle apparaten hetzelfde, zodat bezoekers niet in de war raken.
- Regelmatige controlesNa het toevoegen van elke nieuwe module, schakel je over naar de mobiele weergave om te controleren of alles correct wordt weergegeven.
Met bovenstaande stappen zorg je ervoor dat je website er op elke computer, tablet of mobiele telefoon professioneel uitziet. Responsief ontwerp lijkt misschien ingewikkeld, maar als je het een paar keer met Elementor hebt geprobeerd, zul je zien dat je met slechts enkele cruciale aanpassingen voor verschillende apparaten 90% van de weergaveproblemen van TP4T kunt oplossen. Oefen en test veel en je krijgt het snel onder de knie!
Nederlands