Responsive content
Beïnvloed inhoud én layout op verschillende devices.
Sinds de introductie van Gutenberg is het heel eenvoudig geworden om zelf je pagina in WordPress te bouwen. WordPress zorgt automatisch voor een goede responsiveness van je pagina, zodat de layout zich netjes aanpast aan de schermbreedtes van verschillende apparaten. Maar wij gaan nog een stapje verder met ons nieuwe Responsive Content block.
Hoe werkt het?
Stap 1
Plaats het Responsive Content Block in het gedeelte van de pagina waar je content specifiek wilt aanpassen voor verschillende apparaten.
Stap 2
Wanneer je de lijstweergave opent, zie je een overkoepelend block verschijnen met daarin een zogenaamd Breakpoint block. Het eerste block dat je kunt vullen, is bedoeld voor de mobiele weergave. Binnen dit kader voeg je je content toe met de gebruikelijke blocks naar keuze.
Zodra je klaar bent met het aanmaken van je content voor mobiel, kun je overwegen het Breakpoint block te dupliceren. Dit is vooral handig als je content slechts licht verschilt voor andere apparaten.
Stap 3
Als je block hebt gedupliceerd is het mogelijk om rechts in de balk je breakpoint instellingen vervolgens om te zetten in een ander device. Zit je gewenste formaat er niet tussen? Kies dan voor Anders….
Nu krijg je zelf de mogelijkheid een min- en maxbreedte te geven aan het gebied waarin je layout af dient te wijken.
Voorbeelden.
Dit blok is op mobiel paars.
Dit blok is op tablet zwart.
Dit blok is op desktop oranje.
Dit blok is op mobiel paars.
Dit blok is op tablet zwart.
Dit blok is op desktop oranje.
Dit blok is op mobiel paars.
Dit blok is op tablet zwart.
Dit blok is op desktop licht paars.
Probeer het zelf!
Hoe werkt het?