Studio Editor: Adding and Customizing Repeaters

8 min read
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, including content from the site's CMS (Content Management System).
In the Studio Editor, repeaters are arranged in a responsive flex layout, making each item look great on every screen size.
Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.
In this article, learn how to:

Adding a repeater

We have loads of pre-designed repeaters for you to add and customize to your needs. Some repeaters contain images, some are more of a "list" style with emphasis on text. 
After adding a repeater you like, start working on the content. 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 each item (e.g. text, images).

To add a repeater:

  1. Click Add Elements  on the left side of the editor.
  2. Click Layout Tools.
  3. Click Repeaters.
  4. Drag a repeater onto the page.
Tip:
Removing an element from one repeater item deletes it from all other items. 

Managing repeater items

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

To manage repeater items:

  1. Select the relevant repeater.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. (In the Inspector) Click Manage next to the number of items.  
A screenshot of the top of the Inspector panel in the Studio Editor, clicking the Manage button to manage repeater items
  1. Choose how you want to manage your repeater items:
    • Duplicate an item: Select an item, then 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.
    • Reorder items: Hold the Reorder icon  next to an item and drag it to a new position.
A screenshot of the panel in the Inspector where you manage and reorder items

Designing a repeater

Customize the repeater's design to make it match your client's site. You can change the background color of the items, add borders, shadow, or an interesting cursor that appears when visitors hover over the repeater. 
Tip:
Make your repeater engaging and noticeable by adding animations. You can also make your repeater items stick to the top and / or bottom of the screen.

To design a repeater:

  1. Select a repeater item.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Use the available options under Design to customize 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. 
A screenshot of the design options in the Inspector once you select a repeater item

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 animations.
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 the Editor. When designing any of the A or B items, the other items in the group change automatically to match. 

To set an AB design pattern for repeater items:

  1. Select the relevant repeater.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Scroll down to Layout.
  2. Enable the Set AB design pattern toggle.
  3. 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) 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 an animation from the Interactions tab (Note: Only Hover and Click interactions are available for repeater items with AB patterns). 
      • Apply a custom cursor from the Cursor section.
    3. Repeat steps a-b for the other group of items.
A screenshot of a repeater with an AB pattern design, showing the toggle enabled

Changing the repeater layout

Set how 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. 
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. Select the relevant repeater.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Scroll down to Layout.
  2. Customize the repeater's layout based on the selected display type:
Note about gaps:
Some old browsers don't support CSS gaps (e.g. Chrome 76-83, Safari 12-14 and Edge 79-83). This means visitors who access the site from these browsers don't see the gaps you set between repeater items. 
The layout options that appear in the Inspector when you select the Cards display type

Did this help?

|