How to Use Duda Website Builder (COMPREHENSIVE Tutorial)

This Duda Website Builder tutorial is jam-packed with pro-tips, potentially life-saving suggestions and will ultimately give you the information needed to excel on this fantastic platform.

John Siciliano

Published February 4, 2024

Updated February 4, 2024

Some of my content contains affiliate links – about

Building over 20 websites using the Duda Website Builder will teach you a lot, especially if you're the type of person who explores every corner of a platform and loves finding its strengths and weaknesses.

This Duda Website Builder tutorial is jam-packed with pro-tips, potentially life-saving suggestions and will ultimately give you the information needed to excel on this fantastic platform.

Choosing the Right Template

Every eye-catching digital experience starts with the best fitting template. Lucky for us Duda users, there are plenty of professionally designed Duda templates at our disposal.

The templates are organized in the following categories:

Pro Tip: Your use case doesn't need to match with the category the template is in. While the template will contain imagery and copy relevant to the category, you can repurpose the bare bones of it for another industry.

There is a considerable amount of value in these templates. They are not only time-saving but look amazing.

The "Blank" templates are useful, too, if you are implementing a custom design. It gives you the absolute bare bones of a Duda website: the header, content, and footer regions.

Duda releases a new template every month (their historical product updates show this).

The templates are all very unique, professionally designed, and leverage all the Duda greatness.

These templates are in no way cookie cutter.

Pick the template, name the site, and you will see the site's dashboard.

Website Builder

Now that the website is created, Duda presents us with all the tools to build and manage the website. We'll go over all the essential features in this Duda Website Builder tutorial to give you all the knowledge you need to succeed.

This is what the editor looks like in Duda.

The Duda editor presents itself with two main navigation areas: the top one and the left one.

The top navigation gives access to more high-level and sitewide features such as publishing the website. The left navigation gives you the tools to build your website, such as adding pages and widgets.

You can do the following actions with the top menu:

Switch between pages
Switch between desktop, tablet, and mobile
Get the preview link (only allows previewing and not editing)
See if your recent changes have autosaved
Undo and redo changes
Access preview mode (you stay on the same screen, and it hides the editor)
Publish/Republish the site
Access support

Note: You can do other things here, but the bullets above cover 99% of what I do in the top menu.

Some of the items are self-explanatory, but I'll give more insights into several of them.

Why do we need a page switcher if I can just click the links on the website? This is because when clicking some links on the website, Duda pulls up the editor to modify the styles of the link instead of navigating to the clicked link. The link switcher is also useful to navigate to pages that aren't easily accessible through your website, and when navigating mobile, so you don't have to use the mobile menu to navigate.

When it comes to undoing your changes, you can only backtrack changes from your current session. If you close your tab and reopen the website, there will be no changes to undo. You can, however, create backups of the website, which is another way to revert to older revisions. I've found that the undo tool isn't very reliable, so don't be too reliant on it.

You'll spend a bunch of time in the left navigation so let's cover it in depth.

Design

The design tab allows you to edit global (aka sitewide) settings. There is "Global Text" where you set the styles for paragraphs, H1 - H6, and links. Styles set here will set the default behavior for all of these items, but you can override individual widgets as you please. The styles you find here are all the basics, plus a little extra, such as fonts, colors, sizes, and formats (e.g., underline links).

Pro Tip: It's best to set these styles before adding widgets. If you edit global design after adding widgets, it'll reset them to default causing any overrides you did to get reverted.

Next in Design is "Global Buttons". The same rules as above apply here but for the buttons. You can set button fonts, colors, sizes, roundness, the styles when you hover, and more.

I'm going to skip "Global Images". While this may be useful in some instances, I haven't used it yet.

"Global Rows" is the next section, and this allows you to set default spacing for rows, columns, and background colors. I mainly use this when setting up the website by configuring the row spacing and leaving everything else to default. The row spacing will change based on your design. Do you want each row to have large spacing above and below, making only one section visible at a time? You can set that here so each time you add a new row, the system adds your spacing. You can always customize each row, but it'll auto set to the default.

Next is "Site Background". Listen up! Every person new at Duda will go crazy trying to replace specific images in a template. Normally backgrounds are set on rows or columns, but in some cases, you may want the entire page to have a background. The Site Background section allows you to do that. You can set a background per page or for the whole site and use different mobile and desktop backgrounds (which you may need to do because a mobile screen is taller than wide and a desktop screen is wider than it is tall).

