A couple of years ago, if you weren’t a developer you were limited in terms of ways to customize your site by the functionalities of the current WordPress theme you’re using. If you wanted some sort of update, you had to send an email with a suggestion for a feature to the theme developer and then hope that he’s going to like what you’re saying and hopefully implement that functionality. Most of the times this never worked.
At that time, page builder sucked. They were even more limited in terms of functionalities. They slowed down your site and it was nearly impossible to understand how they work. During these times the web was full of slow, ugly sites. The only possible way to have something good looking was to pay thousands of dollars to a guy. Times were hard.
Something happened though…
In 2016, the guys from Pojo Themes released a page builder that changed how sites are designed and how people create web pages. This revolutionary page builder is called Elementor Page Builder:
I’ve been using WordPress for several years now and I was about to cry from happiness when Elementor was released. This drag and drop page builder is extremely powerful. Thanks to the available options and the intuitive design even a computer illiterate can create an amazing looking website in only a couple of hours. At one point I even thought that Elementor will bankrupt the developers of themes. Yes, it’s that powerful.
Stay with me in this detailed review so I can explain how this page builder works, why you should use it, and answer the most asked question in the WordPress community: Is this really the best drag and drop page builder out there?
Ready?
Let’s start with my detailed Elementor page builder review:
What Does This Plugin Actually Do?
Elementor is a page builder plugin. Obviously. It works 100% front-end and it’s relatively easy to use. You can create amazing looking landing pages using the plugin; Customize your blog section; Configure your header and footer globally; Add shortcodes through your entire site. It’s basically a complete solution for designing and maintaining a website using WordPress.
Who Is This Plugin For? And Is It For You?
If you’re looking for a way to boost your website in terms of looks without spending too much money, this plugin is definitely for you. It’s easy to use but it will be probably a bit hard for newbies to understand how this WordPress page builder works. Still, it’s definitely the best solution on the market for creating an amazing looking website without purchasing a theme.
What WordPress Theme to use with Elementor?
Before installing the actual plugin, there is another popular question people around the web are asking: What WordPress theme to install with Elementor? A question that is asked a lot when people are about to use this plugin. Elementor is a complete solution for creating a website but it still requires a theme to work. After extensive research to find the best WordPress theme to go along with this plugin, I’ve come to the following conclusion: You can use any WordPress theme with Elementor but there are several templates that will help you design even better page.
Here are the themes I recommend using with Elementor:
- Astra: I’ve published a detailed review of this theme recently: Astra WordPress Theme Review. I will be also using this theme (the free version) in my current review because I think it connects best with the plugin. You can install Astra straight from inside your dashboard.
- OceanWP: Absolutely amazing theme. I believe that Ocean WP is currently the best free WordPress theme and it works perfectly with Elementor. I’ve also written a detailed review of this theme here: OceanWP Detailed Review.
- Atomic Blocks: Also good theme to use with Elementor but there are some elements that don’t work quite well with the plugin itself
As mentioned, you can still use Elementor with the theme you’re currently using but probably it will be a bit hard to configure some of the elements on your site. The Pro version of Elementor will make things a lot easier, though. More about that later.
Installing Elementor Page Builder
The installation process is pretty seamless:
Access your WordPress dashboard and go to Plugins > Add new > Type Elementor in the search field > Hit Install:
Activate the plugin itself when the installation finishes:
That’s basically it.
Main Settings of Elementor Drag and Drop Page Builder
A new icon will appear on the right side of your WordPress dashboard. Obviously, it will be called Elementor.
Hover over the icon and click on settings:
A couple of things to mention here:
- Leave the page builder to be active for both Posts and Pages.
- Check the box on Disable Default Colors and Disable Default Fonts. It’s best to leave the plugin to inherit the fonts and the colors of the theme you’re using. Otherwise, you need to constantly change fonts and colors which only wastes time.
- You don’t need user tracking.
If you go to the next tab next – Syles, you will see a couple of other options. I won’t touch any of these settings but it’s good to know that these things are available for customization:
Don’t forget to always save the changes.
The next menu inside the Elementor block is Role Manager:
You can decide who to use Elementor here. I don’t believe a lot of people will be using this function. Still, is worth mentioning.
The other few menu items are pretty self-explanatory: You can check the system info or find tutorials inside their knowledge base. The Tools section is also something you probably won’t use. Of course, the authors added a link to upgrade to the Pro version.
Main Functions of this Elementor WordPress Page Builder
Let me walk you through the main functionalities of this page builder.
Templates
Hover over the Elementor menu located inside your WordPress dashboard and click on My Templates:
Using templates can save you tons of time. These are basically predesigned landing pages that can be implemented inside your website with a click of a button. You can check the official library here: Elementor Library. Keep in mind that some of the templates are available only for the Pro version of the plugin.
You can Add your own template or Import such. When you click on Add Template the following window will pop-up:
Select a section that you will be modifying, add a name and click create.
Available Functions
Once you click Add template the screen will load a blank page with all the functions of the Elementor page builder on the left:
The idea here is to add a set of elements, save the order of these elements and use this for your other pages. This way you will design a page and later use it for your other pages. It’s definitely better to create 1 page than customizing 10.
All the functions are shown on the left. Here’s a list of the most frequently used widgets:
- Columns for separating a bigger section;
- Headings;
- Text fields;
- Image;
- Fully customizable buttons;
- Spacer for empty space when you need it;
- Cool looking icons;
- Image boxes;
- Galeries;
- Slides – Only on Pro;
- Animated Heading – Only on Pro;
- Posts layout – Only on Pro;
- Login function – Only on Pro;
- Different Woo elements – Only on Pro.
You can see the full list of features available in Elementor by visiting their official website – Elementor features.
Getting Started With Elementor Page Builder
It’s time. Let me show you how to create a simple, yet powerful landing page for your new or existing project.
Go to Pages > Add new Page:
The reason I choose Astra WordPress theme is because you can disable key elements inside your page. If you’re using WordPress regularly, you will know that some elements can’t be easily disabled in themes. That’s not the case with Astra. On the right side of your page, you will see Astra settings > Disable sections. From here you can disable a specific section. I’m going to remove the Title once I add one. I don’t want this to appear on my homepage. I want a clean slate where I can go wild with my design.
Ok. Now click the big button Edit with Elementor:
You will see the same screen as when I attempted to create a template: features on the left and clean space on the right.
Let’s focus on the things we see on the right first. There are two buttons:
- Add new section: This allows you to separate a big block in several pieces. If you click it you will see the following options:
- Add template: The Add Template button will allow you to load one of the available templates. Here you can choose from the already designed templates or from the ones you’ve created. Also, when you’re ready with the design on the current page you can easily save it as a template for your future pages/posts.
Even if you want to create the page yourself, you can still use some of the ready blocks to kickstart your design process. The available blocks are really cool.
Creating a Page From Skratch With Elementor
I believe you already understand the basics. I must say that I’m really impressed by the available blocks and templates. Still, I will try to design a page on my own. Ok, let’s go:
The first thing I will do is to add a huge cover image. I will add a full section by pressing Add New Section:
Now hover over the newly appeared section. A small menu will appear. The box on the far left is the Edit. Click that to bring out the available options:
Ok, go to the option in the middle: Styles. Click on the Classic background and add an image:
The image is added as a background and it will appear like that:
Don’t worry that is not showing the whole image. It’s a background image, which means that will reveal more of the image once you start adding more things. A couple of configurations here:
- Position: Center center;
- Attachment: Scroll;
- Repeat: No-repeat;
- Size: Cover.
Also, do you see the empty space between the image and the navigation menu?
It’s ugly, right? Let’s remove that. Click on Advanced > Set the Margin to 25 px:
Next, add a title.
Click on the squares icon on the top to load all the features. Drag and drop the Heading element:
Add your heading. You can also change the size, the HTML tag and align your text depending on where you want it. Let’s now change the color of the text:
Go to Style, click on the Text color:
Change the color. I will make my heading white to contrast with the background:
I save my changes.
Ok, we have a title but it’s not loading the full image. Let’s reveal more of the background. Go to all the features and add some space above our heading by drag and dropping:
Let’s make this 120px:
I will do the same for below the heading.
Ok. I like how this is arranging but I want to add a bit more info for myself below my name. To do so, I will add a Column element below the title:
Now, I will drag and drop a text editor element on the left. I want to leave the right side of my page without text so that visitors can see my backpack.
Let’s change the style of the text a bit. I will make the color white and also will change the size of the font to 19px:
One more thing, let’s add a call to action button below my descriptions. Load all the elements and load a button:
Keep in mind that I’m loading the button the 1/2 of the page. You will see why in a bit.
Click on the button to load the customization panel:
Add your link; Change the text; Set the size and make it a Justified button. This will extend the button throughout the whole section. Go to styles to change the size of the text and the color of the button itself:
Ok. So far so good. I’m ready with the first section. I can move on to the next one.
Add a section that is divided into three pieces and place the Icon Box element inside:
Click on the element to edit and duplicate it:
Here’s what’s available inside the Icon Box element:
- Choose icon;
- Add a frame;
- Shape the frame;
- Title and description;
- Add your link;
- Set the position and change the HTML tag.
Additional configuration options are available when you go to the Styles and Advanced section.
Inserting Blocks inside Your Page
I will continue my setup by adding a block.
Instead of a new section, I will click on Add Template this time. On the top choose Blocks and select one that will best fit your needs:
Once you click insert, the block will be nicely added to your page. Now cool is that:
Well, that’s obviously not me but I really like how this area is set up.
I will add another block for testimonials:
And one final where I will add a subscribe button:
I will delete the button:
And I will add a shortcode element where I will place a code from a plugin to gather subscribers:
Ok, I’m all set.
How do you like my homepage created with the help of Elementor?
It took me no more than 10 minutes to create everything. Well, you will need a bit more time to add some text and find the best images for your site but the heavy lifting is no longer heavy.
Configuring Blog Section With Elementor
This is how my current blog section looks like when using Astra:
I will add a new Page and see if I can improve the design.
The steps are as follows: Add a new page > Add a heading > Click Edit with Elementor.
The process here should be simple, I will add a new section and I will insert the recent posts element. This is how it will look:
Well, I’m not quite happy with this layout.
Unfortunately, the free version of Elementor comes with only this design. You need to get the pro version to adjust your blog section.
What Is The Price Of This WordPress Page Builder Plugin?
Everything I’ve described, designed, configured in my post above is done using only the free version of the plugin. I’m also using a free theme. Meaning, I’m only paying for hosting.
As I already mentioned a couple of times, there is a paid version of the plugin. It’s called Elementor Pro and it’s surely something worth purchasing. Especially if you’re a developer who creates sites for clients. Thanks to the predefined templates you will create sites in minutes.
The price for the Pro version of the plugin is $49 for 1 site for 1 year. The package includes updates and support for only 1 year. After the year is over, you need to renew.
Is Elementor Really The Ultimate Page Builder?
As I promised at the beginning of my post, I will answer a question we’re all asking ourselves: Is this plugin really that good?
And my answer is: Yes. Elementor has everything you will ever want in a WordPress page builder. It offers a ton of options even on the free version and it gives you endless possibilities to design a perfect website.
Pros And Cons Of Elementor WordPress Page Builder
Pros:
- Free version with a ton of options.
- 100% Frontend editing.
- Rich library of elements.
- Blocks and templates included.
- Saves you a lot of time.
- You can build an entire site using only this plugin.
Cons:
- Even though it’s really intuitive, it might take you a bit more time to understand how the plugin works if you’re using WordPress for the first time.
Final Thoughts
Creating a website is no longer a nightmare. Thanks to Elementor we can all now create the site we’ve always wanted.
Elementor crushes all competitors and leads the WordPress Page builder plugins leaderboard. Even though the Gutenberg plugin is just around the corner, I don’t believe that the current users of Elementor will easily switch.
The main reason I love Elementor so much is because it helps people who don’t have a clue about designing sites, create a page that is appealing and helps people navigate easier. There are thousands of ugly sites around the web and Elementor is a free and easy to use solution to transform your site. If you’re not sure how to create a good looking website, you should consider adding Elementor by Pojo themes inside your WordPress.
Have you ever tried Elementor? What do you think?