Studio Editor: Elementen positioneren

Leestijd 8 minuten
In een steeds veranderende wereld van apparaten is het belangrijk om de positie van je elementen te bepalen, zodat ze er op verschillende schermformaten precies zo uitzien als jij wilt. In de Studio Editor worden elementen automatisch gedockt om ervoor te zorgen dat dat gebeurt.
Dit geeft je de vrijheid om elementen te verplaatsen, zonder dat je je zorgen hoeft te maken over positionering op breekpunten. Je kunt de positie, docking en marges echter altijd zelf instellen vanuit het Inspector-paneel.
Ga naar onze Wix Studio Academy om extra Wix Studio-webinars, instructievideo's en cursussen te bekijken.
In dit artikel lees je meer over:

Elementen op het canvas positioneren

Met slepen en neerzetten kun je de positie van je element rechtstreeks op het canvas instellen, afzonderlijk voor elk breekpunt. Zo kun je ervoor zorgen dat het element er op elk scherm echt op zijn plaats uitziet. 
Zolang het element binnen dezelfde parent (zoals een onderdeel of cel) blijft, kun je het verplaatsen en heeft het geen invloed op andere breekpunten. Als je een element naar een andere parent verplaatst, is dit van toepassing op alle breekpunten. 
Een screenshot van een element dat naar een andere bovenliggende cel wordt gesleept, en een melding dat dit van invloed is op alle breekpunten

X- en Y-coördinaten in het Inspector-paneel

Je kunt de X- en Y-coördinaten van je element controleren om de exacte positie op de huidige canvasgrootte te zien. 
  • X: Het horizontale vlak, van de linkerrand tot de rechterrand van het parent-element (bijv. onderdeel, container, stapel).
  • Y: Het verticale vlak, van de bovenkant naar de onderkant van het parent-element.
In het onderstaande voorbeeld zie je de px*-waarde negatief worden wanneer we het tekstelement buiten het parent-element, de cel, verplaatsen. 
Een GIF die een tekstelement toont dat buiten de bovenliggende cel is verplaatst, waardoor een negatieve X-waarde in het Inspector-paneel ontstaat
Wat is px*?
px* is een maateenheid in de Studio Editor die de 'pixels op canvas' weergeeft. De px*-waarde die je ziet is het pixelequivalent, relevant voor je huidige canvasgrootte. Schakel over naar een ander breekpunt om te zien hoe de px*-waarde automatisch verandert. 

Automatische en handmatige docking

Wanneer je een nieuw element in de Editor toevoegt, wordt het automatisch gedockt om ervoor te zorgen dat het op alle schermen en apparaten op zijn plaats blijft. Je kunt automatisch docken echter altijd uitschakelen en de dockingpunten handmatig kiezen.
Klik op een onderwerp hieronder om meer te lezen.

Marges gebruiken bij het docken van elementen

Wanneer een element is gedockt, helpen marges om een vaste afstand te houden tussen het element en de randen van het parent-element. Je kunt ook marges toevoegen aan de zijden die niet zijn gedockt. Marges fungeren als een buffer en voorkomen overlap met andere elementen.
In het onderstaande voorbeeld is het tekstelement gedockt aan de boven- en rechterkant van de cel. Als je de marges in het Inspector-paneel aanwijst, worden ze gehighlight op het canvas: 
Een GIF met een cursor die de boven- en rechtermarges in het Inspector-paneel aanwijst, en de manier waarop ze worden gemarkeerd op het canvas

Om een marge te maken of te bewerken:

  1. Selecteer het element.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. Scrol omlaag naar Positie.
  2. Klik op een marge (zoals boven, links) onder Docking, marges en opvulling.
  3. (Optioneel) Klik op het Individueel bewerken-pictogramom alleen de geselecteerde kant te bewerken.
  4. Voer een waarde in voor de marge.
    Tip: Klik op de meting (bijvoorbeeld px*, %) om dit te wijzigen. 
Een screenshot van het Positie-vak, waar je marges rond een element kunt maken
Marge-eenheden:
Marges kunnen worden ingesteld in px*, pixels (px), percentage (%), viewport-hoogte (vh) en viewport-breedte (vb). Elke eenheid heeft een andere uitkomst wanneer het formaat van het scherm wordt aangepast. Bekijk het verschil in het gedrag van de eenheden door je canvas te verslepen om het formaat te wijzigen.

Opvulling rond een element toevoegen

Voeg opvulling toe aan containers om een ruimte te creëren tussen de randen (bovenkant, onderkant of zijkanten) en de inhoud erin. Opvulling kan worden toegevoegd aan alle soorten responsieve containers, waaronder basiscontainers, stapels, flexboxen, repeaters, cellen, onderdelen en pagina's. 

Om opvulling rond een element toe te voegen:

  1. Selecteer het element.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. Klik op het Opvulling-vak onder Docking, marges en opvulling.
Het opvulvak in het Inspector-paneel in de Studio Editor
  1. Klik op de kant die je wilt aanpassen.
  2. Voer een waarde in %, px, px*, vh of vb in.
    Tip: Klik op de huidige maateenheid om een andere te selecteren.
  3. (Optioneel) Klik op het Op alle zijden toepassen-pictogram.
Het toevoegen van 4% opvulling aan alle zijden van een Stapel-element in de Studio Editor
Opvuleenheden:
De opvulling kan worden ingesteld in px*, pixels (px), percentage (%), viewport-hoogte (vh) en viewport-breedte (vb). Elke eenheid heeft een andere uitkomst wanneer het formaat van het scherm wordt aangepast. Bekijk het verschil in het gedrag van de eenheden door je canvas te verslepen om het formaat te wijzigen.

Voorkomen dat elementen elkaar overlappen

Bij het positioneren van elementen is het belangrijk om ervoor te zorgen dat ze elkaar niet overlappen op kleinere breekpunten. Bekijk onze tips hieronder om dit te voorkomen. 
Als je momenteel ongewenste overlap tussen elementen ziet, bekijk dan deze instructievideo om het probleem op te lossen. 

Vond je dit artikel nuttig?

|