Search

How to Create a Website with Elementor (A Comprehensive Guide)

Since it was released in 2016, Elementor has blasted out to become the most popular page builder for WordPress. With Elementor, not only can you create stunning web pages. You can use Elementor to create a complete website. The pro version of Elementor comes with a theme builder that allows you to create custom parts of a WordPress theme. From the header, footer, single post template, 404 page, archive page, search results page, and so on. In this post, we will show you how to create a complete website using Elementor Pro.

A Brief Intro About Elementor

In case you haven’t known. Elementor is a page builder plugin for WordPress. A page builder allows you to create a beautiful web page without having to deal with either HTML or CSS. A page builder — including Elementor — comes with a visual editor where everything is drag and drop.

Elementor itself is released as a freemium plugin. The pro version (costing $49 per year for the lowest plan), comes with the following key features.

  • Theme Builder
  • Popup Builder
  • WooCommerce Builder
  • Marketing Tools
  • Dynamic Content
  • Form Builder
  • Extra widgets

We have created a comparison article between Elementor Free vs Elementor Pro to allow you to learn more about the advantages you will get with Elementor Pro.


Preparation

In this example, we will demonstrate how to create a digital agency website. The website will consist of 5 main pages as follows:

  • Homepage
  • About page
  • Contact page
  • Service page
  • Clients page

We will also create the 404 page, the header, the footer, a single post template, and a popup. Elementor itself offers template kits. A template kit is a set of Elementor templates with a consistent design concept. A template kit is designed for websites on a specific niche. We will use the Digital Agency template kit in this example.

Before getting started to create a website with Elementor, you certainly need a domain and hosting first. Here are the things you need to prepare to create a website with Elementor.

Domain+Hosting

A domain is an address where people can access your website (i.e. yourwebsite.com), while hosting (web hosting more precisely) is a place where your website is installed. A .com domain typically costs between $8 to $13 per year. For the hosting, you can use a plan according to your needs.

While you can use shared hosting, we strongly recommend you use a managed WordPress hosting as it is designed specifically to handle WordPress-based websites. The infrastructure of a managed WordPress hosting is optimized for WordPress, including server configuration. With a managed WordPress hosting, you don’t need to handle the site optimization and security yourself as the jobs are handled by the associated hosting provider. Bluehost is one of the prominent web hosting providers that offer managed WordPress hosting.

Elementor Pro

You need to use the pro version Elementor to create a custom header, custom footer and other theme parts we have mentioned earlier above. There are five plans offered by Elementor for the pro version. You can visit its official site to learn more. If you want to create a website for your own business, you can choose the ESSENTIAL plan which costs $49 per year.


Getting Started

Install WordPress

Once everything is ready, you can start creating your website. The very first thing you need to do is install WordPress first since it is the core component of the website we are going to create. The detailed steps to install WordPress are varied depending on the panel offered by your hosting provider.

If you use SiteGround, you can read this article to learn how to install WordPress. If you use a hosting provider that uses cPanel, you can read this article.

Install Elementor Pro

You can get Elementor Pro on its official website. You will have access to the ZIP file of Elementor Pro after completing the purchase. To install Elementor Pro to your website, login to your WordPress dashboard using your username and password. Go to Plugins -> Add New. Click the Add New button on the top side and select the ZIP file of the Elementor Pro you have downloaded and click the Install Now button to install it on your WordPress.

Activate the plugin right away once installed.

After activating the Elementor Pro plugin, you will be directed back to the plugin manager of WordPress and you will see a Connect & Activate button on the upper-right side. Click this button to activate your Elementor Pro.

Note: Elementor Pro requires Elementor Free. You can download Elementor Free on the official plugin directory of WordPress.

Set the Site Logo, Icon, Title, and Description

Before creating the core pages and custom templates of your website using Elementor, you can set the essential elements such as logo, icon, title, and description. While you can set these elements latter on, setting them up upfront will be so much helpful as they will be involved on the next steps.

When creating a website with Elementor, we strongly suggest you set the site logo, icon, title, and description from Site Settings instead of theme customizer. This will give a huge flexibility when it comes to theme change in the future. Everything you have set via Site Settings won’t lose even if you change your theme.

To access Site Settings of Elementor, enter to the Elementor editor by editing a page. Once the editor opens, click the three-line icon on the top-left corner and select Site Settings.

Click the Site Identity menu on the SETTINGS block.

Simply set the site logo, icon, title, and description on the respective fields. Don’t forget to click the UPDATE button to apply the changes.

Create the Core Static Pages of Your Website

Once your Elementor Pro is active, you can start creating the static pages for your website. In our case, the static pages we will create are: Homepage, About page, Contact page, Clients page, and Services page.

Homepage

Create a page (Pages -> Add New) and edit it with Elementor. Give this page a name like “home”, “homepage”, or “front page”.

