In the past three years WordPress 3rd party developers have produced some of the best Post and PageBuilders available. And even more remarkable, two of the top ranked Pagebuilders are FREE plugins – Site Origin PageBuilder and Elementor. The OpenSourcery will look at these two largely free Pagebuilders [both tools now have a small set of premium add-ons] starting with Elementor:
What makes Elementor so exciting is that it is barely 1 year old and has already seen nearly 1 million downloads with a a 5star rating among WordPress plugins. The screenshot above shows the drag and drop Elementor interface used to add components to a page, post, custom post-type , header or footer. This last header+footer capability is state of the art supplied by a free 3rd party plugin. This is another strength of Elementor, it has attracted over a dozen largely free 3rd party plugins which we will review below.
How Elementor Builds Pages
Like all of the most popular WordPress PageBuilders, Elementor works with just about any WordPress theme. It works particularly well with MultiPurpose Themes like free Astra and Generate Press plus premium Multipurpose Themes like Total and Massive Dynamic. When used with a Multipurpose Theme users are able to control the layout of any chosen page or post turning on/off the use of sidebars, boxed or fullwidth layout and even the appearance of headers and footers. This allows for unique web page designs including many landing pages or different product promotions.
Elementor also supports easy creation and movement of row and columns in its front-end pagebuilding as seen in the slideshow:
[cycloneslider id=”elementor”]
The first slide shows a two column row being added to the post. This is a common pagebuilding feature where the user drops the row on the page after selecting the number of columns to be used in the row. It is an important to note that from The second slide covers two Elementor steps. Into the wider left column an Elementor Image Gallery component of the goodies offered at Annie Boulanger’s weekly Brighton ON Saturday Feast has already been added. The second slide shows the drag and dropping of the Text Editor component into the second column. Elementor displays the full WordPress Visual Editor – in this case we have used the WPEdit plugin enhanced editor- some Pagebuilders are unable to do this.
The third slide shows how Elementor, like most top Pagebuilders, allows for a lot of direct styling. In this case it helps to know some basic CSS rules like margins, padding and borders and how they work. But more complicated styling like background images, animations and color settings are handled by the Pagebuilder behind the scenes. In this case we change the background color for the text block followed by the row background color. The fourth slide shows the finished page.
So lets now review the Elementor Workspace and how it speeds up a Web page design.
The Elementor Sidebar Workspace
Elementor has the same problem that all the popular PageBuilders have – where to place the list of component widgets and their option properties without taking up too much of the Web design space. Weebly uses a pad along the bottom of the screen. Beaver Builder and Themify Builder use a sidebar on the right. And as seen in the screenshot below, Elementor uses a sidebar on the left:
This blank workspace is teeming with live icon buttons to manipulate Elementor. Right in the middle of the sidebar is the collapse sidebar icon which hides the sidebar to reveal the complete canvas. If collapsed the icon expands out the sidebar. Next along the bottom are 5 key control icon buttons. First, is the Exit Elementor icon. If you have not saved your most recent changes, Elementor will ask if you want to leave or stay. Second, the Screen icon allows users to choose a desktop, tablet or mobilephone view. Then Elementor provides an array of styling options which will apply to your chosen viewport – desktop, tablet, or mobilephone. Note tablet and mobilephone stylings only apply to that viewport.
Third is the Revision History icon which reveals all the saved revisions while editing so you can move back several edit steps and start over. Fourth is the Templates icon whose feature will be reviewed below. Fifth, is the Save button which when it is green then it signals that you need to make a save. Users can edit several different blocks/widgets before saving if they so choose.
Sixth is the Elementor Menu hambuger icon at the top of the sidebar. Clicking on the menu, reveals buttons for global colour, global font and other page settings. Seventh, click on the Widget List icon to return to the basic Widgets sidebar setting. Eighth, in the middle of the screen is the Add New Section button which will create a new row with the user selected number of columns. So now we are ready to drag and drop some widgets on the screen as we create the new page or post.
As soon as we drag a widget on the page, Elementor changes the sidebar and fills it with all the options associated with that widget:
Now here is where Elementor distinguishes itself from many of its competitors. Elementor is lightning fast in both the widget drag and drop operations plus making the edits to widget options. There are 3 tabs for every widget – Content options, Style options and Advanced settings. It is here with these options where the PageBuilders in general distinguish themselves.
First, not all Pagebuilders have the same Content option features [that is the subject of a massive and fast changing review because the PageBuilder vendors are adding new features and options at a torrid clip]. Even more critical is the fact that a number of PageBuilders have only a small skeleton of Style and Advanced CSS formating features. The Elementor styling options are very complete and this is one way to identify the better PageBuilders.
Second, it is useful to see if a PageBuilder has for Text Edit a full TinyMCE or WPEdit. Elementor has a partially complete WPEdit available. Unfortunately some WPEdit features like Find and Replace and a full set of Table commands have been omitted. But the set of Style CSS formating options is very robust. And the Advanced options include efective animations and special responsive mode edits for tablets and mobilephones.
Third, note that each block has a set of control icons that appear when your mouse hovers near the top left or right border of a block. There are at least 3 block control icons: Edit, Duplicate, and Delete. If you drag on the Edit icon instead of clicking on it, you can drag and drop the block into a new position anywhere on the page. This is extremely useful when styling with a client.
Finally, we have not attempted to describe all the widgets available for Elementor. That is a Herculean task because Elementor has 26 free widgets, about 18 more Pro widgets [the number is fast increasing], and has 9 plugin vendors that further add over 40 more widgets to the Elementor :
Yes there is some overlap among the add-on widget and many are freemium plugins where you must pay to get the full set of widgets and/or features. But there are some fascinating extensions among these Elementor add-ons which make them quite powerful.
Only the free [and very good] SiteOrigin PageBuilder has seen such a rush of 3rd party plugins. Making this rush of add-ons remarkable is the fact that Elementor has only been on the market for a year and a half.
Another distinguishing feature of the top PageBuilders is their templates which provide fully filled page designs which users can load into their websites and customize to their hearts content or trash if they don’t work out. The next section will show how to use templates in Elementor to further speed up page design.
Using Elementor Templates
Like many other WordPress PageBuilders, Elementor has the ability to insert full page templates onto a website. This is a vital capability because templates speed up the design process by allowing a client to tryout a page design layout and see what elements works for him/her. Elementor has 97 templates, half of which are Pro and and must be paid for to use:
Here is 8 of the 97 templates currently available in Elementor. We need a consulting type landing page and the free Homepage – Agency template catches our eye. We can preview the template by pressing on the +magnifying glass icon to see if the template meets our needs:
The opening full width-header and Our Services grid using icons is definitely a direction we want to go in. But the colors and images are a bit too conventional. On the whole the page is a good starting point on the landing page for ThePhotoFinishes.com. So all we have to do is press the Insert button and the page is loaded including all the images, video, font and icon objects and settings.
Immediately it is possible within Elementor to edit the page’s widgets and styles. In about an hour a new landing page is done:
As promised the colours have been changed as well as the header image and layout. Further down the page we retain the heading font size, style and color. But the body text is darker and bolder. All of these changes are easy to do in Elementor’s Style option.
Here is what the latter part of the page looks like after customization:
The big change was the full width Fall background image. Also font style and color was experimented with for the lower part of the page; but in the end we reverted to the original using the Revision History icon.
Now Elementor ‘s template library lacks three features that some other PageBuilders provide. First, it would be nice to be able to control how the insert works – before or after existing content or to completely replace any content. Second, some PageBuilders allow you to load dummy images, icons, and video image blocks. These dummy blocks speed up the process of detailed customization. Third, before importing a template it would be nice to be able to edit out unwanted blocks.
But the bottom line is that Elementor has a robust template system that is made even more effective by addons from Style Press and Anywhere Elementor. As you work with templates you will begin to want to customize, save and reuse your own. Again, Elementor allows you to do exactly that. I often set up a private template page to create a reusable template for use on several pages. I can then insert my customized template on any chosen page. I also can export the template for use on other websites where I am using Elementor. In sum, the template system of Elementor, though not the best, still provides great productivity for developers.
Mobile Responsive Support
In a survey of 517 Small Business Website in Toronto, our team found that 26% or 134 websites are not mobile ready. Yet Mobile usage [smartphones and tablets combined] now make up 56% of browsing worldwide to desktop’s 44%. So a priority among websites is to provide mobile ready websites.
And WordPress theme and Pagebuilders have responded well to that need. Most themes are responsive auto-magically – default settings provide the underlying media queries that adjust a website for display on tablets and mobilephones. PageBuilders like Elementror take mobile responsive ness a step further, and allow developers to customize the tablet and mobilephone views independently.
Here is how Elementor provides added mobile responsive customization. It starts with mobile viewports:
What Elementor does is provide 3 views. Changes in the desktop view apply to all the other views. But changes in the tablet or mobile view options apply strictly to the chosen view when marked as a responsive option[only about 1 in 5 options are marked responsive].
Here is a screenshot of responsive options being changed:
As you can see the responsive options are limited [some Pagebuilders provide a wider selection]. And developers have to be careful that they do not change a non-responsive option thinking it only applies to the mobile or tablet view. Again, this capability to see and change the the different viewports is useful. Of course CSS savvy users can do more extensive changes using media queries. For every block, Elementor provides for specific CSS coding.
Summary
For a free, very fast, and easy to use PageBuilder, Elementor has a lot to offer. Elementor meets our 6 tests of WordPress PageBuilders very well. Elementor provide very good interactive, drag and drop layout of page components and widgets; it has dozens of preformatted template layouts which supply ample design ideas that can be rapidly customized to meet client requirements; it automates the bulk of making websites Mobile Responsive yet also provides for specific mobilephone and/or tablet edits; it provides user control of revision histories so it is easy to step back multiple steps to try a new layout or design idea; it’s styling tools offer many WYSIWYG choices for components layout and formating; and it provides many own and 3rd party add-ons/extensions for many added features.
The last point bears repeating, over a dozen theme and plugin vendors have added to the Elementor feature set in just over a year since its start-up. This is eloquent testimony to the fact for savvy Pagebuilders, the choice is Elementory.