Using the Page Builder

Working with Sections in the Page Builder

How to Add a Section to a Page

When you edit a new page in the Page Builder, at least one section will be visible by default. Multiple sections can be added to a single page. These sections will be arranged vertically. 

Remember that sections are the area that you add blocks of content to, like a background for the page. 

How to Add and Edit Flex Sections

A Flex Section is a section with built-in columns.

You can add a Flex Section by clicking the plus (+) button on the top-right toolbar, and clicking one of the Flex Section options at the bottom of the list: 

The Flex Section will be added. The columns will be filled with text placeholders. To add your own text to one of the placeholders by double-clicking on the text, and typing your change:

You can access some flex section options by clicking the gear icon: 

First, you can choose between Autofit and Normal. When the Flex Section is Normal, you can resize the width of the blocks in the section, and change how the blocks are aligned. When the Flex Section is Autofit,  the blocks are forced to fit the entire width and height of the section, and you cannot adjust how blocks are aligned:

Clicking Change Preset will let you cycle through a number of preset arrangements of text blocks for this flex section. In this example, three columns were selected, so you will see various arrangements of three blocks of text: 

The next options let you choose how to align the content. Remember that only Flex Sections that are Normal allow for alignment to be changed. The options here allow you to justify content (adjusts and equalizes horizontal spacing of blocks), align content (adjusts and equalizes vertical spacing of blocks), or align items (changes the vertical alignment of blocks in the same row):

The options under the Gap heading can be used to increase or decrease the amount of space between the blocks. You can click on a number to set that gap amount, or click the plus (+) or minus (-) button to increase and decrease the gap: 

You can change the position of one of the blocks in the flex section by clicking on the block, and clicking the arrows at the bottom of the side panel:

You can also click Detach on this menu to detach the block from the flex section, and move it freely around the page: 

When a block has been detached from a flex section, it can be reattached by selecting the block, and clicking Attach at the bottom of the side panel:

Editing Sections

To edit a section, make sure the Section tab is selected on the side panel: 

Note: The Section tab will be open by default when nothing on the page is selected.

Make sure the section you want to edit is visible in the preview at the top of the side panel: 

If the section you want to edit is not visible, you may need to scroll up or down to select the section.

How to Change the Section Background

By default, sections in the Page Builder appear with a plain white background. This can be changed using the side panel. To change the color of the section’s background, click on the circle to open the color selector tool: 

Make a selection. The color will be visible in the main area: 

You can also replace the background of a block with an image. To do this, click Image: 

Then click Upload Image: 

Your file browser will open, and you can select an image to use.

You can also use the ellipses (…) to select an image that has already been used in this course: 

Clicking on the ellipses (…) opens a menu with images to select from.

Finally, you can set a video as the background of the block. To do this, click Video: 

Then click Upload Video: 

Your file browser will open, and you can select a video file to use.

How to Change the Typography Style

The Page Builder comes with a number of built-in typography styles. Selecting one of these style presets will automatically reformat all text on the page to match the chosen style.

To apply a style, click Typography Style: 

A list will appear. You can select the text size you want using the tabs, and then select a style from the list: 

The changes will be made automatically to the text on the page. 

How to Adjust Section Settings

A number of settings can be adjusted to modify the section you are working on. To access these settings, click Section Settings: 

Under the General tab, you can adjust the height of the section by selecting a percentage from the list: 

Under the Scroll tab, you can add a scroll button to your page. This button is a visual indicator to any viewers that the page can be scrolled through. Add a button by choosing a preset from the list. The button will appear at the bottom of the section: 

You can adjust the color and position of the button using the remaining options on this tab:

Finally, using the Gradient tab, you can set the background of the section to a two-toned gradient. To set a gradient manually, select colors under the Color 1 and Color 2 headings. Open the color selector tool by clicking on the circles: 

You can adjust the direction of the gradient (up/down vs left/right) using the Direction slider: 

You can also select one of the gradient presets from the list: 

Clicking the Eraser icon will clear any gradient preset that was applied, and return the page background back to its original state:

How to Move a Section

When there is more than one section, they will be arranged vertically on the page. You can move sections up or down using the Move Up or Move Down arrows:

You can move a particular section all the way to the top or bottom of a page by clicking the Move to Top and Move to Bottom arrows:

How to Duplicate a Section

Duplicating a section will insert a copy of the section below it, including all of the section’s blocks and formatting. You can duplicate a section by clicking the Duplicate icon: 

How to Remove a Section

You can remove (or delete) a section by clicking Remove Section: