Developer Mode

Overview

Developer Mode gives you access to edit and change your Website's HTML and CSS. Adding custom code allows for advanced customization that is not possible with the drag and drop Editor, however this should only be performed by advanced users with a solid understanding of web development code.

Guide

There are two ways to access Developer Mode. The simplest way is to click the Developer Mode button in the Top Menu.

Another way is to right-click on a widget and select Edit HTML/CSS.

Then click the "Developer Mode" button in the lower left.

Proceed to make your edits. Use the Save and Preview buttons to see your work.

Use the 'Get Image URL' feature to get the URL of an existing image or upload a new image in this mode so that you can enter it directly into the HTML. 

Considerations

1. Make sure you stay within the columns. Our responsive Websites are based on a row-column structure. This means that each row contains a column, which ultimately holds the widgets. When adding or editing your own HTML, make sure it is inside a column.

2. Leave the classes in place. The Editor relies on the many classes that are added to elements. If you see an existing class (usually starts with dm), leave it in place. If you remove classes, the Site might not look the same when previewing.

3. Notice the class sizes. Columns have a size value that is added as a class, such as large-6 or small-12. This determines the size of columns inside that row. You'll want to leave these in place, as they are the core of sizing the row on different devices.

4. Avoid editing extensions if possible. In the HTML, you will see placeholders of elements on the page already. If you can, avoid editing these, especially the data-values held within them. Editing these can break the elements once you head back to the Website Builder. 

5. A backup of your Site is made automatically when you enter Developer Mode.  Only enter code if you understand what it does, and backup often. We cannot troubleshoot custom code.

Errors

DUPLICATE_ID: Every element must have a unique ID

INVALID_ELEMENT_LOCATION: All elements must be in a column which must be in a row

BAD_PROPORTION: Columns in a row must add up to 12

INVALID_CLASS_FOR_ELEMENT: A class has been added to an invalid element

FAQ

Where do I put my custom code?

Custom code that's intended to be visible in the Site should be added using an HTML widget. Custom code that's not should usually be put in the header. In general, it's always best to first follow the directions provided by the code's writer before adding it to your Responsive Site.