Developer Mode

To access Developer Mode:

1. Click the Developer Mode button in navigation bar. Alternatively, right-click on a widget and select Edit HTML/CSS, and then click Dev Mode in the lower left.
2. Then proceed to make your edits. Use the Save and Preview buttons to see your work.
3. Click Get Image URL to get the URL of an existing image or upload a new image in developer mode so that you can enter it directly into the HTML.

Notes

1. Make sure you stay within the columns. Our responsive sites are based on a row-column structure. This means that each row contains columns which ultimately hold the content. 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 you go to preview it.
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 widgets 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 Website Builder class has been added to an invalid element