Developer Mode

This article refers to a previous version of the Duda Responsive Website Builder. Click here for help content on the current Duda editor.

Overview

This article covers Developer Mode in DudaOne. This allows you to get direct access to the HTML and CSS of the DudaOne site. The code is organized into separate files for easy access. 

Tips for using Developer Mode

  1. Make sure you stay within the columns. DudaOne sites are split into a row-column structure. This means that each row contains a column, which ultimately holds the content. When adding or editing your own HTML -- make sure it is inside of a column. 
  2. Leave the classes in place. Duda 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 of 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 Duda 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. 

Common Pitfalls

Error Reasoning
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

Page HTML and CSS sections

In developer mode, all the page HTML and CSS is divided into two sections.

Page HTML / CSS

The first section includes the site's page files. The files you can edit and access are;

  • head-section
  • .html
  • .css
  • desktop-tablet.css
  • mobile.css

Site HTML / CSS

The second section includes the files that you can edit site-wide. These files include;

  • head-section.html
  • body-end.html
  • site.css
  • site-theme.css
  • site-desktop.css
  • site-tablet.css
  • site-mobile.css

HTML Editor

Developer Mode gives you access to edit your site's HTML on a per-page basis. Each page will have an HTML file that structures the site for all three devices small, medium, and large.

In addition, you also have access to the footers HTML, which is added to the bottom of every page, under Site HTML/CSS.

Rows and Columns

DudaOne's Developer Mode gives you a lot of control over the layout of your site, but certain structures must be maintained.

All DudaOne sites adhere to a row and column structure. Here's a typical piece of HTML you may find on your site:

<div class="dmRespRow" style="text-align: center;" id="1760459017">
  <div class="dmRespColsWrapper" id="1104281418">
   <div class="dmRespCol small-12 medium-12 large-12" id="1773415070">
    <!-- *** INSERT YOUR HTML BELOW *** -->
    <div class="dmNewParagraph" data-dmtmpl="true" id="1397549575">
     Duda uses rows!
    </div>
   </div>
  </div>
 </div>

Here you'll see a row (dmRespRow) wrapped around a column wrapper (dmRespColsWrapper ) wrapped around a column (dmRespCol). While coding your HTML you'll want to maintain this same structure.

Within each row, you can have multiple columns. Each columns width is calculated on a 12-section grid system. This means the width of the total columns in a row should add up to a multiple of 12 on each device (small for mobile; medium for tablet; large for desktop). In the example above we have only one column, but if we wanted to add another that takes up the entire width on mobile, 3/4 of the width on tablet, and 1/2 the width on desktop we would end up with something like this:

<div class="dmRespRow" style="text-align: center;" id="1760459017">
  <div class="dmRespColsWrapper" id="1104281418">
   <div class="dmRespCol small-12 medium-3 large-6" id="1773415070">
    <!-- *** INSERT YOUR HTML BELOW *** -->
    <div class="dmNewParagraph" data-dmtmpl="true" id="1397549575">
     Duda uses rows!
    </div>
   </div>
   <div class="dmRespCol small-12 medium-9 large-6" id="100">and columns</div>
  </div>
 </div>

Unique IDs

In order for Duda to keep track of the elements on a site, each element must have a unique ID. I would recommend starting your IDs at 100 and incrementing from there.

CSS Editor

While editing your site's CSS you have access to a bunch of CSS files. Under Page HTML/CSS you can access your page specific CSS. Here you'll find CSS files that will apply on all devices, desktop/tablet (they share CSS), and mobile.

Under Site HTML/CSS you'll find a CSS file that will apply to every page on you site, a theme CSS file that will contain global changes you've made to your theme (like globally changing your font style), and a global CSS file for each device.

I have code that I need to install, where do I install it?

That depends very greatly on the type of code you're installing (whether it's Google Adwords tracking or a custom script). The best way to find out where to install this code is to see what's the purpose of the code. Some thing to consider;

  • Do you want it to appear on every page or just one?
  • What are the instructions for your code for it to work?

Depending on these two questions, you will want to see the sections explanation of this article, and make the best decision on where your code should go.

×

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!