Developer Mode

  • Developer Mode
  • Duda Support > Responsive Website Builder > Advanced

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.

Please note, Duda's support team cannot troubleshoot custom code.

Guide

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

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

Then click the Dev 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. 

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 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 regular editor. 
  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. Our support team 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 Duda 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 a 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.

×

Priority Phone Support

English phone support is available 18 hours a day,
Monday through Friday, 3am to 9pm (EST).

United States +1 866-776-1550 3am to 9pm (Eastern)
United Kingdom +44 (0)800-011-9071 8am to 2am (London)
France +33 (0)9-75-18-84-74 9am to 3am (Paris)
Israel +972 (0)3-720-8922 10am to 4am (Jerusalem)
Australia +61 (0)2-8880-9166 7pm to 1pm (Sydney)
To schedule a call in French, Portuguese, Hebrew or Russian, please email us at prioritysupport@dudamobile.com
×

Please Log in as a DudaPro

Priority Phone Support is available exclusively to DudaPros. Log in to your DudaPro account now to see our international support numbers.

Log In
Not a DudaPro? Start a free trial now!