Studio Editor: Adding and Managing Sections

5 min read
Sections are the building blocks of every page. Use them to keep related content together and make the page look organized, professional and structured.
Add as many sections as you want to each page. You can choose from blank sections, wireframes, or pre-designed sections that are fully customizable. The sections span across the width of the browser, and you can set the height as you wish.
In this article, learn more about:
Create global sections:
Make the same section appear on multiple pages by setting it as global.

Adding wireframes and pre-designed sections

We have tons of ready-made and fully responsive sections to speed up your creation process. Just choose the one you want and customize it to your client's style. If you mainly need help with the layout, not so much the design, select one of our blank wireframes instead.

To add a wireframe or pre-designed section:

  1. Click Add Elements on the left side of the Editor.
  2. Click Sections / Wireframes.
  3. Click a category to see the available designs. 
  4. Drag a section onto the page. 
  5. Customize the section to your needs:
    • Click elements to customize their content.
    • Change the background.
    • Replace images and text to your own.
GIF showing the Add Elements panel in the Studio Editor, and the available designs in the Sections and Wireframes tabs

Adding a blank section

You can quickly add blank sections to your page while working on the canvas. Hover over the top or bottom of any section and click + Add Section. You can then decide whether you want to design it from scratch, apply a grid layout or use a ready-made design.

To add a blank section:

  1. Go to the relevant page.
  2. Hover over the top or bottom of the relevant section and click + Add Section.
  3. Choose how you want to start designing:
    • Designed Section: Choose a pre-designed section and customize it to your client's needs.
    • Grid layout: Choose a layout with multiple cells to organize your content.
    • Add an Element: Start by adding elements to the blank section. 
A screenshot of a blank new section, showing the grid cell layouts you can click and apply
Save your design for future use:
Select the section in the editor and click the More Actions icon . Then, click Save as Asset. This saves your design and makes it available in the Add Elements panel (Assets tab).

Using cells to organize a section

Add cells to a section to create a responsive, structured layout. Keeping the elements in separate cells ensures they stay in place on all screens. Choose a layout, then move elements to the cells - you can always split the cells or add new ones later. 

To apply a grid on a section:

  1. Select the relevant section in the Editor.
  2. Click the Blank drop-down at the top of the section. 
A screenshot of the toolbar that opens when selecting a section, with the drop-down of available layouts
  1. Choose a layout: Rows, Columns, Collage, etc.
    Tip: You can change the layout from the drop-down at any time - it will not move your elements around.
  2. Drag elements to the relevant cells.
  3. (Optional) Add more cells to the section or split existing cells:

Reordering page sections

While building a site, you may decide that the structure and organization of the content should be slightly different. This is where sections really come in handy; you can move content around very quickly, whenever you want.

To reorder page sections:

  1. Select the relevant section in the Editor.
  2. Click the More Actions icon on the section.
  3. Click Move Up or Move Down.
A screenshot of a section, showing how to move it up or down on the canvas

Deleting a section

You can delete a section at any time. This deletes the section from the page on all breakpoints. 
It is not possible to delete sections that contain apps such as Stores, Events, Blog etc.

To delete a section:

  1. Select the relevant section in the Editor.
  2. Click the More Actions icon  on the section.
  3. Click Delete.
Want to hide the section instead?
Click Don't Display to hide the section from the current breakpoint you're on. You can find the hidden section in the Layers panel, where you can also unhide it. 
A screenshot of a section selected in the Editor, showing how to delete it

Did this help?