header-logo
Hoe Wix gebruiken om je website en bedrijf te bouwen.
Ontwerp en beheer je website met slimmme functionaliteiten.
Beheer abonnementen, pakketten en facturen.
Run je bedrijf en kom in contact met leden.
Lees hoe je een domein koopt, koppelt of overzet.
De juiste tools om je bedrijf op het web te laten groeien.
Boost je zichtbaarheid met SEO en marketingtools.
Geavanceerde functies om efficiënter te kunnen werken.
Antwoorden op vragen, gekende problemen en meer.
placeholder-preview-image
Verbeter je vaardigheden met onze cursussen en video's.
Krijg tips voor webdesign, marketing en meer.
Lees hoe het organische websiteverkeer van zoekmachines te vergroten.
Bouw een eigen website met ons full-stack platform.
Vind een professional voor hulp om je websitedoelen te behalen.
placeholder-preview-image

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:

  1. Ga naar je editor.
  2. Klik op een element dat je in de stapel wilt hebben.
  3. Houd de Shift-toets ingedrukt en selecteer de andere stapelelementen.
  4. Klik op Stapelen.
  5. (Optioneel) Sleep de lijn tussen de elementen om marges in te stellen.
De ruimtes tussen stapelitems verslepen om de marges te vergroten
Tip:
Je kunt ook negatieve marges maken om elementen opzettelijk te laten overlappen. 
De stapelmarges in de tegenovergestelde richting slepen om een overlap te creëren tussen de afbeelding en tekst

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 voorbeeld van een horizontale stapel die verticaal is geworden, de elementen staan nu in verticale volgorde

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:

  1. Ga naar je editor.
  2. Selecteer de relevante stapel.
  3. Kies wat je vervolgens wilt doen:

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:

  1. Ga naar je editor.
  2. Selecteer de relevante stapel.
  3. Klik rechtsboven in de editor op het Inspector openen-pictogram .
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. 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.
Een screenshot van het Inspector-paneel en een geselecteerde stapel op het canvas, met de ontwerpopties

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:

  1. Ga naar je editor.
  2. Selecteer de relevante stapel.
  3. 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 Indeling.
  2. 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. 
Een stapel op het canvas naast het Inspector-paneel, met het Indeling-gedeelte gemarkeerd
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.