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

Editor X: Herhalers gebruiken

Leestijd 8 minuten
Editor X schakelt over naar Wix Studio, ons nieuwe platform voor bedrijven en freelancers.Lees meer over Wix Studio
Een herhaler 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. 
In Editor X zijn herhalers ingedeeld in een flexibele indeling die de inhoud automatisch reorganiseert wanneer het formaat wordt gewijzigd, zodat het er op elk schermformaat goed uitziet.
In dit artikel lees je hoe je:
Een voorbeeld van een herhaler die je kunt ontwerpen in Editor X.
Tip:
Je kunt herhalers ook gebruiken om dynamische inhoud uit een verzameling weer te geven door deze te koppelen aan het CMS (Content Management System). 

Een herhaler toevoegen

We hebben allerlei vooraf ontworpen herhaler-onderdelen die je aan je website kunt toevoegen en naar behoefte kunt aanpassen. Sommige herhalers bevatten afbeeldingen, andere hebben meer een 'lijst'-stijl met de nadruk op tekst. 

Om een herhaler toe te voegen:

  1. Klik bovenaan Editor X op Elementen toevoegen.
  2. Klik op Indeling-tools.
  3. Klik op Herhalers.
  4. Sleep een herhaler naar je pagina.
Een screenshot van het Elementen toevoegen-paneel in Editor X, met de herhalers die je kunt toevoegen

Inhoud aan een herhaler toevoegen

Alle items in de herhaler hebben hetzelfde ontwerp. Wanneer je een element toevoegt aan een herhaler-item, wordt het automatisch toegevoegd aan de andere items om het ontwerp consistent te houden. 
Dat gezegd hebbende, kun je nog steeds de afzonderlijke elementen binnen een item aanpassen (bijvoorbeeld tekst, afbeeldingen). Als je bijvoorbeeld een knop toevoegt aan een item, wordt deze ook toegevoegd aan de rest, maar je kunt de tekst van de knop in elk item wijzigen zodat deze iets anders aangeeft.  

Om inhoud toe te voegen aan een herhaler:


  1. Klik bovenaan Editor X op Elementen toevoegen.
  2. Sleep het gewenste element rechtstreeks naar de herhaler. 
  3. Klik op het element en pas het afzonderlijk aan voor elk item. 
Tip:
Als je een element uit één herhaler-item verwijdert, wordt het uit alle andere items verwijderd. 
Een video die laat zien dat het toevoegen van een element aan één herhaler-item het aan alle andere items toevoegt

Herhaler-items beheren

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

Om je items te beheren:

  1. Klik op je herhaler.
  2. Klik bovenaan Editor X op het Inspector-pictogram.
  3. (In de Inspector) Klik naast het aantal items op Beheren.

    A screenshot of the top of the Inspector panel where you can click Manage to manage repeater items
  4. Kies hoe je je herhaler-items wilt beheren:
    • Een item dupliceren: Klik onderaan op Item dupliceren.
    • Een item verwijderen: Klik naast het item op het Meer acties-pictogramen 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: Klik en sleep de items naar een nieuwe positie.
Een screenshot van het Items beheren-paneel in de Inspector

De herhaler ontwerpen

Pas het ontwerp van je herhaler aan om het te personaliseren. Je kunt de achtergrondkleur van de items wijzigen, randen, schaduw of een interessante cursor toevoegen die verschijnt wanneer bezoekers de herhaler aanwijzen. 

Om je herhaler te ontwerpen:

  1. Klik op je herhaler.
  2. Klik bovenaan Editor X op het Inspector-pictogram.
  3. Klik op het Ontwerp-tabblad. 
  4. Gebruik de beschikbare opties om je herhaler 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 herhaler aanwijzen. 
Gebruik je een AB-ontwerppatroon?
Deze ontwerpwijzigingen zijn van toepassing op alle herhaler-items, ongeacht het AB-patroon. 
Een screenshot van een herhaler en de beschikbare opties op het Ontwerp-tabblad in het Inspector-paneel

Een AB-ontwerppatroon instellen voor herhaler-items

Splits je herhaler-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 interacties.
Zodra je het AB-patroon inschakelt, worden je herhaler-items verdeeld in groepen A en B. Je kunt in je 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. 
Een screenshot van een herhaler en het Inspector-paneel, die alle Item B's ontwerpt

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

  1. Klik op je herhaler.
  2. Klik bovenaan Editor X op het Inspector-pictogram.
  3. Scrol omlaag naar Weergave.
  4. Schakel AB-ontwerppatroon instellen in.
    A screenshot of the Display section in the Inspector panel, enabling the AB pattern toggle
  5. Ontwerp items A en B:
    1. Klik op item A of B in je herhaler.
      Tip: Dit kan elk item uit de relevante groep zijn.
    2. (In de Inspector) Klik op het Ontwerp-tabblad.
    3. Kies hoe je deze groep items wilt aanpassen:
      • Kies een ontwerpvoorinstelling in het Ontwerp-gedeelte.
      • Wijzig de Opvulkleur en dekking van de items.
      • Voeg een aanwijs- of klikinteractie toe vanaf het Interacties-tabblad. 

De indeling van je herhaler wijzigen

Stel in hoe herhaler-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. 
Een screenshot van een dropdown die verschijnt wanneer je op een herhaler klikt, zodat je snel van indeling kunt wisselen
Werken met breekpunten:
  • Je kunt voor elk breekpunt een andere indeling voor je herhaler hebben.
  • Lijsten en schuifregelaars worden vaak gebruikt op kleinere schermformaten, zoals tablets en mobiele apparaten.

Om de indeling van een herhaler verder aan te passen:

  1. Klik op je herhaler.
  2. Klik rechtsbovenaan Editor X op het Inspector-paneel.
  3. Pas de indeling van je herhaler aan op basis van het geselecteerde weergavetype:
Opmerking over CSS-ruimtes:
Sommige oude browsers ondersteunen deze functie niet (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 herhaler-items niet zien. 
Een screenshot van het Inspector-paneel in Editor X, waar de weergave van een herhaler wordt aangepast
Lees meer over herhalers:
Ga naar Academy X om toegang te krijgen tot onze lessen en oefeningen over herhalers.  

Vond je dit artikel nuttig?

|

In dit artikel

  • Een herhaler toevoegen
  • Inhoud aan een herhaler toevoegen
  • Herhaler-items beheren
  • De herhaler ontwerpen
  • Een AB-ontwerppatroon instellen voor herhaler-items
  • De indeling van je herhaler wijzigen