Developer Mode gives you access to edit and change your site'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.
Note
Custom code that is intended to be visible in the site should be added using a HTML widget. Custom code that is not should usually be put in the header. In general, it is always best to first follow the directions provided by the code's writer before adding it to your site.
Warning
Consent management apps are not able to prevent code from running prior to consent when the code is placed in the header HTML. This is because Website Builder optimizes the structure and order of how content loads, based on performance best practices on the site. We place scripts and CMP banners lower on the page, in order to improve the performance of primary content. Because of this, it is recommended to place code in the body-end when using a consent management app.
To access Developer Mode:
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.
Then proceed to make your edits. Use the Save and Preview buttons to see your work.
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
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.
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.
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.
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.
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