Elementor: Probably the Most Powerful WordPress Page Builder

In this guide you are going to learn everything you could possibly want to know about Elementor page builder before using it.

If you are familiar with WordPress page builders and have not used Elementor before then you are in for a treat in this guide. Not only is Elementor easy to use, but it has so many powerful features it really doesn’t compare to general page builder tools.

If you hadn’t guessed already from the intro, this guide is promoting the use of Elementor.

The Ecom Uprising team have been using it for many years and used it build this website too. I will give some impartial information though so you can make informed decisions, as no tool is flawless.

So What Is Elementor?

Elementor, a WordPress plugin, enables the creation of beautiful and responsive websites without any coding. With Elementor’s drag-and-drop editor, you can customize every page element, from fonts and colors to animations and effects.

Choose from hundreds of templates and website kits for a quick start, or design your own from scratch.

More than a mere page builder, Elementor is a platform that puts you in full control of your WordPress site.

Get The Elementor Pro Plugin Now

A Few of the Best Bits in Elementor

  • 100s of really useful preset elements and loads of addon libraries
  • Build sections with columns and add padding/margins with ease
  • Animate elements and whole sections easily
  • Save sections as templates and use them anywhere else, or globally
  • Create device specific layouts and apply different images
  • Most layout settings can be changed for different devices
  • Build your entire theme using Elementor, no need to buy expensive themes
  • Dynamic data options, so you can build loop elements and dynamic pages

We love Elementor because it’s so easy to build layouts on the fly in minutes. You have so much control over the positioning of elements, even across different devices.

We also love how powerful it is, and how easy it is to find out how to perform advanced functions. This is because of the huge global community of experts on YouTube and elsewhere.


The Ways To Use Elementor

Elementor Plugin for WordPress

Elementor operates as a WordPress plugin, requiring WordPress for its functionality.

However, it functions similarly to a standalone application, allowing you to design your website from top to bottom, including everything in between, using the Elementor editor.

Elementor comes in two versions: Elementor Free and Elementor Pro.

While you can begin with the free plugin, the need for Elementor Pro becomes apparent when you require premium elements and wish to design parts of your theme with it.

Elementor’s Own Hosting

Elementor offers its own Web Hosting Service, allowing you to host and build your WordPress site on their platform, consolidating everything into a single package.

We typically do not choose this option for our clients due to potential speed concerns. However, if top speed is not your priority, Elementor’s hosting could be a suitable choice for you.

For those running resource-intensive SaaS applications or similar projects with WordPress, Elementor provides a premium hosting service called Strattic, designed for Headless WordPress. This service is not required for the average website user.

Host Elementor Yourself

Typically you will have a self-hosted WordPress website that you will install Elementor into. It might be included in a premium theme that your have bought, or you might opt to run the Hello Elementor theme and build the template up from scratch.

I generally recommend SiteGround for hosting, this site is hosted with SiteGround.

Elementor Templates & Kits

There are thousands of Elementor ready templates available on sites like Themeforest, but you can also build your own by using Hello Elementor.

You can also buy Envato Elements, which aren’t full templates as such, but modular template elements that you can install alongside Hello Elementor and use to build up a theme and custom set of pages.


Build Layouts Easily

We use page builder so that we can build layouts easily, back in the old days you had to construct layouts using code referencing CSS styles, but thankfully those days are gone.

I have used all of the major page builders for WordPress and I find Elementor to be the most intuitive and has the best options when it comes to building a layout.

You can add padding and margins literally everywhere, which is what you need to create a nice balanced layout, and the size and shape of literally everything is adaptable.

You can preset things like colours, fonts and buttons, so that you can style the page easily as you go, and column elements are easy to manipulate to create dynamic layouts and overlapping sections.

One of my favourite simple things is the section divider options, when you don’t want a clean straight cut between sections, you can add one of their cool section transition options and add a bit more impact.

Take a look at a section of our homepage when it was being built in Elementor, we used a mixture of columns and dynamic loop sections to create our post navigation areas:


Save Templated Sections and Pages

The fact that you can save any section or page as a template, then deploy it anywhere else is so useful in web design. This means that you can create consistent styling throughout your website at ease.

Global elements, like heading and buttons can also be saved and deployed many times across the site, they only have on instance so can be changed easily across the site when you need to with one action.

You can also save whole sections as global elements by saving those sections an deploying them using the ‘Template’ element – which is a game changer for things like banners and CTAs.

You can also design the entire website, from the header and footer, to the store and blog templates using Elementor. I’ll explain a bit more about this later on in this guide.


