ClearCompany Learning: HTML Elements

HTML elements help admin users in ClearCompany Learning to shape how content is structured and displayed. This guide provides a comprehensive overview of HTML elements and their customization options using the Custom HTML Page Editor. By understanding the box model and element properties, you can create visually appealing and functional web pages.

In this article:
Elements Available
F.A.Q.

Elements Available

Each HTML element is either a rectangle or a square, collectively referred to as the box model. Below are the features and options available in the Custom HTML Page Editor.

Text Elements

When adding text to an HTML page, users have several tools and formatting options:

1. Add, Move, Copy: Add elements from the list, move them up or down, and copy them. The brackets icon opens the HTML editor.
2. Formatting Tools: Bold, Italic, Font, Image, Hyperlink, Align, Paragraph.
   • Additional formatting options appear when the arrow is clicked, including:
   • Color
   • Formatting
   • Lists
   • Text Settings
   • Icons
   • Clean formatting
3. Modify Elements: Move, copy, or delete elements easily.

Gear Icon

Clicking the gear icon reveals advanced customization settings:

	Box Settings Background Color: Apply a solid color or gradient. Dimensions: Adjust the box size, enabling it to grow or shrink based on the screen size. Max Width: Prevent stretching on larger screens.
	Spacing Padding: Adds space around text inside the box. Margin: Adds space outside the box.
	Borders Thickness Style (solid, dotted, dashed) Color Apply to individual sides
	Text Settings Text Color Font Size Text Alignment Line Height Font Weight and Style Text Transform and Decoration Letter and Word Spacing Font Family

Ellipsis Options

	Corners Corner Radius: Adjust sharpness or roundness of box corners.
	Shadow Effects: Add shadows to the box or borders. Customize color, inset/outset, and shadow offsets.
	Stacking Stacking Order: Elements stack by default. Flex Options: Control how elements stack on top of or next to each other.
	Positioning Positioning: Relative (default) Absolute (fixed position) Floating (left or right alignment)
	Effects Opacity: Ranges from 0 (invisible) to 1 (fully visible). Blur, Brightness, Saturation, Contrast, and Hue: Enhance visual styles of elements.
	Attributes Advanced customization using HTML and CSS. Assign IDs and rules for specific effects, such as "bounce" or "green."

F.A.Q.

What is the box model in HTML?

The box model refers to the rectangular or square shape of every HTML element, encompassing content, padding, border, and margin.

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).