Slides Layouter

Let’s explore how to use a Layouter set to the slides display type on Editor X.

You can use the Layouter to lay out your content as slides. Layouter is a smart layout tool made up of responsive containers that automatically adjust to any screen size. This option works well for presenting galleries with navigation arrows, displaying products or testimonials and more.

Let’s see how it works.

First, we’ll add a Layouter from the Add panel.

Then, change the Layouter’s display type to Slides.

The items rearrange from left-to-right, And they automatically fill the Layouter. We can adjust the sizing of the Layouter itself from the Inspector panel, or stretch it to fill the section. In this case we’ll go with stretched.

Next we’ll design the items. Each Layouter item is a container that we can design and add content to as needed. We’ll start by applying a 2x1 grid in this first container and adjusting the column and row size.

Then we’ll add our content. We’ll bring in a text element to the left cell and change the position and text properties. We’ll also add an image and stretch it to fill the right grid cell. And finally let’s choose a background color.

Okay, now let’s go to Manage items, where we can see our Layouter items. There are 4 by default. For this section we’re creating 3 slides with pretty much the same design. To do this efficiently, we’ll rename the item we just designed and duplicate it twice to get 3 identical ones. We don’t need these empty ones, so let’s delete them.

Now when we scroll through, we have 3 identical slides and we can quickly update the text and image for each one.

Our content is ready to go, so let’s explore the display properties. With this display type, we can choose which direction the slides move: from left to right, or from top to bottom.

We can change the number of Items per slide to control how many are in view at once–this works best if the number of items divides evenly across each slide–and show or hide the scrollbar as you navigate between items.

For the navigation, we can display arrows, buttons or text. We’ll go with buttons.

Two buttons – previous and next – are automatically placed to the bottom left and right. We’ll adjust the size of the first one, move it to where we want, and then do the same with the second one. These buttons are still clickable, even after we make these changes.

We’ll also change the button design by adjusting the corner radius and font. And to have the buttons change on hover, we’ll adjust the background and text color under the Hover tab.

Time to preview and see how it looks. As we click to move between slides, the buttons stay visible. That’s because their position type is set to pinned, and they’re pinned to the Layouter, which means they stay fixed in place relative to the Layouter.

When we resize the screen, we can see everything behaves responsively and the buttons work on all breakpoints.

Let’s customize the experience a bit more on tablet and mobile.

We’ll start by changing the direction of the slides at the tablet breakpoint to go from Top to Bottom.

Now that the items are arranged to move up and down, let’s optimize the layout a bit. We’ll change the grid layout for this item so it’s 2 rows instead of 2 columns, and also adjust the row height and title alignment so everything fits perfectly. We’ll need to do the same for the other items as well.

Everything is laid out nicely, so now let’s adjust the navigation option. We could keep the buttons, but in this case we want to change them.

To do this, we’ll select each one and choose Don’t Display. Remember not to delete them, or they’ll be deleted from all breakpoints.

Under Navigation, we’ll add arrows. They’re placed to the top and bottom by default.

But instead, we want them to appear one over the other like this, to the bottom right of the screen.

We’ll adjust the size and position of each arrow the same way we did with the buttons, so they’re placed where we want to the bottom right. They’ll remain pinned to the Layouter unless we adjust their position type. Depending on your design, you can even place buttons outside the Layouter.

We can also change the design of our arrows by choosing Change Basic Shape and selecting the one we want from the Media Manager. We’ll flip it and change the color. And we’ll do the same for the top arrow: choose the one we want, recolor and flip it.

There we go. As we resize the screen to mobile, you can see the changes are reflected there because the layout and style changes we just made also apply on smaller breakpoints. When we go back to desktop, we still have our original design.

Let’s see how it looks all together. Like we saw earlier, we can click to move between items. And as we resize, the Layouter behaves responsively. The layout changes on tablet and mobile as well, where our slides move top to bottom. It’s perfectly optimized for each breakpoint.

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