Mobiele versie bewerken

WordPress-sites gebruiken responsieve designs: er is geen aparte mobiele versie om te bewerken. In deze handleiding leer je hoe je kan aanpassen hoe je content wordt weergegeven op mobiele apparaten met behulp van blokinstellingen en CSS.

Het navigatieblok bevat instellingen voor de mobiele menuknop (bekend als een ‘hamburger’-pictogram). Je menu op mobiel aanpassen:

1. Ga vanaf het dashboard van je site naar Weergave → Editor.
2. Selecteer de template of het template-onderdeel waarvan je wilt dat het navigatiemenu wordt weergegeven.
3. Open lijstweergave en selecteer het navigatieblok.
4. Klik in de sidebar met blokinstellingen op het pictogram instellingen (tandwielpictogram).

5. In het gedeelte Weergeven:
   • Schakel ‘Pictogramknop tonen‘ in om een hamburger pictogram te gebruiken of ‘Menu’-tekst te tonen.
   • Kies de stijl van je pictogram (twee of drie lijnen) en selecteer wanneer het hamburgerpictogram wordt weergegeven met behulp van de instellingen van het overlay-menu.

Bekijk meer informatie over het je site opmaken.

Met sommige lay-outblokken kun je bepalen of inhoud verticaal op mobiele schermen stapelt. Standaard stapelt WordPress automatisch inhoud naast elkaar op kleinere schermen om het leesbaar te houden.

Volg deze stappen om het stapelgedrag aan te passen:

1. Ga vanaf het dashboard van je site naar Weergave → Editor.
2. Bewerk de pagina of template met het blok dat je wilt aanpassen.
3. Open lijstweergave en selecteer het blok.
4. Schakel in de blokinstellingen ‘Stapelen op mobiel‘ in of uit.

Blokken met de instelling ‘Stapelen op mobiel’:

• Kolommen
• Media & tekst
• Laatste Instagram berichten

Knoppen en menu’s zijn beter leesbaar op mobiele apparaten wanneer ze op meerdere regels worden geplaatst in plaats van alle inhoud op één regel te forceren. Standaard is de instelling om over meerdere regels terug te lopen uitgeschakeld.

Volg deze stappen om teruglopen in te schakelen:

1. Ga vanaf het dashboard van je site naar Weergave → Editor.
2. Bewerk de pagina of template met het blok dat je wilt aanpassen.
3. Open lijstweergave en selecteer het blok.
4. Schakel in de blokinstellingen ‘Toestaan om over meerdere regels terug te lopen\‘ in.

Blokken met de instelling ‘Toestaan om over meerdere regels terug te lopen’:

• Knoppen
• Deelknoppen
• Navigatie
• Social pictogrammen
• Reacties
• Rij en stapel

Tekst in pixels (px) blijft vergrendeld op één grootte. Tekst met de grootte in em of rem past zich aan op basis van de instellingen van je bezoeker en de schermgrootte, waardoor je site toegankelijker en gemakkelijker te lezen is op verschillende apparaten.

Volg deze stappen om tekst te wijzigen van pixels naar relatieve eenheden:

1. Klik op het blok met teksst waarvan je de afmetingen wilt bewerken.
2. In de blokinstellingen, zoek je het gedeelte Typografie.
3. Klik onder Lettertypegrootte op het pictogram Aangepaste grootte (twee horizontale lijnen met stippen).
4. Klik op de eenheid px om deze te wijzigen in em of rem.
5. Voer een numerieke waarde in en pas indien nodig aan.

Kiezen tussen em en rem:

• em — Tekstschalen ten opzichte van de container (goed voor bijschriften, labels of tekst in specifieke blokken)
• rem — Tekst blijft consistent op je hele site (goed voor tekst, kopteksten en knoppen)

Je kunt de lettertypegrootte ook site-breed aanpassen in plaats van voor individuele blokken.

Dit gedeelte is van toepassing op sites die onze WordPress.com Personal-, Premium-, Business- of Commerce-abonnementen en het verouderde Pro-abonnement gebruiken. Voor sites met een Free- of Personal-abonnement moet je je abonnement upgraden om toegang te krijgen tot deze functie.

Je kunt specifieke blokken verbergen op desktop of mobiele apparaten met behulp van CSS-klassen. Volg deze stappen om deze in te stellen:

1. Bewerk de pagina, het berichtof de template met het blok dat je wilt verbergen.
2. Selecteer het blok door erop te klikken of het te selecteren in Lijstweergave.
3. Klik in de blokinstellingen op Geavanceerd.
4. Voer in het vak ‘Extra CSS – klasse(n)‘ hide-desktop of hide-mobilein:

5. Ga naar de aangepaste CSS-instellingenvan je site:
   • Blok thema’s: Weergave → Editor → Stijlen → ⋮ → Extra CSS
   • Klassieke thema’s: Weergave → Aanpassen → Extra CSS
6. Plak de volgende code en klik op Opslaan:

/* hide elements on mobile*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

Voeg de CSS-code één keer toe aan je site. Daarna kan je de klasse hide-mobile of hide-desktop toevoegen aan elk blok, en de CSS zal het automatisch verbergen op het gespecificeerde apparaat.