Flexbox.

Discover 3 layouting tools on Editor X that harness the power of flexbox technology. With stack, Layouters and Repeaters, you can let your content seamlessly adjust across all viewports.

Start lesson →

Discover 3 layouting tools on Editor X that harness the power of flexbox technology. With stack, Layouters and Repeaters, you can let your content seamlessly adjust across all viewports.

Let’s explore how to create responsive layouts with flexbox technology on Editor X. We’ll tackle three different layouting tools built with flexbox: Stack, Layouter and Repeater.


Flexbox auto-stacks and wraps your content, so your site looks great at every viewport size.


Your open canvas on Editor X lets you drag and drop elements freely so when you resize the viewport, some of them can overlap.


To control the relationship between elements that are arranged above and below each other, multi-select them, and press Stack.


This places them all inside a flex container, which understands their order. Now when we resize the screen, the elements maintain space between them.


For a more structured section design, use a layouter, which you’ll find in the Add panel under Layout Tools.


A layouter is a smart layout tool that’s made up of a collection of responsive containers.


Drag the handles to see how your content seamlessly reorganizes across viewports.


Elements within each container automatically stack, so they keep their space from each other.


On an image, click Stretch to fill the entire container. To reorder the containers, just drag and drop them.


Use these plus and minus icons to change the relative width of each container.


The layouter automatically chooses the best layout for every viewport. And if you prefer, you can choose your own.


Let’s change this layout on mobile. Click Manage Layout, and choose the display you want.


For the final section, let’s add a Repeater. A Repeater is a layout that’s made up of many identical containers.


It’s ideal for a product page, where you want to display a lot of content with uniform styling.


To add content to your Repeater, first create a collection. To do this, add the Content Manager from the Add panel and create a new collection.


After you fill in all the fields, use a dataset to connect this collection to your repeater. Choose the collection you want and click create.


To display content from your collection on the Repeater, you’ll need to connect each component of the Repeater with the relevant field in your collection.


Connect the image to the image field, the title to the product name field — and finally the button to the product page field.

Now when you click Preview, your repeater displays all the content from your collection.


You can go back and change the styling of any component in your Repeater and it will automatically apply to all.


As with all the flexbox layouts, your content will seamlessly adjust across viewports—so your site design is instantly optimized for every screen.


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

NEXT VIDEOS

Video tutorial about how to use Stack on Editor X

Learn how to use stack to control the vertical relationship between elements.

Play icon
Video tutorial about how to design responsive layouts using a Layouter on Editor X

Learn how to design responsive layouts using a Layouter.

Play icon
Video tutorial about how to use a Repeater on Editor X to display dynamic content with uniform styling.

Learn how to use a Repeater to display dynamic content with uniform styling.

Play icon
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

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Blue background with the outline of a box in the middle of it. The box has alternating shaded blue lines, there is a white icon in the middle of the box. This shows stack.

LESSONS & EXERCISES

Stack

Learn how to use stack to control the vertical relationship between elements.

Blue background showing a layouter in the middle of it.

LESSONS & EXERCISES

Layouter

Get to know the Editor X Layouter, built on flexbox technology.

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.