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

Studio Editor: Repeaters toevoegen en aanpassen

Leestijd 7 minuten
Een repeater is een lijst met items met hetzelfde ontwerp en dezelfde indeling, maar met verschillende inhoud. Het is een snelle en gemakkelijke manier om je inhoud weer te geven, inclusief inhoud van het CMS (Content Management System).
In de Studio Editor worden repeaters gerangschikt in een responsieve flex-indeling, waardoor elk item er op elk schermformaat goed uitziet.
Een voorbeeld van een repeater die je kunt ontwerpen in Editor X.
In dit artikel lees je hoe je:

Een repeater toevoegen

We hebben heel veel vooraf ontworpen repeaters die je kunt toevoegen en aanpassen aan je behoeften. Sommige repeaters bevatten afbeeldingen, andere hebben meer een 'lijst'-stijl met de nadruk op tekst. 
Nadat je een repeater hebt toegevoegd die je bevalt, kun je aan de slag met de inhoud. Wanneer je een element toevoegt aan een repeater-item, wordt het automatisch toegevoegd aan de andere items om het ontwerp consistent te houden. Dat gezegd hebbende, kun je nog steeds de individuele elementen binnen elk item aanpassen (zoals tekst, afbeeldingen).

Om een repeater toe te voegen:

  1. Klik links in de Editor op Elementen toevoegen.
  2. Klik op Indeling-tools.
  3. Klik op Repeaters.
  4. Sleep een repeater naar de pagina.
Tip:
Als je een element uit één repeater-item verwijdert, wordt het uit alle andere items verwijderd. 

Repeater-items beheren

Je kunt repeater-items eenvoudig dupliceren, hernoemen, ordenen en verwijderen vanuit het Inspector-paneel. 

Om repeater-items te beheren:

  1. Selecteer de betreffende repeater.
  2. Klik rechtsboven in de Editor op de Inspector-pijl.
  3. (In de Inspector) Klik naast het aantal items op Beheren.
    A screenshot of the top part of the Inspector panel, where you can find the repeater management options
  4. Kies hoe je je repeater-items wilt beheren:
    • Een item dupliceren: Selecteer een item en klik vervolgens onderaan op Item dupliceren.
    • Een item verwijderen: Klik naast het item op het Meer acties-pictogram en klik vervolgens op Verwijderen.
    • De naam van een item wijzigen: Klik naast het item op het Meer acties-pictogramen klik vervolgens op Naam wijzigen.
    • Items opnieuw ordenen: Houd naast een item het Opnieuw ordenen-pictogramingedrukt en sleep je het naar een nieuwe positie.
Een screenshot van het paneel in de Inspector waar je items beheert en opnieuw ordent

Een repeater ontwerpen

Pas het ontwerp van de repeater aan zodat het overeenkomt met de website van je klant. Je kunt de achtergrondkleur van de items wijzigen, randen, schaduw of een interessante cursor toevoegen die verschijnt wanneer bezoekers de repeater aanwijzen. 

Om een repeater te ontwerpen:

  1. Selecteer een repeater-item.
  2. Klik rechtsboven in de Editor op de Inspector-pijl.
  3. Scrol omlaag naar Ontwerp.
  4. Gebruik de beschikbare opties om je repeater te ontwerpen:
    • Wijzig de vulkleur en dekking van alle items.
    • Voeg een rand en schaduw toe om de items op te laten vallen.
    • Maak de hoeken van het item rechthoekig of rond. 
    • Voeg een coole cursor toe die verschijnt wanneer bezoekers de repeater aanwijzen. 
Een screenshot van de ontwerpopties in de Inspector zodra je een repeater-item selecteert

Een AB-ontwerppatroon instellen voor repeater-items

Splits je repeater-items in twee groepen om een uitgebreider ontwerp te maken. Met het AB-patroon kun je twee versies van hetzelfde ontwerp maken, met verschillende stijlen en animaties.
Zodra je het AB-patroon inschakelt, worden je repeater-items verdeeld in groepen A en B. Je kunt in de Editor zien welke items tot elke groep behoren. Bij het ontwerpen van een van de A- of B-items, veranderen de andere items in de groep automatisch om overeen te komen. 

Om een AB-ontwerppatroon in te stellen voor repeater-items:

  1. Selecteer de betreffende repeater.
  2. Klik rechtsboven in de Editor op de Inspector-pijl.
  3. Scrol omlaag naar Indeling.
  4. Schakel AB-ontwerppatroon instellen in.
  5. Ontwerp items A en B:
    1. Klik op item A of B in je repeater.
      Tip: Dit kan elk item uit de relevante groep zijn.
    2. (In het Inspector-paneel) Kies hoe je deze groep items wilt aanpassen:
      • Kies een ontwerpvoorinstelling in het Ontwerp-gedeelte.
      • Wijzig de Opvulkleur en dekking van de items.
      • Voeg vanaf het Interacties-tabbladeen animatie toe. 
      • Pas een aangepaste cursor toe vanuit het Cursor-gedeelte.
    3. Herhaal stap a-b voor de andere groep items.
Een screenshot van een repeater met een AB-patroonontwerp, met de schakelaar ingeschakeld

De indeling van de repeater wijzigen

Stel in hoe repeater-items worden herschikt wanneer de schermgrootte verandert. Afhankelijk van het gekozen weergavetype (bijvoorbeeld Kaarten, Lijst, Schuif, Raster), kun je de marges, uitlijning, richting en andere instellingen aanpassen. 
Werken met breekpunten:
  • Je kunt voor elk breekpunt een andere indeling voor je repeater hebben.
  • Lijsten en schuifregelaars worden vaak gebruikt op kleinere schermformaten, zoals tablets en mobiele apparaten.

Om de indeling van een repeater verder aan te passen:

  1. Selecteer de betreffende repeater.
  2. Klik rechtsboven in de Editor op de Inspector-pijl.
  3. Scrol omlaag naar Indeling.
  4. Pas de indeling van de repeater aan op basis van het geselecteerde weergavetype:
Opmerking over lege ruimtes:
Sommige oude browsers ondersteunen geen CSS-ruimtes (bijvoorbeeld Chrome 76-83, Safari 12-14 en Edge 79-83). Dit betekent dat bezoekers die de website vanuit deze browsers bezoeken de lege ruimtes tussen de repeater-items niet zien. 
De indelingsopties die verschijnen in het Inspector-paneel wanneer je het Kaarten-weergavetype selecteert

Vond je dit artikel nuttig?

|

In dit artikel

  • Een repeater toevoegen
  • Repeater-items beheren
  • Een repeater ontwerpen
  • Een AB-ontwerppatroon instellen voor repeater-items
  • De indeling van de repeater wijzigen