Configureer de breakpoints waarmee ZenBlocks het responsive gedrag van uw blokken aanstuurt. ZenBlocks hanteert vier weergaveniveaus: PC, MD (medium), TB (tablet) en SP (smartphone).
Samenvatting
Responsive breakpoints bepalen bij welke schermbreedte de lay-out overschakelt naar een ander weergaveniveau. ZenBlocks ondersteunt vier niveaus die u kunt aanpassen aan de behoeften van uw project:
| Niveau | Afkorting | Standaardwaarde | Omschrijving |
|---|---|---|---|
| PC | PC | Altijd actief | Desktopweergave, de standaardlay-out |
| Medium | MD | 1140px | Grote tablets en kleine desktops |
| Tablet | TB | 840px | Tablets in portretmodus |
| Smartphone | SP | 540px | Mobiele telefoons |
Het PC-niveau is altijd actief en heeft geen breakpoint-waarde nodig. De overige drie niveaus worden geactiveerd wanneer de schermbreedte kleiner is dan of gelijk is aan de ingestelde waarde.
Instellingen openen in 3 stappen
- Open de WordPress-editor — Ga naar een pagina of bericht in de blokeditor.
- Klik op de ZenBlocks-knop in de header — De ZenBlocks-knop bevindt zich in de werkbalk bovenaan de editor.
- Selecteer het Responsive-tabblad — In het geopende paneel klikt u op het Responsive-tabblad om de breakpoint-instellingen te bekijken.
Configuratie in 5 stappen
- Open de breakpoint-instellingen — Volg de drie stappen hierboven om het Responsive-tabblad te openen.
- Bekijk de huidige waarden — De drie aanpasbare breakpoints (MD, TB, SP) worden weergegeven met hun huidige pixelwaarden.
- Pas de waarden aan — Wijzig de pixelwaarden naar de gewenste breakpoints. Zorg ervoor dat MD > TB > SP.
- Controleer de volgorde — Bevestig dat de waarden in aflopende volgorde staan. Een ongeldige volgorde kan onverwacht responsive gedrag veroorzaken.
- Klik op Save — Sla de gewijzigde breakpoints op met de Save-knop.
Controlepunten
Na het opslaan van de breakpoint-instellingen controleert u het volgende:
- Waarden zijn opgeslagen — De ingevoerde pixelwaarden worden correct weergegeven na het opnieuw openen van het Responsive-tabblad.
- Volgorde is correct — MD heeft de hoogste waarde, gevolgd door TB en vervolgens SP.
- Responsive preview werkt — Gebruik de responsive preview-functie van de editor om te bevestigen dat de lay-out correct overschakelt bij de ingestelde breakpoints.
- Frontend gedrag klopt — Bekijk uw site op verschillende apparaten of met de browser-devtools om het responsive gedrag te verifiëren.
Belangrijke opmerkingen
- Standaardwaarden zijn geschikt voor de meeste projecten — De vooraf ingestelde waarden (MD: 1140px, TB: 840px, SP: 540px) werken goed voor de meeste websites. Pas deze alleen aan als uw ontwerp dit vereist.
- Wijzigingen gelden sitebreed — Breakpoint-instellingen zijn van toepassing op alle blokken en pagina's van uw site. Pas deze met zorg aan.
- PC heeft geen breakpoint — Het PC-niveau is altijd actief en vertegenwoordigt de standaardweergave. Hiervoor is geen pixelwaarde nodig.
- Waarden moeten aflopend zijn — Zorg altijd dat MD > TB > SP. Een onjuiste volgorde kan leiden tot onvoorspelbaar gedrag.
Wanneer breakpoints herzien?
Overweeg om uw breakpoints opnieuw te evalueren in de volgende situaties:
- Nieuw thema geïnstalleerd — Een ander thema kan andere standaard lay-outbreedtes hanteren.
- Doelgroep veranderd — Als uw bezoekers voornamelijk tablets of mobiele apparaten gebruiken, kan het nuttig zijn de breakpoints hierop af te stemmen.
- Ontwerpaanpassingen — Bij een herontwerp van uw site kunnen andere breakpoints beter aansluiten bij de nieuwe lay-out.
- Apparaattrends — Nieuwe apparaatformaten kunnen aanleiding geven om breakpoints te actualiseren.