Display dynamic content using this multi-box layouting tool. Repeaters on Editor X are built using flexbox technology, so your layout automatically adjusts to every screen size. An ideal use case could be a team page where you display unique profiles with uniform styling.
Adding a Repeater.
Find a selection of Repeaters in the Add panel under Layout Tools.
Arrange the containers—known as items—in Cards, a List or a Slider. To choose your preferred layout, select your Repeater, and from the floating action bar, click Change Layout. You can make a different layout choice for each breakpoint.
Duplicate or delete individual items by selecting Repeater from the blue breadcrumbs and clicking Manage Items. From this panel, you can also drag and drop items to reorder them.
Populating your Repeater.
Manually add data to each item of your Repeater, or sync data behind the scenes using a database.
You can display different data in each item, including images, text and links. However, if you add or remove elements, or make any style and position changes, this affects all items. To update the styling of items, select the element you want to customize and click the Design icon from the floating action bar.
TRY IT YOURSELF
Exercise on Repeaters.
Open Academy X from desktop to complete this exercise.
Add an element. Drag in a button and place it in the bottom center of one of the items of the Repeater. Notice that it appears in the same position on all items.
Data vs. style. Customize the text on one of the buttons and notice that it does not repeat on all items. Change the color of the button and see the effect.
Add more items. Select Repeater from the blue breadcrumbs and from the floating action bar, click Manage Items. Select Duplicate Item to add a new one and drag the items to change their order.
Chang the layout. Move to the mobile breakpoint. Select Repeater from the blue breadcrumbs and from the floating action bar, click Change Layout. Choose a display type and notice the change does not affect larger breakpoints.
Watch related videos.
The rest is up to you.