Developer Mode gives you access to edit and change your Website's HTML and CSS. Adding custom code allows for advanced customisation 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.
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.
Then 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.
Things to consider
- 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.
- 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.
- 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 because they are the core of sizing the row on different devices.
- 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.
- A backup of your Site is made automatically when you enter Developer Mode. Enter code only if you understand what it does - and back up often. We cannot troubleshoot custom code.
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
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 intended to be visible should usually be put in the header. In general, it's always best to follow the directions provided by the code's writer first before adding it to your Responsive Site.