Explore

Creating a Custom Section

Insert Columns

Columns provide structure to our layout. Otherwise, it would be a bunch of blocks that fill up 100% width of the page.

Click the “+” button on the top left to open the Blocks panel.

In the Blocks panel, scroll down to Columns and click it to insert it.

3. In the block that is inserted on the page, select a column variation. We will use the 25/50/25 option for this example.

⁠

Screen Shot 2022-09-18 at 2.35.05 PM.png

⁠

This just means that you’re inserting a a three column layout – a 25% column, a 50% column, and a 25% column – all making 100% of the width of the page. It should look like this.

Screen Shot 2022-09-19 at 2.57.08 PM.png

⁠

4. Select List View on the right end of the toolbar.

Screen Shot 2022-09-19 at 2.40.09 PM.png

⁠

It will open up the list panel on the left.

Screen Shot 2022-09-18 at 8.36.06 PM.png

⁠

You’ll notice that the 25/50/25 column in contained within a parent “Columns.” If you insert another 25/50/25 column right below it, you’ll notice it’ll also be contained within a parent Columns as well. Like mentioned in the

overview⁠

, Columns are like the parent container that hold all child columns (listed as individual Column elements in the List View), which hold our elements (aka the Blocks we insert on the page).

⁠

5. Adjust the parent “Columns” element.

Select the “Columns” element on the List View.

⁠

Screen Shot 2022-09-19 at 5.28.13 PM.png

⁠

In the tool tip that appears on the column in the content area, select the “Change alignment” option.

⁠

Screen Shot 2022-09-19 at 5.31.59 PM.png

⁠

Screen Shot 2022-09-19 at 5.28.26 PM.png

⁠

We don’t recommend leaving it as the default “None” option, so we suggest adjusting this to either:

⁠

Screen Shot 2022-09-19 at 5.28.34 PM.png

⁠

Wide Width: this will make it contained within the max width of the page container.

⁠

⁠

Full Width: this will make it stretch the full width of the page. Be careful in using this as on larger screens, it can get infinitely large.

⁠

⁠

6. Adjust the Column percentages.

Adjusting the left and right hand column widths allows you to customize the spacing to the left or right of the middle/main section. We are changing it from 25/50/25 to 10/80/10 in this example.

Adjust Left column to 10%

⁠

⁠

Adjust Right column to 10%

⁠

⁠

Adjust Middle column to 80%

⁠

⁠

Next: Adding Blocks to the Columns ➔⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.