duda
Platform
BUILD HIGH-PERFORMING SITES
Website builder
Create beautiful websites at scale
ALL ESSENTIALS INCLUDED
AI Assistant
Boost your efficiency with built-in AI tools
SEO
Build sites that rank higher
eCommerce
Sell products online and offline
Transactional sites
Sell services, subscriptions, and more
ACCELERATE YOUR GROWTH
White label platform
Fully own your customer experience
Client management
Manage all of your projects in one place
Team collaboration
Invite staff and clients to work together
Client billing
Manage client payments hassle-free
Automation
Unlock efficiency with smart automations
EXPAND YOUR BUSINESS
App store
Drive recurring revenue with apps
The Simple Editor (DIY)
Simple interface for non-technical users
MORE FROM DUDA
Templates
Made with Duda
Accessibility
Solutions
DUDA FOR
Agencies
See why Duda is the top website builder for agency growth
SaaS
Add a seamless-integrated website builder to your SaaS offering
 
Hosts
Provide high-end website solutions integrated with your services
INDUSTRY CASE STUDIES
Real estate
Travel & Hospitality
Transportation
View all success stories
Resources
BUILD
Templates
Get started with beautiful templates
Developer portal
API, extensions, and developer tools
Hire an expert
Get expert help for your next project
CONNECT
Webinars & events
Learn from experts, online or in-person
Community
Collaborate with other Duda users
LEARN
Blog
Get insights to fuel your business
Product Updates
Discover Duda's latest releases
Duda University
Take your skills to the next level
Success Stories
Get inspired by real wins
GET HELP
Support portal
System health check
Pricing Enterprise
Contact sales
How we built the new Duda homepage on Editor 2.0
BY Renana Dar • April 22, 2024
0 minute read

It all kicked off with a vision, courtesy of our senior design guru. And let me tell you, one thing we've learned over the years is you never, ever mess with a designer's vision.


Now… Any website’s homepage isn't just some random page (if such a thing exists)—it's the face of a business, showing off its vibe and essence. 


But it’s particularly crucial for the homepage of a website builder catering to professionals–Duda’s very own homepage.


What I'm trying to get across is that when we were building Duda's homepage, we didn't just go through the motions. It was personal—for our design guru and for all of us on the team.


We poured our hearts and souls into every pixel and every word, making sure it tells the story of 'Duda' in the best way possible. 


That’s how seriously we approached the creation of the new Duda homepage.

But hey, no pressure, right?


However, that’s not why we decided to put these thoughts on paper—we're not here to toot our own horn. 


We wanted to share the thought process and techniques behind this homepage to help you—yeah, you, our awesome users—make your own homepage, or any other page, shine. 


The first thing we want you to leave this blog post with is that when it comes to building websites with Duda, everything is possible!


There’s really nothing you can’t do with Duda


Our design guru knows she can let her dreams run wild. Whatever she puts on the design table, we can bring to life with Duda—whether through offered functionality or by creating custom designs using our Native Widget Builder. 


Sure, creating custom designs might involve a designer and developer hand. So what?


If you want to build something complex and highly specific to the experience you want to convey, ready-made functionality might not cut it.

 

Don’t get me wrong—you can build a stunning website with Duda without ever using a designer or touching code. In fact, most of your designs will be like that.


But there are those cases where you want to be able to go beyond what is available out-of-the-box.


What you should look for is a website building tool that can be low-code on one hand, for those designs that don’t require a lot of custom work, and on the other hand, a tool that can allow you to use code and custom functionality to execute unique ideas and stretch the design limits.


This balance between the two is exactly where Duda shines and our new homepage is the perfect example.


The technology


Let’s talk a little bit about the infrastructure on which this homepage was built.


When we set out to build the new homepage, we felt relieved to have Duda’s Editor 2.0 on our side.


Our commitment has always been to help you, our customers, deliver beautiful, high-performing websites quickly and at scale, and Duda’s Editor 2.0 (still in beta, formerly All-Flex Editor) embodies that commitment and more. 


Based fully on Flex technology, Editor 2.0 offers enhanced editing capabilities, presenting a whole new way to put widgets on the canvas and redefining the relationship between widgets and how they adjust to one another. Inner Columns and Advanced Grids are only part of the tools you can use to design with Editor 2.0.


In short, you can create advanced designs faster than ever, increasing productivity and producing powerful designs, at scale. Whether you look at design power, productivity, or performance, this editor provides an experience like no other.


Editor 2.0 includes some nifty capabilities and advantages, to name a few:


  • Precise breakpoint control without using code
  • Automatic element reorganization for responsive design
  • Increased performance in CWV and lighthouse scores


If you want to learn more about Editor.2.0, be sure to check out our webinar featuring exclusive Q&A on Duda's Editor 2.0, or join the beta group.


It’s quite symbolic, if you think about it: creating our next generation of homepages with Editor 2.0 - an editor that empowers web pros to build the next generation of websites.


Editor 2.0 is exactly what we needed for this homepage.


That and our Native Widget Builder.


Our Native Widget Builder is a powerful tool that allows us and our customers to create reusable customizable widgets that are ideally tailored to meet our requirements and the requirements of any client. Our Experts portal flashes out the endless possibilities. Just dig into the various profiles presenting how agencies have created custom widgets such as interactive galleries, custom shapes, and even scroll-progress indicators.


OK, so the technology is covered. But how exactly did we build this homepage?


Let’s take a closer look at how we married the visuals, messaging, and Duda’s powerful editor together to bring Duda’s story to life in vivid color on the digital page.

 

Let’s talk hero 




How cool is the hero section, right?


It lets us spin four different stories, all in the same prime real estate above the fold without subjecting users to endless scrolling.


