Studio Editor: Repeaters toevoegen en aanpassen

所要時間8分
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.
Ga naar onze Wix Studio Academy om extra webinars, tutorials en cursussen voor Wix Studio te bekijken.
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. エディターのリンクをクリックしてください。 Elementen toevoegen.
  2. Klik op Indeling-tools.
  3. Klik op Repeaters.
  4. Sleep een repeater naar de pagina.
ヒント
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 het Inspector openen-ピクトグラム.
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. (In de Inspector) Klik naast het aantal items op Beheren.
Een screenshot van de bovenkant van het Inspector-paneel in de Studio Editor, klikken op de Beheren-knop om repeater-items te beheren
  1. 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 その他の活動-ピクトグラムen klik vervolgens op ヴェルファイア.
    • De naam van een item wijzigen: Klik naast het item op het その他の活動-ピクトグラムen klik vervolgens op Naam wijzigen. ヒント Als je een item hernoemt, worden de andere items in deze repeater automatisch hernoemd.
    • Items opnieuw ordenen: Houd naast een item het Opnieuw ordenen-ピクトグラムingedrukt 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. 
ヒント
Maak je repeater aantrekkelijk en opvallend door animaties toe te voegen. Je kunt repeater-items ook laten plakken aan de boven- en/of onderkant van het scherm.

Om een repeater te ontwerpen:

  1. Selecteer een repeater-item.
  2. Klik rechtsboven in de Editor op het Inspector openen-ピクトグラム.
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. Gebruik de beschikbare opties onder Ontwerp om je repeater aan te passen:
    • 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 het Inspector openen-ピクトグラム.
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. Scrol omlaag naar Indeling.
  2. Schakel AB-ontwerppatroon instellen in.
  3. Ontwerp items A en B:
    1. Klik in je repeater op item A of B.
      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 een animatie toe vanaf het Interacties-tabblad (opとする: Alleen aanwijs- en klikinteracties zijn beschikbaar voor repeater-items met AB-patronen). 
      • 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 het Inspector openen-ピクトグラム.
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. Scrol omlaag naar Indeling.
  2. 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

この記事はいかがですか?

|