Set the page layout by clicking the gear icon on the bottom-left corner on the left panel. Set the page layout to Elementor Full Width.

Since we want to create the website from the Digital Agency template kit, click the folder icon on the canvas area to import the homepage template of the Digital Agency template kit.

Under the Pages tab on the template library, type “digital agency” on the search box and select the homepage template. Click the Insert button to open it in the Elementor editor.

Tailor the content by replacing the default content with your own content. You can click each widget to edit then go to the left panel to edit the content. Clicking a widget will turn it into an editing mode.

Once done tailoring the content, click the PUBLISH button on the left panel to publish the page. You can also preview it first by clicking the eye icon.

Once your homepage is published, go to Settings -> Reading. Set the homepage display to a static page and select the homepage you have just created from the dropdown menu and click the Save Changes button.

About Page

Create a new page (Pages -> Add New) and edit it with Elementor. You can give this page a name like “about” or “about us”. Click the gear icon on the left panel and set the page layout to Elementor Full Width.

Click the folder icon on the canvas area. Under the Pages tab, type “digital agency” on the search box. Select the about page and click the Insert button to open it in the Elementor editor.

Tailor the content as you did on the homepage and publish the page.

Contact Page

Create a new page and edit it with Elementor. You can give this page a name like “contact” or “contact us”. Set the page layout to Elementor Full Width.

Click the folder icon on the canvas area to open the template library. Under the Pages tab on the template library, type “digital agency” on the search box. Select the contact page and click the Insert button to open it in the Elementor editor.

Tailor the content. Once done, publish the page

Clients Page

The Clients page is used to showcase the clients your company has worked with. Create a new page and edit it with Elementor. Give this page a name like “Clients” or “Happy Clients”. Set the page layout to Elementor Full Width.

Click the folder icon on the canvas area to open the template library. Under the Pages tab, type “digital agency” on the search box. Select the Clients page and click the Insert button to open it in the Elementor editor.

Tailor the content. Once done, publish the page.

Services Page

The Services page is used to display the services offered by your company. Create a new page and edit it with Elementor. Give this page a name like “services” or “our services”. Set the page layout to Elementor Full Width.

Click the folder icon on the canvas area to open the template library. Under the Pages tab, type “digital agency”. Select the Services page and click the Insert button to open it in the Elementor editor.

Tailor the content. Once done, publish the page.

Create the Theme Parts

If you’ve ever noticed, most WordPress themes consist of the following parts:

  • Header
  • Footer
  • 404 Page
  • Single Post Template

Some themes might have several other parts, depending on the complexity of the theme. The theme builder feature of Elementor allows you to create the parts above and we will create them on the website we are creating. In addition, we will also create a single post template and a popup.

— Header

We will use the header to place the site logo and the main menu. Before you start creating the header, you need to create a menu first. To do so, go to Appearances -> Menu. Click the create a new menu link to create a new menu.

Give your new menu a name and click the Create Menu button.

Add the items to your menu on the Add menu items section. You can add pages, posts, categories, or custom URLs to your menu. To add items to your menu, simply tick the items you want to add and click the Add to Menu button. Add the pages you have created above. Don’t forget to click the Save Menu button to save your new menu.

Once done creating the menu, go to Templates -> Theme Builder. On the Theme Builder screen, click the Header tab on the left panel and click the Add New button to create a new header.

Under the Blocks tab on the template library window, type “digital agency” on the search box to find the header of the Digital Agency template kit. Click the Insert button to open it in the Elementor editor.

Change the default site logo with your own site logo. To do so, click the Image widget to turn it into an editing mode. Upload your logo by clicking the image selector on the left panel.

Next, replace the default menu with the menu you have just created. To do so, click the Nav Menu widget to turn it into an editing mode. Select your menu from the dropdown menu on the Menu section on the left panel.

If you want to delete the phone number on the header, simply right-click and select Delete.

Click the PUBLISH button on the bottom side on the left panel to publish your header. You will be asked to set the display condition. Simply click the ADD CONDITION button to set the display condition.

By default, your header template will be applied to the entire website. If you want your header template to be applied to the entire website, you can simply click the SAVE & CLOSE button. Conversely, if you want your header to be applied to the specific page(s) or post(s), select the page(s) or post(s) from the dropdown menu before clicking the SAVE & CLOSE button

— Footer

Same as the header, you can go to Templates -> Theme Builder to create the footer. Go to the Footer tab on the left panel and click the Add New button to create a new footer.

Under the Blocks tab on the template library window, type “digital agency” on the search box to find the footer of the Digital Agency template kit. Click the Insert button to open it in the Elementor editor.

If you don’t find the footer template, scroll down your mouse to the bottom. The footer of the Digital Agency template kit consists of the site logo, email subscription form, and social media icons.

Replace the default site logo as you did on the header template above. Next, edit the URLs of social media icons. To do so, click the Icon List widget to turn it into an editing mode. Enter the URL of each social media platform on the left panel.

