How To Create An Amazing Landing Page Using Dorik

Building a landing page has become an imperative of every business or product you want to introduce to the world. Learning how to code can be a long and exhausting process. Maybe hiring an affordable web designer is not in your budget and you are planning to do it on your own.

When you are starting it might feel too much. You have to absorb a lot of new information, learn about HTML, CSS, and other web design related terms you never heard of before and you wish that somewhere there is a simple drag and drop tool that makes it all much easier. 

There are many popular tools to do precisely that, like Elementor or Divi, but if you are a newbie it might feel a bit overwhelming. Before jumping in, you would have to quickly learn about domains, hosting plans, WordPress, page builder integration, theme install and much more. This is all very time consuming and requires skills that sometimes you simply don’t have time to acquire.

Recently, another amazing no-code page builder was released and within 24hours it became the 2nd most popular item on ProductHunt. It is called Dorik and I already gave it a run using some of their available templates. What is amazing with Dorik is that other than being a simple and intuitive page-builder, there is no need to install WordPress or any similar content management system (CMS).

What is a landing page?

A landing page, unlike a web page, is designed to bring more conversions. It needs to be appealing, attractive, straight to the point as you want your reader/customer to get interested in what you do/offer right away.

Landing pages need to have a clear call-to-action element, a message to inform a customer about your product/service with a specific goal in mind (like “Buy now”, “Download”, “Sign Up”, etc.). The goal is to have a landing page focused on a product you want to place on the market with a minimum amount of links as this increases your conversion rates.

Dorik gives you the possibility to add these elements easily and by using a simple drag and drop system you can adjust your landing page in minutes.

How does Dorik work?

Sometimes you need a landing page that doesn’t fit into previously designed templates. To solve the problem developers at Dorik created an amazing simple-to-use interface to get you going and have your modern beautiful landing page within a span of a few hours.

The interface is logical and intuitive, even if you don’t have any previous experience with web design.

To illustrate how it works, we created a landing page promoting Iceland travel blog. In this post, we will walk you trhough every step we took to create this page. Short screencasts provide an impression of how edting a page in Dorik works.

The landing page we built for testing Dorik

How to build your custom landing page?

Once you have created an account you can start creating your first landing page. The basic concept is that everything works within one window. There is no bulky toolbar that would stand in the way, instead you have a light navigation menu on top and once you add elements a floating window appears, allowing you to make adjustments with live preview.

Screenshot of Dorik Getting Started Screen

To show all core features of Dorik I will create a landing page for a travel blog about Iceland. It is good to prepare your content, images and logo prior to creation to speed up the whole process.

Building your layout

This is your starting point. Once you’ve chosen to create your landing page from scratch you have a possibility of adding a section manually or choosing pre-made templates. My advice is to sketch a layout before you begin as it will be much easier to add columns or rows and then simply fill them out with your content. 

The most important step in order to have a very attractive high-converting landing page is to use a proper layout of elements (sections, columns, rows). With Dorik you don’t have to worry if a layout you initially select doesn’t look good, as you can change column size in one click.

Screenshot of Example Layout built with Dorik

Adding elements to your page

As of writing, Dorik comes with the following elements that you can add on your landing page:

The available elements in Dorik page builder

Everything you need to build a landing page is already included in a list of custom elements. After building your layout, adding elements is done through a simple interface allowing a fast selection. Elements you customized can be saved in your own library for future page creation. 

Creating a navigation bar and setting up a background image

Creating a navigation bar is done by adding an element that is then edited to your wished design. Here you can add your custom logo image.

Video showing how to create a navigation bar

One amazing feature is the simplicity of adding frames to sections. Frames can be placed across the whole section or just in corners, with adjustable size and color. I want to follow a fully white background colour scheme by using a slider.

Short video on how to add and customize section frames

Dorik offers additional options of background editing. You can do it in three ways: a solid color, gradient color, or an image. I went with a beautiful photo of Iceland, and adding a bit of overlay color will make content pop-up visually.

Short clip showing background editing options

Heading Styles

Headings are used to help search engines and users to understand your web page better and what your page is about. They also define what parts of your web page are more important as with them you create visual hierarchy. Headings vary from H1 to H6, where H1 is the biggest.

When adding a Heading, interface allows you to simply switch between sizes. Multiple effects can be added such as background, blur or shadow. All of this is performed via slider, again making it extremely easy to find your desired style.

Transformation is done by choosing your style, with instant preview.

Video showing very simple Heading Editor

Text editing tool allows a quick adjustment to your paragraph, with spacing, color and font family, visible on your page with instant preview. Added images, next to text, can also be manipulated in terms of width, height, effects and filters both in Normal and Hover modes.

Screencast on how to edit text paragraph in Global Style

My favourite tool is the Radius/Rounded corner. Changing values is changed instantly in a live preview on both your image and within the tool itself. You can set rounded corners for a specific side, or apply to all corners using a Lock symbol. By using margin and padding settings you can control perfect alignment with the rest of the site.

