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 computer screen with a graph on it and a purple background.

How platform ecosystems drive revenue

By Santi Clarke • April 24, 2025
Learn how platform ecosystems drive revenue and why they are essential for the growth of SaaS businesses.

How to make your SaaS platform stickier

By Santi Clarke • April 24, 2025
One of the greatest challenges for SaaS platforms is keeping users engaged long-term. The term “stickiness” refers to a product's ability to retain users and make them want to return. In the context of SaaS platforms, creating a sticky product means that users consistently find value, experience seamless interactions, and continue using the product over time. The following are 7 practical strategies you can take to improve the stickiness of your SaaS solution. 1. Offer websites that help customers build their digital presence One of the most effective ways to make your SaaS platform sticky is by offering websites to your users. Many businesses today need an online presence, and by providing a platform where your customers can easily build and manage their websites, you increase their reliance on your product. When you offer users a website-building solution, you’re helping them create something foundational to their business. Websites, in this case, aren’t just a tool—they become a part of their identity and brand. This deepens their engagement with your platform, as they need your product to maintain and update their site, ultimately making them less likely to churn. Plus, websites naturally encourage frequent updates, content creation, and customer interactions, which means your users will return to your platform regularly. When you can give your users the tools to create something so essential to their business, you make them more dependent on your platform. This creates a higher barrier to exit, as migrating a fully built website to another service is no small task. In fact, websites are some of the stickiest products you can sell, so adding them to your product portfolio can be one of the best decisions you can to keep your customers using your technology for the long haul. 2. Deliver continuous value through product innovation The key to keeping users coming back to your SaaS platform is ensuring that they consistently see value in it. This means not only meeting their immediate needs but also evolving to address their growing demands. Constant product innovation is essential for keeping your users satisfied and invested in your platform. One way to achieve this is through regular updates that add new features or improvements based on user feedback. A SaaS platform that evolves with its users will keep them engaged longer, making it harder for competitors to steal their attention. Encourage user feedback and prioritize updates that create tangible improvements. This creates an ongoing relationship with your users, which boosts stickiness. 3. Offer a multi-product solution Another powerful way to increase your platform’s stickiness is by offering a suite of products or features that integrate well together. When your users adopt multiple products, they are more likely to stay because they become embedded in your ecosystem. The benefits of this strategy are clear. Research shows that once users adopt more than one product, especially when they integrate >4 tools into their workflow, their likelihood of churn decreases significantly. This happens because the more a user integrates into your suite of products, the harder it is for them to switch to a competitor. These users have invested time in learning your ecosystem and rely on it for their day-to-day operations, making it much harder for them to make the switch. 4. Create a personal connection with your users Human connection is one of the most powerful drivers of user retention. People don’t want to feel like they’re using a cold, faceless platform. By offering exceptional customer support, personalized communication, and community engagement, you build a relationship with your users that goes beyond the product itself. Make sure your support team is responsive, knowledgeable, and empathetic. You can also consider offering tailored onboarding experiences to ensure users understand how to make the most of your platform. When users feel like their success matters to you, they are more likely to remain loyal. 5. Leverage data to personalize the user experience Using data to drive personalization is another strategy that can significantly increase the stickiness of your platform. By tracking user behavior and usage patterns, you can tailor the experience to each individual user’s needs. This could mean recommending features they haven’t yet explored or sending them reminders about tools they may not be fully utilizing. Personalization gives users the feeling that the platform was designed specifically for them, making it harder to walk away from. By demonstrating that you understand their unique needs, you can build a stronger connection and ultimately increase retention rates. 6. Focus on seamless integrations and API capabilities To further increase stickiness, consider expanding your product’s ability to integrate with other tools your users already rely on. Whether it’s email marketing software, CRM systems, or social media management tools, seamless integrations add tremendous value by making it easier for users to incorporate your platform into their existing workflows. The more your product can work in tandem with other popular tools, the more indispensable it becomes. In fact, users who depend on integrations are less likely to churn since their entire ecosystem is tied to your platform’s functionality. 7. Encourage user advocacy and community building User advocacy is another powerful tool in building a sticky product. When users feel a sense of community or even ownership over the platform, they become your most passionate promoters. Encourage your users to share their success stories, join community forums, or contribute to product development through beta testing or feedback loops. A thriving user community not only increases user engagement but also creates a sense of loyalty. When users are part of something larger than themselves, they are more likely to remain committed to your platform, reducing churn and increasing lifetime value. Create deep, lasting customer relationships Making your SaaS platform sticky is all about creating a deep, lasting connection with your users. This requires building a platform that continuously delivers value, creating a seamless and personalized experience, and integrating features that keep users coming back. By focusing on product innovation, offering a multi-product ecosystem, and fostering strong user relationships, you’ll be well on your way to reducing churn and boosting user retention. Stickiness isn’t just a nice-to-have; it’s essential for long-term success. Focus on creating a platform that users can’t imagine living without, and you’ll see them stick around for the long haul.

How to support a product you didn’t build

By Shawn Davis • April 24, 2025
Your team is likely pretty familiar with the products they built, but what about the ones they didn’t? Integrated tools can throw a wrench into your support operations, but they don’t have to.
Show More

Latest posts