Editor X: Using 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. 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:
Add a repeater Add content to your repeater Manage your repeater items Design your repeater Set an AB design pattern for repeater items Change your repeater layoutTip:You can also use repeaters to show dynamic content from a collection by connecting it with the CMS (Content Management System). Adding a repeaterWe 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:
Click Add Elements  on the top of Editor X. Click Layout Tools. Click Repeaters. Drag a repeater onto your page.Adding content to a repeaterAll 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.  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 content to a repeater:
Click Add Elements  on the top of Editor X. Drag the element you want directly onto the repeater.  Click the element and customize it individually for each item. Tip:Removing an element from one repeater item deletes it from all other items. Managing your repeater itemsYou can easily duplicate, rename, reorder and delete repeater items from the Inspector panel. To manage your items:
Click your repeater. Click the Inspector icon  at the top of Editor X. (In the Inspector) Click Manage next to the number of items. 


 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.  Designing your repeaterCustomize 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:
Click your repeater. Click the Inspector icon  at the top of Editor X. Click the Design tab .  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. 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 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. To set an AB design pattern for repeater items:
Click your repeater. Click the Inspector icon  at the top of Editor X. Scroll down to Display. 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) Click the Design tab . 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 layoutSet 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. 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:
Click your repeater. Click the Inspector panel  at the top of Editor X. Customize your 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. CSS Gaps: Enter a value (in px, vh or vw) 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
CSS Gaps: Enter a value (in px, vh or vw) 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. CSS Gaps: Enter a value (in px, vh or vw) 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. CSS Gaps: Enter a value (in px, vh or vw) 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. 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. Learn more about Repeaters:Head over to Academy X to access our lesson and exercises on Repeaters.