Bij het bouwen en opmaken van je webpagina’s kun je gelijk je Divi modules optimaliseren voor tablet- en mobiele schermen. Het Divi-thema biedt handige functies om je module-instellingen op desktop, tablet en mobiele apparaten in te stellen. Hierdoor ziet je website op elk schermformaat er goed uit. Dit verhoogt de gebruikerservaring op alle apparaten en is onderdeel van een responsive ontwerp.
De module-instellingen voor verschillende apparaten aanpassen
De meeste instellingen in Divi modules om het voor desktop, tablet en mobiel aan te passen vind je onder de tab ‘Ontwerp’ van de module. In dit voorbeeld laat ik je de stappen zien hoe je de desktop, tablet en mobiele waarden van een koptitel in een tekst module aanpast.
Maak gebruik van koptitels
Ik maak op elke webpagina die ik bouw gebruik van koptitels. Dit maakt de tekst beter leesbaar en overzichtelijk. Plus, een groot voordeel, het zorgt voor optimalisatie van je vindbaarheid van je webpagina en in het geheel je website. De regel is: voeg 1x keer een koptitel 1 (heading 1) toe. De overige koppen geef je een koptitel 2 (heading 2) mee. Je kan er voor kiezen ook een koptitel 3 toe te voegen voor een minder belangrijke kop.
Het kan er dan zo uit zien:
Koptitel H2
Koptitel H3
De tekstgrootte van alle koptitels (h1 t/m h6) in een Divi tekst module kun je aanpassen voor desktop-, tablet en mobiele schermen. Ik laat je hieronder zien hoe.
1. Open de module-instellingen
Navigeer naar de pagina waar je een bestaande tekst module wilt aanpassen.
Klik vervolgens op het tandwiel icoon van de tekst module om de instellingen te openen.
Is er nog geen koptitel 1 of 2 aanwezig? Voeg dan eerst in de tab ‘Content’ een koptitel toe.
2. Navigeer naar koptitel aanpassen
Ga naar het tabblad ‘Ontwerp’ binnen de module-instellingen.
De eerste 2 dropdowns die verschijnen zijn ‘Tekst’ en ‘Tekst ondertitel’. Koptitel is vrij vertaald naar ‘Tekst ondertitel’, hier vind je de instellingen voor alle 6 de koptitels.
3. Activeer responsieve tekst opties
Klik op ‘Tekst ondertitel’ en je ziet H1, H2, H3, etc.
Selecteer H1 wanneer je koptitel 1 wilt aanpassen, selecteer H2 als je koptitel 2 wilt aanpassen.
Scroll naar beneden naar ‘Titel Tekst Grootte’.
Wanneer je met je muisaanwijzer zweeft over ‘Titel Tekst Grootte’ verschijnt rechts hiervan een mobiel icoontje.
Klik hierop en tabbladen voor desktop-, tablet- en telefooninstellingen verschijnt.
4. Stel verschillende waarden in voor elk apparaat
Voor desktop is al een waarde in pixels ingevuld. Pas deze aan naar wens.
Schakel over naar het tabblad met het tablet icoon en voer een andere waarde in die geschikt is voor tabletschermen.
Selecteer ten slotte het tabblad met het mobiel icoon en pas de tekstgrootte aan zodat deze op mobiele schermen past.
Voorbeeld:
Titel tekst grootte 36 pixels voor desktop is een optie. Voor dezelfde koptitel op mobiel kan dit te groot zijn. Pas dan de waarde aan naar 30 pixels of minder. Hierbij los je gelijk een veel voorkomend probleem op bij lange woorden in de koptitel. Namelijk dat lange woorden niet goed worden afgebroken naar de volgende regel. Door de koptitel grootte in pixels te verlagen past het wel.
5. Opslaan van je wijzigingen
Nadat je de gewenste waarden voor alle schermen hebt ingesteld, klik je op het groene vinkje om je wijzigingen op te slaan. Zorg ervoor dat je webpagina publiceert of bijwerkt om de wijzigingen toe te passen.
Wanneer je de pagina nu bekijkt wordt de koptitel in diverse groottes responsive getoond, afhankelijk van op welk apparaat en/of browser breedte je kijkt.
Vele webdevelopers bouwen een website waarbij het scherm in ‘mobile modus’ wordt getoond. Zij hanteren de benadering ‘mobile first’. De reden is dat de afgelopen jaren het mobiel gebruik sterk is opgelopen.
0 reacties