Building Dynamic Content

In case you aren’t familiar with the term dynamic content, this is content pulled in to the page from external fields. So in the case of a product page, the dynamic content would be the title, price, image and description.

Dynamic is usually related to posts, and you can create custom post types with custom fields, then pull them into a templated page using the dynamic elements in Elementor. An example of this might be a set of listings, or a group of categorised pages.

Dynamic content can also be applied in pages where you assign custom fields to the pages, then pull the data associated to the page into sections within a template. You need something like ACF (Advanced Custom Fields) to do this, or customise your functions file to call new fields for pages.

The power of dynamic content

Elementor’s design capabilities allow you to create complex layouts and combine them with custom dynamic elements, enabling the construction of various data-driven structures. You are not confined to the fields natively available in WordPress. By adding your own fields to pages and posts, you can craft rich layouts.


How does it compare to other page builders?

Whilst I want to promote that you use Elementor for your next WordPress website, I don’t particularly want to trash the name of other page builders, because they have their uses.

What I will say is that in the past I have used WP Bakery, Bold Builder, Gutenburg and a few other independent builders like Avada and found them to have less capability than what I find in Elementor.

One criticism of Elementor that does come up sometimes is site speed, an while it’s true that with Gutenburg you can build a less code heavy page, you sacrifice editing capability, so practically I do not find this to be beneficial. You can still achieve a 90+ performance score in Google Pagespeed Insights with Elementor if you build the foundation well.

More Options For Mobile Design

Creating customised mobile layouts is vital in web design, and I found that most other builder do not have the granular capability to customise the size, position, orientation and even referenced file in mobile edit mode, where Elementor does.

Better Support and Community

Because of it’s popularity, the community of people making training videos and running support groups for Elementor is huge. Unlike some software platforms where it be a real nightmare just finding out simple things, pretty much anything you want to know comes up within a few searches. This makes the learning curve that bit easier and is a great reason to choose Elementor.

More associated tools and third-party features

When a tool gains traction like Elementor has, small software companies crop up building third party tools to work with it, and that has happened in spades with Elementor.

If you want to do it, chances are there is a tool you can bolt on to Elementor to achieve it. I used to hit brick walls all the time with other page builders because they just didn’t have the flexibility and you had to custom code features into WordPress if you wanted them, which just isn’t practical for the masses.


How can you learn to use Elementor quickly?

If you have never used a page builder before, then despite what they say about it being super-intuitive, you will go through a significant learning curve to figure out all the ways you cna build layouts with Elementor. This will happen with any platform.

If you are already used to using page builders, then it should be a pretty swift transition.

Online Tutorials

There’s loads of online tutorials on YouTube, you can’t go wrong with some big players like WP Tuts and you want a decent list of other channels to follow, check out Crocoblock’s top 10.

Learning How To Use Ready-Made And Saved Templates

One of the super-efficient ways to build a website with Elementor is to utilise the saved templates and ready made templates feature.

Ready Made

There are hundreds of ready made templates available inside Elementor, all you need to do is connect to the library after setting it up. If you have Elementor Pro you will access to much more, and you can install several other kits like ElementsKit.

With your ready made sections and pages, you literally just replace the content with your own.

Saved Templates

When you have built sections that you are happy with, you can also save them and re-use them on other pages and posts. They can of course be edited once they are imported into other pages, but you can also set up saved templates and use them as global sections by deploying them using the ‘Template’ element.

You need to be smart with your section naming, because before too long you will have so many saved sections in there that if you do not have a good naming system you won’t know what’s what.

Buy A Template Kit

Another simple way to get started is to buy a template kit some somewhere like Envato Elements. This is like buying a full template, but without all the template extras. You will get saved sections for a whole website, and just need to edit the content. You will be able to reuse your sections and edit them easily.

Buy A Full Ready-Made Template

You can also just buy a full Elementor template from Themeforest (Envato Market), this is a very quick way to build a website.

The only downside is usually a full theme comes with a lot more than you need, so you might end up a bloated backend and actually very little on the frontend.

This doesn’t matter to everyone though, and if you are not very skilled at building layouts, then using a ready made theme is going to speed up the process, and it allows relative newbies to build a great looking page in a short amount of time.


How Much Does Elementor Cost?

As mentioned about, Elementor sell three main products:

  1. Elementor Page Builder Plugin
  2. Elementor Web Hosting
  3. Strattic Headless Hosting

Elementor Page Builder

Free version

