# Studio Two-editor: De grootte van het element instellen Source: https://support.wix.com/nl/article/studio-two-editor-setting-the-elements-size-nl (updated 2026-11-13) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt > 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](https://support.wix.com/nl/article/studio-two-editor-the-difference-between-studio-editor-and-studio-two-editor). 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. ![De zijgreep van een geselecteerd tekstelement op het canvas te slepen om het formaat te wijzigen](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/c52717a5-047a-43db-a88d-8a13342b135d/size-1a-canvas.png) * **In het Inspector-paneel:** Klik op het element en open het Inspector-paneel om de exacte breedte en hoogte te zien (en te wijzigen). ![Geselecteerd tekstelement op het canvas, met de breedte en hoogte weergegeven in het Grootte-gedeelte in het Inspector-paneel](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/ae5095b5-f39b-42ac-b6f3-db0f30b260d1/size-1b-canvas-and-inspector.png) --- ## 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. ![Het Grootte-gedeelte in het Inspector-paneel, met de X-, Y-, W- en H-waarden weergegeven in px*](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/3e5b196c-eac4-4cff-9294-08d474fd25b4/size-2-px-fields-1x.png) > **Goed om te weten:** 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). > > ![Door px* aan te wijzen naast breedte in het Inspector-paneel, leest de pop-up dat de daadwerkelijke eenheid een percentage is](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/56f2b60e-fd1e-4f39-b14d-1221ad7b0104/size-3-px-tooltip-1x.png) --- ## 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. **Wat is het verschil tussen het responsieve gedrag?** Elk responsief gedrag heeft een specifieke, automatische logica voor de manier waarop het formaat van het element op verschillende schermen wordt gewijzigd. Het beschikbare gedrag is per element afgestemd. De meest voorkomende zijn: * **Proportioneel schalen:** De verhoudingen van het element (breedte en hoogte) houden op alle schermen dezelfde beeldverhouding. * **Relatieve breedte:** De breedte van het element verandert automatisch, in relatie tot het bovenliggende element. * **Opgepast:** Het element blijft altijd dezelfde grootte, het wijzigt op geen enkel scherm het formaat. * **Uitrekken:** Het element wordt uitgerekt om op elk breekpunt in de bovenliggende container te passen. * **Omsluiten:** Er zijn geen lege ruimtes tussen het element en het begrenzingsvak. De grootte van het begrenzingsvak op elk breekpunt hangt af van de inhoud (bijvoorbeeld: het aantal tekens en de lettergrootte op knoptekst). **Let op:** Dit is ook het standaardgedrag voor een horizontale stapel. **Gedrag van onderdeel:** * **Automatische hoogte:** De hoogte van het onderdeel wordt automatisch aangepast aan de inhoud, op elke schermgrootte. * **Vaste hoogte:** Het onderdeel blijft altijd dezelfde hoogte, ongeacht de schermgrootte. * **Aan scherm aanpassen:** Hierdoor neemt het onderdeel de volledige hoogte van de viewport in beslag (100 vh). Indien nodig kun je de vh aanpassen zodat deze minder ruimte inneemt. ### Om het responsieve gedrag van het element te wijzigen: 1. [Ga naar je editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Selecteer het element. 3. Klik rechtsboven in de editor op het **Inspector openen**-pictogram ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png). ![Klikken op de pijl die het Inspector-paneel in de Studio Two-editor opent](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/18/464a146e-ac9f-495f-be67-560b93fdb995/open-inspectornew.png) 1. Klik op het **Ontwerp**-tabblad. 2. Klik onder **Grootte** op de **Responsief gedrag**-dropdown. 3. Kies een nieuw responsief gedrag. ![De Responsief gedrag-dropdown wordt geopend in het Inspector-paneel, met een geanimeerd voorbeeld van de gemarkeerde optie](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/99fd2586-7b18-487e-9012-0bc47a5f4972/size-4-responsive-dropdown-1x.png) > **Goed om te weten:** 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. > **Goed om te weten:** 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: 1. [Ga naar je editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Selecteer het element. 3. Klik rechtsboven in de editor op het **Inspector openen**-pictogram ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png). ![Klikken op de pijl die het Inspector-paneel in de Studio Two-editor opent](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/18/464a146e-ac9f-495f-be67-560b93fdb995/open-inspectornew.png) 1. (In het Inspector-paneel) Klik rechtsboven op het **Meer acties**-pictogram ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/05/00f6b671-6132-4bc1-9610-b17a2af28697/more-actions-black-bg.png). 2. Activeer de schakelaar naast **Geavanceerde instellingen**. ![De Geavanceerde instellingen-schakelaar in het Inspector-paneel in de Studio Two-editor. De schakelaar is ingeschakeld](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/05/4e7f19bb-54f1-4d9c-b945-61607d943fb4/advanced-settings-on.png) 1. 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. ![Het Grootte-gedeelte in het Inspector-paneel met geavanceerde instellingen ingeschakeld, met breedte, hoogte, minimum- en maximumwaarden](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/9b64d910-3f63-4a5f-b53d-4fc8d04cf077/size-5-advanced-settings.png)