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!
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.
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:
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.
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:
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:
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:
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:
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.
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 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.
