Custom Widget Builder
course
Custom Widget Builder

kAFJPmXjm7uV

SaaS, Agency
71

min

About this course
This course provides a technical framework for developing custom widgets within the Duda environment. We move from manual code implementation to AI-assisted automation, focusing on the transition from static code to user-editable components. The curriculum covers the integration of HTML, CSS, and JavaScript into the Widget Builder panels and the creation of Content and Design inputs to allow for client-side customization. You will also learn to implement dynamic logic, manage responsive SCSS, and connect widgets to external data collections.
What you'll learn
  • Widget Architecture: Understand the relationship between the HTML, CSS, and JavaScript panels and how they render on the live site
  • Variable Mapping: Create Content and Design inputs (text, images, toggles, color pickers) that allow non-technical users to update widget data without touching code
  • Handlebars Logic: Use double and triple braces for text escaping, and implement loops to generate dynamic lists and galleries
  • Responsive Scoping: Manage device-specific styles using Duda's built-in SCSS panels for Desktop, Tablet, and Mobile
  • Data Integration: Configure widgets to consume data from Duda Collections, enabling automated content updates across multiple pages
  • AI-Assisted Workflows: Use structured prompt engineering and visual references to generate and refactor widget code via the AI Widget Builder.
Who should take this course?
Developers
Frequently asked questions

  • What level of coding knowledge is required?

    A functional understanding of HTML and CSS is required. While we provide the code for the project, the lessons focus on how to integrate that code into the Duda environment.

  • How does this differ from the standard Duda Editor?

    Standard widgets are pre-built. This course teaches you how to build your own custom components with unique functionality and styling that isn't available in the default Duda library.

  • Are the widgets built in this course reusable?

    Yes. You will learn how to publish widgets to your team library, set permissions, and manage versioning so they can be deployed across any site in your dashboard.