Wix Helpcentrum
  1. Home
  2. Studio, Specialisten en Enterprise
  3. Wix Studio
  4. De Studio Editor gebruiken
  5. Elementen toevoegen in de Studio Editor
  6. Studio Editor: Tabbladen toevoegen en aanpassen

Studio Editor: Tabbladen toevoegen en aanpassen

Leestijd 7 minuten
In dit artikel
  • Het Tabbladen-element aan een pagina toevoegen
  • Tabbladen beheren
  • Tabbladen ontwerpen
  • Om de tabbladen te ontwerpen:
  • Om een overgangseffect toe te voegen:
  • Een standaard tabblad kiezen
  • De indeling van het tabblad aanpassen
Gebruik het Tabbladen-element om gerelateerde inhoud op een pagina te ordenen en te groeperen. Dit element geeft meerdere onderdelen van de inhoud op een compacte manier weer, zodat de bezoekers van je klant gemakkelijk de informatie die ze nodig hebben kunnen vinden. 
Een GIF die het tabbladen-element op een live website toont. De cursor klikt op elk tabblad in het menu om de inhoud te openen.

Het Tabbladen-element aan een pagina toevoegen

Voeg zoveel Tabblad-elementen toe als nodig is om de inhoud van de website te organiseren. Nadat je een voorinstelling hebt gekozen en deze naar de pagina hebt gesleept, kun je de inhoud aanpassen en elementen toevoegen. 

Om tabbladen toe te voegen:

  1. Klik links in de Editor op Elementen toevoegen .
  2. Klik op Indeling-tools.
  3. Klik op Tabbladen.
  4. Selecteer een ontwerp en sleep het naar de pagina.
  5. Pas de inhoud van de tabbladen aan:
    1. Klik op het Tabbladen-element dat je zojuist hebt toegevoegd.
    2. Klik op Tabbladen beheren.
    3. Selecteer het tabblad waaraan je wilt werken. 
    4. Bewerk de inhoud van het tabblad: 
      • Voeg meer elementen toe.
      • Bewerk bestaande elementen.
      • Pas het raster aan naar de gewenste indeling.
Een screenshot van het Elementen toevoegen-paneel. Tabbladen zijn geselecteerd in de Indeling-tools en de cursor wijst een ontwerp aan.

Tabbladen beheren

Gebruik het Tabbladen beheren-paneel om tabbladen toe te voegen, te dupliceren, te hernoemen of te verwijderen. Met dit paneel kun je ook tussen tabbladen navigeren om ze te bekijken en indien nodig te bewerken.  

Om tabbladen te beheren:

  1. Klik op het Tabbladen-element.
  2. Klik op Tabbladen beheren.
  3. Wijs het relevante tabblad aan en klik op het Meer acties-pictogram .
  4. Kies wat je met het tabblad wilt doen: Naam wijzigen, Verwijderen of Dupliceren.
Een screenshot van het Tabbladen beheren-paneel op het canvas. Het Meer acties-menu is geopend en toont de opties.
Wil je een leeg tabblad toevoegen?
Klik onderaan het paneel op Tabblad toevoegen.

Tabbladen ontwerpen

Pas het tabbladen-element aan zodat het overeenkomt met de stijl van de pagina. Je kunt het tabbladmenu, de tabbladen zelf en de container die de inhoud weergeeft, ontwerpen. Je kunt ook een overgangseffect toevoegen dat wordt afgespeeld wanneer bezoekers tussen tabbladen klikken.

Om de tabbladen te ontwerpen:

  1. Klik op het Tabbladen-element. 
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
Een screenshot die laat zien waar je het Inspector-paneel kunt vinden in de Studio Editor. De cursor wijst het pictogram aan om het te openen.
  1. Klik op het Ontwerp-tabblad.
  2. Kies het onderdeel dat je wilt ontwerpen uit de dropdown:
    • Tabbladcontainer: Deze container toont het tabbladmenu.
    • Tabbladen: Dit zijn de tabbladen die op het menu verschijnen. Selecteer de status die je wilt aanpassen (Standaard, Aanwijzen of Geselecteerd).
    • Containers: Dit is de container die de inhoud van elk tabblad toont.
  3. Gebruik de beschikbare ontwerpopties:
    • Achtergrond: Pas een kleur, overgang of afbeeldingsachtergrond toe. Je kunt meerdere achtergrondlagen toevoegen en hun dekking aanpassen.
    • Randen: Voeg randen toe om een contrast te creëren met de websitepagina. Kies een ontwerp en kleur en stel de breedte in.
    • Hoeken: Kies hoe je wilt dat de hoeken eruit zien. Je kunt elke hoek anders aanpassen en ze ronder of vierkanter maken.
    • Schaduwen: Voeg schaduwen toe voor een cool 3D-effect. Je kunt de grootte, zichtbaarheid, hoek en meer instellen om het meer impact te geven.
    • Indeling: Pas de opvulling aan om deze groter of kleiner te maken. Je kunt het Slot-pictogram  in- of uitschakelen om elke kant afzonderlijk aan te passen of om ze met elkaar overeen te laten komen.
    • Tekst: Geef de tabbladnamen die op het menu verschijnen vorm en maak ze op. Je kunt het lettertype, de grootte, de kleur en meer wijzigen. 
