How to create slides with a Layouter.

Use a Layouter set to the slides display type to lay out your content as slides that users can scroll or click through. This option works well for presenting galleries with navigation arrows, displaying products or testimonials and more.

Use a Layouter set to the slides display type to lay out your content as slides that users can scroll or click through. This option works well for presenting galleries with navigation arrows, displaying products or testimonials and more.

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.

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.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

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
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 ▶