Editor X: Using Repeaters

9 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
A repeater is a list of items that have the same design and layout, but different content in each. It's a fast and easy way to display your content. 
In Editor X, repeaters are arranged in a flex layout that automatically reorganizes content when it’s resized, making it look great on every screen size.
In this article, learn how to:
An example of a repeater you can design on Editor X.
Tip:
You can also use repeaters to show dynamic content from a collection by connecting it with the CMS (Content Management System)

Adding a repeater

We have loads of pre-designed repeater sections for you to add to your site and customize to your needs. Some repeaters contain images, some are more of a "list" style with emphasis on text. 

To add a repeater:

  1. Click Add Elements  on the top of Editor X.
  2. Click Layout Tools.
  3. Click Repeaters.
  4. Drag a repeater onto your page.
A screenshot of the Add Elements panel in Editor X, showing the repeaters you can add

Adding content to a repeater

All the items in the repeater have the same design. When you add an element to a repeater item, it's automatically added to the other items to keep the design consistent. 
Having said that, you can still customize the individual elements inside an item (e.g., text, images). For example, adding a button to one item adds it to the rest, but you can change the button text in each item to say something different.  

To add content to a repeater:


  1. Click Add Elements on the top of Editor X.
  2. Drag the element you want directly onto the repeater. 
  3. Click the element and customize it individually for each item. 
Tip:
Removing an element from one repeater item deletes it from all other items. 
A video showing that adding an element to one repeater item adds it to all other items

Managing your repeater items

You can easily duplicate, rename, reorder and delete repeater items from the Inspector panel. 

To manage your items:

  1. Click your repeater.
  2. Click the Inspector icon  at the top of Editor X.
  3. (In the Inspector) Click Manage next to the number of items. 

    A screenshot of the top of the Inspector panel where you can click Manage to manage repeater items
  4. Choose how you want to manage your repeater items:
    • Duplicate an item: Click Duplicate Item at the bottom.
    • Delete an item: Click the More Actions icon next to the item, then click Delete.
    • Rename an item: Click the More Actions icon next to the item, then click Rename.
    • Re-order items: Click and drag the items to a new position.
A screenshot of the Manage Items panel in the Inspector

Designing your repeater

Customize the design of your repeater to make it your own. You can change the background color of the items, add borders, shadow, or an interesting cursor that appears when visitors hover over the repeater. 

To design your repeater:

  1. Click your repeater.
  2. Click the Inspector icon  at the top of Editor X.
  3. Click the Design tab
  4. Use the available options to design your repeater:
    • Change the fill color and opacity of all items.
    • Add a border and shadow to make the items stand out.
    • Make the item corners rectangular or round. 
    • Add a cool cursor to appear when visitors hover over the repeater. 
Using an AB design pattern?
These design changes apply to all repeater items, regardless of the AB pattern. 
A screenshot of a repeater and the available options in design tab in the Inspector panel

Setting an AB design pattern for repeater items

Split your repeater items into 2 groups to create a more elaborate design. The AB pattern lets you create two versions of the same design, with different styles and interactions.
Once you enable the AB pattern, your repeater items divide into groups A and B. You can see which items belong to each group in your Editor. When designing any of the A or B items, the other items in the group change automatically to match. 
A screenshot of a repeater and the Inspector panel, designing all Item B's

To set an AB design pattern for repeater items:

  1. Click your repeater.
  2. Click the Inspector icon  at the top of Editor X.
  3. Scroll down to Display.
  4. Enable the Set AB design pattern toggle.
    A screenshot of the Display section in the Inspector panel, enabling the AB pattern toggle
  5. Design items A and B:
    1. Click on item A or B in your repeater.
      Tip: It can be any item from the relevant group.
    2. (In the Inspector) Click the Design tab .
    3. Choose how you want to customize this group of items:
      • Choose a design preset from the Design section.
      • Change the items' Fill color & opacity.
      • Add a hover or click interaction from the Interactions tab

Changing your repeater's layout

Set how your repeater items are rearranged when the screen size changes. Depending on the chosen display type (i.e., Cards, List, Slider, Grid Cells), you can customize the margins, alignment, directionality and other settings. 
A screenshot of a drop-down that appears when clicking a repeater, allowing you to quickly change layout
Working with breakpoints:
  • You can have a different layout for your repeater for each breakpoint.
  • Lists and sliders are commonly used on smaller screen sizes such as tablets and mobile devices.

To further customize the layout of a repeater:

  1. Click your repeater.
  2. Click the Inspector panel  at the top of Editor X.
  3. Customize your repeater's layout based on the selected display type:
Note about CSS gaps:
Some old browsers don't support this feature (e.g. Chrome 76-83, Safari 12-14 and Edge 79-83). This means visitors who access your site from these browsers don't see the gaps you set between repeater items. 
A screenshot of the Inspector panel in Editor X, while adjusting the display of a repeater
Learn more about Repeaters:
Head over to Academy X to access our lesson and exercises on Repeaters.  

Did this help?

|