Our Elementor homepage cloned in Dorik [Page Builder Comparison]

Our website is built using Elementor, the powerful page builder on top of WordPress. Dorik, on the other hand, is a fresh no code page builder that we really like too.

So we thought we would try to rebuild our existing homepage with Dorik. And in this post, we will share how that went.

Spoiler: We got a very similar looking page without writing a single line of CSS.

Our homepage recreated in Dorik

Understanding the tool

We tested Dorik extensively already and explained how it works in detail (check our other posts about Dorik). Coming from Elementor, the concept of the tool is different, but still simple and user friendly. 

A quick note for beginners: Elementor is based on WordPress, the CMS that is most used on this planet. You have to install WordPress first, then Elementor. Compared to using Dorik it gets way more techy.

On the other hand, Elementor was launched in 2016 and is giving you more freedom to design the exact page you want.

To use Dorik all you need is create an account on their site and start editing right away. The tool was launched in April 2020 and new features are added monthly.

Comparing Elementor and Dorik

In Elementor, you have a left-hand sidebar for building your page layout and adding the content widgets.

Editing a headline in Elementor – with the toolbar open on the left

In Dorik, there is no sidebar from which you take your elements from. Instead of a sidebar, an editing tool will pop-up for each element you decide to work on. You can see it in action in our first post from the Dorik series.

Editing a headline in Dorik – you can freely position the content editor widget

Creating layouts

Creating a layout in Elementor and Dorik works in the same way, apart from a different user interface. You add sections, rows and columns, and place content widgets on your layout. And both tools support responsive previews.

What I found tricky in Dorik is building complex layouts with nested columns. In Elementor, you have more options for creating complex layouts, by resizing columns or creating “inner-sections”. 

When we started recreating freshvanroot.com homepage in Dorik, it was clear that we will not be able to recreate the page exactly as it is. Elementor has a bigger repository of content elements, and most of the elements also have more options to change its design.

Dorik’s team constantly adds new features, with the recent update a feature to create animated headlines, called Dynamic Test. The element you can add a typing effect to a selected headline, add multiple words that have the same effect, change text and background color.

Screencast of new Dynamic Text feature

Fonts & Typography

The main difference when editing text compared to Elementor is the options you get for customizing typography. This can be done only in global settings for headings and paragraphs in Dorik, but not individually as you would have in Elementor (on widget level).

In Elementor, you can choose from a broader range of available fonts, and our body font (Chivo), is not available in Dorik. Also, in Elementor you can upload your own font files, which is also not possible in Dorik. 

It’s the same with buttons. There is no option in global settings to change button typography, which I found strange as buttons look a bit off from the rest of the page in terms of font consistency. 

Regarding buttons, when they are a part of a form, there is no option to add an icon, you are pretty much limited to a predefined form. 

Global styles

We loved the “save color” option, as Fresh Van Root has a distinctive color scheme, and this tool sped up the process of applying proper colouring to sections and headings.

One of the recently added features in Dorik is “Global Colors”. With this new feature you can add a color scheme in Global Styles, which then gets applied to elements. This feature makes it easier to keep a consistent design across your website.

Global Color feature with Fresh Van Root’s color scheme

Overall, Elementor has more powerful features to define your style globally. You can target every specific item on the website.

Global settings in Elementor are powerful, compared to Dorik

One particular thing I miss in Dorik is a navigator feature which would allow me to quickly jump between sections and specific content widgets. That is something that is especially useful on larger pages and saves a lot of clicks. 

Screenshot of navigator feature in Elementor

Comparing site speed

The comparison is a bit unfair: Dorik is a hosted page builder, and Elementor is powered by WordPress.

Still, if your goal is to create a fast loading website and you do not need the power of WordPress CMS or design freedom of Elementor, you should check out Dorik.

We have compared the Elementor page with our Dorik page, and Dorik gets better results both for desktop and mobile.

Speed comparison on both Desktop and mobile versions

Conclusion

Our homepage recreated in Dorik was only partially reconstructed, as for the reasons explained above, due to missing options and elements. But doing this exercise in Dorik showed once again that using the page builder you get results very fast.

Editing a page in Dorik is simpler for beginners, straight-to-the-point, and to anyone that comes from a more complex system like Elementor, will create a page with Dorik in ease.

If you have very strict rules on how your page has to look (i.e. a designer handed you a template to implement), you might stick to using Elementor as it offers more freedom to design the page you want. Compared to Dorik, which offers less freedom but especially for new users will lead to results faster.

The result

As you can see with the full-page screenshots below, we were able to design a pretty similar looking page in Dorik.

Full page screenshot of our homepage in Elementor
Full page screenshot of our clone homepage in Dorik
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Want more tips like these? Subscribe to our newsletter to get 4-5 app/tool recommendations plus 4-5 hand-picked articles in your inbox. Sent every 2 weeks.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

All-In-One Video Course: Elementor, GeneratePress, WordPress.

Instead of reading hundreds of posts and learning bit by bit, learn from our year-long experience of building websites. Get notified when our course is available.