Designed sections.

Discover fully designed sections and wireframes, all with built-in responsive behavior. Add them to any site to accelerate your creation flow, or use them as blueprints to learn how they were built.

Start lesson →

Discover fully designed sections and wireframes, all with built-in responsive behavior. Add them to any site to accelerate your creation flow, or use them as blueprints to learn how they were built.

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.

NEXT VIDEOS

Video about how to apply and customize hover interactions on Editor X.

Learn how to apply and customize interactions to any element on hover.

Play icon
Video about how to edit the style, position and behavior of images on Editor X

Learn how to add, style, replace and position images on every site page.

Play icon
Video about how to use video tools and decorative elements on Editor X

Explore how to add and edit Transparent Videos, VideoBox and Vector Art.

Play icon
Video about how to use custom menus on Editor X

Discover how to create and manage multiple custom menus on every site.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Thumbnail indicating single images. Purple background with a shaded purple box over it and an icon in the middle.

LESSONS & EXERCISES

Single Images

Discover how to customize the size, position and behavior of images per breakpoint.

Video about how to use sections on Editor X

VIDEO LIBRARY

Sections

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

Video about how to use video tools and decorative elements on Editor X

VIDEO LIBRARY

Video & Decorative

Explore how to add and edit Transparent Videos, VideoBox and Vector Art.

Green background showing sections. The left side is a shade lighter than the right side. There is an icon in the middle of the background.

LESSONS & EXERCISES

Sections

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

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
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.