Video showing Radius/Border editing

Filter/Resize your uploaded images

Attractive images of your product/business will always be the first thing a visitor to your website notices. In Dorik, adding a photo is a simple process where you don’t have to worry about image resizing or filters. 

Selecting columns within a row, and adding an “image” element can be done with a few clicks. Further adjusting height and weight make photos aligned and give a feeling of an organised and well thought out website.

Clip showing how to edit images easily with in-built tool

Creating The Featured Blog Post Section

While Dorik is not a blogging tool, we want to point users to our most read blog posts we previously published on medium.com. To do so, I added a 3-column layout with each column pointing to a blog post.

Blog post thumbnails are a vital part of every blog site, it is very important to lay them out properly, as it is the first impression your reader gets. A good layout, attractive titles (important for SEO, Google) and images will keep your reader interested enough to read more and eventually sign up to your newsletter (or whatever action you have in mind).

Screenshot of our blog feature section

To add a new section below select 1/3 column layout and then add images, heading and text below each image.

Dorik gives you an amazing set of possibilities to play with your design and make your blog post thumbnails stand out. You can adjust margins, set up rounded corners, add a shadow and line everything up to keep your website nice and organized.

Video showing how to edit blog post thumbnail section

I love the “save color” function so much, as it saves me a lot of time I would normally spend to find color code. As I selected my colors, I saved them and later on applied the same scheme to titles, background colours and buttons. Dorik will keep your columns of the same size allowing you to line up content like buttons, text and images. Your content will always stay automatically within a column so you don’t need to worry about adjusting it manually.

Short clip of a tool to save your color scheme that can be applied to multiple elements

Adding Pre-made Templates

In addition to custom sections, Dorik gives you the possibility to add pre-made templates. I wanted a testimonial section, but not from scratch. Doriks section library has a lot of different styles and what is good about this approach is that you don’t have to worry about rows/columns or anything that has to do with padding/margin. You just fill it in with your content, adjust the background if necessary, and voila. You can also save your own sections and use them on a different website later on.

Screencast of adding pre-made sections to your website

When adding multiple columns (in this case 1/3) and filling them up with images of various sizes, Dorik has a simple tool to adjust weight and height that affects all columns simultaneously. This will allow to have a clean, lined up content.

When editing content that has a lot of similar elements, to save time function “duplicate” is great, as it makes the whole process a lot quicker, keeping style of buttons/icons/text the same and you don’t have to go back and forth to the previous element to see how you styled it. Duplicate – drag & drop – edit.

Video showing Duplicate function, used to save time when editing

Subscription forms are an essential element on your website, as that is a great way to start growing your mailing list, and have a steady flow of readers allowing you to continue promoting your blog/product.

Dorik offers integration with all major newsletter services and has a great selection of pre-made templates to fit any style. Adding a subscription form can be done in one click  and if needed change of text and colour is done within seconds.

Video showing selection of pre-made newsletter elements

To finalize your website adding a footer that would give all essential information regarding your blog/company with social media links is a must. Dorik again offers multiple designs to allow you to find a perfect fit. I went for a simple logo/email/social media layout.

Screenshot of footer teamplates in Dorik

Set Global Options

Changing the style for every element after adding is a time-consuming task. To speed up your editing process I recommend taking a look at the Global Options. As soon as you have figured out which style you want to apply to your landing page, add them in global options.

Screenshot Dorik global options panel

Using Global Options makes it easier to provide a consistent user and design experience across your landing page. It allows you to change the color scheme across the whole page and use previously saved colors.

Change of typography can be done globally for each heading size and paragraphs. Of course individual customisation is available when editing selected heading/paragraph and that setting will override previously selected Global setting for that specific element you edit. 

You can select default column width and gap between columns for a consistent layout as well as choosing a global link color giving you the same color across the whole page.

Dorik Verdict

Dorik allows you to create amazing landing pages without any previous knowledge. Clean and simple design that works fast on any spec device will save your time and give you the desired result in no time.  

Developers did an amazing job in setting up a powerful page builder. It’s cool to follow their open roadmap where you can track upcoming features. Dorik is currently in beta but you can test it out for free. It will allow you to create a single page for now but according to developers upcoming features are soon-to-be released like “Multiple Pages” and “Custom Forms”.

I firmly believe developers did an amazing job with this tool and if development continues as planned this might be the next go-to tool for fast and easy website creations.

This is the first of several posts that we will create about Dorik in the coming weeks. In future posts, we will explore some of the advanced features (integrations), and will compare Dorik to other page builders. Subscribe below and do not miss out on any updates.

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.

2 thoughts on “How To Create An Amazing Landing Page Using Dorik”

Leave a Comment

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

We spend 5 to 20 hours a week to check out tools, resources, and articles that curious marketers, entrepreneurs, and content creators should know about.

Subscribe to our bi-weekly newsletter and stay ahead of the curve! (Example)