You can download and register the free version of Elementor at no cost.

While there is no limit to the number of free installations, remember that the free version lacks many of the superior elements and features.

Choose to buy a theme, or stand-alone

If you want to buy a ready made theme from Themeforest, then many come with Elementor Pro included, so you will only need to pay for your theme licence.

If you choose to go with the Hello Elementor theme and build your theme the manual way, or install a Theme Kit then you will need to purchase the Elementor Pro licence.

  • 1 Licence is $59 per year
  • 3 Licences are $99 per year
  • 25 Licences are $199 per year
  • 1000 Licences are $399 per year

(prices are correct as of July 2023)

If you are a developer, you can slide up the scale as you grow the number of websites you run.

Choose the hosted option

If you don’t have web hosting and want to keep everything in one place, then you could opt for Elementor’s Web Hosting Service.

  • 1 ‘Basic’ website is $9.99/mth for first year, then $14.99/mth each year after
  • 1 ‘Business’ website is $19.99/mth for first year, then $24.99/mth each year after
  • 3 Websites is $22.99/mth for first year, then $32.99/mth each year after
  • 10 Websites is $49.99/mth for first year, then $59.99/mth each year after

(prices are correct as of July 2023)

Strattic

The Strattic Hosting is a much more premium service, starting at $199 per month.


Pro Tips on Using Elementor Effectively

Theme styles & site settings

Build default theme styles directly into site settings at the start. This allows you to select ‘default’ for font face and choose from your predefined colors in the palette. It’s better than setting your colors and fonts inline.

Build your header, footer and dynamic templates using Elementor theme builder

Create your headers, footers, and dynamic templates using Elementor theme builder, without relying on themes.

Deploy different headers on various pages based on a wide range of rules. Construct dynamic layouts like product category pages and custom blog post lists, incorporating custom fields not typically available to posts.

Think carefully about the application of margins and padding

Apply padding and margins thoughtfully, considering the multiple layers of sections, rows, and columns. Use margins to space out elements vertically. Opt for padding when anchor tags need to start at the top of a section.

For responsive layouts, favor percent (%), em, or vw over pixels when applying padding and margins.

Sometimes you need to play around with your layout a few times to find the ideal arrangement of sections, elements and spacing.

Save sections with a suitable naming structure

Saving sections is a great feature, until you have 300 sections saved in several iterations. Because then you will not be able to work out which section is which anymore.

So employing a good naming structure is important, including versioning. If you just call a section ‘home section’ then it doesn’t say much. But if you call it ‘home hero banner v1’ then you know what it is and if there is v1, v2 and v3, you know that v3 is the latest one.

Use Advanced Custom Fields and register custom post types

The power of applying custom fields and custom post types in WordPress cannot be overemphasised. It’s such a powerful feature because you can build so many custom structures using it.

If you are not familiar with this process, then read up on it and try some things out.

We like to customise Ecommerce stores with custom fields and custom post types. For instance if you want to add special data fields to categories, like footer content, or external video URLs then you need custom fields applied to the categories, that you can pull into your archive template.

Take note of which elements have conditional mobile responsive fields

When you switch to responsive mode you will notice device icons next to certain fields, which denotes that the entry in that field is specific to that device.

Pay attention to elements with conditional mobile responsive fields when in responsive mode. Device icons indicate device-specific entries.

Attributes cascade from desktop to tablet to mobile. But overwriting an attribute for a specific device will lock it in. Then it will be unaffected by changes to larger device attributes.

Note which attributes can be adjusted, as they include more than just padding and font sizes, extending to colors and reference images.


Conclusion

If you’ve got this far then well done. I know it’s been an indepth guide but I hope you have learned all that you need to know about Elementor Pro before going ahead and purchasing it.

This is not a support thread but if you have any relevant questions about Elementor that you feel wasn’t included here feel free to drop them in the comments below and I will try to answer them.

Purchase Elementor Pro

Thanks for reading, follow me, please share this, and subscribe below to give me some kudos.

Chris Bradshaw

Share this

Other tools you might like...​

What else to read next...​

No Comments...

Leave a Reply

Your email address will not be published. Required fields are marked *

About the author

Before switching to ecommerce I was a design engineer, so I understand the importance of having the right tools. All of the tools I recommend in Ecom Uprising are ones that I have used and would recommend to my consulting clients.

Thanks for reading, Chris

Browse sections

Get more useful insight like this

** We 100% do not share details with third parties, nor do we spam our mailing list. Just useful insight **

Answers await...