Using the Page Builder

Working with Blocks in the Page Builder

Editing Blocks

To edit a block, make sure it is selected by clicking on it. Then make sure the Block tab is selected, or the Block button is highlighted (which can be found above the selected block in the main area). 

Remember that a block contains pieces of content, and can be moved around inside a section.  

How to Change a Block’s Background

By default, blocks in the Page Builder appear with a plain white background. This can be changed using the side panel. To change the color of the block’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 Alignment Within a Block

By default, blocks will be resized to fit around whatever content is in them. To manually adjust the alignment of content in a block, start by opening the General tab, and turn off the Auto Fit toggle:

Then, you can select one of the content alignment options to manually align the content:

How to Change Block Padding

Padding refers to the amount of empty space that surrounds content inside of a block.

To adjust the padding of the block, open the Container tab, and click one of the options under the Padding heading:

You can also set a maximum width for the content within a block using an option under the Max Content Width heading: 

Now, the content will not exceed the selected width when resized, and instead be lengthened on the page.

How to Adjust Color and Shape Style Options

Some color and shape style options can be found under the Adjust tab:

Turning on the Shape toggle will allow you to reshape and angle a block of content into a new shape. Turn on the toggle and pull on one of the handles to reshape: 

When the Shape toggle is active, you can adjust the scale, or size, of the block using the Scale slider:

The Transparency, Grayscale, Hue Rotate, and Blur sliders can all be used to adjust the color style of this block. Click and drag the slider to make a change:

Adding Scroll Animations

Using scroll animation allows you to animate the position and size of a block as a user scrolls by it.

Note: Scroll animations should only be applied to sections added after the first one. This is because the first section is already fully on screen when the page is viewed. 

Click Scroll Animation to begin:

A popup menu will appear. Adjust the block you are editing to the starting position and size you would like. Then click Set Start Position/Size: 

The positioning data for this block will be filled in the field below. Now adjust the block to the final position and size you would like, and click Set End Position/Size:  

This data will also be filled in. You can click View next to either the Set Start or Set End Position/Size buttons, to preview the positioning you have set: 

Using the Time tab, you can adjust when the animation will Start (either immediate or delayed), and when the animation will End (either early, moderate, or late). Make a selection under one of these dropdowns to make a change: 

When you are done, click Save + Test: 

To preview this animation, preview the page. As you scroll, the positioning and size of the block will change according to what you’ve input. 

How to Add a Hyperlink to a Block

Using the On Click tab, you can have an action occur when the block is clicked on by a student. On click actions include opening an image or video file, navigating to a YouTube video, or following a link:

Clicking Image or Video will allow you to upload a file using your file browser: 

These options work similarly to uploading an image or video for the block background.

Clicking YouTube or Link will display a URL field where you can enter the link for a video or website:

How to Add a Hover Animations

Some preset hover animations can be added to the block using the On Hover tab:

Click one of the presets to apply it: 

Now when you or a student hovers over this block, the animation will be played.

How to Add Additional Content to Blocks

So far, we have seen blocks with a single piece of content. However, multiple pieces of content can be added to a single block. This allows more than one piece of content to be moved and formatted together within a single block.

How to Delete a Block

To delete a block, click the Trash can icon at the bottom of the Block tab on the side panel: