Studio Editor: Elementen stapelen
6 min
In dit artikel
- Een stapel toepassen
- De stapelrichting wijzigen
- Een stapel beheren
- Een stapel ontwerpen
- De stapelindeling aanpassen
Een stapel is een flexbox-container die een groep elementen 'omsluit' – of ze nu in een verticale of horizontale volgorde staan. Het zorgt ervoor dat de elementen op volgorde blijven, met de tussenruimte die je definieert, en nooit overlappen.
Dat gezegd hebbende, kun je negatieve marges gebruiken om elementen opzettelijk te laten overlappen.
Heb je overlappende elementen?
Bekijk onze video over het oplossen van problemen om te zien wat je moet controleren en hoe je dit probleem kunt oplossen .
Een stapel toepassen
Elementen stapelen is een snelle manier om je ontwerp te organiseren met consistente afstanden, waardoor een strakke en gepolijste indeling ontstaat. Bij het selecteren van meerdere elementen die naast elkaar staan (in hetzelfde bovenliggende element), verschijnt de optie om ze te stapelen.
Om een stapel toe te passen:
- Ga naar je editor.
- Klik op een element dat je in de stapel wilt hebben.
- Houd de Shift-toets ingedrukt en selecteer de andere stapelelementen.
- Klik op Stapelen.
- (Optioneel) Sleep de lijn tussen de elementen om marges in te stellen.
Tip:
Je kunt ook negatieve marges maken om elementen opzettelijk te laten overlappen.
De stapelrichting wijzigen
Wanneer je elementen stapelt, wordt de richting automatisch bepaald door de volgorde van de elementen. Als de elementen bijvoorbeeld verticaal zijn gerangschikt, zal de stapel verticaal zijn.
Hoe dan ook, je kunt de richting altijd wijzigen met behulp van de dropdown. Hiermee worden de elementen automatisch herschikt, zodat ze in de juiste volgorde staan.
Een stapel beheren
Je kunt de stapel aanpassen aan nieuwe inhoud en vereisten. Voeg meer elementen toe aan de stapel, verplaats ze met één klik op de knop en koppel elementen die niet langer nodig zijn los.
Om een stapel te beheren:
- Ga naar je editor.
- Selecteer de relevante stapel.
- Kies wat je vervolgens wilt doen:
Voeg een element toe aan de stapel
Een element van de stapel loskoppelen
klikken. Klik dan op Loskoppelen.
Elementen in de stapel herschikken
/ Omlaag
of Naar links
/ Naar rechts
.
Elementen ontstapelen
Een stapel ontwerpen
De stapel hoeft niet transparant te zijn – je kunt het zo ontwerpen dat de inhoud opvalt op de pagina. Voeg een achtergrondkleur, rand en schaduw toe. Je kunt de hoeken van de stapel ook ronder of vierkanter maken.
Om een stapel te ontwerpen:
- Ga naar je editor.
- Selecteer de relevante stapel.
- Klik rechtsboven in de editor op het Inspector openen-pictogram
.
- Gebruik de beschikbare opties onder Ontwerp om de stapel aan te passen:
- Stel de achtergrondkleur en de ondoorzichtigheid in.
- Voeg een rand toe om de stapel in te kaderen.
- Kies een radius voor de hoeken.
- Schakel schaduw in en beheer instellingen zoals de hoek, afstand, grootte, enzovoort.
De stapelindeling aanpassen
Pas de stapelindeling aan om ervoor te zorgen dat elk element op een afstand van elkaar wordt geplaatst, uitgelijnd en opgevuld is op een manier die past bij jouw creatieve visie of de behoeften van de klant.
Om de stapelindeling aan te passen:
- Ga naar je editor.
- Selecteer de relevante stapel.
- Klik rechtsboven in de editor op het Inspector openen-pictogram .
- Scrol omlaag naar Indeling.
- Gebruik de beschikbare opties om de stapelindeling aan te passen:
- Schakel de richting over van Horizontaal naar Verticaal of omgekeerd.
- Voer een waarde in onder Item-afstand om gelijke marges te maken tussen de stapelelementen (dat wil zeggen: items).
- Kies een uitlijning voor de stapelitems: Links, Rechts, Midden of Uitgevuld.
- Voeg opvulling toe aan de zijkanten.
Wist je dit al?
Je kunt de opvulling en afstand rechtstreeks op het canvas aanpassen. Sleep de lijn tussen elementen of dubbelklik op de lijn als je liever een nauwkeurige waarde invoert. Je kunt desgewenst zelfs de maateenheid wijzigen.