Learn the basics of how to use the Page Builder.
This chapter will explore each section of the Page Builder and dive into using the tool.
Page Builder Layout
Building Blocks
Building Blocks make up the foundation of the various components in Course Maker. The Page Builder tool has a wide range of blocks to get you started creating your custom page. To preview what the different blocks look like or learn more, head over to the Building Blocks section of the Course Maker website.
Page Preview
This area will show you a live preview of the page you are creating.
Reset Page
This button will reset the page back to the starting point.
Copy Page
This button will copy the HTML code for your page to the clipboard.
How to Use the Page Builder
By default, every page made with the Page Builder will start with the same two elements, a banner image, and a heading one element.
Add Building Blocks to Your Page
- Navigate to the Page Builder tool on the Course Maker website.
- Under the Building Blocks heading, click on the individual Building Blocks that you want to add to your page.
- The Building Blocks will appear in the Page Preview area under the Heading One.
- To reorder components of the page, click and drag the building block.
- To delete a specific building block, click the trash icon on the right side.
Tip: Why is a Good Heading Structure Important?
Headings help segment and organize documents and web pages. They signal to the reader things like a change in subject. However, it is also essential to use and maintain a good heading structure for accessibility.
Headings should follow a hierarchical order starting with a Heading 1 and cascading down to Heading 6. Do not use a heading to style fonts or create headings with large/bold fonts.
How to Edit Your Page In Page Preview
You can rearrange the Building Blocks in the Page Preview area by clicking and holding to drag and drop the Block into a new position on the page.
You can remove a Block by hovering your mouse over a Building Block and clicking on the trash can icon to delete it from the Page Preview.
Click on the Copy Page button to copy the HTML code to your clipboard when you are finished. The next chapter will walk you through adding your page to your D2L course site.