Using Text and HTML in a Course

A Text/HTML Module is a truly blank canvas and you can use it to build anything you'd like to include in your course. It is similar to creating a Site Page; you can do anything in a Text Module that you could do on a webpage. It's possible to add elements like tables or images directly in the Content area. With custom HTML, there are even more possibilities!

In this guide, we'll go over the content structure of a Text/HTML Module, and how to create this kind of Module. 

In this article


Content Structure of a Text/HTML Module

Before we go into truly creating a Text/HTML module, we first must understand how the content is structured: using sections, rows, and blocks.

  • Sections: Each module with contain at least one section (the blue boxes) to hold your rows and blocks. Each section will have its own purpose, so think about what sort of sections you'd like your content divided up into
  • Rows: We use rows (the green boxes) to further organize content within a section. Rows are powerful as unlike sections, they can be broken into columns and you can choose what layout you want to use. There can be multiple rows in each section.
  • Blocks: Blocks (the grey boxes) are how you add content to the page! We have several different block types available: you can add Text/HTML, Image, Video, PDF, Button, and Code.

Together, these will make up your module. Let's look at an example. In the image below, we have a module page that has one section, made up of two rows--one with one column and a Text block, and another made up of two columns, with a Button block and an Image block. 

This is what it will look like to the Student, and you can see the corresponding content:


Creating Text/HTML Modules

Now that we understand how content is structured, let's go through step-by-step how to truly create your Module. 

  1. From the Admin Dashboard, select Courses, then choose Text/HTML under the Modules header
  2. Any existing Text/HTML modules will be listed here. Click + Create Text/HTML Module in the upper right
  3. On this Create Text/HTML Module page, let's add a few things before getting to the content
    1. Name: Name of the module
    2. Track Completion: This requires a student to scroll to the end of the content before the module is marked as completed. If left off, the module will be marked as completed the moment the page loads.
  4. Now, add the content. Start by add the necessary sections for your page. Remember, you'll want to add a section for each main purpose. You can add new sections by clicking the blue + icon as seen below: 
  5. Add rows to each section via the green + button. This is how you decide how you want your blocks of content laid out--for instance, do you want one column of content in a row, or multiple? You can also have more than one row in a section.  
  6. Add blocks to each row by clicking the grey + button. Then, select what sort of block you want to add from the options below. Please also note that rows can have multiple blocks! 
  7. There are several different types of blocks, and you can choose the one that applies to the content you're wanting to add--choose Text/HTML if you're wanting to add text, Image to add a picture to that block, etc. 
  8. To add or edit the content within a block, click the Settings gear icon or simply double-click the solid gray rectangle. Enter your content, and click Save Changes.
    1. You are welcome to add custom HTML to your page. At any point, you can switch the page builder from text view to HTML view. This can be done by selecting the HTML option (<>) from the Content menu.
    2. On the content menu, the ΒΆ icon will allow you to format the element you have selected, and you can also bold, italicize, underline, add bullets/number as well as change the font, font color and size 
    3. Hint: after saving your block content, you can duplicate the block by clicking the Clone Block button (double square icon)
  9. Further customize the block by clicking the Design tab after entering your content on the Content tab. Here, you can adjust spacing, alignment and borders. Or, click the Advanced tab to add a custom class. 
  10. You'll also see the Add Script & Styles button--if you would like to add page specific script to this module, learn more here. You can also add page specific CSS in this area if you are comfortable doing do. 
  11. Once you have entered the sections, rows and blocks, feel free to use the Preview option to see what the module will look like:
  12. Be sure to click Save Module when you're done 

Then, we want to make sure the module is made available in a course--see the next section for all the details there. 

For more information on viewing, editing or deleting existing Modules, see this article


Adding a Text/HTML Module to a Course

Now that your module has been created, you can add it to the Course or Courses so that it is accessible to Students:

  1. From the Admin Dashboard, choose Courses, then All Courses
  2. Find the Course you want to add the Module to, and click the three-dot action menu. Select Edit
  3. Click the Step 2: Curriculum tab
  4. Click "Add Module" and then opt to "Select an existing module from the list"
    1. Search the drop-down menu for your Module name, and select it.
    2. Once the Module is added to the bottom of your course list, you have the option of entering the Edit Module page to make changes to its content or removing the module from the course.
  5. Click and drag the modules to rearrange them in the order they should be presented in the course. This involves placing the modules in a suitable order along with the sections if used.
  6. You have the option to:
    1.  Lock the Module, which forces a student to complete it before being able to move on to the next module in the course
    2. Set the availability of the Module, which allows you set a date when the module will be available to a student.  This gives an Admin or Instructor the control to make modules available to students over time or to restrict a student from completing the course too quickly.
    3. You can also set a minimum amount time spent in the module that the student must abide by in the Module before being allowed to move on to the next module. 
  7. Save your course changes by clicking Update Course in the upper right corner. If you get distracted or navigate to another section of the platform, changes may not be saved if you do not update before leaving a page you have made changes to.

Please see this guide for the full details of Creating and Updating a Course.


Using Layouts

With the Layouts option, you can create and save your own custom layouts--for instance, if you will be using the same content structure for many modules and just need to swap out the text or images. 

To create your own layout:

  1. From the Pages & Menus tab, choose Pages and click on the page you want to save as a layout.
  2. Click the Layouts button and choose Save Layout--enter a name, and Save.

Then, when you go to create a new module:

  1. Choose Layouts
  2. Select Load Layout
  3. Choose Your Library
  4. Select the Layout you want to use, and then add in the content as normal