Studio Editor: De grootte van je elementen instellen
Leestijd 9 minuten
Bij het ontwerpen van een website wil je er zeker van zijn dat de elementen er goed uitzien op elk schermformaat. In de Studio Editor bewerk je de grootte in pixels en het responsieve gedrag doet de rest.
Elk element wordt geleverd met een standaardgedrag (zoals Proportioneel schalen), die bepaalt hoe het formaat op andere schermen wordt aangepast. Vanuit het Inspector-paneel kun je het responsieve gedrag van een element wijzigen zodat het beter voldoet aan jouw behoeften.
Ga naar onze Wix Studio Academy om extra webinars, tutorials en cursussen van Wix Studio te bekijken.
In dit artikel lees je hoe groottes werken in de Studio Editor:
Tip:
Je kunt de grootte van het element en het responsieve gedrag instellen per breekpunt.
De grootte van een element wijzigen
Selecteer een element op het canvas en sleep de grepen om het kleiner of groter te maken. Dit bepaalt hoe het element eruitziet op het huidige breekpunt.
In het Inspector-paneel kun je de exacte breedte en hoogte van het element in pixels controleren. Indien nodig kun je je eigen breedte-/hoogtewaarden invoeren.
Laat de Inspector het volgende voor je berekenen:
Voor je gemak kun je optellen ( + ), aftrekken ( - ), vermenigvuldigen ( * ) en delen ( / ) gebruiken bij het typen van de waarden voor je afmetingen. Maak een element bijvoorbeeld 3 keer breder door *3 toe te voegen naast de huidige breedte.
Het formaat van media-elementen wijzigen
Wanneer je het formaat van een media-element wijzigt, zoals een afbeelding of video, kun je de beeldverhouding vergrendelen, zodat de breedte en hoogte altijd in verhouding blijven tot elkaar.
Welke media-elementen bevatten deze optie?
Dit betekent dat wanneer je de breedte wijzigt, de hoogte automatisch wordt aangepast (en vice versa) om de oorspronkelijke vorm van het element te behouden.
Om de beeldverhouding te vergrendelen:
- Selecteer het relevante media-element.
- Klik rechtsboven op de Inspector-pijl
.
- Klik onder Maat op het Vergrendelen-pictogram
.
- Wijzig het formaat van het element door:
- De breedte / hoogte-waarde in te voeren in het Inspector-paneel (de andere waarde past zich automatisch aan)
- De grepen rond het element op het canvas slepen
Let op:
Deze optie is niet beschikbaar in de geavanceerde formaatmodus.
De grootte instellen in px*
px* is een maateenheid in de Studio Editor. Hiermee kun je de grootte bewerken met een bekende meting (pixels), terwijl de daadwerkelijke afmeting achter de schermen responsief is.
Met andere woorden, je ontwerpt in pixels die de grootte op het canvas weergeven en het element blijft responsief. De specifieke waarden en maateenheden zijn afhankelijk van het responsieve gedrag dat je kiest. Wijs px* aan om de berekening en de responsieve maateenheid die wordt gebruikt te zien.
In het onderstaande voorbeeld is de breedte van de container op het huidige canvas 1000 px*. De werkelijke eenheid is een percentage, dus de breedte is relatief ten opzichte van elk scherm (79,1%).
Wat is het verschil tussen px* en px?
Met beide kun je in pixels bewerken, maar:
- px* betekent dat de grootte die je ziet relevant is voor het breekpunt waaraan je momenteel werkt.
- px betekent dat de grootte vast staat voor alle breekpunten.
Het responsieve gedrag van een element kiezen
Wanneer je een element aan de pagina toevoegt, wordt deze al geleverd met ingebouwd responsief gedrag. Dit betekent dat je je geen zorgen hoeft te maken over hoe het element eruitziet op verschillende schermen — het responsieve gedrag zorgt ervoor dat het formaat wordt aangepast.
Het is echter mogelijk dat je het responsieve gedrag wilt wijzigen als je er een ziet die meer geschikt is voor jouw ontwerp.
Wat is het verschil tussen de beschikbare gedragingen?
Let op:
Het responsieve gedrag dat je selecteert, is van invloed op de maateenheden die in gebruik zijn. Als je bijvoorbeeld Vast responsief gedrag selecteert, verandert de meetwaarde van px* naar px.
Om een ander responsief gedrag te kiezen:
- Selecteer het relevante breekpunt in de Editor.
- Selecteer het element.
- Klik rechtsboven op de Inspector-pijl.
- Selecteer een optie in het Responsief gedrag-dropdownmenu.
Geavanceerde maatmetingen gebruiken
Geavanceerde afmetingen maken diepere aanpassing van de grootte van het element per breekpunt mogelijk. Wanneer je geavanceerde afmetingen voor een element inschakelt, zie je de afmetingen die we gebruiken en pas je deze naar behoefte aan.
Dit betekent dat je kunt werken met responsieve eenheden in plaats van pixels, wat een hele reeks nieuwe mogelijkheden opent.
Wat zijn de beschikbare metingen?
Het inschakelen van geavanceerde afmetingen is van toepassing op het specifieke element dat je selecteert, op alle breekpunten. De geavanceerde afmetingmodus blijft ingeschakeld voor dat element, voor gemakkelijke toegang, maar je kunt dit op elk moment uitschakelen.
Om de geavanceerde afmetingen te openen en te bewerken:
- Selecteer het relevante breekpunt in de Editor.
- Selecteer het element.
- Klik rechtsboven op de Inspector-pijl.
- Klik naast Grootte op het Meer acties-pictogram
. - Schakel de Geavanceerde afmetingen-schakelaar in.
- 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.
De voorkeur voor afmetingen instellen
Kies je voorkeur voor afmetingen voor de website die je ontwerpt. Als je graag met geavanceerde CSS-metingen werkt, kun je geavanceerde afmetingen in de Editor inschakelen. Als je de afmetingen liever per element kiest, kun je dit ook zo houden.
Om de voorkeur voor afmetingen voor een website in te stellen:
- Klik linksboven op het Wix Studio-pictogram
. - Wijs Weergave aan.
- Wijs Voorkeur afmetingen aan.
- Kies je voorkeur:
- Altijd geavanceerd weergeven: De grootte in het Inspector-paneel is altijd ingesteld op geavanceerd.
Let op: Deze modus schakelt de optie uit om specifieke elementen terug te schakelen van geavanceerde grootte. - Instellen per element: Je stelt de voorkeur voor de afmetingen per element in.
- Altijd geavanceerd weergeven: De grootte in het Inspector-paneel is altijd ingesteld op geavanceerd.
