Last updated: July 15, 2019
The page builder is a crucial enough plugin if you are a web developer and often develop websites for your clients with WordPress. It helps you to create beautiful pages without writing any single line of code, which can save you time. A page builder comes with a drag-and-drop visual interface to assist you in creating a web page.
With over 2 million active installations and the average of a 5-star rating, Elementor is one of the best page builder plugins for WordPress, if not the best.
- Active installtions: 2+ million.
- Ratings: (5 / 5)
Elementor itself was launched in 2016, younger than Divi which was released in 2015. Since its initial release, Elementor has quickly become the most popular page builder in the WordPress developer scope. All page builder plugins come with a visual drag-and-drop interface to allow you to create a beautiful web page in minutes without writing any single line of code, but Elementor offers something different. Elementor also offers a Theme Builder, a feature that allows you to create a WordPress theme without coding.
We have been using Elementor for quite enough time and found that Elementor is by far the best page builder plugin in terms of feature and ease of use. The only thing we don’t like about Elementor is the payment model which only applies the subscription-based model. The following is a brief review of Elementor.
- Design element collection: (4 / 5)
- Interface: (5 / 5)
- Ease of use: (5 / 5)
- WordPress compatibility: (5 / 5)
- Technical support: (5 / 5)
- Pricing: (4 / 5)
- Overal rating: (5 / 5)
Elementor itself is released as a freemium plugin. The free version is enough for personal use, but you need to upgrade to the premium version to use features like Theme Builder and Pop-up Builder.
Free vs Premium
Elementor adopts the subscription-based payment model starting from $49 per year (Personal plan). In addition to Theme Builder and Pop-up Builder, the premium version offers more design elements to give you more freedom to create any sort of web design. The following are the design elements offered by each version.
- Inner Section
- Text Editor
- Google Maps
- Image Box
- Icon Box
- Star Rating
- Image Gallery
- Image Carousel
- Icon List
- Progress Bar
- Social Icons
- Menu Anchor
All elements on the free version plus:
- Nav Menu
- Animated Headline
- Price List
- Price Table
- Flip Box
- Call to Action
- Media Carousel
- Testimonial Carousel
- Share Buttons
- Facebook Button
- Facebook Comments
- Facebook Embed
- Facebook Page
- Site Logo
- Site Title
- Page Title
- Nav Menu
- Search Form
- Post Title
- Post Excerpt
- Featured Image
- Author Box
- Post Comments
- Post Navigation
- Post Info
The idea of a page builder plugins like Elementor is to help you create web pages without coding. They allow you to create a beautiful web page without writing any single line of CSS or HTML code. You can create a beautiful web page by just dragging the design elements to the work canvas. Take a look at the clip below to get to know the interface of Elementor.
The interface is one of the things we love so much from Elementor. The layout of the interface is well-arranged and even fit on devices with a 14-inch screen. The elements panel lies on the left side while the work canvas lies on the right side. The elements panel of Elementor is resizable. You can make it smaller to give extra space to the canvas.
The interface of Elementor is equipped with a handy Navigator that floats above the canvas. Navigator is particularly helpful if you are designing a complex web page consisting of lots of sections. With Navigator, you can easily jump from a section to another one to edit the elements inside it. Navigator is also resizable and you can disable it in case you think it is distracting. You can click the Navigator icon on the left panel to disable/enable Navigator (the one like sandwich).
The elements panel — as well as the Navigator — can be hidden once you are done with the design. This will give you the preview of the design you have just done, other than clicking the Preview icon the left panel. Overall, the interface of Elementor is great. Probably the best amongst other page builders’.
How to create a web page with Elementor
Elementor gives you two options to create a new web page. You can create from scratch or use the templates instead. Yes, Elementor provides premade templates to save you time in creating a web page. Templates are available for both the free and the premium version. But, you have limited options of templates if you use the free version since not all elements work on the free version. Templates that contain pro elements labeled as ‘pro’. You can take a look at the templates offered by Elementor on its official library page.
The Elementor templates are exportable. You can export the templates of your web pages to be used on other Elementor-powered websites. Elementor templates are stored in a JSON file. While you can export the template of a whole web page, you can also export only an element as a global widget for recurring use.
Start from scratch
You can use Elementor to edit either a WordPress post or page. Once you have Elementor installed on your WordPress, you will see an Edit with Elementor button above the editor. Clicking this button will take you to the Elementor editor.
Before working on a web page from scratch, you can set the page layout first. You can do so by clicking the gear icon on the bottom of the left panel. There are three page layouts you can choose from.
There are two buttons on the Elementor canvas: a plus button to add a new section and a button with a folder icon to load templates. To start from scratch, you can click the plus button and select one of the available structures.
In Elementor, selecting a structure is not too crucial step since you can add a new column as well as set the width yourself. To add a new column within a section, you can open the section you want to add a new column to on the Navigator and right-click and select Add New Column. While to set the width of the column, you can simply drag the column divider to the left or right direction.
The column width flexibility is especially great if you want to create a WordPress theme with Elementor. You can, for instance, set the two columns with the width ratio of about 75%:25% to create the single post layout of your theme. The left column for the content while the right one to place the WordPress widgets.
One of the interesting things when working with Elementor is that you can perform right-click. Sounds trivial, yet right-click is pretty helpful on some occasions.
Previewing your page
In the context of web design, creating a responsive design is a must in today’s age. Elementor can help you to ensure that your design will be responsive. In Elementor, you can preview your design on three device types:
You can even use a different setting on certain elements for each device. For instance, you can use different text margins for desktop, tablet, and smartphone.
Theme Builder is probably the most interesting feature of Elementor. This feature allows you to create a WordPress theme without writing any single line of code (you can read here to learn more). Yes, you can create a WordPress theme even if you have no programming knowledge at all. You can create your theme via the Elementor canvas.
Before creating a theme with Elementor, you need to know that a WordPress theme consists of several main elements. Elementor itself allows you to create the following elements:
- Single post layout
- Archive layout
Elementor will replace the default element of your current theme. For instance, if you want to use the header you created with Elementor, Elementor will replace the header of your current theme. Elementor gives you an option to apply a theme element on the entire site or certain pages only.
One thing. When creating a WordPress theme with Elementor, you won’t be able to save the theme elements into a single ZIP file like other themes at large. You can only save your theme per element in a JSON file.
Elementor is also compatible with WooCommerce. You can also build a WooCommerce shop and archive pages using Elementor.
The Theme Builder feature of Elementor is great for WordPress users who have no coding skill, yet want to build a theme. In addition to allowing you to use different settings for each element to make your design be responsive, things like sticky options are also available.
Add-ons and integrations
One of the factors that make Elementor become so popular in the developer scope probably is because it supports add-ons. Elementor allows other developers to create design elements that are not available yet. This is great because you are not forced to upgrade to the premium version of Elementor to unlock the pro elements (unless you need to create a WordPress theme).
In addition to add-ons, Elementor also supports integration with popular services like MailChimp, MailerLite, Slack, and so on. Here is the list of the services supported by Elementor.
- Campaign Monitor
- Adobe TypeKit
- Facebook DSK
Another Elementor feature that we love about is the Role Manager. This feature is particularly helpful if you have a large website with several authors or when you are developing a new website with your team. With this feature, you can restrict access to the editor altogether, or allow users to only make changes to the content.
Elementor adopts a subscription-based payment. The cheapest plan offered by Elementor costs $49 per year. Unlike other page builders, say Beaver Builder, Elementor doesn’t distinguish the features on each plan. All pro plans have the same features. Elementor only restricts the use of its page builder according to your plan. For instance, if you subscribed to the Personal plan, you can only use your page builder on one site. Here are the plans offered by Elementor.
- Personal: $49/year for 1 site
- Plus: $99/year for 3 sites
- Expert: $199/year for 1,000 sites
Compared to other page builders like Beaver Builder and Divi, the pricing options of Elementor is more flexible since it has a plan for personal use. Both Beaver Builder and Divi allow you to use a single license for as many websites as you want, indicating that they are basically designed for developers. But, we are pretty sure that not all page builder users are web developers. Some are just a blogger who develops a WordPress site for themselves.
Elementor doesn’t offer a one-time purchase option like Divi. Some people prefer to spend a large amount of money upfront instead of continuously spending money every year or month for the subscription fee.
Since its launch in 2016, Elementor has transformed to become one of the best page builder plugins for WordPress. Some pages on this website are also created with Elementor. We love using Elementor to create a web page since it has a very intuitive interface, with a handy Navigator. Another reason why we choose Elementor is that it has a personal plan which is great for one website. As we have mentioned, not all page builder users are web developers who develop a website for clients.
Elementor also has extensive support for popular services, including Mailchimp. Also, you can install an add-on if you can’t find a design element on the Elementor’s elements panel. If you love animated content, you can also add animated content on your design with Elementor.