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.
