Layouter.

Design responsive layouts with boxes that wrap at every viewport using a Layouter. Add elements, control the wrap behavior, and customize your layout per breakpoint.

Design responsive layouts with boxes that wrap at every viewport using a Layouter. Add elements, control the wrap behavior, and customize your layout per breakpoint.

Let’s explore how to use a Layouter to design responsive layouts on Editor X.


A Layouter is a smart flex tool that’s made up of responsive containers. It’s perfect for items with unique designs that may wrap seamlessly as the viewport changes and adjust in size and position so your site will look good at every screen size.


Let’s see how it works.


You can add a Layouter from the Add Section shortcut, here...

…or from the Add panel, under Layout Tools where you’ll find a selection of customizable blank wireframes and designed layout suggestions.


Let’s choose the mosaic for this example.


You can set the Layouter’s width, min width, min height and the max width—while it’s height is set to auto and is determined by factors like the item’s height and the content. Plus, when the Layouter is stretched, its height is determined by the parent container’s height.


As soon as Layouter is added to the canvas, it behaves responsively.


The responsive boxes within your Layouter are called items.


You can customize the design of each item including changing its color. Plus since items are containers, we can adjust the grid to change their layout. It’s also possible to add different types of elements to each Layouter item like text, images, videos and so on.


From the Inspector panel, you can rearrange items, add another, duplicate, rename, delete or choose not to display.


Under Display in the Inspector panel, you can choose the display type from columns, rows, mosaic, bricks, slider and slides. You can also set the direction and the item’s width and gaps. The options under Display may change depending on the Layouter display type.


Each item’s size can be also adjusted separately. The items’ width plus gaps on each row can take up to 100% of the available space, but if the total comes to more than 100%, then they may wrap to the next row.


Depending on the display type, items may behave differently. For example, in the mosaic display type, elements always fill the entire row, while in the bricks display, elements don’t stretch to fill the row.


Let’s undo some of the changes we made for the mosaic layout so we can take a look at wrapping behavior. To make sure the item with the image fits our design, we’ll set the minimum width to 550px so this item won’t get any smaller than that size, it’ll wrap when the screen size changes. Note that all sizing options can be adjusted per breakpoint.


You can also rearrange the items directly on the stage and all Layouter items will automatically adjust to accommodate changes in position.


There are 2 ways to navigate between the layers, either from the blue breadcrumbs on the canvas

or from the Layers panel on the left, where you can view the section hierarchy and select each layer on your canvas.


Now, let’s take a look at the design on tablet.


From the blue breadcrumbs, we’ll select the Layouter and view display options. Again, you can change the display type, set the direction, the items’ width and the gaps.  It’s always an option to adjust your content to fit the layout.


Now let’s take a look at mobile. For some designs, a Slider display works well on this viewport. It has the same properties as other display types plus Scroll snap align, which lets you lock the position of items on the screen after you scroll and toggle-off the show scrollbar.


And lastly, thanks to the cascading rule we see that larger breakpoints aren’t affected by changes we made to the smaller ones.


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

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

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
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
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.

See all results ▶