Studio Editor: Adding and Managing Sections
6 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:
- Click Add Elements
on the left side of the Editor. - Click Sections / Wireframes.
- Click a category to see the available designs.
- Drag a section onto the page.
- Customize the section to your needs:
- Click elements to customize their content.
- Change the background.
- Replace images and text to your own.
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).
. Then, click Save as Asset. This saves your design and makes it available in the Add Elements panel (Assets tab).Adding a blank section
You can add a section that is completely blank to design it from scratch. Once you're in the relevant page, click the Add Section icon 
at the top or bottom of any section.
at the top or bottom of any section. 
To add a blank section:
- Go to the relevant site page in the Editor.
- Click the Add Section icon at the top / bottom of the relevant section.
- (Optional) Choose a layout with multiple cells to organize your content.
- Start adding elements and designing the section.
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:
- Select the relevant section in the Editor.
- Click the Blank drop-down at the top of the section.
- 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. - Drag elements to the relevant cells.
- (Optional) Add more cells to the section or split existing cells:
Split an existing cell
or split vertically 
.
Add a new cell
at the top right of the Editor.
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:
- Select the relevant section in the Editor.
- Click the More Actions icon on the section.
- Click Move Up or Move Down.
Deleting a section
You can delete a section at any time. This deletes the section from the page on all breakpoints.
Note:
It is not possible to delete sections that contain apps such as Stores, Events, Blog etc.
To delete a section:
- Select the relevant section in the Editor.
- Click the More Actions icon on the section.
- 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.
Did this help?
|