Wix Editor: Adding and Managing Repeaters (Lists & Grids)
In this article
- Adding and setting up a repeater
- Adding content to items
- Adding more items to a repeater
- Changing the layout of a repeater
- Designing repeater items
- Connecting a repeater to a database collection
- Alignment issues in repeaters
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.
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:
- Go to your editor.
- Click Add Elements
on the left side of the editor. - Click List.
- Click a template to add it or drag it to the relevant location on your site.
- Set up your repeater's content:
- Select the repeater in your editor.
- Click Manage Items.
- 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:
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:
- Select the repeater in your editor.
- Click Manage Items.
- Click Duplicate Item at the bottom.
- 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:
- Select the repeater in your editor.
- Click the Layout icon
. - 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
:
:
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.
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.
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.
