How To Use Elementor In WordPress: The Best Plugin Explained

A few months ago I was searching for something that would help me improve my website designs. It was only by chance that I stumbled on Elementor a simple plugin for WordPress that can truly make a difference in all your designs. Today I would like to explain how to use Elementor in WordPress, what it is and why it is one of the best plugins to use when it comes down to design.

Elementor is considered one of the best visual designers for WordPress users

It is quite obvious that more and more people, when they are launching a new website or blog are opting to use WordPress to create their web project and, as we all know, the longer it takes to create it, the longer you will have to wait to begin seeing any money coming in.

That’s when Elementor becomes a very precious tool.

What is Elementor?

The visual builder for WordPress

The arrival of Elementor, has, to a certain degree, revolutionized the world of WordPress and took it to the next level.

This plugin allows you to build your web page in a totally visual way.

Elementor is a plugin, and the good news is you can download for free directly from your WordPress back office dashboard; we can consider it the WordPress Visual Builder.

It allows you to build your site in real time, using the technique of dragging and dropping blocks or widgets along with a blank page.

Is the type of plugin that newbies and inexperienced users will love because it will allow you to create any type of page in a very short space of time, and you will be able to dedicate the rest of the time to write quality content that, in the end, is what is really important.

Why Elementor?

Elementor might not be the only plugin on WordPress that helps you create beautiful posts, and I am pretty sure there are many other more popular plugins out there, however, there are several differences that, at first glance, you have to take into account when you are going to choose one plugin over another.

Of course, when we choose a plugin, one of the things we are going to look at is the price. Nobody wants to pay for something when you have a free option available.

Well surprisingly, Elementor is a great plugin and is a free plugin when compared to the high cost of others well-known ones such as Visual Composer, Beaver Builder, Thrive Content Builder, to name a few.

But there are other differences that will make you love Elementor and those are as important as the free price.

Among the main features of Elementor, one that definitely needs to be highlighted is the fact that you can create in real time.

You do not need to wait and save in order to see the results of what you are doing, they appear instantly.

Other great features of the plugin are:

  • Free code: It is the first visual builder with open source that allows you to modify your source code and adapt it to your needs.
  • Compatibility with a large variety of templates: You do not need to buy and install your own templates as is the case with other visual builders. You can create your own templates, save them and reuse them as many times as you want
  • Export / Import templates: You can use the templates you saved in different projects exporting and importing them.
  • It is fully customizable with a multitude of widgets that you can configure and distribute on the page.

How does Elementor work?

To explain how to operate the plugin I have prepared a little step by step guide and I hope I can make it easier for you to understand.

1.- Plugin installation

The first step, you will have to perform is to download the plugin, install and activate it.

Elementor can be found for free in the WordPress back office section. On your dashboard on the left side under the plugin section where you will have to click on add new

Dashboard –> Plugins
Add new

 

I have to mention that Elementor has two versions, one is a FREE version, which is what I am currently using with my sites and is the one I will explain in this blog and the other is an extended version, which has a specific cost and which, in addition to support, comes with additional options.

2.- Make your theme compatible with Elementor

Although, as I mentioned earlier, Elementor is compatible with most current themes and is even fully compatible with Genesis, it is essential that the theme you are using brings defined one or more full-width templates, because if not, the plugin will not work well. With my theme, in both of my websites, I never had any problems installing or using the plugin.

To solve this step is very simple and can be done in different ways:

  • Download the modified version of the TwentySexteen template developed by the creators of Elementor.
  • Install another plugin, called Page Templater For Elementor that will be responsible for adding two additional page templates to your current theme.

How to add additional features to Elementor

The free version of this plugin brings several widgets that you can use without a problem, although in some cases you will need to insert widgets that are only available in the premium version.

However, one of the advantages of being an open source plugin is that it allows other developers to create add-ons for this plugin.

For example, you can download other plugins to work with your Elementor webpage such as:

Contact Form7 a Widget For Elementor Page Builder that will help you to insert contact forms.

Elementor Addon Elements will incorporate new widgets such as animated text, separators, list of articles, boxes that flip … etc

Tables For Elementor Very useful to create, for example, price tables.

Addon Widgets For Elementor Add several widgets with WooCommerce options

How to Create a page with Elementor

Once you have downloaded and installed and activated your Elementor on your website, you are ready to create a page.

To do this you will have to go back to your dashboard and under pages click on > Add New

Once the new page draft opens up you will see that you have activated a new button that says “Edit with Elementor”.

 

Before clicking on this button it is very important that in the sidebar you go to the box of page attributes and in the drop-down, change the type of template and choose one that is “Full width”.

If you have skipped this step, Elementor will not work, so you must go back, select the type of page, save and re-edit (in this order).

The basic structure of Elementor

The first screen that you will see when entering Elementor, will be similar to the one you have here.

On the left-hand side, you find a list of widget that you can add to your page just by simply dragging them and dropping them in the centre of the page creating exactly what you want.

Blocks and Columns

The blocks are the basic part of the design with Elementor. You can insert as many blocks as you want inside your page and within each block, you can insert as many widgets as you want.

Clicking on +sign in the middle of your page you will be asked to choose a structure, where different designs with several columns distributed in the block will appear.

 

Once the structure is chosen, you are ready to drag and drop the widgets from the left menu into each column and configure them exacñty the way you want to.

How to Configure Elementor

Once you have Elementor open and you are in the edit section of your page, you can click on the icon that appears above the left, consisting of three lines, and you will access the configuration menu.

