In Websitemaker Editor 2.0 stel je eenvoudig zelf de afmetingen in van elementen zoals secties, kolommen en widgets. Dit doe je via het ontwerppaneel. Je kan daarbij kiezen tussen verschillende maateenheden, bijvoorbeeld pixels of percentages.
In dit artikel leggen we uit welke opties er zijn en wanneer je welke maateenheid het beste kan kiezen.
Wil je meer weten over de elementen van je website en hoe je deze gebruikt? Lees dan ons artikel over secties, kolommen en widgets in Editor 2.0.
Percentage (%)
Wil je dat een element automatisch meeschaalt met het schermformaat? Dan kan je het beste percentage (%) gebruiken.
Dit is een flexibele maateenheid die zich aanpast aan de grootte van het scherm. Zo blijven de verhoudingen tussen elementen altijd gelijk – of je site nu wordt bekeken op desktop, tablet of mobiel.
We raden aan percentages te gebruiken als je wil dat elementen op elk apparaat consistent worden weergegeven, zonder dat je de afmetingen per schermformaat apart moet aanpassen.
In Editor 2.0 wordt voor de breedte van elementen standaard % gebruikt.
Voorbeelden
- Twee kolommen met elk een breedte van 50% nemen altijd 50% van de beschikbare ruimte in, ongeacht het schermformaat.
- Plaats je een afbeelding in een kolom en stel je de breedte in op 50%, dan neemt de afbeelding altijd de helft van de kolom in. Op mobiel wordt de afbeelding kleiner, maar de verhouding blijft hetzelfde.
- Als je 4% opvulling instelt tussen twee kolommen, dan blijft die tussenruimte op elk schermformaat exact 4%.
Pixels (px)
Wil je een element een exacte afmeting geven die altijd hetzelfde blijft, ongeacht het schermformaat? Kies dan voor pixels (px).
Dit is een vaste maateenheid die zich niet automatisch aanpast aan de grootte van het scherm. Pixels zijn vooral geschikt voor elementen waarvoor je precieze afmetingen wil instellen, zoals knoppen of logo's.
Het nadeel is dat elementen hierdoor minder responsief zijn. Je moet vaak handmatig aanpassingen doen per schermformaat, zodat je website er op elk apparaat goed uitziet. Daarom raden we aan om over het algemeen percentages te gebruiken.
Voorbeelden
- Een knop met een breedte van 250px blijft op elk apparaat exact 250px breed.
- Je kan de afmetingen van een logo per schermformaat aanpassen, bijvoorbeeld: 200 × 80px op desktop, 150 × 60px op tablet en 120 × 50px op mobiel. Daarmee zorg je ervoor dat het logo er op elk apparaat goed uitziet.
Viewport height (vh)
De maateenheid viewport height (vh) is gebaseerd op de hoogte van het scherm: 1vh staat gelijk aan 1% van de totale hoogte.
Deze maateenheid is vooral geschikt voor elementen die automatisch moeten meeschalen met de schermhoogte, zoals full-screen achtergronden. Zo nemen ze altijd hetzelfde percentage van de schermhoogte in, ongeacht het apparaat.
Voorbeelden
- Stel je een achtergrond in op 100vh, dan vult deze altijd de volledige hoogte van het scherm – op desktop, tablet én mobiel.
- Een widget die je instelt op 25vh, neemt op elk apparaat een kwart van de schermhoogte in.
Viewport width (vw)
De maateenheid viewport width (vw) is gebaseerd op de breedte van het scherm: 1vw staat gelijk aan 1% van de totale breedte.
Deze maateenheid is vooral handig voor elementen die automatisch moeten meeschalen met de schermbreedte, zoals banners. Zo nemen ze altijd hetzelfde percentage van de schermbreedte in, ongeacht het apparaat.
Voorbeelden
- Een banner die je instelt op 100vw, vult altijd de volledige breedte van het scherm, van links tot rechts.
- Stel je een kolom in op 50vw, dan neemt deze altijd de helft van de schermbreedte in.
Automatisch (A)
De optie automatisch (A) zorgt ervoor dat de hoogte van een element automatisch wordt aangepast aan de hoeveelheid inhoud in dat element.
Dit is ideaal voor tekstblokken of kolommen waarvan de hoogte moet meegroeien of -krimpen op basis van de inhoud. Voeg je bijvoorbeeld meer tekst toe aan een tekstblok, dan wordt het blok vanzelf langer. Zo blijft je lay-out overzichtelijk en in balans.
In Editor 2.0 gebruiken tekstblokken standaard deze instelling.