How To Make A WordPress Website With The Elementor Page Builder

  • By Darrel Wilson
  • Last Updated: November 2, 2019

There is no doubt that there are a lot of page builder’s plugins for WordPress. A lot of them are drag and drop editors which you can get for free or pay for. These page builders help you get your site up and running with just the aid of the drag and drop mechanism. In fact using page builders, you do not have to know a single line of code to create and edit your web pages. While there are many of these page builder plugins in WordPress, one particular page builder stands out of the crowd and that is the Elementor page builder.

What is Elementor?

It is simply and easy, a unique and classy method of creating, editing and publishing the website on the WordPress platform. Like many other page builders, the Elementor is a drag and drop editor but the main difference is that it gives you a complete control over every area of your website. By using Elementor, you can carry out modification tasks like modifying layouts, design elements and even appearance of the entire page without even touching a line of code.

It is important to note that Elementor is compatible to almost every extension in the WordPress platform and this means that whether you are using premium or free WordPress theme, you can rest assured that it can always work with Elementor. Besides, it can also work with custom posts, special pages, landing pages and more.

Elementor has its own special widgets and with this, you can easily add content to any part of the page. In fact, all that is required is just dragging the required widget and dropping it at the desired place in the editor. In addition, you can also be rest assured that Elementor is compatible to third party widget should you want to use any other WordPress plugin.

Below is a youtube guide on how you can make a wordpress website with the elementor page builder

There are lots of things that can be done using Elementor. For example, it can be used in creating landing pages especially if you would like to increase your leads. It can be used to create sales pages aimed at promoting your products. It can also be used to create unique pages like attractive homepage layouts, stylish product pages, about us and portfolio pages. It is important to mention that Elementor has a live front end page builder and this makes changes to your page design to appear instantly on the editor.

There are so many features that can be found in Elementor and some of them are listed below

  • Elementor is full open sourced
  • Supports custom icons and Google fonts
  • It is optimized for search engines
  • Supports mobile editing for those who would like to adapt the page to mobile devices
  • Has own template library or allows you to import and export for use on another site
  • Gives you control over colors, borders and everything in between
  • Compatible with plugins for translations

Having seen the features, what advantage does Elementor offer? The following explains it in details

Much Faster

: When compared to other page builders whether free or paid, Elementor seems to have the highest speed of operation. Here, everything is just instant whether loading, editing or even drag and drop. It is just fast and this reduces your design time drastically

Very Unique

: Elementor helps you create pages you may not see anywhere else. It gives you a kind of unique touch that makes your web pages very attractive. Whether it is advanced buttons, animations, background overlays and others, Elementor gives you that unique design touch to create the right balance between a clean interface and design capability

Revision History

: Elementor is designed in such a way that makes you never to lose any of your page designs. It has a Revision History feature which makes it possible to have your new revisions saved anytime you click on the “Save” button. The implication is that it is possible to switch between versions at any time. In addition, you have the opportunity of reviewing each version visually since all the revisions can be visually seen.

Better Type of Maintenance Mode

: Here the built in “Maintenance Mode and Coming Soon” feature will allow your visitors to see the coming soon or under construction page when maintenance is going on. However, the good thing is that it will allow site administrators to have access to your site. To add to that, this wonderful feature is also designed to send the right HTTP responses to search engines. The benefit of this is that you can switch to maintenance mode and still keep your traffic intact.

Pre-Built Templates

: The good thing about Elementor is that you do not need to start from scratch because there are a lot of top quality pre-built templates. The pre-built templates are simply world class and many if not all have high aesthetics. Besides, you also have the choice of saving your own designs as templates and by doing so; you will also be getting access to its wonderful features.

No Shortcode Lock-in

: One of the strengths of Elementor is that you can still retain your contents even if you decide to leave it. It is important to state that some page builder will leave you some short code mess and ruining your old content in the process whenever you decide to leave them but this is not true for Elementor. With Elementor, your old contents are secured whenever you decide to deactivate it. There is a possibility of losing the styling but the bulk of your content will be secured in a regular WordPress editor. Therefore, after using Elementor for some time and decide to dump it for another page builder, your old contents will not be lost. This is a big advantage.


Installing Elementor

Elementor comes with a free or Pro version. However, what is most important is that the free version is equipped with more than enough features that help you design top notch landing pages and outstanding layouts. The Pro version comes with additional features which include WooCommerce plugins that allow for designing unique products pages and layout of shops for eCommerce websites. Besides, the pro version features blog, Masonry and Grid layouts which come in handy when designing post and portfolio layouts. Whatever the case, the upgrade is worth it even though the free version gives you more than enough you need for the basic start up.

Installing and using Elementor Page Builder is quite easy as you can see from the following steps below

