Studio Two-editor: De grootte van het element instellen
Dit artikel verwijst naar de nieuwe Studio Two-editor, die in november 2026 is uitgebracht. Als je niet zeker weet of je de Studio Editor of de Studio Two-editor gebruikt, lees dan hier meer.
Met de Studio Two-editor kun je de exacte grootte voor elk element instellen, zodat je ontwerp zich aanpast aan elk apparaat. Pas het formaat aan op het canvas of in het Inspector-paneel om de exacte afmetingen van een element in te stellen.
Terwijl je het formaat wijzigt, zie je px*, een eenheid weergegeven in pixels. Het schaalt per breekpunt, op basis van het responsieve gedrag van het element. Schakel dat gedrag in als de standaard niet bij je ontwerp past of schakel geavanceerde instellingen in voor directe controle over breedte en hoogte.
Het formaat van elementen wijzigen
Kies hoe je het formaat van elementen wilt wijzigen op basis van de manier waarop je graag ontwerpt:
Op het canvas: Klik op het element om het op de pagina te selecteren en sleep de zijgrepen totdat het element de gewenste grootte heeft. Terwijl je sleept, kun je de exacte grootte van het element zien in pixels.
In het Inspector-paneel: Klik op het element en open het Inspector-paneel om de exacte breedte en hoogte te zien (en te wijzigen).
Werken met px* als maateenheid
Het Grootte-gedeelte in het Inspector-paneel heeft een relatieve eenheid die uniek is voor de Studio Two Editor - px*.
Het sterretje (*) naast 'px' betekent dat de grootte relatief is ten opzichte van het breekpunt waaraan je momenteel werkt. Als je bijvoorbeeld overschakelt van desktop naar het mobiele breekpunt, zouden de breedte en hoogte van het element in px* dienovereenkomstig kleiner zijn.
px* vertegenwoordigt de waarde in pixels, terwijl de daadwerkelijke meting achter de schermen responsief is. Wijs px* aan in het paneel om de berekening en de responsieve grootte-eenheid die wordt gebruikt te zien (bijvoorbeeld: percentage, beeldverhouding, enzovoort).
Het responsieve gedrag kiezen
Stel responsief gedrag in dat bepaalt of, en hoe, een element wordt vergroot of verkleind op verschillende breekpunten. Elk element begint met standaard gedrag, maar je kunt overschakelen naar een element dat beter bij je ontwerp past.
Om het responsieve gedrag van het element te wijzigen:
Selecteer het element.
Klik rechtsboven in de editor op het Inspector openen-pictogram .
.
Klik op het Ontwerp-tabblad.
Klik onder Grootte op de Responsief gedrag-dropdown.
Kies een nieuw responsief gedrag.
Wijs de opties in de dropdown aan om een animatie te zien die laat zien hoe deze eruitziet.
Geavanceerde grootte-instellingen gebruiken
Zoek naar geavanceerde instellingen wanneer je directe controle wilt over de afmetingen van een element (zoals px, % of vh) in plaats van het aan px* en het responsieve gedrag over te laten.
Het inschakelen van geavanceerde instellingen is van toepassing op het specifieke element dat je selecteert, op alle breekpunten. De geavanceerde instellingen-modus blijft ingeschakeld voor dat element, voor gemakkelijke toegang, maar je kunt dit op elk moment uitschakelen.
Om geavanceerde instellingen in te schakelen:
Selecteer het element.
Klik rechtsboven in de editor op het Inspector openen-pictogram .
(In het Inspector-paneel) Klik rechtsboven op het Meer acties-pictogram
.Activeer de schakelaar naast Geavanceerde instellingen.
Bewerk de grootte naar behoefte: Breedte, hoogte en minimum- en maximumwaarden.
Tip: Schakel over naar een andere eenheid (zoals van px naar %) door er in het Inspector-paneel op te klikken. Dit opent een lijst met de beschikbare metingen voor het element.
