Because it’s insanely awesome! The end.
Just kidding. But it is awesome, and I’m going to explain to you step by step why that is, and why Elementor wipes the floor with every other WordPress theme and page builder on the market.
What is Elementor?
For those of you that aren’t sure, Elementor is a WordPress builder. A WordPress builder is a tool you can use to, you guessed it, build your WordPress website.
WordPress is the content management system for your website. Think of WordPress like the foundation of a house. You install WordPress as the foundation, and it opens up a whole world of things you can do for your website.
Well, if WordPress is the foundation that you build upon, then Elementor is the toolkit that you use to actually build the house. In fact, Elementor is your architect, designer, toolkit and construction team all in one.
You’d be surprised at how many different types of website you can build with just Elementor installed!
How does it work?
Elementor installs onto your website as a plugin. There’s a free Elementor plugin in the WordPress repository you can install and get started with, however you’re going to want to upgrade to the Pro version to ensure you can build your entire site with Elementor.
So let’s assume you made the smart choice and got the Pro version 😉
Once it’s installed, you can use Elementor to build every single piece of your website visually.
I’m not even joking! Elementor gives you the option of building everything visually on your website, including
- Global Styling (fonts, font sizes, colors etc)
- Header and Footer
- Templates
- Single Page
- Home
- 404
- Contact
- Forms
- Blog
- Single Post
- WooCommerce
Anything you can think of can be built visually using Elementor. When I say visually, I mean using Elementors visual drag and drop builder, so you don’t need to mess around with any code or use one of those back end style builders from the WordPress dashboard.
Check out this short video to get an idea of how it works, cool right?
Elementor Visual Builder
What makes the visual builder special, is not only that you can design and develop your entire website without using any code, you can also watch it take shape in real time before your eyes.
Elementors allows you to see the construction of your website in progress, kind of like watching a sped up timelapse of a house being built, but you’re in charge of the construction!
Within the visual builder, there are widgets that you can drag and drop onto the page that generate elements, we’ll explain how these work more shortly.
There are widgets for everything, from page structure widgets like rows and columns, to interactive media widgets like image galleries, videos and animated headlines.
This isn’t how it always works though for WordPress.
Many WordPress websites are built using themes, which are large bundles of code and demo content, that you can install on your website. Once installed, there is usually a customisation panel added to your dashboard, where you can select settings and control things like layout and what displays in certain widgets.
The problem with themes is, they suck! To put it bluntly. They are rigid, inflexible and severely limit what you can do with your WordPress website.
Many WordPress site owners spend days, weeks, even months battling with WordPress themes trying to get their website exactly as they want it. A code snippet here, playing with some PHP there, outsourcing to a freelancer there.
Instead, what they should have done is spent a few hours getting to grips with how Elementor works. Because it’s so easy and intuitive to use, once you learn how to layout a page and use the core widgets, you’ll find you can build most things yourself, without any of the usual headaches!
How much easier does this look than trying to edit code in the Widgets panel, or figure out loads of CSS snippets to hack your website into the state you want it?
Widgets
Remember those widgets we spoke about above? Well, when you drag and drop one onto your page within the Elementor builder, a fully customisable element is generated on the page.
Every widget can be customised and controlled inside the Elementor builder, which is what you use to build your website visually. Once the widget is present on the page, you can click and edit it using the three customisation panels built into most widgets.
These customisation panels are usually:
- Content
- Style
- Advanced
The Content options panel allows you to populate your widgets with content and determine whether that content is static or dynamic, among other things
Style is where you can customise the design of your widget, this section is comprehensive and varies from widget to widget, typically providing you with stying options for every part of a widget. This includes things like:
- Colour
- Background colour
- Size
- Spacing
- Alignment
- Width
- Border
- Border radius
- :hover effects
- :hover styling
- Font size
- Font weight
- Text shadow
Finally the Advanced panel contains a ton of different customisation settings, covering everything from:
- Margins
- Padding
- Motion effects
- Background
- Border
- Positioning
- Responsive
- Attributes
- Custom CSS
This is the real beauty of building with Elementor. There are other tools out there that let you drag and drop widgets, but the customisation in Elementor is unparalleled. And no other tool on the market lets you build your entire site visually without code.
Templates
Visual builders and widgets are great, but how do we create something, save it, and determine where it displays on our website? That would be the job of the templates! The templating system in Elementor is the smoothest I’ve ever seen, for a number of reasons.
Firstly, creating a new template is super simple, and you can create templates for anything, as already discussed. There is template support for the header, footer, archive, single post and 404 pages, and you can build page templates for anything else you might need also.
To create a new template, open the Theme Builder and select the template that you’d like to create. Once you make a selection, the Elementor builder will open and you can begin creating. Once you’re done, save your work as a new template.
Displaying templates is another area where Elementor excels. Without Elementor, determining where templates display dynamically would require code. With Elementor it can be managed easily from the Theme Builder through use of Display Conditions.
The display conditions available are comprehensive, for example you can select posts by category, tag or author, or manually type in specific posts.
There’s an include and an exclude condition that you can apply to any template, so you can ensure that your template displays exactly where you want, or don’t want.
Using these conditions, you have complete control over where your templates display on your website.
What about themes?
There is no need for a theme with Elementor.
With Elementor, you can say goodbye to themes as you would usually think of them. Honestly since I started using Elementor to build my sites a few years ago, I haven’t used a standalone theme since. The thought of doing so just gives me a headache.
By standalone theme, I mean a theme purchased to build the website on its own, the kind of thing you might buy on Themeforest that comes bundled with lots of demo content and customizer options.
Themes are no longer required if you’re using Elementor in the traditional sense, all that you need is the Hello Elementor starter theme that is designed for compatibility with Elementor.
But wait, that’s still a theme right? No not really! Hello Elementor contains the bare minimum needed to setup your website to work optimally with Elementor. There’s no bloat, no junk, and you can’t build your website with just this theme.
Up until now, people have bought themes because they didn’t know how to code, or didn’t want to code. Themes promise ease of use, simple setup and the flexibility to control how your site looks.
However the reality is that most themes are limited, hard to use and require the help of a developer to customise.
Many people buy themes because they like the look of the demo content, or they are sold on the great reviews. You’d typically check out which page builder it came bundled with, what options it added to your CMS, and what does the demo content look like? Is there a good demo that fits roughly what you want your website to look like?
Great! Go ahead and purchase the theme.
4 hours later and you’re starting to pull your hair out because you can’t figure out how to edit something on the rigidly designed demo template you were so in love with. So, you start scouring the internet for freelance developers, try to explain to them what you want done, hire them and start spending more money.
Rinse and repeat for weeks until your site is complete.
This is something we’ve all done. How do I know? Because this was me 5 years ago!
The era of the page builder
First a bit of background about page builders, so you can understand why Elementor is now top dog!
After WordPress themes were flavor of the month, it was time for page builders to shine. As you now know from the start of the article, these are tools for building your website using drag and drop widgets typically.
This includes tools like WPBakery, Beaver Builder and Divi to name a few of the most popular. These tools are all superior to using rigidly designed themes with demo content, but all of them have limitations that have been overcome by Elementor.
These builders were a step up from themes, but still didn’t let you build your entire site visually without code. Added to which, they all require some level of technical know how to use effectively.
Building WordPress websites the easy way with Elementor
The transition from themes to page builders paved the way for Elementor. There were several good builders on the market, but none of them had the wow factor. Elementor picked up on this, and made itself great in the areas where the other builders fell down.
As Elementor has grown and stayed ahead of the game, it has reached the point over the past couple of years where you can literally build your entire website visually with Elementor.
This puts it leaps and bounds ahead of those clunky old themes we initially talked about, and makes it the natural winner over other WordPress builders on the market.
So let’s look at what you can build using Elementor. Almost every WordPress website can essentially be broken down into these sections:
- Header
- Footer
- Home
- Single Page Template
- Blog
- Blog Post (Single Post Template)
- Contact Page
- Shop (optional)
- Product Page (optional)
- Cart (optional)
- Checkout (optional)
Let’s look at how each section can be built using Elementor.
Header
Let’s start with the header. To build one in Elementor, enter the Theme Builder, which can be accessed from your WordPress dashboard by hovering over Templates then clicking on Theme Builder.
*If you are using an old version of Elementor, you may need to upgrade to follow these instructions step for step, older versions of Elementor allow you to build your Header and Footer by going into Templates from the WordPress dashboard, and specifying which part of your site the template should be for.
You can also access the Theme Builder at anytime when the Elementor Builder is open on the front end, by clicking on the cog icon in the bottom left corner, then the icon that appears in the top left corner (the 3 lines) to reach the settings screen (shown below).
Once the builder opens up, start creating your header.
Elementor has simple drag and drop modules for everything, from menus and logos to buttons and forms.
A logo, menu and a button is a very commonly used header layout, and simple to put together. However you don’t have to start from scratch, take a look at some of the cool header and footer designs built with Elementor for inspiration.
And there’s also a load of great free templates you can import and customise from the Template Library, more on this shortly.
Header widgets:
- Site Logo
- Site Title
- Page Title
- Nav Menu
- Search Form
- Sitemap
- Breadcrumbs
Footer
You can create a footer in Elementor using same method shown above for the header. Open the Theme Builder and create a new Footer template.
As with the header, there are templates you can import and customise, or you can build something from scratch yourself. Here are a few of my favourites.
There are unique widgets designed for the footer that you can make use of, like the sitemap, nav menu and search menu widgets. You can also drag and drop any of the other global Elementor widgets to construct any kind of footer you like.
Elementor is the only builder I’ve seen that even lets you build your header and footer visually. Building a header or footer has previously been an absolute pain in WordPress for people not wanting to use code.
The header and footer sections traditionally always required a developer to build, as they had to be coded using PHP templates.
The fact there are also free templates provided for both of these problem sections makes it an even better deal. But not the horrible, annoying kind of templates you get with premium themes or other builders. You simply load them into the builder, and can then customise every single part of the template visually in Elementor!
Footer widgets:
- Site Logo
- Site Title
- Page Title
- Nav Menu
- Search Form
- Sitemap
- Breadcrumbs
Page Templates
Within Elementor you can easily visually build templates that can be applied to any page, or collection of pages based on different parameters. So this means you can build separate templates to display on your Home, Service Page and Contact Page for example.
To build a single page template, open the Theme Builder and select Single Page. As you already know, there are widgets for everything, so creatively you can make anything you want!
If you don’t want to build a template from scratch, you can import a template from the Elementor Template Library and give yourself a head start. Once the template is imported, you can start editing visually, changing the design or functionality as you see fit.
Not only are there Templates, there are also Kits, which are entire template packs designed for various different industries.
For example, the Restaurant Kit contains templates for all the pages that a restaurant website typically needs. You can load in the kit, then customise any template that you like, adding or removing widgets, or changing the way existing ones work.
This really cuts down on the development time of your website. It’s like using theme demo content, but without all of the headaches! So whether you decide to start with a template, or build it yourself, creating page templates is a breeze in Elementor.
Blog
Building a blog in WordPress used to be a pain. It was one of the few areas (along with the header and footer) that couldn’t usually be built visually, and had limited options for customisation in most themes.
Over time this changed to some extent, and by combining some themes and page builders, more options for building blog templates without code emerged.
However, it wasn’t until Elementor introduced the ability to visually build templates for the Blog and Blog Single Post pages, that the entirety of the blog could be built visually without code.
Creating a blog template in Elementor just as easy as creating the template for any other page. Open the Theme Builder and select Archive to get started When you do this, you’ll be presented with a list of templates you can choose from to get started. These are all easily customisable, they use the Elementor builder after all!
However, if templates aren’t your thing, you can simply build your own blog. My preferred method is to create a new page template and then include the Elementor Posts widget on the page, customising and styling the widget and page until I’m happy to apply it as my archive page.
Archive widgets:
- Archive Title
- Archive Posts
- Author Box
Blog Post (Single Post Template)
The blog post template, or single post template as it is often referred to, is one of the most important parts of many sites.
Content marketing has long been a valuable marketing channel, and the ability for website owners to visually build their blog post templates was pretty groundbreaking when Elementor first unveiled the ability to build the Single Post template visually.
Building a template for the single post with Elementor is just as easy as building anything else. Open the Theme Builder as always and click on Single Post to start creating your template.
There are some great premade templates that you can customise and apply to your blog posts. If you like the look of one, import it and tweak it until it fits the design style of your website. As you’ll see below, there are a lot of unique single post widgets within the builder, so you are able to customise every aspect of your single post template.
If you want complete control over the layout and design of your single post template, you can create your own from scratch using the widgets provided in the Elementor builder and the built in customisation panels. Below is a list of the unique widgets available for creating a single post template.
Single Post widgets:
- Post Title
- Post Excert
- Post Content
- Featured Image
- Table of Contents
- Author Box
- Post Comments
- Post Navigation
- Post Info
If you did want to create your own single post template, I would recommend following along to my detailed step by step guide – How To Create An Elementor Single Post Template.
Forms
WordPress forms can be one of the biggest headaches when it comes to building your website. There are numerous WordPress form plugins, all of them promising ease of use and the ability to do everything you want.
But how many of them are actually easy to use? The answer is none! I’ve used them all, and when I found out that Elementor was releasing a form element that used the Elementor builder, I was over the moon!
The ability to build forms visually, without having to write nauseating lines of CSS to change the layout of fields from 1 column to 2 column? Sign me up!
Typically, to build forms in WordPress, you need to install either a free or paid form plugin, and then use a clunky WordPress dashboard interface to construct your form. Add your fields, add their labels, then the fun starts. Controlling how the form looks, and what it does on submission is a complex process, involving lines of CSS and lots of previewing the page.
<Insert GIF of Elementor form element)
Elementor removes all of this stress. Simply drag and drop a form module, then you can control how it looks the same way you would any other Elementor module. Typography, color, width of fields, actions to take on form submission. You couldn’t ask for a better form module.
So, no more need for any form plugins!
Sidebars
Find me a WordPress theme or another page builder that makes building sidebars as easy as Elementor, I dare you!
Another common pain point for building WordPress websites, and often the territory of the dreaded WordPress widgets section, is the sidebar.
Not with Elementor though! You can build your sidebar using the Elementor builder, just as you would build anything else! Drag and drop any modules you’d like into the sidebar, add your content, and customise how everything looks across all device types. Easy peasy!
There are actually two ways of building sidebars with Elementor. There’s the clunky way, which involves adding content in the Widget section, then populating the Elementor Sidebar element, then there’s the easy way, just building it all in the Elementor builder.
I prefer to do things the easy way, so I would advise simply creating a column that takes up 20-30% width and putting your sidebar content in the column. You can then save the column as an element, or save the page as a template, importing and combining it with other templates, or applying it where necessary.
When you are done, you can use Elementors built in display settings to specify where this sidebar displays, so if you want multiple sidebars, no problem!
Advanced Custom Fields
Sometimes on a WordPress website you’ll need to make use of custom fields, using the Advanced Custom Fields (ACF) plugin.
ACF is used when you need to manage dynamic content within a template. This means content that might change on every page, or on pages that meet certain conditions. For example, a call to action block might need to display different text depending on which product category it is displaying
This is an example of dynamic content, as the content in the block varies depending on where it is displayed. The template design stays the same, but the content changes.
To do this in Elementor is simple.
Elementor has built in integration with ACF, so you can do this directly from the Elementor builder. To turn a field from static content into dynamic content, create the field in ACF, then click on the Dynamic icon (pictured below) within the Elementor builder to match the two fields.
This is super useful as it allows you to build truly dynamic websites using Elementor + ACF, without having to write tons of code.
If ever you want to build a template and have the ability to control the content on individual pages, this would be a good use case for the built in ACF functionality.
Global Styling
How many times have you become frustrated that you couldn’t alter the typography on a specific part of your WordPress website?
In every premium theme, there are always things you cannot edit. Perhaps the parts of the website you want to edit are controlled via a plugin, and there are no CMS options that make it easy for you to customise the bits you want.
Or perhaps you are using a page builder combined with a theme, and there’s a conflict between what you want to happen in the page builder, and what the theme is trying to apply to your website.
Whatever the case, issues like this happen every single day with most WordPress websites.
However, if you’d built your website using Elementor and taken advantage of Elementor’s Global Styling you might not be having those headaches!
Why? Well, if you use the Hello Elementor Theme with Elementor, you aren’t going to have conflicts with your theme trying to override the styling you apply in Elementor for starters!
Secondly, Elementor provides you with the ability to control your color scheme and typography globally using the visual builder. You can also set the styling globally for your buttons, forms, images and layout here.
What this means, is that when using Elementor, whenever you insert an element or build a template, everything on the page inherits the global styles you setup in the Settings panel.
This is called inheritance, when you set stuff like your fonts, colors and styling globally at the highest level, it is passed down to all of the elements on your website, unless specifically overridden.
Why is this useful? Well, it means you don’t have to style every single element individually. It also means you’re not having to repeat the same tasks over and over, which can double, or triple the amount of time it takes to build WordPress sites.
But don’t worry, this doesn’t mean you are rigidly stuck with whatever the global settings are, every Elementor module contains the ability to override the global styling. So if you wanted to use a different font on a call to action block, or alter the color scheme on a specific problem, it’s no problem!
So you have complete control over how everything looks and feels on your website. Set up Global Styling in your Site Settings to limit the amount of styling you have to do on individual elements, then override this styling visually if you feel the need to on specific templates, pages or posts.
Responsive Styling
Elementor provides, by far, the most comprehensive responsive styling control out of any page builder or theme on the market!
This is because the Elementor builder comes with a built in, easy to use, Responsive Mode. On any page, post or template, simply click Responsive Mode to customise how things look and work on mobile or tablet devices.
In the screenshot above, I have activated Responsive Mode and selected Mobile. Now when I click on Elementor modules, or elements on the page, styling changes that I make will apply to the mobile version of our website only.
Within the Elementor editor, you’ll see in the screenshot below that there is a mobile device icon next to the settings, which indicates that these changes will apply to the mobile version of the website. If you click on these icons, a dropdown will appear, allowing you to switch between Desktop, Mobile or Tablet on the fly.
This is insanely useful, and saves so much time. The alternative is having to write CSS specific to mobile or tablet devices, and go through an endless preview process combined with a silly amount of cache clearing.
Not only can you apply device specific styling, but you can also hide or display modules, or entire rows, based on the device viewing the page or template.
So if you want to display certain content on desktop, or not mobile, no problem! There are often instances where designs, or functionality, that work great on desktop are not appropriate for mobile, and now managing this is an absolute dream.
Integrations
The last thing you want is a website bloated with plugins, right? This is where integrations come in. Let’s take a look at what Elementor integrates with out of the box.
| Integration | Elementor |
| Slack | Yes |
| Hubspot | Yes |
| Discord | Yes |
| Zapier | Yes |
| LearnDash | Yes |
| WooCommerce | Yes |
| Yoast | Yes |
| reCaptcha | Yes |
| Facebook SDK | Yes |
| Mailchimp | Yes |
| Drip | Yes |
| ActiveCampaign | Yes |
| Aweber | Yes |
| ConvertKit | Yes |
| GetResponse | Yes |
| ConvertKit | Yes |
| MailerLite | Yes |
| Adobe Fonts (Typekit) | Yes |
| Font Awesome Pro | Yes |
These are some of the most popular Elementor integrations, the list is endless, with a large number of 3rd party addons available for installation too.
Elementor already has so much built into it, that you can build most WordPress websites with Elementor and a small number of plugins. This is a far cry from the days of websites with 70+ plugins and a bloated premium theme!
The end result is, your site is faster, easier to maintain and more secure. Less plugins, less potential vulnerabilities!
WooCommerce
Building an online store used to be a clunky process that would almost certainly require a developer for most of of it. Most small shops opted for a premium WooCommerce theme with the most appealing demo layout for their store.
It used to be that you’d buy a theme, select the layout for your store, and customise what you could. Altering anything to do with the Shop, Single Product, Cart or Checkout templates was strictly the remit of a developer, and you had to make do with the built in CMS options provided for you.
The problem with this approach, is the same problem with all themes, it’s inflexible and your store will be constantly changing. If you’re using a premium theme with done for demo layouts, you’re going to need a developer to change anything moving forward.
Well, Elementor decided to change this, and what they did for the header, footer and single post, completely blew the lid off them! Built into Elementor are widgets for almost every part of your WooCommerce store, which means you can put together a Shop, Single Product, Cart or Checkout page that looks exactly as you want, without code.
There are even drag and drop filters that you can insert and customise for your shop and product archive pages.
Using Elementor with WooCommerce, there is now almost complete visual control over the design and layout of your store.
Combined with Elementor’s built in ACF integration, and some custom code, it’s now possible to build complex stores that are lean and easy to maintain, without breaking the bank. This is great news for small shop owners, who want the ability to control and customise their store, but don’t want to be stuck with something inflexible like a premium theme.
Elementor + WordPress = WordPress The Easy Way
Well, that was was quite a length explanation of why you should use Elementor.
But to summarise, here’s why using Elementor and nothing else to build your WordPress website equates to building it the easy way:
- You can build everything visually without code
- No “traditional” theme required
- There’s a powerful templating system with numerous display conditions, that doesn’t require PHP to use
- Lots of “out of the box” integrations with popular services
- Drag and drop widgets for everything
- Elementor connects the dots and lets you control all of the areas on your WordPress site that themes and other builders don’t (header, footer, single post, archive, WooCommerce).
- It’s not inflexible, like building with themes, where you are stuck with set layouts or options
- Large template library of free templates you can use to get started and customise
- Constantly expanding library of widgets and elements
- Huge support network and great documentation, with over 2 million users
So what are you waiting for? Put down the aspirin, pick up the Elementor!
