Content Section Width

Values set using pixels (px).

900 1024 Custom

Content Section Padding

The value can be between 0-100 pixels (px).

Top padding: Right padding: Bottom padding: Left padding:

Content Section Color

Yes No

Content Section Border

Values set using pixels (px).

Yes No

Border Size: Border Style: Border Color: Border Size: Border Style: Border Color: Border Size: Border Style: Border Color: Border Size: Border Style: Border Color:

Content Section Round Corners

Values set using pixels (px).

Yes No

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Page Background Padding

The value can be between 0-100 pixels (px).

Top padding: Right padding: Bottom padding: Left padding:

Add Heading <h2> - <h6> >

Add a heading to your page.

Additional Information

Heading 2 <h2> represents the highest level, while Heading 6 <h6> represents the lowest.
Headers should be used in sequential order of levels.
If no custom value is provided for either the text or font size fields, a default value will be added.
The custom font size must be no smaller than 14pt and no larger than 28pt.

Select heading level: Enter your text: Select heading alignment: Enter your font size: Set font color:

Bold Header?

Yes No

Italicize Header?

Yes No

Style Header?

Yes No

The border size, corner, and padding values use pixel (px) units.

Set background color:

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Top padding: Right padding: Bottom padding: Left padding:

Add Horizontal Line <hr> >

Add a horizontal line to your page. <hr>

Style horizontal line?

Yes No

The border size, corner, and padding values use pixel (px) units.

Set background color:

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Top padding: Right padding: Bottom padding: Left padding:

Add Text <p> >

Add a block of text.

Additional Information

If no custom value is provided for either the text or font size fields, a default value will be added.
The custom font size must be no smaller than 12pt and no larger than 24pt.

Enter your text: Enter your font size: Set font color:

Style The Container Of Your Text?

Yes No

The border size, corner, and padding values use pixel (px) units.

Set background color:

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Top padding: Right padding: Bottom padding: Left padding:

Add List <ul> <ol> >

Add unordered <ul> and/or ordered <ol> lists to your page.

Additional Information

Adding at least one list item will transition the page builder into List Builder Live View.
When in List Builder View an additional toggle will appear that allows you to add a nested list with a different bullet type to your list.
Undo and redo functionality are not currently supported in List Builder Live View.
Select the Return button above to return back to the main menu.

Enter your text:

Select your bullet list type: Enter your font size: Set font color:

Style The Container Of Your Text?

Yes No

The border size, corner, and padding values use pixel (px) units.

Set background color:

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Top padding: Right padding: Bottom padding: Left padding:

Add Image <img> >

Add an image to your page.

Additional Information

IMPORTANT: Image links taken from your instance of Canvas may not appear in the builder when added. Once you've added your built page into Canvas, your image should correctly populate.
Your provided url must include https://.
If no custom value is provided for the max width of the image it will be set to 100%.
The custom value for max-width must be no smaller than 5px and no larger 1920px.
Alt-text is required for all images.

Enter image URL: Enter image alt text: Set a Max-Width: Set image position:

Style Image?

Yes No

The border size, corner, and padding values use pixel (px) units.

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Add Button <a> >

Add a hyperlink stylized to look like a button.

Additional Information

If no custom value is provided for either the text or font size fields, a default value will be added.
The custom font size must be no smaller than 12pt and no larger than 24pt.
Your provided url must include https://.

Enter URL: Enter your text: Enter your font size: Set font color:

Bold Button Text?

Yes No

Style Button?

Yes No

The border size, corner, and padding values use pixel (px) units.

Set background color:

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Top padding: Right padding: Bottom padding: Left padding:

Add Line Break <br> >

Add Dropdown <details> >

Add a dropdown (known as a disclosure <details>) container which can be used to hide information and content until the user toggles it open.

Additional Information

A dropdown is composed of two pieces, the summary and the main content of the disclosure. The summary serves as the label whereas your content serves as the description for that summary.
The dropdown can be styled together or individually style both the summary and content.
If no custom value is provided for the summary, text, or font size fields, a default value will be added.
The custom font size for the summary must be no smaller than 12pt and no larger than 28pt. Custom font size content text must be no smaller than 12pt and no larger than 22pt.

Enter summary text: Enter your content text: Enter summary font size: Enter font size: Set summary font color: Set font color:

Style Summary and Content Together or Seperately?

Seperate Together

Style The Dropdown?

Yes No

Set background color:

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Top padding: Right padding: Bottom padding: Left padding:

Style The Dropdown Container?

Yes No

Set background color:

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Top padding: Right padding: Bottom padding: Left padding:

Embed Webpage <iframe> >

Add an iframe <iframe> which allows for the loading of another webpage, external video, html, etc. into your own page.

Additional Information

IMPORTANT: Not all websites and content can be embedded using an iframe. If you receive a "'example website' refuses to connect." error, that means the host webpage does not allow itself to be embedded in a iframe.
Your provided url must include https://.
The iframe's width and height can be no smaller than 360px and no larger than 1280px.

Enter webpage URL: Enter iframe width: Enter iframe height: Set iframe position:

Add a Flex Box >

A Flex Box allows for content to be easily placed in rows and columns on your page. Content within a flex box flex and scale responsively depending on the current width and size of the device/screen it's displayed on.

An interactive example of a flex box has been provided below. In the example the grey container is the flex container and the colored boxes inside of it are the flex items. These flex items are representative of what your content would be within the flex box layout and their positioning within the container are influenced by its settings.

Use the options below to change the settings of the flex container to see how they influence the flex items. Once you've gotten a grasp of the concept, select Next to proceed building your flex container for your page.

Horizontal Position (Justify-Content): Vertical Position (Align-Items): Space Between Items (Gap):

Flex Container Settings Justify-Content: Align-Items: Gap: Flex-Wrap

Style Flex Container(s)?

Together Seperate No

The border size, corner, and padding values use pixel (px) units.

Set background color:

Border Size: Border Style: Border Color:

Top-left corner: Top-right corner: Bottom-right corner: Bottom-left corner:

Top padding: Right padding: Bottom padding: Left padding:

Live View

MORE INFO

Welcome to the LMS Page Builder! This tool was built to provide a free and easy way to create rich, interactive, responsive and accessible content for your course pages. Available for use are two different modes. Standard Mode is for users who want access to a comprehensive amount of options to build their pages; Guided Mode aims to provide a more simplified and expendient user experience.

The LMS Page Builder is currently built to support Canvas with plans to support additional learning management systems in the future.

It is my hope that the LMS Page Builder can be a useful utility in the creation of your courses! For any inquiries or technical assistance you can reach me via the Contact Form Additionally, it would be really appreciated if you took a few minutes to fill out my Survey. Your feedback (and criticisms!) are pivotal in assisting with improving this tool.

Attribution and Copyright

Sound Effects by Universfield, StavSounds, floraphonic, and freesound_community from Pixabay.

Photos by Luke Stackpoole and Martin Adams on Unsplash.

This application utilizes libraries with the following licenses: BSD | MIT

Return to Builder

LMS PAGE BUILDER

Create beautiful, interactive, and responsive pages for your course!

Guided Mode

Standard Mode

Page Settings

Block Elements

Block Alignment

More Options

Done Building?

Builder View

MORE INFO

Attribution and Copyright

Thank You For Using The LMS Page Builder!