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.
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.
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.
Adding elements to your page
As of writing, Dorik comes with the following elements that you can add on your landing page:
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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 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.