Background per page field in Duda editor.

The last item in the design section is "Site Layout", which allows you to place the main menu on the side and change the content width (essentially how wide the content can span before wrapping). I haven't made a website with a menu on the left side yet, but there are definitely use cases!

Widgets

Widgets are the smallest building blocks of a page. To use them, click and drag them to where you want them to show up! It's easy, and the drag and drop feature works well.

A lot of your site building will happen with widgets. Need inspiration? Check out these Duda website examples!

Here's a non-exhaustive list of widgets:

Text
Image
Title
Button
Icon
Image Slider
Photo Gallery
HTML
Form
Columns
Copyright
Video
Business Hours
Facebook Feed

Are you looking for a different widget? Duda allows you to build custom ones. I've built several when I need additional functionality. The widget builder is intuitive but typically requires knowledge of HTML, CSS, JavaScript, and a templating language like Handlebars.

After adding a widget, there are two main tasks you can do with them: edit content and edit design.

Most widgets allow you to edit their content and design.

Editing content allows you to make changes to the content of the widget. So for a button, this is where you change the button text and link. Editing design allows you to change any of the design components like color and spacing. The exact content and design fields available will depend on the widget. Photo galleries, for example, will have file upload features and other features relevant to photos.

Pro Tip: Right-click on a widget and familiarize yourself with these options. You can copy and paste, delete, and justify widgets left, center, and right.

Blog

Duda has an out-of-the-box blog management system. I'm going to show you everything you need to know about the blog to get up to speed and start writing poetry!

There are two main concepts about the blog:

There is one layout
Each blog you add is output into that layout

Let's start with the one layout.

"All posts have the same layout, for improved SEO, easier management, and a better user experience. When you change the layout, all posts are automatically updated." - Duda.co

By going to "Blog" then "Edit Layout", Duda presents you with the wireframe for all blogs. This is where you do things like setting where the post's image, title, author, and date show up.

Here's a complete list of what you can do when designing the layout:

