ClearCompany Learning: HTML Elements

The Custom HTML Page Builder lets you control how content is structured and styled in ClearCompany Learning. This guide explains the available elements, how they work within the grid system, and the customization options you can use to build clear, functional pages.

In this article:
Understanding the Grid System
Page Building Options
Adding Elements
Modifying Elements
Managing Image Elements
Formatting Text Elements
HTML Elements F.A.Q.

Understanding the Grid System

HTML pages created in the builder use a grid system made up of rows and columns. The HTML builder supports drag and drop images and intuitive visual editing of text, image, and button elements. 

This is a Row with 3 Columns.

Page Building Options

The Custom HTML Page Builder offers WYSIWYG (What You See is What You Get) functionality. It includes a variety of pre-built, modern layouts (called snippets) you can easily add to your page and modify to fit your needs.

If you or someone in your organization has advanced HTML knowledge, the builder also allows you to paste in raw HTML and CSS code directly into your custom page. 

Note: The builder does not support custom Javascript.

Adding Elements

Click the + icon to add a pre-created snippet to your custom page. 

1. The back/forward arrows function as undo/redo.
2. The <> icon allows you to access the raw HTML code of this page.
3. The wrench icon opens a preferences window for this page.

Modifying Elements

Each element type has specific context menu items. Below is a pre-built, editable snippet added to this page. Let's break down the different context menus displayed.

1. Column Adjustment Tools

	Clicking inside a column, but not on an image or text element activates the column context menu. Clicking the + icon allows you to add another column either to left or right of the one selected.
	Clicking the ... ellipse allows you to move the column, increase or decrease the size of the column and access other options. The trash can icon deletes the content of the column.

2. The Element Toolbar

The + icon allows you to add another element in a new column. The alignment icons let you control the alignment of the content in this column. Other icons function as discussed above.

3. The Row Toolbar

	The row toolbar is always present. It allows you to Move and Delete rows.
	The grid icon (the second icon) opens up the Grid Editor. Here you can easily add, move, and delete rows and columns in the page.

Managing Image Elements

Changing and editing an image is easy via the image context menu.

Clicking on the image displays three menu items: Click the image icon to replace the image. The link icon allows you to the the image into a clickable internal (LMS) or external link. The pencil icon allows you to manipulate the proportions and crop the image.

Formatting Text Elements

Editing and formatting text is easily achieved in the HTML builder. To get started, click on any text to activate the toolbar.

Text Editing Toolbar

	The + icon lets you insert a snippet. The B i and U icons allow you to bold, italicize, and underline the selected text respectively.
	The a icon allows to change the font of the selected text. You may search for a specific font name or scroll to select. Only fonts present in this list may be used in your custom page.
	The contrast icon allows you to change the foreground and background color of your selected text. You may select one from the slider or enter an RGB code. Pro-Tip: This is an excellent way to add pops of color in your organization's brand, but be mindful of readability.
	The alignment icon allows you to align your text to the left, right, centrally, or justified.
	The adjustments icon allows you to adjust the font size, weight, line spacing, and letter spacing.
	The link icon allows you to turn the selected text into an active hyperlink.
	The forward and back arrows function as undo and redo.
	The <> icon allows you to access and work with the raw HTML code for this page.
	Clicking the ... ellipsis gives you access to additional menu items. The smiley icon allows you to select icons to insert into your text. SVG allows you to insert inline SVG code. The image icon allows you to insert an image. The A icon gives you more text formatting options including subscript, superscript, and strikethrough. The H icon allows you to format the text as different Heading styles. The Settings icon displays additional preferences.

Modifying Buttons

The Custom HTML Page Builder offers full customization of buttons in your page. First, click on a button. This will activate the context menu items.

The pencil icon opens the button styling menu. This allows you to change all aspects of your button, including: background color, text color, corner radius, padding, and margin. It also allows you to modify how the button displays in its hover state, the size of the text, and more. The link icon allows you to turn the button into an active hyperlink. The duplicate icon allows you to clone the button. The trash bin icon deletes the button.

HTML Elements F.A.Q.

What is the difference between the visual editor and the HTML (<>) view?

The visual editor allows you to design pages by dragging, dropping, and formatting elements without needing code knowledge. The HTML view gives you direct access to the underlying code so you can fine-tune styles, embed iframes, or add custom markup.

What rights does a user need to create Custom HTML pages?

Users need the Custom Pages Rights (Custom Page View, Custom Page Add, Custom Page Edit).

Can I use my own fonts, colors, or styles in a custom HTML page?

Only the fonts provided in the editor’s font list can be used. You can, however, fully customize text and background colors using the contrast tool, including entering exact RGB values. This makes it easy to match your organization’s branding while ensuring readability.

What are snippets, and when should I use them?

Snippets are pre-built blocks of code that you can quickly add to your page. They’re best used when you want consistent, repeatable elements without building layouts from scratch. Snippets can be customized after adding them.

Additional Resources

ClearCompany Learning: Custom HTML Page Editor