Repeater.

Use a Repeater to display dynamic content in multiple boxes with uniform styling. Add and manage items, customize the layout and optimize the Repeater for every breakpoint.

Use a Repeater to display dynamic content in multiple boxes with uniform styling. Add and manage items, customize the layout and optimize the Repeater for every breakpoint.

Ready to explore how to use a Repeater on Editor X?


Let’s get started.


A Repeater is a flex layouting tool that’s useful when you want to display dynamic content in multiple boxes that are styled the same.


Designing repeating layouts is great for displaying things like team profiles and feature listings that automatically adjust for every screen size.


You’ll find a selection of Repeaters in the Add panel, under Layout Tools. You’ve got everything from customizable blank wireframes, to more intricate layout suggestions.


For this design, we’ll choose a blank one.


The responsive boxes inside your Repeater are called Items. To add or remove items, click Manage Items from the floating action bar. Use the three dots to duplicate or delete an item, or you could just select one and duplicate it from down here.


To start customizing, we’ll select Change Layout. There are three different display types to choose from: Cards, List, and Slider. Now, if you toggle on to set the items per row automatically, the number of items will be set according to the width of the Repeater at any screen size.


But if you toggle on to set the items manually, you can define a specific number of items per row that will remain the same at any screen size. So if we set this to 4, you’ll see that as we resize the screen, there will always be a maximum of 4 items per row.


For the sake of our design, let’s set this back to 3.


You can also set the horizontal and vertical margins between the items in pixels or percentages. We’ll set both to 2%.


Over here, you can choose the alignment of your items. This comes in handy when you have fewer items in a row than the amount you set for it, and you want to adjust their placement. In this case, we set the number of items per row to 3, but you can see we only have 2 items here.


You can also set the direction your items will appear in. We’ve added these numbers here so you can get a better idea of how it works. Let’s align them to the center, and set the direction from left to right. Alright, our design actually only needs three items, so let’s delete two of them.


Ok now let’s adjust the Repeater’s size and position on the canvas. To do this, we’ll use the Inspector panel on the right. We’ll align it to the center,  and set the width to 90% so that it takes up almost the entire width of the section.


Now we’ll design the items within the Repeater. Each of our items will contain an image and text. To make sure the display is organized, we’ll apply a grid to divide it into 2 rows—one for the image and one for the text.


Notice how style changes you make to one item automatically reflect on all of them.


Ok our image is going to take up more space than the text, so let’s adjust exactly how these rows are divided. We’ll choose Adjust Grid, then Edit Grid.


To set the row height, just select the tab on the left. We’ll set the height of the first row to 28 viewport width, and the height of the second row to 7 viewport width.


Now to add an image to our Repeater, we’ll go to the Add panel, grab one from the Quick Add tab and drag it into place. Let’s stretch it to fill the entire top row of the item. Again, this style change can be seen across all the items in the Repeater.


Then we’ll grab a textbox and add it to the bottom row, and select Edit Text to customize it. You can choose a style, select a font and use text scale to set a minimum font size and a maximum. This will make sure the text gradually scales in relation to the screen size.


Next we’ll drag a button into our Repeater, and place it at the bottom right.


Just need to add a few more finishing touches to our design and we’re good to go.


Now that our layout is set, let’s see what it looks like on different breakpoints. So the Repeater looks great on desktop and tablet—but let’s check it out on mobile.


While the mobile breakpoint automatically suggests the layout should be displayed as a List, it does create this long vertical scroll that takes up a lot of screen space, so let’s see if we can optimize it even further. We’ll select our Repeater and choose Change Layout to update the display type to Slider. That looks way better.


Over here, you can set the Slider direction to vertical, or horizontal, and toggle on the scroll snap to control where the slider stops after one swipe. You can also choose to display a scroll bar, but for this design we’ll keep these both toggled off.


We’re looking good on mobile, so let’s head back to desktop. Notice that the edits we made on mobile don’t appear on desktop. That’s because these changes follow the cascading rule, meaning any style changes you make at one breakpoint will cascade down to smaller breakpoints, but not the other way around.


Ok now let’s get rid of these mountain images and add some real content to this thing. We’ll just select an image and click Change Image to add one from our site files. So while style changes repeat across all items, the unique data for each one will not.


You’ll notice the same behavior when we customize the text in the first item. See how the other two stay the same?


Now there are two ways to update your content. You can manually edit the content directly from the canvas like we just did now—but if you’re working with a large number of items and want to save time, you can add a Content Manager from the Add panel to add and edit the content without touching the design.


You can also access it from the top bar here. The content manager is an integrated CMS that lets you manage dynamic content behind the scenes of your site using data collections. You can see we’ve already created and set up a collection filled with images and content.


And if we head back to the canvas and select our Repeater, you’ll notice this data icon in the floating action bar. You can use it to connect the items in your Repeater to the relevant fields in your data collection. If you want to learn more about setting this up, watch the content management webinar in the Academy.


An important thing to note here—we set up our layout with only 3 boxes inside of it, but here we see 6. That’s because the Repeater serves as a layout guide for whatever amount of content you choose to display from your data collection.


Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.

NEXT VIDEOS

Video about designed sections on Editor X, and how they give inspiration and help you learn about responsive technologies

Add customizable wireframes & designed compositions to any site.

Play icon
Video about how to apply and customize hover interactions on Editor X.

Learn how to apply and customize interactions to any element on hover.

Play icon
Video about how to edit the style, position and behavior of images on Editor X

Learn how to add, style, replace and position images on every site page.

Play icon
Video about how to use video tools and decorative elements on Editor X

Explore how to add and edit Transparent Videos, VideoBox and Vector Art.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Blue background with a Repeater layout over it. There is a white icon in the middle.

LESSONS & EXERCISES

Repeater

Discover how to display content in a multi-box, flex layout with uniform styling.

Thumbnail indicating the content manager. Green background with 3 paler green boxes over it and a black icon in the middle.

LESSONS & EXERCISES

Content Manager

See how to create and store heavy or dynamic site content using database collections.

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.