Layouter

Let your content seamlessly adjust to every screen size using flexbox technology—ideal for structured layouts with multiple boxes.

Adding a Layouter

Find Layouters in the Add panel under Layout Tools. Choose from blank wireframes or designed layout suggestions. To begin, drag one onto your canvas.

Choose a display type

Each container in your Layouter is called an item. At each breakpoint, you can choose to lay out your items in Columns, Rows, Mosaic, Bricks, Slider or Slides. Select the Layouter and then choose the display type from the floating menu or from the Inspector panel.

Items

You can drag and attach elements to each item in the Layouter. You can also apply a grid and position elements exactly where you want.

Managing items

From the Inspector panel, under Manage Items you can add items, or click on the 3 dots next to each item to duplicate, rename, delete or choose not to display.

Reordering items

From the Manage Items panel, drag the items to reposition them. You can also reorder the items directly on the canvas.

Setting the items size

You can resize individual items. From the Inspector panel, adjust each item's width and height using the measurements of your choice. You can also adjust the horizontal and vertical gaps around items

Adding gaps between items

You can set how much space you want to have between your items, horizontally and vertically by setting the gaps in the Inspector panel.

Follow these steps in the editor

Open exercise template →

Change the items’ width. Click on the top left item and from the Inspector panel, change its width to 30%. Then click on the bottom right item and change its width to 30%.
Add gaps. Select the Layouter from the blue breadcrumbs, then from the Inspector panel add 10px to the horizontal and vertical gaps.
Reorder the items. From the Inspector panel, click on the 3 dots next to Manage Items. Drag the second item underneath the third one.
Change the display type. Click on the tablet breakpoint, then select the Layouter and from the floating menu in the dropdown, choose Rows.
Don’t display an item. Right click on the fourth item with the video, then select Don’t Display.
Resize the canvas to see how the Layouter looks at each breakpoint.

Transcript

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.