Een screenshot van het Ontwerp-tabblad in het Inspector-paneel. De cursor wijst de optie voor het opvullen van de achtergrond aan.
Let op:
De beschikbare opties zijn afhankelijk van het onderdeel dat je ontwerpt (bijvoorbeeld Tabbladencontainer, Tabbladen of Container). 

Om een overgangseffect toe te voegen:

  1. Klik op de tabbladen in je editor.
  2. Klik op het Instellingen-pictogram .
  3. Kies een overgangseffect in het paneel en pas het aan zoals jij wilt:
    • Crossfade: De tabbladen faden in en uit wanneer bezoekers ertussen klikken. 
      • Duur van overgang: Gebruik de schuifregelaar om in te stellen hoe lang de overgang wordt afgespeeld.
    • Float: Tabbladen zweven binnen wanneer bezoekers erop klikken. 
      • Overgangsrichting: Selecteer of tabbladen van onder of van boven worden ingevoerd.
      • Duur van overgang: Gebruik de schuifregelaar om in te stellen hoe lang de overgang wordt afgespeeld.
Het Instellingen-paneel voor tabbladen in de Studio Editor. De Float-optie is geselecteerd en de cursor verandert de duur.

Een standaard tabblad kiezen

Het standaard tabblad is het tabblad dat automatisch wordt geopend op de live website. Je kunt het wijzigen naar wat als eerste moet worden weergegeven voor de inhoud en websitebehoeften van je klant. 
Tip:
In het Tabbladen beheren-paneel zie je een vinkje naast het huidige standaard tabblad.
Een screenshot met het vinkje dat naast het standaard tabblad in het Tabbladen beheren-paneel verschijnt

Om het standaard tabblad in te stellen:

  1. Klik op het Tabbladen-element.
  2. Klik op Tabbladen beheren.
  3. Wijs het relevante tabblad aan en klik op het Meer acties-pictogram .
  4. Klik op Als standaard instellen.
Een screenshot die laat zien hoe je het standaard tabblad instelt vanuit het Tabbladen beheren-paneel.

De indeling van het tabblad aanpassen

Pas de indeling, afstand en opvulling van het Tabblad-element aan. Als er een groot aantal tabbladen is, kun je ook beslissen hoe je ze in het menu wilt weergeven (scrollen of teruglopen). 

Om de tabbladindeling aan te passen:

  1. Klik op het Tabbladen-element.
  2. Klik op het Indeling-pictogram.
  3. Pas de indeling aan met behulp van de beschikbare opties:
    • Tabbladverdeling: Bepaal hoeveel het tabbladmenu moet worden uitgerekt:
      • Standaard: Het menu wordt niet uitgerekt om in de breedte van het element te passen. Je kunt de tabbladen vervolgens links, in het midden of rechts uitlijnen.
      • Uitrekken: Het menu wordt uitgerekt om de breedte van het element aan te passen. Je kunt de tekst op het menu links, in het midden of rechts uitlijnen.
    • Ruimte tussen tabbladen: Sleep de schuifregelaar om de afstand tussen de tabbladen op het menu te wijzigen.
    • Ruimte tussen tabbladen en container: Wijzig de ruimte tussen het menu en de container die de inhoud van elk tabblad toont.
    • Horizontale opvulling: Pas de opvulling links en rechts van de menutabbladen aan.
    • Verticale opvulling: Pas de opvulling aan de boven- en onderkant van de menutabbladen aan.
    • Overflow tabbladen: Selecteer hoe je tabbladen die niet in het menu passen wilt weergeven:
      • Scrollen: Bezoekers van de website kunnen door het menu scrollen om meer tabbladen te zien.
      • Passend: Er wordt nog een rij toegevoegd om de andere tabbladen in te passen. Je kunt vervolgens de schuifregelaar gebruiken om de ruimte tussen de rijen aan te passen.
    • Geef tabs weer van: Toon tabbladen op het menu van links naar rechts, of omgekeerd.
Een screenshot met het Indeling-paneel. De cursor wijst de optie voor de ruimte tussen tabbladen aan.

Vond je dit artikel nuttig?

|
In dit artikel
  • Het Tabbladen-element aan een pagina toevoegen
  • Tabbladen beheren
  • Tabbladen ontwerpen
  • Om de tabbladen te ontwerpen:
  • Om een overgangseffect toe te voegen:
  • Een standaard tabblad kiezen
  • De indeling van het tabblad aanpassen

Vond je dit artikel nuttig?

|