Studio Editor: Elementen positioneren
Leestijd 6 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.
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.
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.
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.
Automatisch docken
Wanneer je een nieuw element toevoegt, wordt het automatisch gedockt op:
- De bovenkant van het parent-element (zoals een onderdeel, container, of stapel)
- De linker- of rechterrand van het parent-element, afhankelijk van welke het dichtste ligt
Automatische docking zorgt ervoor dat het element op alle schermen en apparaten op zijn plaats blijft. Je kunt elementen vrij verplaatsen en de dockingpunten passen zich aan je aan — je hoeft ze niet opnieuw te docken.
De dockingpositie wordt aangegeven door de stippellijnen op het element en de dockingpunten in het Inspector-paneel (onder Positie). In het onderstaande voorbeeld wordt het tekstelement automatisch gedockt aan de boven- en rechterkant van de cel.
Tip:
Standaard is Autodocking elementen ingeschakeld. Je kunt het altijd uitschakelen en de docking handmatig aanpassen.
De docking van het element handmatig aanpassen
Je kunt het automatisch docken overschrijven en handmatig instellen vanuit de Inspector. Dit is bijvoorbeeld handig wanneer je een element aan de onderkant wilt docken in plaats van bovenaan.
Dock een element op een kant naar keuze: boven, onder, links, rechts of zelfs in het midden van het onderdeel, de container of de cel waarin het zich bevindt.
Om een element handmatig te docken:
- Selecteer het element.
- Klik rechtsboven in de Editor op de Inspector-pijl
. - Scrol omlaag naar Positie.
- Klik op de relevante bevestigingspunten (boven, onder, rechts of links). Je kunt ook op het Centreren-pictogram
klikken zodat het element altijd in het midden staat.
Let op:
Hiermee wordt Autodocking elementen uitgeschakeld.
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:
Om een marge te maken of te bewerken:
- Selecteer het element.
- Klik rechtsboven in de Editor op de Inspector-pijl.
- Scrol omlaag naar Positie.
- Klik op een marge (zoals boven, links) onder Docking, marges en opvulling.
- Voer een waarde in voor de marge.
Tip: Klik op de meting (bijvoorbeeld px, %) om dit te wijzigen. We raden aan een percentage (%) te gebruiken om je elementen consistent op elk schermformaat te positioneren. - (Optioneel) Klik op het Alle zijden bewerken-pictogram
om aan alle kanten dezelfde marge in te stellen.
Marge-eenheden:
Marges kunnen worden ingesteld in 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.
Bovenaan docken
Het is meestal een goed idee om je elementen bovenaan de container, het onderdeel of de rastercel waarin ze zich bevinden te docken. Dit zorgt ervoor dat er altijd een gedefinieerde ruimte is tussen het element en de container/het onderdeel wanneer er meer inhoud aan je pagina wordt toegevoegd.
Cellen toevoegen om de indeling te organiseren
Voor complexere indelingen, voeg je cellen toe om het onderdeel te ordenen. Plaats elementen in hun eigen cellen en koppel ze aan een rasterlijn zodat ze perfect op elk schermformaat worden gepositioneerd.
Een stapel toepassen
Het plaatsen van een groep elementen in een horizontale of verticale stapel zorgt ervoor dat ze elkaar niet overlappen. Een stapel is een flexibele container die zich automatisch aanpast aan verschillende schermformaten. Je hoeft alleen de marges tussen elementen in te stellen.
Met negatieve marges kun je elementen in een stapel laten overlappen. Hiermee kun je elementen voor andere plaatsen, waardoor het ontwerp complexer wordt.
Vond je dit artikel nuttig?
|