At Raiola we love Elementor and, if you read us regularly, you will know that we have talked about it on other occasions. Today I take over from Pablo Moratinos, one of our authors and a great WordPress professional who wrote about this topic not long ago on the blog.
I think it is indisputable that Elementor has become over the years one of the best plugins to layout web pages in WordPress. It is clear that it is not the only one and that there are more alternatives although, in my opinion, this software is the easiest to use and the most complete, among other things.
In this article, I will touch on different points. Some of them are very basic, in case this is the first time you hear about this extension, and others are of a higher level so that you are up to date with what Elementor offers you.
In any case, whatever your case, it is important that you have a minimum knowledge of WordPress in order to deepen and understand this topic.
What is Elementor?
To know what Elementor is, I first have to clarify another concept: that of a web designer. And I don’t mean it as a profession but as software.
A web designer (also called “constructor” or “page builder”) is a tool that allows you to build a website quickly and easily (normally through a drag and drop system), improving the display of content and expanding the functionalities of the website. theme installed.
Let’s say that before these types of tools appeared, visual changes in WordPress were… more complex to make. Even in their early days they didn’t make it easy and added a lot of junk code to your websites.
Come on, it wasn’t a drag and drop. That is now. Also, to make it more exciting, they worked mostly with shortcodes. The parts of the design that you could not reproduce with the tools offered by the software had to be done “manually”.
In my opinion, one of the goals of installing a CMS is to streamline many of the time-consuming tasks that need to be performed on a custom-built website. The tool has to save you time.
If a professional designer or developer had to make new changes to a WordPress environment, it became “tedious”.
I am not going to tell you that web builders are the best solution for building pages because they are not. Like everything, they have their advantages and disadvantages, but they successfully meet several of their objectives:
- They optimize the process of building a web page.
- They give you greater flexibility.
- They allow other not-so-advanced users to make small changes without depending on a professional. That is, you do not have to know how to program to work with them. You can use them as “software no code”, although they allow you to add code.
And this I can assure you is true and that is exactly what this plugin does.
So what exactly is Elementor? Elementor is a visual web designer or “visual page builder” for WordPress. It is installed as a plugin or extension of the CMS and allows you to create the appearance of the pages, posts, or custom post types of your website in a very visual way with a drag and drop system and live.
When I say “live” I mean that you can see how your page layout is looking without having to press a “preview” button. In real. As you build it, you are visualizing it. You may find a small difference, but nothing serious.
It was created by Pojo. me and first appeared on the market in 2016. Does nothing, two newscasts.
It is developed under an open-source GPLv3 license. If you are a developer and want to extend the capabilities of this plugin, you can. The authors have a subdomain called Elementor Developers where you will find all the information you need on this topic.
It can be used by experts and not so experts. Although, in my opinion, you can achieve amazing things beyond what the theme builder allows you if you know CSS, HTML, and JavaScript. So the reality is that you will be able to create very professional websites with it.
It is free but also paid. It has a free version that offers you a couple of basic features. In any case, if you want to have access to the full power of the software and you are also a beginner, my advice is to purchase the pro version.
On the day I write this article, what each of these options offers is the following:
Elementor free version
The free version of Elementor can be downloaded from the WordPress repository itself. My personal recommendation is that, before you go to the pro version, try it calmly. If it’s your first time with him, calm down because you adopt right away. His learning curve is short.
When I teach my students about WordPress website layout with Elementor, the feedback about this software is very good. At first, it may be a bit difficult for them to adapt to the interface. Over the years it has grown a lot and has a thousand options, it is normal, and its environment cannot be minimalist. However, once they get past that little initial period, they love it!
That’s why I encourage you to install it and work with it. Here is a small list of what you will find in the free version of Elementor:
- The basic version of the drag and drop visual editor: It allows you to edit your website live by dragging and dropping widgets, that is, creating a website in real-time. But you cannot access certain features that allow you to fully customize your websites.
- Basic theme builder.
- It allows you to work from the interface the responsive design of the web.
- 5 website kits.
- Template library: If you are not very creative and want to optimize time, you will love this. I’m not a big fan of templates (anyone who knows me knows this well). I like to make my own designs. But I recognize that the Elementor template library is quite complete. In the free version, you have 30 basic templates available to use on your website.
- Of the 90 widgets available in the application, you will have access to the 30 most basic widgets: titles, sections, images…
- Third-party integrations: Only offers you Google Maps.
- Basic Role Control or Basic Profile Manager: Decide what type of WordPress user can have access to the editor.
- Available in several languages, among which is Spanish.
- Compatible with many themes.
Elementor PRO version
The Pro version of Elementor is ideal for beginners. Also for experts, obviously. But, as I said before if buying the plugin license is not an option at the moment, you will need to have knowledge of web development to get more out of it.
Now you will understand why I tell you. Let’s see what the premium version of Elementor brings:
- The full version of the drag and drop visual editor.
- Theme Builder with all its power
- Custom CSS.
- It allows you to work from the interface the responsive design of the web.
- More than 90 widgets (including the basic ones in the free version). If you consider that they are not enough, there are other plugins developed by third parties that complement Elementor.
- Template Library: More than 300 templates (which is not a small amount) was developed by professional designers
- Third-Party Integrations: Google Maps, reCAPTCHA, reCAPTCHA V3, Facebook SDK, MailChimp, Drip, Active Campaign, GetResponse, ConvertKit, Mailerlite, Adobe Fonts, and Font Awesome Pro.
- Available in several languages.
- Role control or profile manager: Exactly the same as the free version but with a little added functionality. In addition to limiting editor access for a WordPress user role, you can control whether you want to give them access to content only. This is great if there are different types of authors on your blog.
- Compatible with many themes.
Advantages and disadvantages of Elementor and other visual builders
I will be short and direct. That at a single glance it is clear to you if this software is the one you are looking for because it does not have to be ideal for your project… or yes:
I start with the disadvantages:
- They generate inefficient code: When you use a page builder to build a website, the software needs to translate your actions into code for the browser to display, to put it simply. So, all these software add many more lines of code than are really necessary. For this reason, it is not the same to program the appearance of your website as it is to use a constructor for it. I’ll prove it to you:
- Some work with shortcodes. No Elementor, but many others still use them. pain in the ass There is no other word to describe it. If you change the visual layout and it uses shortcodes, be prepared to locate all the areas on your website where it has left them. I can assure you that it does not delete them
- They slow down the site. This is improving over the years, but not long ago I worked with another page builder that was very easy to use, very nice, but that slowed down the web so much that it wasn’t worth it.
Now that we’ve taken a look at the bad, here’s the good. All the advantages that a page builder like Elementor brings you:
- The user doesn’t have to add a single line of code if they don’t want to. It can be used by both novice and expert users and this is a hoot.
- Easy to use. As I mentioned before, it may take a while to get used to it, but in general, they are systems that are prepared so that you can work with them almost from the beginning and without knowledge
- Flexible and extendable. If it doesn’t offer all the features you need but the builder is open source, don’t worry, many developers will create extensions to increase its functionality and give you the best possible experience. But beware: this happens (normally) with the most popular plugins.
- You save time and money. Even if you have to pay for a pro version of a page builder, it will never be as much as what a custom development can cost you.
- Integration with third-party tools. Mail marketing tools, web analytics, a library of icons, fonts…
Who can use Elementor?
The target audience for this plugin is very broad. Elementor is ideal for designers, programmers, marketers, advertising agencies, freelancers, or SMEs. Really, for anyone who wants to develop their project or business online and needs a web builder to create the look and feel of their site.
How to install Elementor and Elementor PRO on your website
Elementor is made up of two plugins: the free version and the premium version. The first is called “Elementor Website Builder” and you can find it both in the official WordPress repository and on its website.
You have to install it, yes or yes, to use the layout designer. This is because Elementor Pro actually works as an extension of the normal version. But I am not going to anticipate events. Let’s go step by step.
Elementor is one more WordPress plugin, so its installation process is exactly the same as for WooCommerce, Rank Math, or any other plugin:
- Go to the Plugins menu of the WordPress Dashboard.
- Click on “Add new”.
- Search for “Elementor Website Builder” and click on “Install Now”. eye! Note that the developer is Elementor.com.
- Activate the plugin in the “Installed Plugins” menu and voila!
There are different ways to install a plugin. If you want to know them all, I recommend that you read Álvaro Fontela’s article on 3 ways to install a WordPress plugin.
Ready! Now you can install the pro version. But not in the same way. This plugin cannot be downloaded from the official WordPress repository. When you purchase the license on the plugin page, you will be able to download a .zip file containing this new extension and you will need to install it on your website as follows:
- Go to the Plugins menu of the WordPress Dashboard.
- Click on “Add new”.
- At the top next to the “Add plugins” title, you will see a button called “Upload plugin”. Click there.
- Click on “Choose file” and click on “Install now”.
- Activate the plugin in the “Installed Plugins” menu.
It is important that you keep your user account logged into Elementor.com because when you activate the plugin it will ask you to activate the license. You will have to do a few more small actions, following the steps that they indicate, and voila! You now have your plugin installed and ready to start working with it.
The Elementor theme: Hello Elementor
Hello, Elementor is a free WordPress theme developed by Pojo. and my team. You can find it in the official WordPress repository or on the landing page of the theme .
The Hello Elementor child theme is available on the official Elementor Github (in case you don’t want to create it manually).
It is very minimalistic and, in my opinion, ideal for working with Elementor (unsurprisingly).
It is not an essential requirement to install Hello Elementor to work with the page builder. The plugin is compatible with most WordPress themes. I say “most” because not all of them follow the official CMS guidelines for their development.
If you are a programmer and you want to know if your theme will work with Elementor, follow the official guidelines that WordPress makes available to you or talk to the plugin team for special assistance.
Before using Hello Elementor, we at Raiola loved using this plugin with Generate Press . It is another great theme that offers many possibilities and that I personally recommend if you do not want to opt for the official theme of the plugin.
But what does Hello Elementor offer you? I will briefly summarize it for you:
- It is always up to date. Something very important both for compatibility and performance as well as for the security of your page.
- It is fast and light. It requires only 6KB of resources (at least, as of today) and makes hardly any queries to the server. But it’s normal, the theme is very minimalist, literally a blank canvas to work with the page builder.
- It is “good” for the SEO of your website. I say “good” because obviously installing it will not improve the SEO of your website, that depends on you working on it. But with what you have already seen in the previous points, together with good web optimization, you will not have problems with it as it happens with other WordPress themes.
At this point, it is clear that if you have WordPress hosting with us, Elementor PRO, and Hello Elementor… your project is off to a good start. I do not have doubts. Let’s keep going!
Elementor settings interface
When you first activate the Elementor page builder, you will see two new menus on the side of the WordPress dashboard: “Elementor” and “Templates”.
The normal thing (or what many users expect) is that all the plugin options are found within the same menu. And in this case, it is not.
“Templates” is a very generic word that can easily be associated with other settings of the CMS itself. I emphasize this because on more than one occasion a student has made a mess and has asked about it.
In this article, I do not want to delve into every point of plugin configuration. I will show you some options throughout the post but it is not my goal to make a complete tutorial on this part (we leave it for another day).
So now I am simply going to tell you briefly what you are going to find in each section so that you can see what it offers you:
- Elementor menu: This is where you make the plugin configuration settings: manage user profiles, activate maintenance mode, export, and import templates, add icons and fonts, add custom code, configure third-party tools… and not only that. You also have tutorials, system information, tools, and procedures related to your Elementor Pro license. Let’s say that, as soon as you install the plugin, the first thing you have to do is a small initial configuration in this section.
Menu templates: Here is what I like the most. Everything that has to do with the builder: the pop-ups, the theme builder, the kits, the categories, the landing pages… Just the fun.
Elementor theme builder or theme builder
After this short introduction to Elementor, it’s time to delve a little deeper into different details that I think are very good and that I’m sure you’ll be interested in.
I start with the theme builder or the theme builder. It’s just wonderful. At least in my opinion. The free version does not let you mess with anything, you need the Pro license of Elementor to be able to take advantage of this function 100%.
If you have knowledge about the structure of websites, you will quickly see the advantages that this model offers you.
The theme builder allows you to create “site parts” or blocks that group several sections separately and reuse them throughout the web. By block I mean: the footer, the single post, the list of blog articles… They are structures that are well defined in WordPress and have a common appearance throughout the web.
For you to visualize it I will give you an example. The header is a very important part of the structure of a website in any project. This is where the navigation menu for your page is located.
But many times you don’t have just one type of header. It is usual for most web pages to have:
- The main header.
- Some secondary header. An example would be a different header in the navigation menu or appearance for a promotional landing page.
With these two options, I already have the headers I need on my website to use throughout the site. I can assign the main header that is by default to each new page that I layout or change it for the other block that I already have ready in the theme builder.
If you now make a change in one of the two blocks, these changes will be reflected in all those pages that contain that header in their structure. You do not have to make changes page by page, as was the case years ago.
Naturally, this is a very simple usage example. You can apply this to any part of your web page:
- Header: Header
- Footer: footer
- Single Post: Blog Posts
- Single pages: Pages
- Archive: Blog listings, categories…
- Search Results: Search Page
- Error 404: Default error pages
As you can see, with this “new” tool, the layout of your websites becomes very flexible and you save a lot of time. Not “so long” ago that they incorporated the theme builder into Elementor and for me, it has been a before and after.
eye! In the theme builder you work with groupings of various sections. If what you want is to apply this same concept to individual sections (for example, a section of testimonials that is repeated throughout the site) it is built in another section of the plugin. I’ll show you now.
Elementor Templates
Another of the strong points and that of course had to be another important section of this article are the templates. If you go to the menu «Templates» > «Saved templates» you will find the following:
With the theme builder, we build blocks of sections common to all websites. For example, the block that gives the look to the blog articles. Within that template, there may be elements or sections that need to be laid out again in different areas of the web. For example, a blog subscription form with a specific design and colors.
That blog subscription form is going to be a “section” that works like a “mini template” or “mini-block”. It is a set of widgets that we will always layout the same. Why are we going to make the effort to prepare it 7 times every time we see it in the project’s web design. No. You create a small block for that section and every time you need it, you insert it as a template from the visual editor itself.
Just like you do with the subscription form, you can do it with whatever you want. Even export it from one project to another and reuse it on different websites. You optimize a lot of time and this is a hoot.
In addition to templates that you create from scratch, Elementor has its own library of templates and “mini-blocks” that you can use in your projects. For example, if you get stuck on the layout of the image carousel, take a look at the library and speed up the process. You can always change it later when inspiration strikes. That an uncreative afternoon does not become an impediment to your project.
What are Elementor widgets?
We have already seen several interesting things about the plugin, but now I am going to get into one of the most important things that this visual builder has: the widgets.
Widgets are Elementor’s way of calling different layout elements made up of different web components. As it is a bit of a mess, we are going to see an example so that it is better understood.
One of the widgets in the screenshot is the “Form” form. If you now enter your Elementor constructor and drag it to the canvas, you will see that the form is made up of: a text that works as a label, a field for the user to insert data, a submit button, etc.
That’s why I say that each widget is a set of several web components. The button is one component, and the field is another… So, in the end, the widget is just a “pre-modeled” grouping of those components.
In my opinion, the widgets in the free version of Elementor are not enough. If you push me, for many web builders on more than one occasion the ones in the pro version will not cover all your needs. Each project is a world and meet all needs is impossible.
For this reason, there are plugins developed by third parties that allow you to add more widgets to your Elementor installation. At the end of the article, I mention a couple of them.
Other Elementor Features
The truth is that this software gives to write a book. There are many functions to delve into that I will leave for another article. In any case, before closing this chapter I am going to briefly mention a couple more details that I find interesting.
- The revision history: Blessed revision history. You do not know how comfortable it is to be able to go back into this type of software with a click. If you mess up, don’t worry, you go back to a previous step with no problem.
- Addons for Elementor: There are many addons that extend the functionality of the plugin. Some that I have worked with are Woo Builder, WooCommerce Elementor Widgets by Powerpack, Ultimate Addons, Essential Addons, and All in one. Obviously, there are many more on the net that is worth trying.
- Pop-ups: Although I did not delve into them, the reality is that the pop-ups in Elementor are a fantasy. You can do anything with them and they are very very VERY customizable. In addition to laying out their appearance with the live editor, you can apply a series of rules to them so that they carry out specific actions on the web. For example, create a 700×700 popup that only appears for desktop devices once the user scrolls down the page. Also, it is only shown to you 1 time per session.
- Custom fonts and icons: You can use the library of icons and fonts provided by the plugin or create your own. That is, if you find a free font on dafont (or any other font website) you download it, load it in Elementor and that’s it! When you initialize the constructor, it will be available in the font selector and you can add it to any text on your website.
- Kit Library: Entire web page templates designed to be installed into your project with a single click.
