Using the Page Builder

Working with Content in the Page Builder - Part 2

Editing Tables

To add a table to the page, click the plus (+) button on the upper toolbar, and click Table: 

To add text to the table, double-click inside a cell and type:

You can use the Text tab on the side panel to edit the text. Adjust the style, alignment, or color using the options at the top. You can also change the Font Size or Font Weight using the tabs: 

To add or delete rows in the table, click on a cell in that row, and click on the ellipses (…) at the end of the row on the left:

Then click Add row to add a new row below, or the trash can icon to delete the row: 

You can also change the position of this row up or down using the arrows in this menu: 

To add or delete a column in the table, select a cell in the column, and click the ellipses (…) at the top of the column. Then click Add Column to add a column to the right, or the trash can icon to delete the column. You can also use the arrows to move this column left or right: 

Additionally, you can change the position of a specific cell. Select the cell by clicking on it. Then click the ellipses (…) that appear: 

Then you can use the left or right arrows to move this cell: 

Under any of the ellipses (…) menus, found either at the end of a row, the top of a column, or under a selected cell, you can click the gear icon to open table settings: 

On this menu, you can change the background color of the table. Click on the color circle to open the color selector tool, and choose a color:

You can also change the border color and width. Use the color circle to select a border color, and then use the slider to select a border width: 

Note: If you have selected a cell and opened the Settings menu from there, there will be an option to Merge Horizontally, which will merge the cell with the cells next to it: 

To select the entire table, click the grid icon: 

You can delete the entire table by clicking the trash can icon from this menu: 

Note: You can also open the Settings menu from this menu. 

Editing Buttons

Buttons are objects that contain both text and a hyperlink. There are two button options in the Page Builder: a single button, or two buttons in a row: 

Once a button is added to the page, you can edit the text by double-clicking on the text, and typing your change:

When the button is selected, a mini-toolbar will appear just underneath it. In this menu, you can click the Link button to edit the hyperlink for this button: 

A menu will appear. In the first field, you can enter the URL you are linking to: 

The second field provides another way to edit the text for the button. Click in this field and type a change to edit the text: 

The third field is the Title field, which can be used to set the text that is displayed when hovering over a link: 

You can also link this button to a particular section by clicking the Section dropdown, and making a selection.

When you are done, click OK.

If you want to remove the link and convert the button into a plain text field, click the Unlink button in the mini-toolbar: 

You can also open and adjust a number of button settings by clicking the gear icon on this menu: 

Settings will appear on the side panel. You can change the base color of the button by clicking the color circle, and selecting a color: 

You can change the style of the button by selecting one of the preset options from this list: 

Using the Adjust menu, you can edit a number of elements of the button including the size, width, font weight, and margins: 

The On Click menu can be used to link this button to an image or video instead of a URL. Select one of these options and upload a file or paste a link: 

Editing Sliders

A slider is an object that displays a series of images. To add a slider to the page, click the plus (+) button on the upper toolbar, and click Slider:

Then click on the Slider. The Slider tab will open on the side panel: 

This slider comes with two placeholder images. You can add a new image by clicking Add Slide:

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.

Once you have selected an image, click Add: 

The image will be added to the Slider tab. Using the arrows underneath each image, you can adjust the order of the images:

You can remove an image by clicking the X: 

Clicking the wrench icon will open additional settings: 

The Type dropdown is used to select between carousel and slider types. The Carousel option will display the images in an automatic sequence. The Slider option will let users click through the images on their own:

The Autoplay dropdown can be used to adjust the length of time each image is displayed for in the slider. The Animation Duration dropdown can be used to adjust the length of the transition between images. Click on one of these dropdowns and select a length of time in milliseconds from the list: 

Selecting No on the Autoplay dropdown will turn off Autoplay. Users will click through each image on their own.

The Per View dropdown is used to select the number of images that are displayed in a single slide on the slider. You can use the Gap field to adjust the gap in between multiple images:

The Arrow checkbox can be used to toggle the appearance of Arrows on each side of the slider that allow users to click through the images. The Dots checkbox can be used to toggle the appearance of dots at the bottom of the slider. These dots will indicate both the total number of images in the slider, as well as the position of the image currently being displayed: 

You can select an arrow preset from the list. The preset style of arrow you select will be shown on the slider: 

The Base Color menu can be used to change the color of any arrows on the slide. Click on the color circle to open the color selector tool: