Using the Page Builder

Working with Content in the Page Builder - Part 1

How to Add Content to a Page

1.	Make sure the Page Builder is opened. (Remember that you can access the Page Builder by clicking Page Builder in the Page Editor.)
2.	To add new content, click the + button on the top-right toolbar:
3.	Then select the type of content you would like to add from the list that appears:
4.	The block of content you select will now appear in the main area:

 

How to Resize and Move Content

To resize a block of content, make sure it is selected by clicking it. Then hover over one of the handles that appear around the content. Click and drag to change the size: 

To move this content simply click and drag it to a new position:

You can rotate this content using the top control point: 

Click on the central control point and drag to rotate the content:

 

Editing Content

To edit content, make sure it is selected by clicking on it. The left-side panel will show you options to edit the content: 

Note: If the left-side panel is not visible, click on the Toggle Left-Side Panel button on the upper toolbar, and it will appear.

When editing content, make sure the Content tab is selected. The Content tab can be found at the top of the side panel, or directly above the content in the main area: 

This tab will be named based on the type of content you are editing. In this example, the Text tab appears as text content is being edited.

Some general editing options can be found at the bottom of the side panel for all content types: 

Let’s take a look at these options in more detail:

You can move content forward or backward (1) relative to other blocks on the page. For example, if one block is placed on top of another, you can change which block appears on the top using these buttons.  

You can duplicate the entire block by clicking the duplicate button (2). A copy will be made of the block that you can then move and edit.

You can delete the block by clicking the trash can icon (3).

Clicking the </> icon (4) will open the developer tools menu. Here you can add and edit HTML, CSS, or JavaScript coding for your page. When you click this icon, a coding field will be displayed; make your changes in the field, and click Update to apply changes: 

Clicking the Navigator icon (5) will open the Page Builder navigator. A pop-up will appear that shows the structure of the page you are editing. Clicking on a label will take you to that section. This tool can be helpful when you have multiple sections added to the same page.

 

Clicking the Inspector icon (6) will open the Inspector tool. The Inspector can be used to adjust the padding and margin values for this block. You can click in one of the blanks and type a number. Then you can select a unit for this value by clicking either px (pixels), em, or % (percentage).

You can also click the Chain icon to automatically make all four values (left, right, up, and down) equal. Now, when you change one value, the others will be automatically changed to match:

Finally, you can also select one of the three available device dimension options (7). 

 

Types of Content

The Page Builder includes a number of types of content that you can include on your course pages: 

Content types include titles and headings, paragraphs, images, shapes, maps, videos, buttons, tables, icons, sliders, and code.

 

Editing Text

When editing text, formatting options appear at the top of the Text tab: 

Options include: Bold, Italics, Underline, Strikethrough, All Caps, Clear Formatting, Text Alignment, and Paragraph Styles.

Some options control text appearance at the paragraph level, and others on a character/word level.

 

You can change the font by clicking the Font list, and selecting an option:

 

Text color can be changed by clicking the circle, which opens a color selector tool. Click an option to change to color of the text: 

You can change the highlight color of the text by clicking the Highlight link above the color selector circle. Then use the color selector tool to make a selection: 

 

Font size can be changed by clicking the Font Size tab and making a selection: 

Clicking the plus (+) button on this menu will increase the font by one size. Clicking the minus (-) button will decrease the font by one size.

Clicking the ellipses (…) will open a menu where additional sizes (both larger and smaller) can be selected:

 

Font weight (or the thickness of the text) can be changed by clicking the Font Weight tab and making a selection:

 

The More menu contain additional options for editing text: 

You can change the spacing between letters, or the spacing between lines, by clicking the plus (+) and minus (-) buttons under each heading.

You can click the bullets or numbering buttons below those headings to add bullets or numbering to the text.   

 

Editing Images

When an image block is added to the page, using the plus (+) button, a placeholder image will be visible. To add your own image, click Change:

Then click Upload Image: 

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

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.

You can also adjust the color of the image into grayscale by clicking on the Grayscale toggle: 

  

Image Hyperlinks

You can turn an image into a hyperlink by clicking Link: 

You can enter the URL you are linking to in the URL field:

 

Below that is the Title field: 

This field can be used to enter the popup text that will be displayed when a user hovers over a link:

 

Clicking the Open in New Window checkbox will make this link open in a new tab when clicked, instead of on the same page:

 

You can also have the image link to another section on this page by opening the Section menu, and clicking an option:

 

When you are done, click OK:

 

Editing Shapes

When a shape is added to the page, a “blob” shape will be visible by default. You can change the shape by clicking Shape: 

Then make a selection from the list. You can click the back arrow to return to the panel menu: 

You can also change the gradient colors of the shape using the color selector tools. Click on one of the color circles to open the tool: 

You can select the color in the same way as text content.

Additional gradient settings can be found by clicking Settings: 

Here, you can adjust the horizontal and vertical start and stop points for the color using the sliders: 

You can also use of the eight preset gradients included in the editor:

 

Editing Videos and Maps

When a video or map window is inserted, you can adjust the source URL using the coding field provided: 

 

How to Delete Content

To delete content, click the Trash can icon. It can be found either at the bottom on the Content tab on the side panel, or on the mini-toolbar below the content in the main area:  

You can also select the content and click Delete on your keyboard.