Wix Helpcentrum
    Home
  1. Studio, Wix Specialisten en Enterprise
  2. Wix Studio
  3. De Studio Editor gebruiken
  4. Ontwerpen in de Studio Editor
    5. Studio Editor: Een container gebruiken om een verticaal onderdeel te maken

Studio Editor: Een container gebruiken om een verticaal onderdeel te maken

Leestijd 5 minuten
Verticale onderdelen zijn niet beschikbaar in de Studio Editor. Je kunt echter een vastgezette container gebruiken om een soortgelijk effect te bereiken, waardoor het eruitziet als een zijbalkgedeelte.
Voorbeeld van het eindresultaat: een zijbalkgedeelte dat wordt gebruikt voor navigatie op een live website die is gemaakt in de Studio Editor

Stap 1 | Voeg een container toe en pas een raster toe

Voeg eerst een container toe en stel de hoogte in op 100vh, zodat deze de volledige hoogte van het scherm in beslag neemt. Pas vervolgens een geavanceerd CSS-raster toe met de grootte van de rij ingesteld op Automatisch.

Om een container toe te voegen en een raster toe te passen:

  1. Voeg een container toe vanuit het Elementen toevoegen-paneelin de Studio Editor.
  2. Wijzig de hoogte van de container in 100vh:
    1. Klik rechtsboven in de Editor op de Inspector-pijl.
    2. Klik naast Grootte op het Meer acties-pictogram.
    3. Schakel Geavanceerde afmetingen in.
    4. Stel de Hoogte in op 100vh.
      Tip: Klik op de huidige maateenheid (bijvoorbeeld %, px) om dit te wijzigen.
  3. Pas een CSS-raster toe op de container:
    1. (In het Inspector-paneel) Scrol omlaag naar Indeling.
    2. Klik naast CSS-raster op Toepassen.
    3. Klik op Rijen.
    4. Klik op de huidige maat om deze te wijzigen naar Auto.
De grootte van de rasterrij instellen op Automatisch in het Inspector-paneel

Stap 2 | Maak de container vast aan de koptekst

Sleep de container naar de koptekst van de huidige pagina om deze te bevestigen. Dit past de grootte van de koptekst aan volgens de container, maar we veranderen de hoogte terug in het Inspector-paneel. 
Zet vervolgens de koptekst vast zodat de container zichtbaar blijft terwijl bezoekers op en neer over de pagina scrollen.

Om de container aan de koptekst te bevestigen:

  1. Sleep de container om deze aan de koptekst van de pagina te bevestigen. 
  2. Wijzig het formaat van de koptekst:
    1. Selecteer de koptekst.
    2. Klik rechtsboven in de Editor op de Inspector-pijl.
    3. Klik naast Grootte op het Meer acties-pictogram.
    4. Schakel Geavanceerde afmetingen in.
    5. Stel de Hoogte in op de gewenste waarde in px.
      Tip: Klik op de huidige maateenheid (bijvoorbeeld %, vh) om dit te wijzigen.
  3. Scrol omlaag naar Positie.
  4. Selecteer Vastgezet in de Type-dropdown.
Weergave naast elkaar van het Inspector-paneel en de koptekst met de container eraan gekoppeld

Stap 3 | Lijn de container uit en voeg opvulling toe aan de pagina

Nu is het tijd om de container te plaatsen. Afhankelijk van waar je de container wilt laten verschijnen, lijn je deze uit met de boven- en linkerhoek / de boven- en rechterhoek.
De laatste stap is het toevoegen van opvulling aan de relevante kant van de pagina. Dit voorkomt dat de container de inhoud van de pagina bedekt. 

Om de container uit te lijnen en opvulling toe te voegen:

  1. Selecteer de container.
  2. (In het Inspector-paneel) Lijn de container links of rechts uit:
    1. Klik op het Bovenaan uitlijnen-pictogram.
    2. Klik op het Links uitlijnen-pictogram / Rechts uitlijnen pictogram.
  3. Voeg opvulling toe aan de pagina:
    1. Klik bovenaan de Inspector op Pagina.
      Selecting the page in the breadcrumbs at the top of the Inspector panel
    2. Stel onder Positie de opvulling in op dezelfde breedte als de container.
      Als de containerbreedte bijvoorbeeld 20% is en zich aan de linkerkant van de pagina bevindt, moet de linkeropvulling ook worden ingesteld op 20%.
      Setting the page padding in the Inspector panel

Stap 4 | Pas de container aan

De container is nu klaar om te gebruiken als zijbalk. Voeg alle elementen toe die je nodig hebt en ontwerp de container vanuit het Inspector-paneel. Het zou eruit moeten zien zoals in het voorbeeld hieronder: vastgemaakt aan de koptekst en de volledige schermhoogte innemend als je op en neer scrolt op het canvas. 
Voorbeeld van een container die is omgezet in een zijbalkgedeelte met behulp van de instructies in het artikel

Vond je dit artikel nuttig?

|

In dit artikel

  • Stap 1 | Voeg een container toe en pas een raster toe
  • Stap 2 | Maak de container vast aan de koptekst
  • Stap 3 | Lijn de container uit en voeg opvulling toe aan de pagina
  • Stap 4 | Pas de container aan