From this menu, you can configure different parameters such as:

The Fonts that will be used in the headers of your design or body text, regardless of what your theme has chosen for fonts

The Colors that will be applied by default in the elements that you include in your design, independently of the ones that your theme uses.

From the dashboard Settings of Elementor you will access the settings section of the WordPress Desktop, from where you can, for example, choose what type of entries you want to have available the layout, user roles that you do not want to have access to it , consult your template library, import others, synchronize existing templates, etc ..

Is it easy to learn Elementor?

If I am completely honest, you might have to play around a little bit before you become fully comfortable with the plugin. It took me some time to find my way around it and it was a lot of trials an error too, but definitely worth the effort, if you want to design something really unique, special, flexible and perfect just for your site.

When to use Elementor?

The best use of Elementor will be to create pages like a landing page or home page, contact page, About you pages…

You can use it for posts as well, but until you become really confident with the surface it might be more of a headache than an enjoying experience.

One of the greatest aspects of this plugin is the fact that if you ever decide to uninstall it or change your mind and want to have something else, the installing or uninstalling of the plugin will not affect in any way the rest of your site.

Most visual builders, in addition to consuming many more resources, what they do, is insert certain shortcodes that the builder has to “read” to know which block it has to show and with what aspect.

Elementor does not work in this way, so in addition to reducing the load time, it will not make you have to manually check the source code the day you uninstall the plugin or change the theme to manually delete those codes

==>OTHER GREAT TIPS AND ARTICLES HERE<==

What do I think?

Elementor is a great solution for all users who start in the WordPress world and who (like myself) do not have any programming or coding knowledge.

Elementor is a free plugin designed to drag and drop blocks of content and create a page in a matter of minutes, with a multitude of customization options.

Whether you were looking for a visual layout or you are already used to using these types of plugins, I would definitely recommend you to download Elementor and try it for free and, of course, let me know how you get in the comments section below

9 Comments

  1. Very nice content you have up here, I must confess. Elementor plugin seems to be a very great opportunity for any newbie blogger hosting on WordPress. Seriously, I just couldn’t stop myself from expressing my amazement at how great this plug in is while reading through your post. The pros are just too weighty and excellent coupled with the fact that its totally free. What more can I say? Its perfect. Thanks for sharing

  2. I am so thankful to see this explanation of Elementor. I currently have the plugin installed and active but never use it. My first question is, Is it compatible with the WordPress Classic edition or is it designed for Gutenberg. I write all of my content with Site Content, Publish and then edit it with WordPress. 

    If I remember correctly I installed an Elementor Theme a while back and was suggested I installed the plugin at that time. Since then I changed the theme. And have been wondering about Elementor since then, but was afraid to experiment. 

    Reading through the post everything seems laid out in order. Would you recommend that I practice with this on my practice website with WordPress? 

    I have saved your post to my How to’s bookmark. 

    Sonny

    1. Hi Sonny   to use Elementor tou need to write directly from the wordpress area and write using Elementor. To write from site content and then publish and edit on wordpress I find it a bit more difficult because your entire post comes as a single unit. Still practice before I think it’s a great idea until you get more comfortable with the interface 

  3. This is really a helpful article.

    when I created my website, the theme I installed at the time came with some extra features and Elementor was one of them.

    Then I have read a lot about using page builders and how they make things easier and better, so I went to work trying out Elemetor, but to my frustration, the more I tried to master this page builder, the more difficult it was.

    I tried to find articles that can help me to understand how to use it, but nothing ever clicked and so I gave up.

    You article has helped me put things into perspective, and I am so glad I found to it.

    I am just going to take my time and walk through it again while trying it out on my site.

    Hopefully, this time I will be able to master its use.

    Cheers..

    1. I am glad I could be of help if you need anything else, let me know

  4. I am so glad I stumbled upon your tutorial on how to use the Elementor Plugin for WordPress as I’ve just become familiar with this resource and like you, I have found that it takes a while to get to know your way around the program.
    Thank you for pointing out the important tips like installing another theme to obtain the templates, that is a great help to me and now perhaps the plugin will work better for me.
    Best I go and try it out now!  I’m off to see how it works!

  5. I had seen Elementor on my WordPress dashboard but never explored what it was.Thank you for your very detailed explanation of what Elementor is and how it should be used.I will definitely try it and see how it could help me.Like you suggest I will try to use it for designing a Landing Page.I am happy to see that you can add other plugins to expand Elementor such as ContactForm7 .I am concerned about your reference to modifying manually the source code. I do not know coding, will this be a problem? Also I am used to writing within Site Content ,publishing and then adding images in WordPress dashboard.Since you do not recommend Elementor for writing posts, until we are truly familiar with this plugin, I will just use Elementor for individual landing pages. Finally,would I only be limited to the images available within Elementor or could I import images or logo that I have designed in canva?

    1. Hi Carlos, first of all, Elementor does not affect your Code Source, this is the beauty of it. Maybe I did not explain myself well enough or you misunderstood. I am Italian so I know my English sometimes it is not the best. But do not worry, there is nothing to do or touch on your source code, I would not know where to start myself. Secondly, yes you can import your own images and logos without any problem.

      I hope this help, take care and if you need anything else don’t hesitate to send me a PM

  6. Hi, I have read your article very carefully. Thank you for writing this educative and informative post. Elementor plugin seems to be a very great opportunity for any newbie blogger hosting on WordPress. even though I think it might take me some time to understand it and work it out. I might follow your advice and practice a bit first before trying anything official

Leave a Reply

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