Display title
Display author (or don't)
Display date (or don't)
Add social sharing icons
Add comments section
Show related blogs
Add a newsletter signup
Add any other elements (like a services list)

Once you set all of this, it's time to create a blog. You can edit the layout at any time, so don't worry about perfecting it.

Adding a new blog in Duda is similar to adding a new page. There is the meta information and then the blog content. The meta fields are as follows:

URL
Publish Date
Post Title
Post Author
Post Main Image
Post Metadata

The second area to modify the blog is the actual blog content. This is where you add the words, images, buttons, and every other widget within Duda. You can make unique blog posts that extend beyond the words by adding image galleries, sliders, countdowns, multicolumn layouts, and much more!

Content

Next up on Duda's left navigation is the "Content" tab. There's a bunch of valuable features in this tab, so let's cover them!

The first item is "Business Info", which is where you add the following information:

Business Name
Logo
Phone Number(s)
Email(s)
Social Links
Hours
Address

What's the point of adding this information here? There are two reasons:

To use in Local Business Schema, which communicates to search engines and improves the discoverability of your website
To use throughout the website with a concept called "Connected Data"

One main rule in development is keeping it DRY, an acronym for "do not repeat yourself". When building a website, it is critical to think about maintainability and scalability.

Take business hours, for example. When a holiday comes around or your hours change in the future, you want to ensure that you update your hours everywhere, so no consumer is left with incorrect information.

Because we defined the hours in the Business Info section, we can reference those hours throughout the website without actually having to spell out the hours everywhere we need to show them.

Defining data once and referencing it throughout the website ensures up-to-date information and reduces your workload.

To reference the hours or any other information in the Business Info section, you type "{{", and this pulls up a window that allows you to select the data you want to connect to.

Connected data is easy to use and promotes maintainability and scalability—two of my favorite things.

The next item in the Content tab is "Business Text", which by default contains the following fields:

About Us
Company Overview
Business Services

Similar to Business Info, this allows you to add long-form text and reference it throughout your website. You can also add additional fields to add any other information that you will repeat throughout the website. I recommend using this if you are using the same piece of information two or more times. Remember, keep it DRY!

Next up is Business Images, which is the same as the previous two sections, but for images!

Collections

Duda Collections are an out-of-box extendable content management system. This functionality merits an entirely different tutorial given the length of it, but let's cover the high-level benefits and upkeep.

As previously mentioned, we want to keep it DRY. Anytime we find ourselves repeating the same things, we need to find a better way.

On most websites, there will be very repeatable information. Here are some examples:

Team Members
Locations
Products

Each of these has the same set of fields but different data. So for Team Members, we typically include a name, position, image, link, and bio. Without Collections, we'd copy and paste each team member and swap out the information. But if you update the design to one member, it doesn't impact the others.

The need for Collections is clear - we need the ability to add only the Team Members' information and create just one design.

Collections allow you to have a spreadsheet where each column is a "field" like name or position, and each row is a team member.

On the design side, we can create a team template ONCE. Then, we "connect" the collection to the template. We connect the title to the Team Member's name, the photo to the Team Member's photo, and so on. When viewing any member of the team, the information on the template displays dynamically.

Adding additional members is a breeze and changing the design is head-ache free. It only needs to be done once, that is, on the master template.

Personalize

A personalized experience will result in higher retention and increased conversions. People want to feel special. I've personally been on the fence when deciding to buy a product online, and my behavior is always going to the website, leaving it, coming back later, and repeat. I expect to see a popup saying, "Hey, you seem unsure. Would this 10% off coupon help you decide?", when in fact, I'm presented with nothing.

Duda's personalization rules make it super easy to make your visitors feel special.

You can program a variety of conditions/rules for the elements to show up. The following are a list of these conditions:

Device (mobile, tablet, desktop)
Location
Time
Visits
Campaign URL

With these rules, you can control the display of a variety of elements. Here's a list of my favorite ones:

Covid-19 Message (with close button)
Popups
Website Rows
Special Promotions
Visitors Nearby
First-time Visitor
Returning Visitor
Off Hours

There's a bunch of ways to leverage this functionality to deliver a personalized experience and drive conversions. Here are some examples:

A company selling products that promotes sleep can output a targeted message late at night. "Can't fall asleep? Buy now, and we'll give you free and fast shipping, so tomorrow night you'll drift away." In this case, the customer feels that the company understands them, which they do!

The same sleep company can create a popup for visitors in Phoenix, Arizona, that says, "Drop into our Phoenix store and get the sleep your body and mind are craving."

Pro Tip: Combine rules to create highly targeted messages. In the above example, we can also target the time of day to present the message while the store is open.

If you are a restaurant and want to promote a lunch special, this method will work well for you!

While these rules aren't necessary to create an inspiring digital experience, they can increase conversions and build trust with visitors. Use them!

Comments

Before we launch the website, we need to ensure everything is to our liking. However, there are usually two or more people involved in this process, and most website builders don't give you the tools you need for the project's feedback stage.

Duda, which is not like most website builders, gives us an out-of-the-box, ready-to-use comment tool. Point, click, and leave comments about what you want to change and watch as communication becomes vividly clear.

You can click the plus button on the right side to add a comment. As you drag the cursor around the screen, the various widgets will outline, indicating that the comment will be attached to that widget if you click there. Click on the thing you want to change, add a comment, include an attachment, and your team can view it!

Note: If you are in a client-agency relationship, you can set your comment to Internal or Public, which dictates if only your team can see it or both your team and client can see it.

The second button in the comment tool opens up a panel of all the website's comments. You can filter by only the page you are looking at or view them all. Clicking a comment takes you directly to the place on the website the comment was placed.

Once you change what needs to change, click resolve, and the comment goes away. You can still view resolved comments by filtering by "Resolved".

Lastly, I recommend checking out the last item in the comments toolbar which allows you to add notifications. By default, no one is notified when a comment is added. I like to stay in the know, and my clients expect me to see the comments when they add them, so I let the system know to email me when a new comment is added.

The comment tool significantly improves the feedback process on a website.

Going Live

The Duda Website Builder excels at every stage of the web development process, including launching the website!

Once you're ready to show your website off to the world, follow these simple steps.

First, click the "Publish" button in the top right.

Second, select a payment plan. Duda offers incredibly well-priced plans. There are several options to consider when choosing a pricing plan on Duda.

Paying annually will save you 25%, so that's usually the best route to go.

The higher-tier plans offer more support options, tools to manage a suite of websites, access to the custom widget builder, and access to the dynamic pages and internal collections.

All of the plans output the same performance and have unlimited pageviews, storage, and bandwidth.

"Unlike other web design platforms, we believe you should be able to build whatever websites you need without bandwidth or storage restrictions." - Duda.co

Third, enter your domain with the following format "www.example.com". Duda enforces using "www", and while there are ways around this, I don't recommend them.

Fourth, add the following records to your DNS:

CNAME, www, s.multiscreensite.com
A, @, 35.172.94.1
A, @, 100.24.208.97

All Duda websites use identical records. Duda has an internal system that looks at the domain being requested and matches it up to the right website. It all happens lightning fast.

Lastly, go to Settings, then SSL, and "Generate Certificate". It takes about 15 minutes to generate, and you're done for life. It will email you once it's live.

For more information on going live, view their support article or the Duda University Course on Going Live.

Ecommerce

Duda created its website builder because there was nothing like it on the market. Ecommerce is a different story.

There are many mature ecommerce platforms out there that don't need disruption.

Duda intelligently chose to integrate with Ecwid, an outstanding ecommerce solution.

Ecwid is now ten years old and as modern as ever.

Duda seamlessly integrates with the platform, which means you only interact with Ecwid within Duda. You probably wouldn't even know it's a different platform.

Ecwid has a well-developed video series, and you can read more about Duda's additional pricing for this add-on within their site.

Apps

Duda has an apps section that allows you to extend the functionality of the platform easily. Here's what to expect of the apps:

There aren't many available
They fully integrate with the platform
They automatically stay up to date
There are usually free and paid tiers
The apps won't break your site (looking at you WordPress)
New apps are slowly getting added

All in all, the apps are very trustworthy, very useful if they offer what you need, and fully integrated with Duda making using them a breeze.

Settings

As somebody who crawls every corner of a platform, the settings are a hot-spot for cool features that you should familiarize yourself with.

Let's briefly run through each section so you can get the most out of your Duda website.

Site Icons

There are three icons to add: favicon, social networks image, and home screen icon. The first two every website should definitely have, and the third just add it while you're in there, but it's less likely to be used.

If you don't know, the favicon is the little icon that shows up in your browser tab or when you bookmark (or FAVorite) a page.

The social network image uses an internet standard called Open Graph. Ever iMessage somebody a link, or send them a link on a social network (e.g., Slack or Facebook), and it pulls in an image? The social network image is what'll display when sharing links. People sharing your content is the best thing you can ask for, so make the experience worth it!

Lastly, the home screen icon is used to make a website on your phone available as an app. People don't do this much, but in the case they are constantly going to a website, phones offer the ability to add the website as an app on your home screen.

Site URL

This section gives you the ability to change your website URL, get the preview link, or unpublish the site.

Site SSL

One of the joys in using Duda is free and managed SSLs. Once you add the DNS records to go live, you go here and generate the certificate.

Generate it once and never think about it again.

SEO

Make sure you fill out the Site Title and Site Description! These will act as your defaults and be overridden on each page based on their titles and descriptions.

The Site Keywords field is optional. I own an SEO company, and we research keywords before implementing the pages. We use this field to note the keywords we are going for so future us can reference this when adding or modifying content. It doesn't serve any purpose to Google or search engines, however.

There are two settings at the bottom you should know about:

Lazy loading of images & widgets
Show default system fonts while custom fonts are loading

The first one increases your website's load time. Keep it on unless you see any weird behavior with sections not loading correctly.

The second one also improves speed by showing a default font first, then switching all the fonts once your custom font(s) loads. If you don't like the animation of your font snapping in, then disable this, but your users don't care. They prefer a fast website.

Google Analytics

Google Analytics is the most popular website tracking and analytics tool (I'm starting to dislike it due to privacy reasons, but that's a story for another day). As a result, Duda gives you a simple setup for this. Paste in your tracking ID (not the whole script), and they take care of the rest.

URL Redirects

Any time you are rebuilding a website, be sure to add URL redirects for pages whose URLs have changed. Adding redirects leads to better SEO and a better user experience (so they don't land on 404s). At the time of writing this (April 2021), our agency is beta testing a bulk import feature that will save the site builder a bunch of time.

Head HTML

There are three essential features here:

Toggling Ajax Page Changing
Adding HTML to the end of the Body
Adding HTML to the end of the Head

The first option should have made it on my top reasons I love Duda Website Builder. It keeps all the elements that don't change when you go to a new page and only change the things that do. The way websites normally work is when you go to a page, the header, content, and footer are all downloaded. Then when you navigate to a new page, everything is downloaded again. Why download the header and footer on every page if it stays the same? On Duda, it only downloads the new things. This results in a much snappier user experience. However, this might cause an issue for some features, so if you're having issues, you can try disabling this.

The body and head HTML allow you to easily add scripts and verification codes as provided by other services.

Backup Site

Are you making significant changes? It's best to back up the website before doing so. While there is an undo feature, it's not super reliable and only works when your current session is still active. Closing your tab will lose you the ability to undo changes.

With one click, you can backup your site and quickly restore it later. Add a name to it so you can reference it in the future. I like to name them "Before XYZ Change".

Privacy Settings

These settings allow you to enable a privacy page, cookie notification and disable default cookies.

The privacy page is templated, allowing you to modify the items relevant to your website and accept the defaults otherwise.

404 Page

Want to get creative on the page not found? This is where you can do that! Here's some 404 inspiration to get your creative juices flowing!

Note: I skipped a couple of settings but covered all the ones I have ever used.

You're on your way to becoming a Duda Website Builder pro!

Dashboard Overview

Once you login to Duda, you'll see your list of websites. Duda's dashboard offers valuable links on the overview page. You can do the following:

Edit your site
Preview it
Go to "Overview"
Rename it on the admin side
Access form responses
Manage Posts
Manage Store (if ecommerce is enabled)
And more!

Let's cover the three main buttons.

Clicking "Edit" pulls up the editor we previously discussed. Any time you want to make changes to your website, click edit.

Pro Tip: Without having to navigate to the editor, you can manage the blog or store it through the links in the secondary menu. This will save you clicks and get to where you need to go faster.

Clicking "Preview" gives you access to a notable Duda feature. Your website pulls up in preview mode, where it displays your website on all three devices (desktop, tablet, mobile).

Ensure quality by previewing all devices.

Pro Tip: Your unpublished changes show up in preview mode. This gives you, your team, and clients the ability to preview upcoming changes before publishing.

The third important link is "Overview". Duda gives us a handy overview of our websites that displays the most important things at a glance. Here's what you can find in this dashboard:

Website Statistics
Site Visits
Engagement (i.e., conversions)
Mobile and Desktop Usage
Form Responses
Clients Assigned to Site
Activity Log (e.g., last time the website was published)

Custom Widgets

While Duda's provided widgets cover 95-100% of website building needs, additional widgets may be needed.

For example, on one of my client's websites, we wanted an image to show a second image when you hover over it. There's no widget in Duda that allows for this functionality, so in this case, we searched the web. There are several companies out there that have a library of custom Duda widgets available for sale. We happened to find one that met our requirements.

If there is no widget available, you can hire a company to build one or build one yourself!

To build one yourself, you need to understand the following frontend languages/markups:

HTML
CSS
JavaScript
Handlebars.js

I'll take you through some of the basics when creating custom widgets.

The three primary areas in Duda's custom widgets builder (which is only available on higher-tier plans):

Widget Code
Design Editor
Content Editor

The Widget Code controls the output of the widget. You can add all the HTML, CSS, JavasScript, and Handlebars.js for templating logic in this area.

But what if you need to pass user input to the code? That's where the Design Editor and Content Editor come into play.

When you add almost any widget to your website, you are always presented with the content and design tabs. Content allows you to add content. So if it's an image gallery widget, this is where you add images. The design tab allows you to make changes to the design. In the image gallery, you can modify the size of the images, for example.

So when you are building a widget, you control what the user sees in those two tabs.

You are then able to reference the users' inputs within your code!

All in all, the Duda Widget Builder is easy to use if you know the previously mentioned languages.

So does that make me a pro?

You can test your Duda knowledge and become certified within Duda University!

I'm glad you found this Duda Website Builder tutorial and hope it was helpful! Subscribe to my website and YouTube Channel to learn more about Duda!