How to Create a Website with Elementor

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit

Since released in 2016, Elementor has blasted out to become the most popular page builder for WordPress. With Elementor, not only you can 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 elements 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. You can visit this page to see examples of web pages created using Elementor.

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

  • Theme Builder
  • Popup Builder
  • 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; The Homepage, About page, Contact page, Clients page, and Services 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 buy a domain and web hosting on different providers, we suggest you buy them from one provider. Most web hosting providers offer plans that include a domain and web hosting.

  • Elementor Pro

You need to use the pro version Elementor to create a custom header, custom footer and other elements we have mentioned earlier above. There are three plans offered by Elementor for the pro version. If you want to create a website for your own business, you can choose the PERSONAL plan which costs $49 per year.

Getting started

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. Most web hosting providers offer cPanel to allow you effortlessly install WordPress.

Install WordPress

To install WordPress via cPanel, login to cPanel and scroll down to the SOFTACULOUS APPS INSTALLER section and click the WordPress icon.

On the next page, click the Install Now button.

Select a domain you want to install WordPress on as well as the protocol. On the In Directory field, set it empty to install WordPress on the root directory so that your website can be accessed by typing “yourwebsite.com” instead of “yourwebsite.com/wp“. Also enter the name of your website as well as the description. You also need to create a user to login to the WordPress dashboard. Enter your preferred username on the Admin Username field and the password on the Admin Password field. Click the Install button on the bottom side to start installing WordPress.

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.

Set up 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 elements

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

  • Header
  • Footer
  • 404 Page
  • Single Post Template

Some themes might have several other elements, depending on the complexity of the theme. The theme builder feature of Elementor allows you to create the elements 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 page, go to the Header tab and click the Add New button to create a new header.

Give your header template a name and click the CREATE TEMPLATE button.

Under the Blocks tab on the template library, 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 and click the Add New button to create a new footer. Give your footer template a name and click the CREATE TEMPLATE button.

Under the Blocks tab on the template library, 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 page, go to the Single tab and click the Add New button. On the Select Post Type section, select 404 Page. Give your template a name and click the CREATE TEMPLATE 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 page, go to the Single tab and click the Add New button. On the Select Post Type section, select Post. Give your template a name and click the CREATE TEMPLATE button.

Under the Blocks tab on the template library, 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 and click the Add New button. Give your template a name and click the CREATE TEMPLATE 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 elements of a WordPress theme. You can visit the following articles to learn more.

Leave a Reply

Your email address will not be published. Required fields are marked *