Just a few months ago I was talking to you about Thrive Content Builder, a web builder (or visual editor, call it whatever you want) that during the last year had revolutionized the way of layout content of pages and posts in WordPress with its drag & drop style (drag and drop). release).
At that time, I was talking about him as the most complete visual web editor. And if I told you it was because I really considered it that way when I wrote the entry.
But… now something has happened. Something that has made my opinion as a web designer has taken a 180º turn.
During the last few days, I have known a new tool of the same type called Elementor Page Builder, which is barely 5 months old and it seems that it is clearly aimed at unseating Thrive Content Builder from its current throne.
This I dare say after having tested it for just a couple of days doing tests with it.
You may wonder ... how soon has it convinced you and does it seem so wonderful that you only needed to try it for a couple of days to “cheat” on Thrive Content Builder?
My resounding answer, at the risk of you telling me that I am easy infidelity, is a YES as big as the Cathedral of Toledo.
Look how this will be, I have even skipped my editorial calendar to the bullfighting and I have started writing like a madman excited about it.
Do you want to know why with arguments and examples?
Well, do not miss this review about Elementor Page Builder that I have prepared for you in which, not only do I show you everything you can do with this new visual editor, but I am also going to make a comparison with Thrive Content Builder so that you can see all the points where I consider that it has a considerable advantage.
First ... What is Elementor Page Builder?
Well, I could wrap myself up a lot by telling you what Elementor is, but I better tell you in a very short video with which you will understand why it is one of the most powerful tools today to design your website in a unique and personalized way.
Elementor Page Builder main features
The first thing that I'm going to show you is a series of very general identity signs of Elementor that already speak very well of it at first glance and that denote that, probably, we are facing the best plugin of this 2016 that has been developed for WordPress.
Elementor Page Builder is faster
As soon as I install it, this is the first point in which I have noticed that Elementor stands out notably over other visual editors that I have tried.
Truly, the plugin loads very fast when we put it into action. But it is not only fast when charging, but also when using it.
While you are using it, its operation is extremely smooth. It does not get "caught" and does not really give bugs or problems of any kind. It really is a real-time visual editor. I'd say in real record time. 😉
Elementor is open source
In case you don't know what it is, something that is open source means that its source code is available to everyone so that any developer can create and implement their own improvements if they consider it necessary.
=For example, WordPress is an open-source CMS, and thanks to this, there are so many plugins and themes created for it by a large number of developers.
As a result of this example that I give you, surely you understand why the fact that Elementor Page Builder is an open-source visual editor seems such a remarkable point.
That they have done so directly implies that it is more likely that more and better updates will come out in the future (apart from more frequent) since any developer who starts to study how the editor is made will be able to program their own contributions to the tool and solve a list of more varied concrete problems.
Possibility of designing by touching as little code as possible
Another of the main characteristics that the creators of Elementor themselves highlight is that they have created this web builder always keeping the designer in mind.
This is that, unlike other editors of this style, its objective is that great designs can be created in the fastest, most professional and effective way possible without having to touch code or CSS.
To this end, they have implemented design elements that were not included in any other web builder to date.
I have already warned you in advance that they have achieved it with a note. But I don't want to anticipate too much on this topic, since I want to tell you about it a little later in more detail when I talk about everything you can create and include in your designs with Elementor Page Builder.
In any case, if you don't believe me or you think I'm exaggerating, take a look at how one of its developers creates a Landing Page in just over 10 minutes totally from scratch.
By the way, this does not mean that Elementor takes over the fact that you can make customizations with your own CSS or HTML code. Its developers have also thought about this and, therefore, it does not lag behind other visual editors in this regard either. 😉
Easy to use
None of this that I have told you before would make sense if later the tool were very complicated to use.
But this is not the case. In fact, I would dare to say that it is the simplest of its kind that I have used so far.
With Elementor you can control a huge amount of CSS parameters to give styles to any element that you introduce in your blog or your website only using fields to fill, sliders or elements selectable with a mouse click.
Come on, nothing that any user with a basic level of computing does not know how to do.
It can be said that, in this sense, they have also improved what they already had and have placed themselves at the top of the ranking. 😀
A little later, I will show you how to use Elementor Page Builder and everything related to this ease of use and its interface. You are going to see for your own eyes that what I am telling you is not mucus of turkey.
Designing a website for mobile devices has never been so easy
This feature, without a doubt, is one of the ones that have caught my attention the most and one of the great differences from Thrive Content Builder or other visual editors.
With Elementor Page Builder you can finally control the media queries (that is, the CSS code that makes the layout change depending on the screen size of the device) in a totally visual way.
As you will see later when I show you one by one the elements of the editor, by clicking on each of the responsive icons (desktop, tablet or mobile), you can establish from the frontend through its customization options CSS styles for each of the visualizations simply using sliders or filling in data in the fields prepared for it.
Really, one pass. When I have seen it, I have remained ojiplático. 😲
Elementor Page Builder is free… and it will continue to be
Ah, I haven't told you about this little detail yet?
Well yes, Elementor Page Builder is not going to cost you a penny. It is totally free.
You may wonder ... how can something so good be free? Is it going to continue to be so in the future or is it just a marketing strategy to attract customers?
Well, I tell you no, it is not a marketing strategy.
On their website, the Elementor developers make it clear that they have not released Elementor for free as a hook or trick, but to create a worthy competitor among DIY visual editors whose use is as widespread as possible.
In fact, they also assure that, despite the fact that they plan to release a premium version called Elementor Pro on December 12 (whose functionalities will be more focused on engagement, promotion or website conversions), they do not plan to remove with it not a single functionality to the free version.
What's more, not only does it not plan to do this, but its intention is to continue providing new functionalities in the free version that are not implemented now.
For example, they already have in mind a couple of new elements that they are going to include soon called "Person" and "Countdown" as well as a revision history so that you can go back to a previous state while you are designing your pages in case you make a mistake.
Elementor is translated into many languages. Spanish included
Well yes, as you hear it.
By default, as soon as you install Elementor, the entire tool is translated into perfect Spanish without having to install any translation files or the like.
Surely it is not the most important characteristic (or maybe for some it is), but what do you want me to tell you ... nobody is bitter about a sweet. And if they also make my life easier by putting the web builder in my language, I sincerely appreciate it a lot.
It is perfectly compatible with GeneratePress
If you follow the blog, you already know that for some time I have been doing all my designs under the GeneratePress theme/framework.
Well, another cool Elementor-related piece of news is… it's 100% compatible with this template!
And I'm not saying it. It is said by Tom Usborne, the creator of GeneratePress himself, in his own WordPress theme forum recommends Elementor as the visual editor to use together with the creation of it.
What's more, Elementor developers also recommend GeneratePress as one of the best templates you can use with their web builder.
From my point of view, this is a real hoot in favour of Elementor Page Builder with respect to Thrive, Content Builder, since with the Thrive Themes company builder if it is true that there were certain things that were not completely compatible and you looked forced to use one tool or another to make your pages (tricks like using Thrive Leads in full-width sections apart).
Has the approval of virtually everyone who has tried it
As I mentioned before, Elementor Page Builder is still very young. It was released on the market on June 2, 2016. That means that it is barely 5 months old at the time I am writing these lines.
However, in such a short time, the usage and valuation data that have been obtained by all the users who use WordPress are simply spectacular.
Currently, and with this little time of life that I was telling you, Elementor is already being used in more than 20,000 WordPress installations and the average evaluation of all those who use it is 4.9 out of a total score of 5 (you can see this data in the WordPress plugin repository).
I have not looked at how many plugins that have this number of users have that rating. But I daresay very, very, very few. And if anyone else has it, I don't think it has been as long on the market as Elementor.
The fact that users themselves value it so highly and are trusting it so soon is already a clear sign that we are probably facing the king of WordPress visual editors for the next few months or years.
High-quality code optimized for SEO
The last of the main features that Elementor has is not exactly the least relevant.
The guys at Elementor Page Builder have also developed this plugin with SEO and SEO in mind, creating a clean code that meets the main standards recommended by major search engines like Google.
For example, with Elementor, the use of "inline" styles is avoided, something quite detrimental to loading times, which other visual editors do resort to.
Obviously, this does not mean that by installing Elementor you will be the first in the searches that interest you (for that you must work both your SEO on-page and your SEO off-page), but it does mean that its code helps not to violate basic rules that you penalize.
Review and tutorial on Elementor Page Builder
Well, I have already told you about the general features that Elementor Page Builder has and I am sure that, at the very least, they will have powerfully attracted your attention, am I right?
Well, now I'm going to get into the guts of this web builder with you so that you can see absolutely everything you can do with it.
Get ready to receive a direct crush on the technological Cupid (okay, I just made up this term. But surely there is it somewhere ... 😛) like the one I have suffered.
As I did with GeneratePress or Thrive, Content Builder, I am going to leave you all my impressions both in text format and in the following sections (all of them include their corresponding explanatory video) in which I am going to tell you about everything that can be done with Elementor Page Builder. Choose the option that is most comfortable for you. 😉
Let's get into trouble.
How to use Elementor in WordPress
To begin, we are going to take a look at the initial interface that appears as soon as we open the editor.
If you want, you can give a general review of the Elementor interface to see its interface and all its possibilities in the following video. You will see for yourself that learning how to use Elementor is not complicated at all.
By default, the first thing that appears is all the design tools that Elementor Page Builder makes available to us, which are divided into basic tools and general tools.
We are going to review these tools one by one in the next sections of this article.
Before that, just clarify that you can always access this tool panel by clicking on the icon in the upper-right part of the Elementor control panel (I mark it in the following image with a blue square to make it clearer).
How to design your Web with Elementor: Basic tools [Free]
Next, we are going to start by knowing the free basic tools that Elementor Page Builder puts at our disposal. In the following video you will learn about each of them and their options:
Tools included in Elementor Page Builder
Sections
The first of the tools that we find precisely is not within the Elementor sidebar panel but is one of the two buttons that appear on the design page.
I'm talking about the "Add new section" option.
With it, Elementor is already covering one of the great deficiencies that Thrive Content Builder has not fixed during all this time in its editor, which is to be able to create full-width sections. 🙂
This can be done by selecting the “clean” structure for the section (with a single column) by checking the “Stretch Section” option or by selecting “Fullwidth” in the “Content width” option found within the “Layout” section that configures that section.
In addition, you can not only include a normal static image as the background of your section ... but you also have the possibility of using a video!
Not only that, we can also create sections with up to 12 predefined structures that are very varied as you can see in this image.
Structures for sections in Elementor Page Builder
This starts out great, right? Well, we continue ...
Columns
The column generator is one of the most basic and useful tools when making any design.
As soon as we include a column element in our design, here we already see an important novelty with respect to Thrive Content Builder: we can include any number of columns we want in the same row with any width ratio for each of them.
Not only that, we can adapt the size of the columns only by positioning ourselves between two of them and reducing or enlarging them by clicking and dragging the mouse on our PC.
Columns in Elementor Page Builder
This simply gives you a range of possibilities in terms of the almost total design.
It is true that in Thrive Content Builder you can also make columns. But they can only be done according to the settings preset by the tool. For example, the maximum per row is 4 columns of ¼ proportion each with respect to the width.
But this with Elementor does not happen.
I can have the number of columns I want and they don't have to respect certain proportions. I can do if I like a column of 10% of the screen, another of 20% and another of 70% (for example).
You can imagine that this simply causes is that the tool does not limit your creativity at the time of design.
Header
The title I think is quite descriptive, right?
This tool will be in charge of including the relevant page headers in your designs, being able to modify both its corresponding HTML tag (h1, h2, h3, etc.) and the characteristics of its design.
You can also link the titles to any page that interests you, indicate the margins and padding that you like, set images or background colours, give certain CSS classes, put borders around the title with the width or shape (border-radius ) that you want for it, set its responsive options in case you want to hide them on desktop, mobile or tablets ...
To say that most of these options are also found in any of the elements that we are going to see, so once again the limits of what you are going to create will only be set by your creativity and imagination.
Isn't it a joy to be able to do all this from a visual tool? Don't tell me no, you're already drooling with Elementor Page Builder just like me ... 😛
Image
With it you will be able to include images in the places that you want, being able to also establish a multitude of options such as their size, alignment, opacity, animations when moving the mouse, border, legend, margins, backgrounds etc.
Total and absolute control are also in the multimedia part. 😀
Text editor
It allows you to enter simple texts in any part of your design, being able to control all its editing and viewing options from a mini editor similar to the one in WordPress that appears on the side.
This seems to be another point to highlight since those who are used to the native WordPress editor will be able to continue using it easily within the tool to create their texts, which in this sense makes their life easier by not having to learn anything new.
With Thrive Content Builder it could also be done, but you had to include a specific element of the type "WordPress Content" to use it.
In addition to all this, you can choose the position of the content at your will within the columns or sections where you have created it, granting total flexibility when it comes to the layout of your texts that allows you to put them practically where you want at will.
Video
It facilitates the inclusion of responsive videos within the design of your blog or your website that is uploaded on YouTube or Vimeo.
This option is quite similar to Thrive, Content Builder, since it includes the possibility of auto-playing the video, showing or hiding the playback control, the suggested videos or the title and action of the player.
However, Elementor also includes the possibility that you can choose the proportion of your video (16: 9, 4: 3 or 3: 2), establish a custom cover image that you are interested in showing before the user clicks the "Play" button to play the video, input animations, set backgrounds or control in which devices you want the visualization of said video to be loaded.
Again they have "curled the curl" in this regard, pulling out of the sleeve several new functionalities where there was none. Bravo!
Button
Of course, you couldn't miss the fact that you could create buttons with Elementor Page Builder.
Here you have up to 5 types of default buttons to implement. But actually ... these guys are the least of it.
And it is that Elementor gives you so many possibilities in this sense too that it can be said that you can create the type of button that you like thanks to its customizations.
They have also improved Thrive Content Builder in this regard, offering a wide variety of icons for buttons that can be positioned before or after the text and also at the distance you want.
Not to mention that, as with other elements, you can also choose coloured or image backgrounds and borders of different styles to give it the greatest possible customization. The same is true if you want to implement super cool animations for your buttons.
Another 20 out of 10 in this regard for Elementor Page Builder. Let's keep going…
Separator
The separator element includes lines that can separate different sections or, for example, the titles of the content.
Once again, the guys at Elementor improve something that I really missed in Thrive Content Builder: the possibility of being able to control all the design aspects of these separators.
I'm talking mainly about its width and its colour, something that since I was using Thrive Content Builder I did not understand how they had not been able to include as configuration options for this type of web element.
Obi, obá, everything I see about you I like Elementor more. 😀 We continue!
Spacer
This is an element that may seem silly at first glance ... but it will take away a lot of headaches.
By including it, what you can generate is blank spaces of the size that you decide to separate other elements of the design.
Yes, this can be done by setting margins, I know. But with this tool, you have another option from my point of view that is much simpler and more intuitive for less expert users. 😉
Google maps
Another important novelty of Elementor with respect to Thrive, Content Builder, is that you can directly include Google Maps maps in your designs by easily establishing their address or coordinates, their size, the zoom level of said map or prevent said zoom from being enlarged at will. of the visitor of your blog or your website.
Yes, I know that Thrive Content Builder already included this possibility in its visual editor… but it only did so by allowing you to paste the code. Elementor, once again, has improved this by making it much more intuitive and easy to do. It is no longer necessary for you to know what "numbers" to change in the code that Google Maps gives you to leave your map as you wish.
As you know, seeing these maps in the “Contact” sections of companies or businesses is usually very common for visitors to find their physical headquarters, so the fact that they make your life easier to include something so common is greatly appreciated. . 🙂
Icon
You can also include Font Awesome icons anywhere in the design you want.
Yes, this is something you could also do with Thrive Content Builder. Wow….
Once again, Elementor gives many more possibilities as far as design is concerned, being able to set a square or circle background for the icon, determine how big you want its fill to be, set primary and secondary colours for this combination, or if you want with a click to exchange these established colours.
You can even rotate them so that they are not always fully upright. One last. Details like these denote a lot of interest in making the best web builder on the market. 🙂
Come on, Elementor Page Builder does not stop leaving both you and me with our mouths open to every little thing we see of him, right? 😀
Picture box
This tool is a convenient and simple way to include an image that has a title and a description of it directly below.
Naturally, as with everything in Elementor, you can control all the parameters regarding sizes, colours, backgrounds, title tags, margins, etc., both for the image itself and for the header or text.
How to layout with Elementor: General Elementor Tools [Free]
We go to the next level. Specifically, we are going to talk about how to design your website with Elementor through the general tools of the plugin (or as I like to call them, basic combined).
All these general tools also belong to the free version of Elementor Page Builder, so it won't cost you a single euro to use them either.
Icon box
Similar to the previous “Image Box” tool, but this time the image is changed to a Font Awesome icon at the top.
It is a very useful feature, for example, to create those highlight boxes that are so commonly found on the home pages of websites.
Icon boxes in Elementor Page Builder
Image gallery
For me, another highlight in the news that Elementor includes compared to other web builders.
In a super simple way, you can include image galleries in your design by selecting the ones you want to appear in it, size, number of gallery columns, borders, backgrounds, etc.
The only thing I miss here is the fact that you could create the gallery of images with different formats (more ordered or messier of the grid type, for example) or classify the gallery of images in different subcategories.
Doing the latter would be a hoot to create, for example, portfolios that by clicking on a link you could see only the images of a certain category of the said portfolio.
But come on, seeing everything Elementor has done in such a short time ... I do not rule out that they end up implementing it. 😉
Image Carrousel
Similar to the image gallery, but this tool is more focused on creating the famous sliders that we see so much on many websites (and that I like so little, by the way, 😛).
I have to say that here the guys from Elementor seem to have taken more care since you can decide not only the slides to show, but also set or configure their navigation elements practically at will.
In the same way, you have the possibility to indicate how you want the automation of your slider to work: if its playback will be paused when you put the mouse on it, if it will auto-reproduce, how many seconds each image will be on the screen, how long each effect will last. image-to-image transition, in which direction the images will be scrolled etc.
I don't take off my hat because I threw it out the window a long time ago. If not, I would take it off a thousand times before the cracks that have developed this visual editor. 🙂
Anyway, let's continue that we still have a while ...
Icon List
Or what is the same: lists whose bullets are icons.
Here too the customization options are much greater than in Thrive Content Builder since in it we barely found 6 different styles of list configurable from the editor and with only 8 default colours to be set in them.
On the other hand, in Elementor you have all the Font Awesome icons to design your custom lists, being able to set any colour that is within the hexadecimal code.
As if this were not enough, the degree of customization is even greater if we consider that you can set an icon for each item in the list, not necessarily having to be all the icons in the same list the same.
I speak again from the point of view of the designers when I tell you from my heart that I love you very much, guys at Elementor. 😀
Accountant
Another novelty included by Elementor compared to other web builders is this counter tool with which we can create those animations with which data is represented in many blogs or websites.
The configuration options for this element are once again sensational, being able to set the text that will appear below the counter, the start and end number, prefix or suffix of the number and duration of the animation in its process of reaching the number. maximum to count.
Progress bar
Another very interesting element added by this visual editor is this of the progress bars.
Surely you have seen them on more than one occasion: they are those bars that are filled with a percentage, widely used, for example, to graphically show the degree of skills or knowledge of a freelancer or a company in a certain subject.
Elementor also allows you to configure everything related to these bars from its editor: percentage to be set, colours, text that will appear inside or if you want to set a title for a said bar outside of it.
Recommendation
The name of this element is not very descriptive in reality, since it refers to implementing testimonials from people and clients about your brand or services.
Personally, here I do think Elementor has given fewer default options than Thrive Content Builder so that it takes less effort to design some cool customer testimonials.
But it must also be said that by combining this with other elements or with this tool's own design options (backgrounds, borders, margins, etc.) you can do practically anything you can think of in this regard. So I don't see something that serious either. 😉
Tabs
On this occasion, I do think that there is no need to explain much more: this tool makes it easier for you to create content divided into different tabs in a comfortable and easy way.
You can add as many as you like and, as with most elements, you have the possibility of configuring their design at will in terms of colours, fonts, spacing, etc.
Accordion
An element very similar to the tabs, but with the difference that on this occasion all the texts included in each of the parts are hidden and the structure of all of them is formed vertically.
For you to see it better, it is exactly how I have made the "Frequently Asked Questions" section on the page of my web design service in WordPress Base Emprendedora.
It has design and configuration settings similar to the tabs to leave everything to your liking, so I am not going to repeat myself more in the sense that I have enough words at this point to get you "filling". 😛
Alternate
Another different type of element is "Accordion".
The only difference I see in this regard is that the icon that appears to the left of each of the boxes that make it up is an arrow instead of a plus symbol (+).
Social icons
It allows the inclusion of social media icons in any part of your design, which can be used to link them from your website.
It must be said that it includes up to 27 different social network icons, so it is very rare that you cannot link the ones you use, even if they are some less common such as SoundCloud or GitHub. 😀
For each of them, you can set whether you want the icon to appear square, with rounded or circular edges, as well as choose between the official colour of each of the social networks in question or customize the colours of these icons to your liking. taste (or rather, in line with your design).