Sections.

Sections keep your content organized and let you create multiple design experiences on every page. Rearrange them, flip them to vertical and customize them at every breakpoint.

Sections keep your content organized and let you create multiple design experiences on every page. Rearrange them, flip them to vertical and customize them at every breakpoint.

Let’s take a look at how to work with Sections on Editor X. Every site page is divided into unique strips that can be customized individually. This lets you create multiple design experiences on every page at any breakpoint.


To work with a section, select it. If you can’t because something’s in the way, like here with this image, use these blue breadcrumbs to select it from under other elements—or go to your top bar and open the Layers panel to navigate, and find your section.


To add a new section, click the + icon at the bottom, and use the floating action bar to change the background color.


From the 3 dots, you have more controls like move up, move down, and flip a section to vertical.


We’ll use this vertical section as a sidebar, for a logo and social links. When you add or move elements, they attach directly to the section you place them in and auto-dock to the nearest edges.


For some elements, like social bars, the default layout is horizontal, but from the floating action bar, you can change the design and layout.


You can resize a section by hand by dragging its edges. For more precision, go to the Inspector panel, and resize using your preferred units of measure.


If you want to keep the elements of your sidebar in place as you scroll, select each element, go down to Position on the Inspector panel, and toggle on Fixed Position. Do this for all elements inside the section. Now when you scroll, you can always see your sidebar elements.


All sections can be set to fill the height of any viewport. To do this, select a section, change the units to viewport height, and type 100.


To arrange elements precisely within a section, apply a grid. This creates a 2-dimensional framework to design on.


On Editor X styling cascades down, which means that all design choices made on desktop, trickle down to smaller breakpoints. On tablet, this section is still filling the screen as it’s set to 100% viewport height, and this section is still flipped vertically.


To make better use of the space on smaller screens, you can always redesign. For example, let’s flip this section back to horizontal, hide the social bar, and resize the section.


Because we set this logo to Fixed Position, it stays still as the site scrolls. You can use it as an anchor to help users navigate back to the top of the site. Learn more about anchors in the Inspector panel video in this series.


Again, these styling changes only trickle down to smaller breakpoints. Back on desktop, the design’s still the same.


To display large amounts of content in a digestible way, use Overflow.


First, click the section, go to Overflow Content on the Inspector panel and select Scroll. Choose the scroll direction and decide if you want to display the scrollbar.


Next, let’s paste in a big chunk of text. As you can see, this was way too much text to fit in this size section. So we chose to reveal it through a scroll.


On tablet and mobile, you might not want this much text. To hide the entire section, click Don’t Display.


Now on tablets and all smaller devices this section is hidden. Let’s head back to desktop to check out the overflow effect. When you scroll down, the section freezes, scrolls through all the text, and then continues.


Since all of your sections can be rearranged and styled per breakpoint, your site experience will be unique to each device.


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

NEXT VIDEOS

Video tutorial about creating complex layouts on Editor X using CSS Grid

See how to apply a grid, dock elements to gridlines and edit with custom units.

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

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

Play icon
Video tutorial about how to structure a site on Editor X using pages, sections, containers and more

Learn how to structure a website using pages, sections and containers.

Play icon
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

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.

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.

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