Let’s look at how to use designed sections on Editor X.

This curated collection was crafted by designers to give you inspiration and to bootstrap your creation process. These fully designed sections are arranged by category from Welcome and About, to Products and Pricing. And down here you have wireframes which you can fill with custom content.

Let’s go to the About page. We already designed the first section by hand, but let’s finish it using a Wireframe and Designed Section.

First, we’ll add a basic wireframe.

Each of these sections was made using different tech with built-in responsive behavior.

You can see that this one uses a 1x2 grid for the layout, and a stack to control the vertical relationship between the text and button.

Learn more about these layout technologies in the grid and flexbox videos in this series.

Any section you add to your site can be broken apart and customized. For example, click Change Image to add one from your media library, click Edit Grid to adjust the layout, and type or paste in new text.

All designed sections automatically match your site colors. You can update any section’s background from the floating action bar. To change the entire color palette across all sections on your site, click outside the canvas, go to Background on the Inspector panel, click Change and choose a new palette. If for example you change this from dark to light, it will change on all sections in use and those in the add panel.

Let’s move on to the next section of our page.

This one was built using a Layouter which is ideal for a modular display of content that automatically adjusts across breakpoints.

Drag and drop the inner containers to rearrange the layout, and replace the images and text. To learn more about Layouters, watch the video in this series.

Designed Sections are a great way to practically understand different Editor X technologies and to accelerate your creation process.

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

Designed sections

EXPLORE MORE TUTORIALS

Explore more topics

Additional resources