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

4 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.

Learn how to:


Adding and setting up a repeater

  1. Click Add  on the left side of the Editor.
  2. Click List.
  3. Click a template to add it or drag it to the relevant location on your site.
  4. 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 Show More icon  to delete or duplicate it.
Note:
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 the element from the Add panel onto one item:
Note:
Some elements cannot be attached to repeater items. Learn More

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. 

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. 

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 :

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. Learn more

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?

|