Why do some DesignPLUS elements look different in the editor compared to how they appear after saving?

Some elements in DesignPLUS are built to transform from a basic HTML structure. This way, if DesignPLUS is does not render or is no longer licensed, the HTML structure is semantic.

Specific tools in DesignPLUS may use HTML tags that are not how the tool renders. Here are a few examples of tools that are transformed from a basic HTML structure:

• Link Grids are transformed from Lists into Columns
• Tabs and Accordions are transformed from Headings into Buttons
• Flashcards are transformed from a Descriptive List into Interactive Elements for students to use

This transformation is to ensure that semantic HTML structure is utilized if the DesignPLUS CSS and JS temporarily did not load for students or an institution no longer licensed DesignPLUS. To see how your DesignPLUS content would render without DesignPLUS, see How will my Canvas page look in a Canvas instance without DesignPLUS?

Similarly, Module Lists, Quick Checks, and other dynamic elements may look different in the RCE than when the page is saved. To test how content will appear after it is saved, some tools have a Preview panel, an App Preview panel, or content can be previewed in the Preview Content tool.