The YuJa LMS Content Designer offers WYSIWYG design elements to create customizable content within editable HTML areas of your LMS. The table below lists all design elements available.
Design Elements
To use the LMS Content Designer, click the Accessibility Design Tool icon within editable HTML areas of your LMS. Then, insert your desired elements into your content editor. You can also create a custom theme or template for your content to reuse the design in the future.
| Image | Name | Description |
| Container | Create an area within the WYSIWYG editor and style its margins, padding, sizing, border, and colors to add other elements within it. | |
| Expander | Create expandable sections that display a title. When the title is selected, the section expands to show custom text. | |
| Banner Title | Create heading levels and style their sizing, alignment, border thickness, and colors. | |
| Divider | Create dividing lines and style their sizing, alignment, and colors to segment sections of content. | |
| Text | Create text with desired fonts, sizing, alignment, line spacing, and colors. | |
| Table | Create tables specifying columns and rows, the table caption, header orientation, cell text alignment, table sizing, border thickness, and colors. | |
| Text Highlight | Create text that is automatically highlighted with a desired color. | |
| Visual Cues | Create visually stylistic cards with a title and description. | |
| Tooltip | Create text that will display a message when hovered over. | |
| Page Navigation | Create a table of contents organized by heading levels. | |
| Progress Bar | Create progress bars that can be customized in size and color, enabling readers to track their progress through the content. | |
| Ordered List | Create an ordered list of content. | |
| Unordered List | Create an unordered list of content. | |
| Video | Paste a video link, add descriptive alt-text, and adjust the video’s dimensions and alignment. | |
| Audio | Paste an audio link and adjust its alignment. | |
| Image | Paste an image link, add descriptive alt text, and adjust the image's dimensions and alignment. | |
| Link | Paste a link, add descriptive text, and adjust its alignment. |