Click the Form widget to turn it into an editing mode and tailor the settings. Elementor support integration with several email marketing services, including Mailchimp, MailerLite, and GetResponse. You can read this post to learn more about how to integrate Elementor with an email marketing tool.

Click the PUBLISH button to publish your footer template and click the ADD CONDITION button to set the display condition. Same as the header, your footer template will also be applied to the entire site by default. To apply your footer template to the specific page(s) or post(s), select the page(s) or (posts) from the dropdown menu and click the SAVE & PUBLISH button.

— 404 Page

To create the 404 page, go to Templates -> Theme Builder. On the Theme Builder screen, go to the Error 404 tab on the left panel and click the Add New button.

Under the Blocks tab on the template library, type “digital agency” on the search box to find the 404 page of the Digital Agency template kit. Click the Insert button to open it in the Elementor editor.

Click the PUBLISH button and set the display condition. Make sure to select 404 Page and click the SAVE & PUBLISH button.

Single Post Template

Go to Templates -> Theme Builder to create the single post template. On the Theme Builder screen, go to the Single Post tab on the left panel and click the Add New button.

Under the Blocks tab on the template library window, type “digital agency” on the search box to find the single post template of the Digital Agency template kit. Click the Insert button to open in the Elementor editor.

Click the PUBLISH button and set the display condition. By default, this template will be applied to the entire website. This also means that every time you write a new blog post, the new blog post will be posted with this single post template. If, for a certain reason, you want to apply the single post template for a specific category, simply select the category from the dropdown menu before clicking the SAVE & CLOSE button.

— News Page

We will use the News page to display the latest blog posts on your website. You can use any name for this page if you want. “Blog”, for instance.

To create this page, go to Templates -> Theme Builder. Go to the Archive tab on the left panel and click the Add New button.

Under the Blocks tab, type “digital agency” on the search box to find the archive page of the Digital Agency template kit. Click the Insert button to open it in the Elementor editor.

Click the PUBLISH button and set the display condition. You can control the archive types that appear on this page by setting the display condition. For instance, if you want to display the posts archive only, you can set the display condition to Posts Archive. And click the SAVE & CLOSE button.

Popup

If you notice, each page template of the Digital Agency template kit has an envelope icon on the bottom-left corner. This icon is used to display the popup of the template kit. The popup itself is intended to collect the data of your potential clients. If you don’t need this popup, you can simply delete the envelope icon on each page template.

Conversely, if you want to use the popup, you can create the popup first. To do so, go to Templates -> Popups. Click the Add New button, give your popup a name and click the CREATE TEMPLATE button.

Under the Popups tab, type “digital agency” on the search box to find the popup template of the Digital Agency template kit. Click the Insert button to open it in the Elementor editor.

Click the PUBLISH button. On the appearing popup, click the NEXT button to set the trigger.

We will use the on-click trigger to display the popup so enable the On Click option and click SAVE & CLOSE.

Your popup is ready to use. Next, edit one of the pages you have created (the homepage, about page, contact page, services page or clients page) with Elementor and click the envelope icon to turn it into an editing mode. Click the wrench icon under the Link section and select the popup you have just created.

Update the page. Repeat the steps on other pages where you want to display the popup on.

Congratulations! You have just created your website.


The Bottom Line

Elementor is a great page builder to create a website with WordPress. While you can use it for free, there are many other advantages you will get by using the pro version. The pro version of Elementor comes with a theme builder that allows you to create a WordPress theme without coding, a popup builder to create popups without installing an extra plugin, and many other features. The pro version also gives you access to more widgets and templates.

We have written more detailed instructions on how to create the custom parts of a WordPress theme. You can visit the following articles to learn more.

If you are completely new to Elementor, you can read the beginner’s guide to Elementor we have written.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

4 thoughts on “How to Create a Website with Elementor (A Comprehensive Guide)”

  1. I’m trying to build a website for my condo community that includes a forum for owners to use and communicate with the COA association. I have built some websites from back in the 90s with a wysiwyg builder, but the new stuff with WordPress is so complicated by comparison it’s over my head.

    I started out trying to use Boldgrid Premium on Dreamhost. But it’s too slow, difficult and almost nobody that I can find is using it compared to Elementor and others.

    I tried to learn Kadence and Kadence Blocks to avoid getting locked into a builder like Elementor but I’m about to take a stab it it after giving up for now on Kadence Blocks.

    Your guide looks to be really well done and easy to follow. I’m going to try giving your guide a try and see how it goes.

    Reply
  2. Great Guide, Aliko, thanks. Clear, simple, well-written, and easy to follow. Not that I didn’t get thoroughly lost in the Popup section — I did — but I’m going to re-do that section tomorrow and hope for the best.

    Thanks for posting! Keep up the good work.

    Reply

Leave a Comment

Haven’t used Elementor Pro yet?