Wix Editor: Adding and Managing Repeaters (Lists & Grids)

5 min read
A repeater is a list of items that have the same design and layout, but different content that you can customize per item (e.g., text, images). Repeaters make it easy to organize and show all kinds of information such as events, news and services.
screenshot of repeaters displaying dynamic content of different holiday destinations.
In this article, learn more about: 

Adding and setting up a repeater

Add a repeater so dynamic content flows and showcase multiple items like products or services in a structured format. 

To add and set up a repeater:

  1. Go to your editor.
  2. Click Add Elements  on the left side of the editor.
  3. Click List.
  4. Click a template to add it or drag it to the relevant location on your site.
  5. Set up your repeater's content:
    1. Select the repeater in your editor.
    2. Click Manage Items.
    3. Do the following:
      • Click Duplicate Item to add more items to the list.
      • Click and drag items to re-order the list.
      • Hover over an item and click the More Actions icon  to delete or duplicate it.
Using the List Builder app?
The old List Builder app is no longer supported and has been replaced with Repeaters. If you've added a list to your site through the app, copy the content over to a new repeater. 

Adding content to items

All the items in the repeater have the same design. You can customize the individual elements inside an item such as the text and images, but the design always stays the same.
For example, you can change the text on a button to be different for each item, but if you move the button to a different location inside the item, it moves the button in all the items to the same location.
When you add an element to a repeater item, it is automatically added to every item to keep the design consistent. The items change size according to the content inside them.
To add an element to the items, drag and drop it onto one item:
gif of container box moved around repeater item in wix editor
Note:
Some elements cannot be attached to repeater items.

Adding more items to a repeater

You can add as many items as you need to your repeater. 

To add an item:

  1. Select the repeater in your editor.
  2. Click Manage Items.
  3. Click Duplicate Item at the bottom.
  4. Edit your new item as you wish. 
screenshot of manage items panel next to a repeater, displaying number of items and duplicate items button.

Changing the layout of a repeater

Adjust the alignment, direction and spacing of your repeater items.

To change the layout:

  1. Select the repeater in your editor.
  2. Click the Layout icon   .
  3. Do the following to change the layout:
    • Choose an alignment: Left, Center, Right or Justify.
    • Use the slider to adjust the vertical spacing between items.
    • Choose whether to display items from left to right or right to left. 
screenshot of repeater layout panel in wix editor. displaying alignment, spacing and display direction options.

Designing repeater items

You can change the design of any individual item (e.g., image, text box, button, etc). Every design change you make to one item affects the others in your repeater. For example, changing the color of a button in one item changes the color for the rest of the items.
To design an element, select it and click the Design icon :
screenshot of repeater being used to display dynamic holiday package content in wix editor, design icon being hovered over.
Want to add alt text?
Add alt text to your repeater image to help search engines "read" them. Click the Settings icon of the relevant image and under What's in the image? Tell Google, enter a short description of the image.

Connecting a repeater to a database collection

Using repeaters, you can display content from your database collections. First, connect the repeater to the relevant collection. Then, connect each individual item to the relevant field in your collection.
screenshot from sandbox in cms that has a various of birds listed as individual fields.

Alignment issues in repeaters

You may notice that your repeaters are not aligned as expected.
Repeater sizes are based on the content within the item. For example, if one repeater item contains more lines of text than other items, this will affect the alignment.
We recommend ensuring that boxes all contain the same amount of lines of text to rectify the alignment. If you do not want to add more text to the box, simply add extra blank lines by using the Enter key on your keyboard.

Did this help?

|