Studio Editor: Adding and Customizing Repeaters
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:
Add a repeater Manage repeater items Design a repeater Set an AB design pattern for repeater items Change the repeater layoutAdding a repeaterWe 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).Which elements cannot be added to a repeater?It is not possible to add the following elements to repeaters:
Pro Gallery Accordion Tabs All third-party apps Anchors and anchor menus Box slideshow Facebook Comments Facebook Like Facebook Page Like Flash elements Full width slideshows Google Maps Horizontal and vertical menus Most photo galleries (including full-width galleries, and certain layouts such as Masonry and Stacked) Pagination Bar Pay Button Pin to Pinterest Pinterest Follow Repeaters Share from Pinterest The HTML component Pro Gallery Twitter Follow Twitter Tweet VK Share VideoBox Wix Chat Button Wix Music Wix Video YouTube SubscribeTo add a repeater:
Click Add Elements  on the left side of the editor. Click Layout Tools. Click Repeaters. Drag a repeater onto the page.Tip:Removing an element from one repeater item deletes it from all other items. Managing repeater itemsYou can easily duplicate, rename, reorder and delete repeater items from the Inspector panel. To manage repeater items:
Select the relevant repeater. Click the Open Inspector icon  at the top right of the editor.
(In the Inspector) Click Manage next to the number of items.  
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.
Tip: Renaming one item automatically renames the other items in this repeater. Reorder items: Hold the Reorder icon  next to an item and drag it to a new position.  Designing a repeaterCustomize 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:
Select a repeater item. Click the Open Inspector icon  at the top right of the editor.
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.   Setting an AB design pattern for repeater itemsSplit 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:
Select the relevant repeater. Click the Open Inspector icon  at the top right of the editor.
Scroll down to Layout. Enable the Set AB design pattern toggle. Design items A and B:
    
Click on item A or B in your repeater. 
Tip: It can be any item from the relevant group. (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.   Repeat steps a-b for the other group of items.  Changing the repeater layoutSet 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:
Select the relevant repeater. Click the Open Inspector icon  at the top right of the editor.
Scroll down to Layout. Customize the repeater's layout based on the selected display type:Cards: Layout options
Direction: Select the direction of the items in the repeater - from left to right or right to left. Gaps: Enter a value (in px*) for the vertical and horizontal spaces between the repeater items. Set items per row: Enable this toggle to automatically set the amount of items per row, when there isn't enough space on the screen.  Number of items: Enter the number of repeater items that each row should display. Item alignment: Set the position of your items.List: Layout options
Gaps: Enter a value (in px*) for the vertical space between the repeater items.Slider: Layout options
Direction: Display your items on a slider that goes from left to right or from top to bottom. Gaps: Enter a value (in px*) for the vertical space between the repeater items.
Note: The available options (horizontal or vertical) depend on the slider direction you choose. Scroll snap align: When scrolling through the slides of your repeater, it "snaps" to each item (slide) so visitors don't miss it.  Show scrollbar: Show or hide a scrollbar for your visitors to scroll through the items.Grid Cells: Layout options
Direction: Select the direction of the items in the repeater - from left to right or right to left. Gaps: Enter a value (in px*) for the vertical and horizontal spaces between the repeater items.  Column min width: Set the minimum width of each column (i.e. repeater item). Rows min height: Set the minimum height of each row of repeater items.  Keep rows equal: Enable this toggle to ensure the rows are all equal in height.  When there's a single row: Decide what happens when there aren't enough items to fill the grid row.
    
Stretch columns to fill row: The existing columns stretch to fill the available space in the row. Keep empty columns: The existing columns stay the same size. More columns are  automatically added to fill the available space (even if some of them are empty). 
Tip: This option is especially useful when showing multiple dynamic repeaters on the same page – you may want to keep all items in the same size regardless of the amount of items in each repeater.   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.