Wix Helpcentrum
    Home
  1. Een website maken
  2. Editor X gebruiken
  3. Elementen toevoegen in Editor X
    4. Editor X: Een accordeon toevoegen en aanpassen

Editor X: Een accordeon toevoegen en aanpassen

Leestijd 5 minuten
Editor X schakelt over naar Wix Studio, ons nieuwe platform voor bedrijven en freelancers.Lees meer over Wix Studio
Gebruik het Accordeon-element om een grote hoeveelheid inhoud in een kleine ruimte weer te geven. Doordat bezoekers items kunnen uit- en inklappen, kunnen ze gemakkelijk de informatie vinden die ze nodig hebben zonder door een lange lijst te hoeven scrollen.
Een GIF met een voorbeeld van het Accordion-element op een Editor X-website
In dit artikel lees je hoe je:

Een Accordeon-element toevoegen

Selecteer een ontwerp dat je leuk vindt om aan de slag te gaan. Je kunt elk item in je accordeon personaliseren om je inhoud te tonen. Voeg de elementen toe die je nodig hebt en organiseer ze zoals je wilt in de container. 

Om een Accordeon-element toe te voegen:

  1. Klik bovenaan Editor X op Elementen toevoegen.
  2. Klik op Indeling-tools.
  3. Klik op Accordeon.
  4. Sleep een accordeon die je leuk vindt naar je pagina. 
  5. Bewerk de inhoud van elk Accordeon-item:
    1. Klik op het Accordeon-element in je Editor.
    2. Klik op Items beheren.
    3. Klik op het item dat je wilt bewerken. Hiermee wordt het item geopend, zodat je kunt zien wat er momenteel wordt weergegeven.
    4. Voeg de relevante elementen en informatie toe aan je item.
Een screenshot van het paneel Elementen toevoegen waar u een nieuw Accordeon-element kunt toevoegen

Accordeon-items toevoegen en beheren

Beheer de items die in je Accordeon-element verschijnen. Je kunt meer items toevoegen, ze nieuwe titels geven en hun volgorde wijzigen.

Om Accordeon-items toe te voegen en te beheren:

  1. Klik op het Accordeon-element in je Editor.
  2. Klik op Items beheren.
  3. Wijs het item aan en klik op het Meer acties-pictogram.
  4. Kies wat je met dit Accordeon-item wilt doen: Dupliceren, Naam wijzigen of Verwijderen.
Tips:
  • Klik onderaan het paneel op Item toevoegen om een nieuw leeg item toe te voegen.
  • Je kunt de volgorde van je items wijzigen. Houd het Opnieuw ordenen-pictogramnaast een item ingedrukt en sleep het naar de gewenste locatie.
Een screenshot van het Accordeon beheren-paneel waar je items kunt toevoegen, hernoemen, dupliceren, verwijderen en opnieuw ordenen

Kiezen hoe de accordeon opent en sluit

Bepaal hoe je accordeon eruitziet wanneer bezoekers de pagina laden. Je kunt alle items open hebben zodat de informatie gemakkelijk toegankelijk is, of gesloten voor een meer minimalistische look. Je kunt ook kiezen of bezoekers meerdere items tegelijk kunnen openen.  

Om te kiezen hoe de accordeon opent en sluit:

  1. Klik op het Accordeon-element in je Editor.
  2. Klik op het Instellingen-pictogram.
  3. Selecteer een optie onder Kies standaardweergave:
    • Alle items gesloten: Bezoekers zien de items eerst gesloten. Ze kiezen welk item ze willen uitklappen om meer te lezen.
    • Eerste item geopend: Bezoekers zien de inhoud van het bovenste item terwijl de andere items zijn gesloten.
    • Alle items geopend: Bezoekers zien de inhoud van alle items wanneer de pagina wordt geladen. 
  4. Klik op de Meerdere open items toestaan-schakelaar:
    • Ingeschakeld: Bezoekers kunnen zoveel openstaande items hebben als ze willen in de accordeon. 
    • Uitgeschakeld: Bezoekers kunnen slechts één item tegelijk openen.
  5. (Optioneel) Voeg een overgangseffect toe dat verschijnt wanneer bezoekers op een item klikken om het te openen.
Een screenshot van het Accordeoninstellingen-paneel, waar je kunt instellen hoe het wordt geopend en gesloten

Een accordeon ontwerpen

Je kunt elk onderdeel van de accordeon zo ontwerpen dat het overeenkomt met de rest van je pagina. Pas de itemtitels aan, de containers die de inhoud van elk item tonen, of de volledige ruimte van een item (inclusief titel en container).

Om een accordeon te ontwerpen:

  1. Klik op het Accordeon-element in je Editor.
  2. Klik bovenaan Editor X op het Inspector-pictogram.
  3. Klik op het Ontwerp-tabblad.
  4. Kies in de dropdown wat je wilt ontwerpen:
    • Titels: Dit zijn de titels van je items. Je kunt de titels zo ontwerpen dat ze er anders uitzien wanneer bezoekers ze aanwijzen.
    • Containers: Dit zijn de containers die de inhoud van elk item weergeven.
    • Accordeon items: Dit regelt de volledige ruimte van een item in je accordeon (inclusief titel en container).
  5. Gebruik de beschikbare opties om verschillende achtergronden, lettertypen, hoeken, randen en meer te kiezen.
Een screenshot van het Ontwerp-tabblad in de Inspector, waar je het Accordeon-element kunt ontwerpen

De indeling van de accordeon aanpassen

Pas de indeling van het Accordeon-element aan je behoeften aan. Je kunt de uitlijning, opvulling en positie van uw itemtitels kiezen, evenals het pictogram dat naast elke titel verschijnt.

Om de indeling van de accordeon aan te passen:

  1. Klik op het Accordeon-element in je Editor.
  2. Klik op het Indeling-pictogram.
  3. Pas de indeling aan:
    • Kies een pictogram: Selecteer het pictogram dat naast je itemtitels verschijnt: Pijl of Plus. 
    • Positie pictogram: Bepaal of het pictogram links of rechts van je titels wordt weergegeven. 
    • Titelopvulling: Sleep de schuifregelaars om horizontale en verticale opvulling rond de itemtitels toe te voegen. 
Een screenshot van het Accordeonindeling-paneel in Editor X
Tip:
Elk item wordt geleverd met een ingebouwd 1x1 raster dat je naar behoefte kunt aanpassen. Voeg meer rijen en kolommen toe om je pixel perfect indeling te creëren.

Vond je dit artikel nuttig?

|

In dit artikel

  • Een Accordeon-element toevoegen
  • Accordeon-items toevoegen en beheren
  • Kiezen hoe de accordeon opent en sluit
  • Een accordeon ontwerpen
  • De indeling van de accordeon aanpassen