Step 1: Get Web Host and Domain Name

You need to get a web host and a domain name. While the two things could get confusing for a newbie, note that a domain name is your site URL like www. which can be purchased at a domain registrar like GoDaddy. However, you need a web host to upload your web pages to the server which will allow your website to be seen on the internet. Hosting providers include, among others.

Step 2: Install WordPress

You can now install WordPress and you can do it by following the steps below

  • Go to and download the latest version of WordPress
  • Upload the files to your web server
  • Then create a database (MySQL) and a user for your WordPress
  • Configure your WordPress to link the created database
  • Complete installation and set up the new website

Step 3: Find the Right theme for your WordPress

After installation, your WordPress website normally uses the basic default theme that comes with WordPress I personally recommend wp-ocean theme. The wp-ocean theme is one of the best wordpress themes for the elementor page builder. However, you can choose your own theme to make it unique. You can decide to use free or paid themes. Whatever theme you choose, ensure it is mobile responsive, has good features and support.

Step 4: Add New Plugin

Click on “Add New “Button at the plugin page and in the search bar, type Elementor and the click the Install button. Once the installation is finished, you can then click the “Activate Plugin” button.

It is important to note that Elementor can be downloaded directly from You can use this option if you so desire

Step 5: Get Settings Right

Go to the Elementor settings to set how you want the structure to be. For example, you can decide to choose the type of post that will use Elementor or the type of user that would use it. You can also set the default font if there is the unavailability of the chosen font.

Step 6: Edit Page with Elementor

Once you have installed and activated Elementor as described above, you can then begin editing a new page. To do that, go to Pages, go to Add New and start editing with the “Edit with Elementor” button.

Step 7: Insert a Template

At this point, you are now into the full Elementor editor. Go to “Add Template” where you can choose from any of the free and paid templates. However, beginners are advised to go with a template that would help you to know how the pages are built.

Step 8: Make Template Full Width

To make any of the pages in element full width, you can do the following

  • Go the Section
  • Go to Layout
  • The switchStretch section to a Yes

Step 9: Follow the Structure of Elementor

It is important to understand the structure of Elementor. For example, every page in Elementor consist columns, sections, and widgets. What the sections do is to partition the pages in horizontal rows while the columns partition the section into vertical columns. The widgets are then dragged and dropped into the column

Step 10: Add Widget

Now add a new widget to a page. If you have a widget in the template you have inserted, you can delete them and replace them. To delete the widget, you can click on it and then click on the X icon on the side. Once you have deleted the widget, you can now search for another one from the left panel. When you find one, you can drag it into the area where you deleted the initial widget.

Step 11: Change Background Image

You can now change the background image ad to do that you have to click on the sections and the section setting is opened at the left panel. Then click on background image at the “Style” tab in the middle. At this point, you can now choose another image of your choice after which you can click on “Insert Media”

Step 12: Change Fonts

It is possible to change our fonts in Elementor. You can do that by going to the heading widget and clicking on it. When this is done, the heading settings on the left panel become open. Then go the “Style” tab in the middle and the n switch the “Topography” to ON. Go to “Family” and see all the various fonts available. When you find the of your choice, you can choose it.

Step 13: Make Page Mobile Responsive

You have to make your page look good on mobile devices to make it complete. However, you have to first see how your page is looking like on other devices. In order to do that, you have to click the “Responsive Mode” button. Note that the Responsive Mode button can be found on the footer of the page. When you have clicked on the button, you will now have to choose any of the different devices available to see how the pages are looking like on the devices.


There is no better page builder out there for WordPress users than Elementor. It is clear, easy, simple and the interface does not glitch. Besides, Elementor will not cause much bloat on your website like some other page builders. Elementor is the page builder of choice especially for those who do not have too much time on their hands and would like to quickly set up a website.

The pricing is very good for the pro version which costs $49, $99 and $199 for the personal, business and unlimited license respectively. However, for the free version, you have more than enough features to build a top notch website that will rival anyone built with other top tools. This has proved to be very useful especially for design agencies and freelancers.

Finally, Elementor is one of the most valuable WordPress plugins that you should try out as soon as possible.

5 thoughts on “How To Make A WordPress Website With The Elementor Page Builder

  1. This is beautiful Darrel. What I learnt from your tutorials are way better than what I paid thousands of dollars to learn at university. You are the saviour. ☺

  2. Your Elementor video tutorial has been an eye opener for me, thanks very much. How can i download the images you used in the tutorial.

    Festus from Nigeria

Leave a Reply

Hi, Sign Up For Freebies And Wordpress News!

Hi, Sign Up For Freebies And Wordpress News!

Join My Mailing List For Tips, News, And Discounts!

You have Successfully Subscribed!

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!