LESSON 18

Repeaters.

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.

TRY IT YOURSELF

Exercise on repeaters.

​Open Academy X from desktop to complete this exercise.

Adding a repeater.

Find a selection of repeaters in the Add panel under Layout Tools

Display types.

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.

Managing items.

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.

01

Adding 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.

02

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.

03

 Adding 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. 

04

Changing 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.

Customizing items.

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.