The whole concept was to tell the story of Duda's unique advantages right from the get-go.


We've got a dynamic banner showcasing various animations, a background, and a text slider—all synced up perfectly. The background and banner area switch up in sync with the text slider, complete with a slick progress bar indicating the transition between these three elements.

 

This magnificent fusion of visuals and text harmony was done using Editor 2.0 and our Native Widget Builder.


Want the lowdown on this widget?


Here’s the HTML, Javascript and CSS code:


HTML

JavaScript

CSS


Static sections aka ‘non-custom widget’ sections 


A brochure with a picture of a cell phone and a graph on it.


Take, for instance, the social proof section, along with other non-custom widget sections on the homepage—they're all about simplicity with a touch of elegance. Nestled between our dynamic sections, these areas maintain a clean, straightforward vibe.


Built using standard functionality within Duda, these sections feature basic layouts with columns and inner columns—easy to whip up in no time.


Now, social proof—this gem deserves a prime spot on your homepage. We've preached its importance before. Remember our DudaCon session? We dived into website conversions and the psychology of visitors with Andy Crestodina and Nancy Harhut. Among the golden nuggets shared was the vital role of social proof on every page, especially the homepage.


In Andy’s words, “When you say it, it’s marketing. When they say it, it’s social proof.”


So, naturally, we positioned a social proof section right after the hero section.


Read to do it yourself? Here's a snapshot of the components hierarchy in the Editor 2.0, illustrating how to craft these sections:



Section: Scale faster than you ever thought possible 




This section dives into the story about how easy it is to scale your website building operations with Duda–whether you have 10 clients or 10,000 all with unique needs. 


And when we talk scale, we're talking flexibility too. That is, ultimate flexibility to quickly build any type of site your client could ask for, from brochure-style websites to data-driven sites to eCommerce and transactional sites. The possibilities with Duda are endless.


The design flexibility of this section reflects this.


Check out how the image seamlessly adapts to the text on the left. Plus, we've added an intuitive expand and collapse feature for added convenience.


Just like the hero section, this area is built on a custom widget, giving us the freedom to tailor it precisely to our needs.


Here’s the code:


HTML

JavaScript

CSS



Section: Increase revenue and drive customer value


When you’re in the business of building websites, bringing beautiful sites to life isn’t the end of the story–you’ve also got to think about your bottom line. 


This section of the homepage showcases the wide variety of ways Duda can help professional website builders – like you! – capture opportunities, drive more value, and ultimately grow your revenue. 


Your eye is immediately drawn to the revenue chart on the right that’s shooting up quickly. Meanwhile, the floating boxes on the left showcase the wide range of opportunities to add functionality and value to your client websites through Duda’s rapidly expanding App Store, for example. 


Similar to the hero section, this area cleverly maximizes space without overwhelming the viewer, delivering multiple messages all couched under the theme of helping you increase your revenue, and showcasing numerous apps with finesse.



Now, for the code:


HTML

JavaScript

CSS


Testimonials carousel




The testimonial carousel is another tailor-made widget that showcases success stories in a captivating manner. What makes it stand out? Well, it's not your typical carousel—each tile in the carousel is unique. Some feature just text, while others put the spotlight on an image. 


Each tile also elevates a single insightful tidbit from the story behind it. And again, each one is unique. 


For some tiles, we’ve highlighted the numbers, underscoring the tangible impact of Duda’s platform on our customer’s business (see Develomark’s incredible growth from $150k to $1.8 million in revenue in 3 years). 


For other tiles, it’s a callout quote. Scroll to the right, for example, to see Retailgear’s spot-on quote that “With Duda, everything is possible.”


The variety in both visual styling and language make each tile stand out, drawing the user into the experience. 


HTML

JavaScript

CSS


The bottom inspirational collage




This section serves as an inspiration board, showcasing various examples of real customer websites to spark your creativity.


In this section, we fully leaned into “show don’t tell.” There are very few words because the example websites speak for themselves with their stunning designs.


Unlike some of our custom widgets, this section doesn’t rely on specialized coding. Instead, it utilizes overlapping columns and animation. Essentially, it's a section with three columns, each with different padding from the top, and images stacked vertically within those columns.


That’s a wrap


That’s it folks - Duda’s homepage unraveled. 


As I mentioned at the very beginning of this post, the key takeaway is this homepage is just a glimpse into the endless potential of what you can achieve. With Duda, you're not confined by boundaries—you're empowered to stretch the platform to its limits and beyond. 


Want to share your thoughts on our new homepage? Don’t hesitate to reach out in the Duda community.

Did you find this article interesting?


Thanks for the feedback!
A pink background with the words `` par lax '' and a purple bubble wrap package.

5 ways to add a parallax scrolling effect to your website

By Shawn Davis • February 20, 2025
Drop shadows? Layering? Lame! Parallax effects are the most impressive way to add depth to your clients’ websites, and it’s even easier to do than you might’ve thought. Take a deep dive with us into everything parallax, including 5 ways you can implement it yourself today.
A screenshot of a website with a domain authority score on top

Mastering Domain Authority: How to choose the right Domain Authority Checker and use it to boost your clients' SEO

By Renana Dar • February 20, 2025
In this article, we’ll explore how to select the most effective DA checker for your needs and use it as a tool to enhance client success.
A set of four cards with different percentages on them.

5 game-changing web design statistics for 2025: Actionable insights for agencies serving SMBs

By Renana Dar • February 13, 2025
Discover 5 key web design stats from our SMB survey to help your agency better understand SMBs’ needs and refine your services, marketing, and sales strategies.
Show More

Latest Posts

Share by: