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.
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
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
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