Studio Two-editor: Positie en afstand aanpassen

Pas de manier waarop elementen in een onderdeel of container zitten, aan met verticale afstand, docking en marges. Stel de afstand in op automatisch om elementen uit de buurt te houden op breekpunten, of schakel over naar handmatig voor exacte controle over docking en marges.

Kies daarna hoe een element zich gedraagt terwijl bezoekers over de pagina scrollen: behoud de standaardpositie, zorg ervoor dat het aan de viewport blijft hangen of speld deze op zijn plaats.

In de Studio Two-editor bevatten onderdelen en containers een instelling voor verticale afstand die helpt de elementen erin op hun plaats te houden op breekpunten. Je kunt kiezen of verticale afstand automatisch of handmatig wordt ingesteld.

Verticale afstand is standaard ingesteld op Automatisch, zodat de editor de verticale afstand voor je afhandelt. Dit voorkomt dat je elk onderliggend element aan de boven- of onderkant dockt, en de boven- en ondermarges op elk breekpunt aanpast om de indeling te behouden.

1. Ga naar je editor.

2. Klik bovenaan op het Desktop-pictogram .

3. Selecteer het relevante bovenliggende element (dat wil zeggen: onderdeel, container).

4. Klik rechtsboven in de editor op het Inspector openen-pictogram .

5. (In het Inspector-paneel) Scrol onder Indeling omlaag naar Verticale afstand.

6. Selecteer de relevante optie in de Verticale afstand-dropdown:

   • Automatisch: De verticale afstand tussen elementen in het onderdeel / de container wordt automatisch behouden op alle schermformaten.

   • Handmatig: Je stelt de exacte docking en marges van elk element in het onderdeel / de container in om ervoor te zorgen dat ze correct zijn verdeeld over alle schermformaten.

Wanneer je nieuwe elementen aan de pagina toevoegt, zijn ze ingesteld om automatisch te docken naar de dichtstbijzijnde hoeken. Dit betekent dat je elementen over het canvas kunt slepen zonder je zorgen te maken dat je ze opnieuw moet docken. Je kunt echter altijd overschakelen naar handmatig docken als je volledige controle wilt over hun docking-punten.

Nadat je de docking hebt gekozen, voeg je marges toe om de ruimte rond een element te bepalen en een consistente afstand te houden tot de randen van het bovenliggende element.

1. Ga naar je editor.

2. Selecteer het element.

3. Klik rechtsboven in de editor op het Inspector openen-pictogram .

1. (Indien nog niet geopend) Klik op het Ontwerp-tabblad en scrol omlaag naar Positie.

2. Kies hoe je de docking van het element wilt instellen:

   • Automatisch: Houd het selectievakje naast Automatische docking van element geselecteerd.

   • Handmatig: Schakel het selectievakje naast Automatische docking van element uit. Klik dan op het relevante docking-punt om het element te docken of los te maken: Links , Rechts , Boven of Onder .

3. (Optioneel) Voer een waarde in voor marges waar het element is gedockt (links, rechts, boven of onder).
   Let op: De boven- en ondermarges zijn uitgeschakeld als het bovenliggende element van het element (dat wil zeggen: container, cel) heeft verticale afstand ingesteld op automatisch. Dit betekent dat de verticale marges van het element afhankelijk zijn van de positie van het element op het canvas.

Kies hoe een element of onderdeel zich gedraagt als bezoekers op en neer scrollen op de pagina. Je kunt het op zijn normale positie houden, aan de viewport vastzetten of het laten blijven terwijl bezoekers door de pagina bewegen.

1. Ga naar je editor.
2. Selecteer het relevante element of onderdeel.
3. Klik in de actiebalk op Alle ontwerpopties .
4. (In het Inspector-paneel) Selecteer het Positietype in de dropdown en stel het in:

Klik op een vraag hieronder om meer te lezen.