Layouter.

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.