Developer Mode

Developer Mode allows you to view/edit the HTML and CSS for the entire site. This enables you to extend Architect’s capabilities and add features, however, this should only be altered if you have a strong understanding of code.

Notes:

1. Ensure you stay within the column structure when editing.
2. Leave classes (generally start with “dm”) in place.
3. Leave class sizes in place.
4. Leave extensions, as editing them can break a widget.
5. Before you add or edit any custom code make sure that you backup your site to ensure you can rollback if needed.
6. Test custom code on a test page before adding it to your actual site.
7. Our support team can’t troubleshoot custom code.

To access the developer mode, select the “</>” icon from the top menu.

This will open your dev mode panel; the code is broken into sections so you can easily edit the correct area.

You can also access dev mode by right clicking an element, selecting “Edit HTML/CSS” and clicking “Dev Mode.”

Ensure you use your save and preview buttons.

You can select “Get Image URL” to bring up the Image Picker and insert an image directly into the HTML.

Common Errors

“Duplicate ID”: you have used an ID more than ones; each element must have a unique one.

“Invalid Element Location”: an element is outside of a row.

“Bad Proportion: you have added the incorrect number of columns; there must be 12 in a row.

“Invalid Class For Element”: you have added a class to an invalid element.

Dev Mode Shortcuts

Find: Ctrl+F

Find and replace: Ctrl+F + Ctrl+F

Enable Suggestions while typing: Alt+Space

Save: Ctrl+S

Duplicate selected line: Ctrl+Alt+UP

Move Line Up: Alt+Up

Go to line #: Ctrl+L

Toggle comment: Ctrl+/