​​Site structure.

Learn how to structure a website on Editor X using pages, sections and containers. Add as many pages and sections as you need, rearrange them and navigate between them using layers and breadcrumbs.

Start lesson →

Learn how to structure a website on Editor X using pages, sections and containers. Add as many pages and sections as you need, rearrange them and navigate between them using layers and breadcrumbs.

Let’s explore how to structure a site on Editor X using pages, sections and containers.


Your canvas is divided into horizontal sections. This helps keep your content organized and lets you create multiple design experiences on every page.


Sections are large flexible containers that can hold many elements from complex layouts to images and text. They can be rearranged and customized per breakpoint.


From these 3 dots on the floating action bar, you can move sections up... down... flip them to vertical, duplicate, hide them and more. To learn more, watch the Sections video in this series.


To add a new page, go to the Pages Panel and use the plus icon, or click Add New Page at the bottom to select a specific type.


Let’s create a new page to present the car model specifications.


On every new page, by default you’ll have a header, a large section and a footer. 


Notice, we already designed the header and footer on the homepage—so changes we make to them are automatically carried to all site pages. Learn more about this behavior in the Masters video in this series.


You can add as many pages, and as many sections as you want. To add a section, click the blue plus icon and choose one of the 3 layouts: Blank, Grid and Layouter.


From the Add panel, you'll also find a wide selection of designed sections, created by our in-house studio — from about sections to features and testimonials.


Right now, we only need this one blank section. It’ll display the specs of a new car model. You can nest as many containers, elements and layout tools inside each other as you want. Let’s add more elements to this section.


From the Add panel, we’ll create a background using an image from our site files—and stretch it to fill the entire section.


Now let’s add a container to hold our text. You can use the Quick Add section in the Add panel to grab a common element.


From the Layers panel, you can see the full list of elements and how they’re ordered on your page. For example, this image and container are placed inside of this section. To learn more about these relationships, watch the Element Hierarchy and Parenting video in this series.


As we move this container, you’ll see from the little blue lines that it automatically docks to the nearest edges of the section.


It’s now docked to the top and left, so when you resize the viewport, it keeps a proportional distance from these edges of the section.


You can adjust the size of your container by hand, and change the design from the floating action bar. Here, we’ll decrease the opacity a bit.


Within any section or container, you can also add layout tools like Repeaters and Layouters, and apply a CSS grid


Let's apply a grid so we can place everything precisely at any screen size. Choose one of the preset grid layouts, or create your own custom grid


Next, let’s add some text to the container, and fill in our specs content. Now let’s look at this text in relation to the rest of the page.


Click on an element to open the breadcrumbs. From here, you can navigate within the structure of your site to select each element. You can see that the text is inside the container, which is inside the section. This same structure can also be seen in the Layers panel and over here at the top of the Inspector panel.


The text is attached to the container, so if we move the container, the text stays inside.


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

NEXT VIDEOS

Video tutorial about layout tools on Editor X that use Flexbox technology

Get to know where you control size, position and behavior of all elements.

Play icon
Video tutorial about breakpoints on Editor X

Learn how to edit element style, position and behavior at every viewport width.

Play icon
Video tutorial about layout tools on Editor X that use Flexbox technology

Discover 3 layouting tools that harness the power of flexbox technology.

Play icon
Video tutorial about how to use Stack on Editor X

Learn how to use stack to control the vertical relationship between elements.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Blue background showing a lighter blue container in the middle of the box. There is a white icon in the box.

LESSONS & EXERCISES

Containers

Find out how to organize your content in containers.

Video about hierarchy on Editor X, and how the parenting model influences how elements interact with each other across all breakpoints

VIDEO LIBRARY

Element Hierarchy

Dive into the concept of element hierarchy and parenting on Editor X.

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.

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