How do I add the design tools wrapper to my page?

Many DesignPLUS elements require a design tools wrapper on the page in order to display properly.  When you start building your page with a Design Tools theme or block, the Design Tools Wrapper is added automatically.  However, if you added elements without a theme or block, the wrapper will be missing and the element may not display properly.

In order to add a design tools wrapper, you can either 1.) add a theme and block or 2.) add the wrapper to the page manually.

Method 1: Use Theme and Block

1. In the Design Tools sidebar, go to Create/Edit Content>>Choose a Theme and select a theme from the list.  For plain styling, choose "Generic".  Notice that when you select a theme, it creates a heading inside a Design Tools Wrapper in your editor.
2. Next, click the +Add Content Blocks button in the sidebar to launch the Add Blocks modal.*
3. In the Create New Content Block text entry field, you can enter a heading for the content.  If a heading is not needed, you can leave the text entry field blank.
4. Click the green add button to the right.  This will place a new content block in the editor inside the Design Tools Wrapper.
5. Highlight the existing content that is outside the wrapper and cut it with Ctrl+X or Command+X.
6. Place your cursor inside the new content block and paste the content with Ctrl+V or Command+V.

*Alternatively, you could highlight the existing content and use the Selection to Block tool instead.

Method 2: Manually Add Design Tools Wrapper

If you don't want to delete the existing columns and you're comfortable updating the HTML manually, switch the editor to HTML mode and add this code to line 1 at the very top of your HTML: 

Then, at the very bottom of your HTML, add this code:

The columns will work when the <div> element wraps the content.  Here is a model of what that looks like: