On-Page SEO Tutorial: How To Perfectly Optimize Your Website

On-Page SEO Tutorial: How To Perfectly Optimize Your Website

In this tutorial, I’ll show you the exact on-page SEO techniques you can use to outrank your competitors.

Although Google is getting smarter, you still need to optimize your pages if you want to show up as the most relevant result.

I have a few competitors in my niches who are not optimizing their site at all.

They have a much stronger link profile than me, and have amassed links for years before my site was even created. But my site is optimized much better, and I outrank them.

Want to learn how? Let’s dive in.

On-Page SEO vs. Off-Page SEO – What’s The Difference?

On-page SEO refers to the optimization of your HTML source code and content to rank higher in search engines for your targeted keywords.

Off-page SEO refers to increasing positive external signals pointing to your site such as backlinks.

Back in the day when I used to work with SEO clients, clients who had on-page SEO issues were my favorite to work with.

Why? Because they were the easiest to fix!

On-page SEO is totally under our control. We can fix issues instantly.

Off-page SEO, on the other hand, takes longer. You need to go out and “build” links on other websites that you don’t own, and the process is more complex and time consuming.

There are a LOT of websites out there with huge backlink profiles that don’t get a lot of search traffic.

The reason? Their on-site SEO sucks.

Just a few tweaks to your content and HTML source code can drastically increase their rankings and traffic.

Let’s go through what a perfectly optimized SEO article looks like.

On-Page SEO Starts With Search Intent

Before we start optimizing anything, we have to make sure that we’re not fighting a losing battle. Google is getting better and better at understanding search intent – what users are specifically looking to do when they make a search query.

search intent categories

If Google sees that searchers for a keyword are looking for ecommerce content, your informational content is not going to rank no matter what you try. And even if you do, it won’t last long. Your horrendous bounce rate will tell Google your page is not relevant for that keyword anyways.

It only makes sense that this is the very first place you start when optimizing any page for a keyword. Always try and maximize your understanding of what the search intent behind that keyword is before you create something around it.

Is the searcher looking to buy something or are they looking for information? Are they looking for quick or in-depth information? What pages are ranking already? Why are they ranking? What type of content would help the searcher answer their question fully and in the best way?

Once you understand that, we can begin the optimization process.

Create a Compelling Title With Your Target Keyword

A page has many HTML tags, but the title tag is the most important one. Your title tag is the most important on-page SEO factor. It’s what tells Google what your page is about, and it’s also what shows up in the Google search result.

title tag google search result

There are a couple of things you need to do with page titles.

First of all, you need to make them compelling so that people click on them.

Don’t write boring or vague titles that don’t immediately tell the searcher what your page is about. Instead, use descriptive and action-oriented words in your titles.

Here’s a really useful comparison that shows the difference between good and bad page titles.

difference between good and bad page titles

As you can see, the best performing titles have certain common characteristics for example they use numbers at the start, have an element of mystery, and powerful words that drive action.

Using the current year in your blog title also makes it stand out and generates more clicks.

Tell me which title would you click?

On-Page SEO Tips For Bloggers OR On-Page SEO Tips For Bloggers (2020)

Most users would click the second one becuase it gives you the impression that the content is more recent and updated.

The other thing you have to consider when creating titles is SEO. You have to use your target keyword in the title to tell Google what your content is mainly about.

It’s still surprising to me when I browse the web, and see a website with a super strong link profile. They should be ranking #1, no competitor should even come close to outranking them. But the title of their page is something like: “Main” and they’re nowhere to be found.

Keyword in title tag: If you want to rank for a keyword, the first and most important step is to have the keyword in the title tag.

Title tag character limit: Make your title tag too long, and it will be cut off by Google with ellipses. Today, there isn’t a total character limit. It’s totally user and device dependant. Ideally though, your title tag should be 60 to 70 characters in length.

Creating your title: Just because having the keyword in your title is important, doesn’t mean you should create title tags with JUST your keyword. You want to make it interesting so that people want to click through to your page rather than the others.

Here’s what you shouldn’t do:

bad example of title tag

Instead, go for something like this:

good example of title tag

The second one is much more interesting and detailed, and also accomplishes another very important thing…

Optimizing for related keywords: If you have room for more characters in your title, target another keyword that’s closely related. In the example above, I fit in “Create Articles That Rank” alongside my main keyword.

If I can get this page to rank for “on-page SEO” then I have a high chance of ranking for the other one as well.

This is something I do a lot, and it makes a big difference in how many keywords your article ranks for, and drives more long-tail traffic to your page. Don’t go overboard though. It has to be very closely related to your main keyword.

Entice A Click With Your Meta Description

What’s a meta description?

It’s the snippet of text in each Google search result that describes what the page is about.

meta descriptions

The meta description isn’t a direct ranking factor, so it’s not a huge issue if you don’t optimize it. However, it can help increase your CTR in the search engine results.

The best method of writing a meta description is to try and convince the searcher why they should click on your page rather than the others. Think of it like you’re writing an ad description. The more enticing it is to the reader, the higher your CTR is likely to be.

NOTE: Even if you write the perfect meta description, Google often shows other content from your page within the description depending on what the user is searching for.

Create A Short And Simple URL With Your Keyword

Shorter is better. Try to keep your URL’s short and concise, and try not to bury content deep in multiple directories.

Just keep in your main keywords, and cut out everything else.

You can edit your URL’s in WordPress here:

url structure

As you can see, my title is really long, but my URL has been edited to be short, and contain only the main keywords.

*This isn’t a major issue. Having reasonably long URL’s are not going to hurt your Google rankings. However, it’s just good practice to get into the habit of creating clean, keyword-focused URL’s.

You can read more about good URL structures for SEO here.

Use Header Tags To Tell Google About Your Subtopics

Headers are simple. Whatever you put into your title tag should be wrapped in an H1 tag on the page. If you’re using WordPress, your title will automatically be used as your h1 tag in most cases. But you could still change it up a little bit using an SEO plugin like Yoast.

The rest of your headers should be H2, H3, H4, H5, H6.

Personally, I usually never use anything beyond H2. I only use H3’s when I need to expand further on a topic within the H2 subtopic.

Like this:

header tag example

As you can see above, the H3 subtopic is still within the H2 subtopic of goals. Header tags are also a great way to improve your user experience on the page. Headers give your page depth and organization. They guide the user through the article.

A few things to note:

1. There should only be one H1 tag on a page.
2. Don’t skip header tags. Don’t use H1 and then H4’s throughout the page. Go in order of importance/significance.
3. It’s not essential to use multiple header tags in a page, but don’t forget the H1.

And lastly…

No keyword stuffing for h2 and h3 tags – keep it simple

Use Wikipedia, one of the best examples of a website that does on-site SEO correctly, as an example. They don’t use the the main keyword in their h2 and h3 header tags.

header tags
header tags
header tags

It’s not: “SEO history” OR “SEO as a marketing strategy” OR “White hat SEO vs black hat SEO techniques”.

I see a lot of people excessively stuffing keywords into all their header tags. There was a time when this worked, and it was recommended to do so. Today, especially after Hummingbird, there’s really no need to do this kind of stuff.

If you have too high a keyword density, it can hurt your rankings.

Sometimes, you can’t help but use the keyword all throughout the page. If you’re writing naturally, that’s fine. But if you’re excessively stuffing keywords into all your header tags just because you hope that it gives you a rankings boost, you’re potentially putting your rankings at risk.

Should you focus on keyword density at all?

No… but not entirely.

What I like to do is to write naturally first and don’t focus on keyword density at all. When I’m outsourcing content, I’ll tell the writer to ignore keyword density.

After the article is completed, I’ll either replace synonyms with keywords and LSI keywords if the density is too low, or I’ll remove them and add synonyms if it’s too high.

If you’re unfamiliar with LSI keywords, Ankit does a great job of explaining them in this article.

Don’t forget image alt tags

Using images makes the article have a better user experience. It’s much more enjoyable to read content that has images than it is to read hundreds of lines of pure text.

But a lot of people forget to optimize their images with proper alt tags.

Setting alt tags to images gives Google another indication of what your page is about.

How to use the alt tags: For the first/feature image of a blog post, I’ll put in my keyword as my alt tag. All other alt tags should be used for describing the image. Don’t stuff them with keywords.

Use LSI keywords: Using images to add LSI keywords is one of my favorite on-site SEO strategies. Don’t stuff your main keyword into every alt tag. Instead, use it as an opportunity to add even more LSI keywords into your page.

For example, for the image I used earlier:

header tag

I set the alt tag as “wikipedia use of header tags”:

image alt tag example

It clearly describes the image while using an LSI keyword that isn’t my main keyword.

Embed Relevant Videos To Increase Ave. Session Duration

Ave. Session Duration indicates the time an average visitor spends on your website.

If this duration is higher, it tells Google that your visitors like your content and find it relevant to their interest.

It is one of the ranking factors Google uses to evaluate sites.

Embedding relevant videos to your content is an easy way to increase your site’s ave. session duration.

Brian Dean, a leading SEO expert, regularly embeds relevant videos within his blog content.

embed relevant videos

If you don’t have original video content, there’s nothing wrong with using third-party videos from YouTube as long as they’re relevant to your content.

This simple strategy not only increases the perceived value of your content but also positively impacts your search rankings.

Use Your Main Keyword Early On In Your Article

Go through any of Wikipedia’s articles, and you’ll notice that they always have their main keyword as the first word, and that it’s bolded.

SEO keywords
keyword snowboard bolded
keyword bolded

You don’t need to go that far, but you shouldn’t be 1000 words deep into your content before you bring up your main keyword for the first time.

For best results, use it as early on as you can. For me, I always try to use the keyword in my first sentence.

Create Long-Form Content With Search Intent In Mind

Longer content ranks better.

Based on studies by Moz and BuzzSumo, longer articles tend to get more links and shares.

And this study by SerpIQ analyzed the top 10 search results for over 20,000 keywords and noticed that on average, content ranking on the first page of Google had over 2000 words.

content length and rankings

While optimum content length varies depending on keyword difficulty, and type of keyword, it’s fair to conclude that long form content is the way to go if you’re serious about ranking for anything (especially informational keywords).

For standard blog posts, I try to keep my articles between 1800 to 2500 words in length.

The type (and length) of content you create depends on search intent. It largely depends on the scope of the topic, and keyword. For some topics, it just doesn’t make sense to have so many words.

Google algorithms have evolved over the years and consider lots of different search ranking factors while evaluating a site.

But backlinks are still among the most important ranking factors.

According to a study by SEMRush, there’s a direct relationship between the search ranking of a site and the number of domains pointing it.

study by SEMRush

I have covered various backlinking strategies on this blog before.

But getting backlinks becomes much easier when you create link-worthy content (content that actually deserves to get backlinks).

How do you create such content?

With a few simple changes to how you create content

i) Back your arguments with data and research

You can instantly make your content more link-worthy by adding more stats and linking to credible third-party research.

A study by Link-Assistant found that 70% of marketers use Data/Research-based content for link-building.

A study by Link-Assistant

Whenever you’re making an argument or sharing an opinion in your content, search Google to see if you can find any research or numbers to back to your argument.

This makes you content more credible and as a result people mention it in their content and link back to it.

If you have a large email list or social media following, you can also generate primary data by running surveys on your audience and sharing the results in your content.

ii) Share case studies and examples

Examples and case studies have the same impact as numbers and data.

They also add credibility to your arguments and make your content more link-worthy.

If you’re running an agency, share client experiences or case studies of how you helped them improve performance.

If you don’t have your own case studies, share relevant examples from your industry to back your argument.

iii) Create long, in-depth, and actionable content

I’ve already discussed the importance of creating long and in-depth content for SEO.

part from helping you rank for your target keywords, longer content also gets more backlinks.

Hubspot found in a study that articles longer than 2500 words received the most backlinks on their blog.

Word Count vs Linking domains

It makes sense as well becuase longer content covers a topic from every angle and gives the readers a lot more value.

But don’t increase your word count just for the sake of it.

Add genuine value to your content so that your readers benefit from it.

iv) Add visuals to your content

Here’s an easy way to get backlinks.

Find any research, study, or raw data and turn it into an infographic or image that describes the same study visually.

KissMetrics used infographics to get more than 41K backlinks to their site in just two years.

Canva and Visual.ly are pretty awesome tools to create infographics and attractive blog images for free.

If you can’t create images yourself, use cropped sections of third-party infographics in your content like I’ve done (but don’t forget to link back to the original source).

It not only makes your content more engaging but also results in more backlinks because people tend to links back to your content when sourcing images instead of the original image creator’s site (I’m speaking from experience).

What’s one of the biggest signs of unnatural linking? Having all your links pointed at just your homepage.

One of the keys to building a successful blog these days is to make sure that your links are spread out throughout your domain.

It’s just natural.

Don’t just build links to your homepage. Build links to your internal pages as well.

It’s a tough concept for people new to SEO to understand why building links to page X helps increase rankings for page Y.

It’s one of the reasons why broken link building is so effective, and one of the reasons people like Neil Patel invests thousands of dollars creating infographics.

His infographics attract a lot of links and shares.

But these links usually point only at the page the infographic is on, not other pages he’s trying to rank.

So how does that help rankings for other pages?

Your domain authority increases and you build more trust to your site overall. This in turn increases rankings across the board for your entire domain.

Of course, make sure to set up your internal links on those pages so that they pass this link juice to the pages you want to rank higher.

You should be interlinking your blog posts whenever possible.

Proper internal linking is probably one of the easiest (and fastest) ways to improve your site’s SEO.


  • Internal links helps improve your link flow to individual pages on your site, helping them to rank better.
  • The anchor text of links helps Google to understand the context of a webpage and to rank better.
  • Internal links help Google Bots crawl and access different parts of your site.
  • Internal links also improve user experience by providing them with more information on certain topics. That in turn increases your user metrics such as bounce rate and time on site which are all ranking factors.

When you publish new articles, link to your older articles wherever you can. And you should also make it a habit to go back to older articles and link to your newer articles.

When I’m onboarding new writers, one of my criteria is to use and link to as many sources as they can.

Linking out to helpful external sites is just a better user experience overall.

So you should do it more often. You won’t lose your rankings by linking out to a helpful resource. If anything, it will make your own content more credible and trustworthy.

For instance, I love reading content like this articles by Forbes because there are links everywhere.

When I read a sentence that intrigues me, and I want to learn more, there’s usually a link to another page which extensively covered that story.

links on forbes

Now, that’s a helpful external link!

Know what I’m thinking after reading it?

Forbes really did their research and covered this story thoroughly. I trust this site.

When you write an article, you’re NOT the only authority on every single sub-topic within the article. There are other places where people can go to learn more.

Link to them.

Don’t be a dead end on the internet. Link out to helpful sites. Credit sources where you got your information. Outbound links in relation to your rankings is pretty well explained in this video by Moz.

Should you nofollow external links? Ever know somebody who’s super cheap? Don’t be that guy. Nofollowing every external link in fear of sharing link juice is pretty much like being the cheap friend who is stingy about spending a dollar more than their fair share.

Share the link love! You won’t lose rankings for linking out to helpful sources on the internet.

One of my favorite things about a Wikipedia article is how they organize their content with in-page links.

I’m talking about this thing at the top of every article.

in page links

It’s a great user experience because it allows you to preview all the major sub-topics within the content, and then jump straight to the section you’re interested in.

It’s the perfect way to format organize really long pieces of content.

For example, I created in-page links for my outreach link building guide because it’s over 10,000 words long.

inpage links

Creating in-page links is really easy to do.

All you need to do is create links and ID’s throughout the page by following this guide.

NOTE: Creating in-page links is probably not the best thing to do on pages with less than 1500 words. It’s short enough that people can just easily scroll through everything. But if you have pages that are over 2000 words long, it’s a nice feature to add on.

Write Naturally For Your Readers

Don’t write for search engines. Write for people, then optimize for search engines afterwards by going through the techniques we just learned.

Don’t pay too much attention to keyword density. Sometimes, your keyword density will be higher than others. That’s just due to the nature of the keyword. There isn’t a “perfect” keyword density you should be shooting for.

Instead, check to see how it reads after right before you publish it. If it sounds weird because you’re stuffing keywords everywhere, then use pronouns or LSI keywords to remove some of your keywords.

If you notice your keyword isn’t mentioned enough, then sprinkle it in a bit more.

As long as it reads naturally, you’ll be fine. Focusing on keyword density will hurt most people more than it helps them.

Format Your Content For Maximum Engagement

No matter how well you write, most of your readers won’t completely read your articles.

They’ll simply skim it for the information they’re looking for.

If you want them to find value in your content, you need to format it so that it’s easy to skim and scan.

Why is this important?

Apart from giving value to your readers, proper formatting improves the ave. session duration of your site since the readers stay longer to read your content. Plus, it results in more social shares, comments, and clicks on the CTAs in your content.

How do you format your content the right way?

  • Nail The Introduction Paragraph

Blog article introductions are different from the essays you were taught to write in high-school.

Blog readers don’t have time so you need to get straight to the point.

However, to engage them and keep them interested, start with a question or a bold statement that immediately captures their attention.

Here’s a really good example.

Formating Content for maximum engagement

The writer starts with a big claim and then goes on to prove it with numbers.

Why wouldn’t you read a blogging guide from someone who has built multiple six figure blogs?

In short, make your intros impactful.

Don’t drag them too much (100-150 words max).

Just tell the readers what your content is about and why they should read it.

Then jump right into the meaty part of your article.

  • Use Short Paragraphs

You’ll lose your readers pretty quickly if your write in the conventional book format that uses long paragraphs and large text blocks.

Blogging is different.

Use short paragraphs, 2-3 lines max., and make it easy for readers to skim over your content.

The concept of paragraphs is different in blogging. They’re not distributed based on the topic. They’re simply there to make your content more readable.

Look at the passage you’re reading right now.

You’ll even find 1 line paragraphs.

Because it makes reading easier.

  • Use Sub-Headings For Easier Navigation

I’ve already covered this part so I won’t repeat everything.

Like paragraphs, make sure you have lots of sub-headings (H2, H3, H4) throughout your content.

It makes it much easier for readers to navigate your content.

  • Use Lists And Tables To Communicate Faster

Lists are easier to remember for your readers as compared to long paragraphs.

If you’re sharing tips or instructions in your content, try using lists so that your readers can remember them.

The same goes for comparison tables.

They’re much easier to remember and help you communicate a lot of value in fewer words.

Plus they make your content more engaging.

  • Use Bold, Italics, And Underlines To Highlight Important Parts

Use these common formatting options to highlight the important points in your content that you want your readers to remember.

These are effective but highly underutilized techniques to make your content engaging and more readable.

Making them a part of your writing style will give you immediate returns.

Optimize Page Speed To Improve Rankings

And lastly, page speed. If your page takes forever to load, you’re going to have a really high bounce rate.

Even a one second delay in page load time can decrease your page views and conversions by a significant amount.

On a mobile device, Google recently reported that on a mobile site, as page load time goes from one second to five seconds, the probability of bounce increases by 90%.

The fastest way to increase your page load time is to switch to a high end hosting company.

If you don’t want to increase your hosting budget by hundreds of dollars per year, you can also use Cloudflare (free) combined with a caching plugin.

Here were my results when I implemented CloudFlare with a caching plugin:


page speed before


after page speed

Only took 10 minutes of work, and it was compeltely free.

Read this tutorial if you want to do the same: How I sped up my website by 362% in under 10 minutes.

Update Your Content Regularly To Stay On Top Of Search Results

Google wants to serve fresh, relevant, and high-quality content to its searchers all the time. This is why content freshness is one of its core search ranking factors.

It makes sense as well.

For example, if I am searching for the best travel destinations today (2020), it doesn’t make sense for Google to show me 2-3 year old content.

According to Moz, content degrades with time and needs to be updated regularly to stay relevant.

content freshness on page seo

There are a couple of ways you can keep your content fresh and stay on top of Google search results for your target keywords.

First of all, make updates a regular part of your content calendar.

There’s no ideal update frequency since it depends on your niche. For example, news and current affairs sites update their content every few hours.

You can’t do that with a marketing or corporate blog.

You could decide a frequency for reviewing older content (for example quarterly or bi-annually) based on your niche and make updates to keep your content fresh.

Add new data or reference new studies, share new tips, or expand the older ones, share new examples, etc.

Don’t try to game the system by changing the order of different paragraphs in your article or changing the title only.

Make genuinely useful updates if you want your content to be considered fresh.

Secondly, use Google Structured Data (Schema.org) to tell Google when your content was last updated.

Schema is a piece of code that helps Google understand the various aspects of your web page.

You can use this free schema markup generator to create the required code and copy/paste to your site’s header section.

Once you do this, Google will show the last modified date of your page in search results.

Use “People also ask” For Easy On-Page SEO Wins

In response to most search queries, Google Search shows a “People also ask” section” that lists the most common questions people are asking about that topic.

People also ask google

These are proven topics that your audience is searching for.

Here’s how you can use them in your on-page SEO strategy.

  • Search for your target keyword in Google.
  • Note down all the relevant question from the “People also ask” section
  • Answer those questions in your content.
  • Use the questions in H2/H3 tags where relevant.

Apart from this, add an FAQs section at the end of your blog articles and answer all the relevant questions you can find in “People also ask”.

Also, use the FAQ schema markup code on your page to display your page’s FAQs in Google Search results (you can generate the FAQ schema with the same tool I mentioned earlier)

FAQ schema markup code

As you can see, the result with FAQs stands out in the SERPs.

However, don’t use this approach for pages where adding an FAQs section doesn’t make sense.

For many search queries, Google shows a featured answer box at the top of the search results.

Google shows a featured answer box

This featured answer snippet (also called position zero) is second only to position 1 in terms of the average number of clicks by searchers.

How do you optimize your content for position zero?

There’s no fixed formula becuase Google can pick results for the featured snippet from any of the top 10 search results for that keyword.

But based on experience, here are a few things you can do to rank for position zero.

  • Target the questions related to your main focus keyword
  • Include all the relevant questions from the “People also ask” section of Google Search in your content
  • Use the Inverse Pyramid Approach to content creation which means you’ll briefly asnwer the most important questions after the initial introduction section of your article. You can answer those questions in more detail in the later sections.
  • Use H1, H2, H3, H4 tags in proper order throughout your content body.
  • Add an FAQ section in your content as I’ve mentioned earlier in this article.
  • Structure your answers according to the needs of your audience. For example, if a question requires you to compare different products, use comparison tables. Other questions types might require simple text or lists.

Following these tips won’t guarantee you a featured answer spot, but it would certainly improve your chances.


Optimizing your on-page SEO is very important. And the best part is, it’s easy. Anybody can use go through this tutorial and implement these techniques even if they’re not an experienced SEO.

Although writing high quality content and building strong backlinks are what mainly help you rank higher, you can’t forget to optimize your pages for your keywords. For a lot of websites I’ve come across out there, it’ll be all you need to do to drastically improve your search rankings.

Elementor Page Builder Review & Tutorial 2021

Elementor Page Builder Review & Tutorial 2021


  • Core product is 100% free
  • Great user interface
  • Global widgets are awesome
  • Open source
  • Active Facebook group
  • Extreme customisation
  • Regular updates


  • Forced styling by default
  • Global vs static templates can be confusing
  • Lacking some marketing-oriented features
  • Less page templates than some competitors

What Is Elementor?

I remember when I first heard about Elementor.

From the context, I couldn’t really tell what it was.

And weirdly, all I could think of was the Dementors from Harry Potter.

Dementors Harry Potter

After binging on all eight movies that weekend, it wasn’t long before I noticed more and more people talking about it.

Elementor this. Elementor that.

Now I really had to find out what it was. And this time, I wasn’t going to let my imagination get the better of me.

So I blasted open a new tab, shimmied over to Google and punched in the word “Elementor”.

To my disappointment, I realized it was just ANOTHER WordPress page builder.

It didn’t make sense.

How could everyone be so excited about a WordPress page builder? I mean, it’s nothing we haven’t seen before.

Could it really be worth the hype?

Our Elementor Review

Elementor User InterfaceElementor User Interface

Elementor isn’t the new kid on the block anymore. It’s a fully fleshed, constantly evolving website builder, with a lot of aces up its sleeve.

Despite stiff competition, it has quickly become one of the most popular, visual page builders for WordPress, and it continues to grow at a rapid pace.

Since it’s release in mid-2016, Elementor has had over 5 million installs and an impressive 4.8 star rating on WordPress.org.

People clearly love it — but is this just the latest fad, or is Elementor truly the ultimate page builder for WordPress?

Let’s find out in our Elementor review.

The Good, Bad, And The Ugly

For this review, I fired up Elementor to see how well this page builder fares in comparison to popular alternatives.

From here on out, I’ll share my experiences using this tool, as well as what I liked and didn’t like along the way.

Let’s do this.

Installing Elementor

There’s nothing worse (well almost nothing) than wanting to test a new WordPress page builder and running into technical issues when you’re trying to install it.

Adding Elementor to your WordPress install is as easy as adding any other good plugin:

Elementor Plugin Installation

If you’re lucky enough to own the Pro version, installation here is also easy peasy. Just download your installation ZIP file, upload it via the ‘Add Plugins’ screen and away you go.

This is a lot easier than the process certain WordPress page builders follow, including the one I had to upload via FTP.

If you’re not familiar with FTP, it’s what Fred Flintstone used to upload his page builder plugins.

N.B. Elementor Pro is an “add-on” for the free version of Elementor i.e. you need the free version installed for the Pro version to work.

The User Interface

Before we dive into the nitty gritty of the Elementor user interface, we want to give the developers props for an innovative addition – the Elementor Finder.

Elementor Finder

One of the biggest problems most folks have with page builders is that making a change to a page or section means a lot of clicking around, or having to manually exit to the WordPress dashboard.

This not only eats up a lot of time, but can be really, really frustrating too.

Never fear, Elementor Finder is here.

Press CTRL + E (or CMD + E on Macs) to bring up the ‘Finder’ search window:

Elementor Finder

You can also access Finder from the main Elementor menu:

Elementor finder in the main menu

Once you have Finder open simply type in what you’re looking for and it will show you a list of available options:

This provides you with an easy way to jump between different settings, pages, posts, pop-ups or sections.

But – and I’m really nitpicking here – it doesn’t allow you to “find” widgets.

Why Elementor? Why!

Anyhoo, apart from that I love this new feature.

Pro Tip

If you want a list of other shortcuts you can use within Elementor then use Ctrl + ? on Windows, or CMD + ? on Macs.

Elementor Shortcuts

The Elementor Side Panel

As with most page builders, the side panel makes up the bulk of the tools interface.

I think this format works well, especially for visual page builders, because it doesn’t take up too much space on the screen – which is obviously important in this case.

Elementor Side Panel

A nice touch is that you can also expand or contract the panel by dragging it.

I must admit, this is something I only realized after several hours of using the builder… *blush*

Contracting the panel gives you more space to work with and doesn’t sacrifice usability in any way.

Really handy.

I almost feel like they could have taken this further and have the element icons default to a list, allowing the panel to shrink even more.

Clicking the little arrow on the side panel slots it away completely, allowing you to preview the page.

Of course, you can’t edit the page in preview.

how does Elementor side panel work

This might seem like such a small thing, but the speed and simplicity of being able to preview like this was huge for me.

Pro Tip

You can also press ‘Cmd + P’ on a Mac, or ‘Ctrl + P’ on a PC to quickly slide the side panel in and out of view.

Pretty much everything the tool has to offer is done through this panel, so let me run you through it.

In the top left, you’ll find the page settings.

Elementor Side Panel settings

(Don’t worry, I’m going to pick this apart soon).

At the bottom, you have several more options:

Elementor Bottom Menu
  1. Settings
  2. Navigator
  3. Revision history (their version of ‘Undo’)
  4. Responsive mode (preview on desktop, tablet or mobile)
  5. Preview changes
  6. Ummm….saves or updates your changes

And finally, clicking the grid icon in the top right corner will take you back to the elements library:

Elementor Elements Library

As for adding different elements to your content, it’s just a case of dragging and dropping them from the library straight onto the page.

No complaints there. The Elementor page builder lives up to the hype so far.

Section Navigator

Another nice touch is the ‘Section Navigator’ feature. It’s a floating window that allows you to quickly jump between different sections of your layout.

You can also right click on any element from within the ‘Section Navigator’ and start editing it.

Elementor Section Navigator

Preview Changes

When you update your layout, it automatically updates in the Preview window.

Not having to manually refresh a second browser tab to check for changes to your layout is such a simple idea, but a huge time saver for designers and marketers.

I must admit, it did take a little while to get used to where everything is, but that’s only expected when switching from another page builder.

Overall, the initial user interface is clean and super easy to use.

Layout Options & Columns

Being able to create specific layouts is what page builders are all about.

So how does Elementor measure up?

To begin creating a layout, you’ll first want to ‘Add New Section’ from the content area.

Adding New Section in Elementor

(We’ll cover the template stuff later)

Clicking the purple ‘add new section’ button brings up a little layout option.

New Section Layout Options

At first, I didn’t think it made sense to have to go through this every time you add a new section, but simply dropping an element onto the page will default to a single column section anyway.

It’s being aware of these nuances that tend to speed things up with page builders.

So let’s say I want a 2 column section.

How to Add 2 Column Section in Elementor

Piece of cake.

And adding more columns to a section is also straightforward.

Just right click the column button for any element and you get the option to add an extra column.

how to add a new column in Elementor
3 column section in Elementor

And because columns are contained within sections, you can easily stack columns to create more complex layouts.

Elementor Columns Contained With Sections

Another useful feature is being able to create extra columns by dragging and dropping elements into place.

All you need to do is drag the element using the ‘column’ button, and you can squeeze it in virtually anywhere.

how to add an extra column in Elementor

So far so good. Using Elementor seems like a blast.

But what about adjusting the width?

Again, pretty straightforward.

Just hover over an element to reveal the border, then drag the side to increase/decrease width.

How to Adjust column width in Elementor

Finally, there’s is a ‘Inner Section’ element in the sidebar (which defaults to 2 columns) if you prefer to do it that way.

Inner Section element in Elementor

Overall, I found the layout options worked well and I can’t see any obvious areas where it falls short.

Editing & Forced Styling

Now, let’s go a bit deeper and talk about the editing / styling experience.

Earlier versions of Elementor had this annoying thing where you could only edit elements from within the side bar.

That’s now in the distant past.

And let me do a quick side note here – we’ll get back to your ordered Elementor review section in a bit.

I want to point out that Elementor is one of the best page builders specifically because of the constant updates. We’ll talk more about their most recent update throughout this piece, but let me give you an example:

The Elementor 3.0 update came packaged with a lot of performance improvements, since it was a big complaint from some customers in the past.

That’s what you get with Elementor.

Now back to modifying page elements.

Editing elements is now as easy as you’d expect from a page builder as popular as Elementor.

For example, text editing and styling can be performed either inline, or from the sidebar.

inline and sidebar text editing in Elementor

Why offer two ways to achieve the same goal?

Because people are creatures of habit. This way, the builder supports any workflow people are used to.

You can also access the ‘Style’ and ‘Advanced’ menus without having to leave the same tab.

Advanced style Formatting In elementor

From my point of view, I much prefer this approach to editing text because I can view my layout and text “live”.

Other elements – like images – can only be manipulated from within the sidebar, but that makes perfect sense because you can preview your changes as you make them.


Elementor also deserves additional praise for its text styling options.

It might seem like a trivial thing but I really appreciate the fact they give you so much control over how text elements work.

You’re not just given options for font size, bold, italic and underline.


Elementor allows you to tweak things like letter spacing, line height, and even set a drop shadow for your text.

Elementor style settings

Okay, drop shadows are a bit 2002, but I still have a soft spot for them.

And then you need to nod in appreciation of the fact Elementor also includes text styling options in the form of ‘Blend’ modes like luminosity, lighten, darken, etc.

A free page builder that gives you this level of control over your typography is pretty much unheard of.

Gotta love it.

Forced Styling

But there were problems, like why were my headings blue?

Going into the ‘Settings’ menu, it became apparent that Elementor has its own styling options, completely ignoring the styling of my theme.

Forced Styling in Elementor

I’m still not sure why Elementor would force a color scheme on you by default.

Same goes for fonts. I like my fonts.

Don’t touch the fonts, okay?

Elementor took user feedback on board, so now you’re warned that your theme settings might be hijacked, and you can also switch off Elementor’s default colour schemes.

So, if you activate a theme that recognizes Elementor (Hestia for example), you’ll get this popup that allows you to stop Elementor overriding your theme’s settings.

Elementor default styles

And we can double check the ‘Settings’ menu to confirm this.


disabled color palettes in Elementor

If you do run into a problem where Elementor has taken control of your default theme styling for fonts and colours,fear not – all is not lost!

Simply go into the ‘’Settings’ menu and choose ‘Discard’ for both colours and fonts.

Elementor global fonts

And you can go one step further.

From within the ‘Settings’ menu choose ‘Dashboard Settings’.

Dashboard Settings in Elementor

Now you’re just two mouse clicks away from stopping Elementor’s styling hijack dead in its tracks.

global Style Settings in Elementor

Oh the drama!

And look.

I don’t want to take anything away from Elementor here — it’s GREAT that you can even set different colors/fonts for individual pages — I’m just not overly keen on having these set as a default.

However, with Elementor’s most recent update (Elementor 3.0, released on the 30th of September 2020), they added even more styling options.

Global Design Options

In Elementor 3.0 you have access to a Global Design System.

Basically, this is a way to unite all of your pages under one styling umbrella, with features like global fonts, colors and a few other functionalities.

Global Design Options In Elementor

“Site Settings” is the dashboard you can use to find most of these options, and they’re a breath of fresh air for web designers using Elementor.

Elements / Widgets

So let’s talk about the actual elements (or widgets) within Elementor.

list of basic elements in Elementor

These are the little building blocks you use to piece your content together, and Elementor offers a generous library to choose from.

If you have the Pro version of Elementor, then you’ll also have access to these additional widgets:

Elementor Pro Elements

It’s also nice to see that Elementor supports standard WordPress widgets, as well as any third-party widgets you may have installed.

WordPress widgets in Elementor

Overall, it’s definitely not a bad selection but it’s far from complete.

Especially in comparison to some other WordPress page builders.

The Question is, what’s missing?

Well, it can sometimes be hard to know until the moment you need to perform a particular action.

For example, let’s say you’re putting a roundup review post together and you want to finish it off with a nice comparison table.

Guess what?

Elementor doesn’t have a table element.

Elementor Table Element Comment

For the moment, if you want a table you’ll have to install another plugin – like TablePress – and paste the shortcode into Elementor.

This isn’t a huge deal, but hopefully they include a built-in table widget in a future release.

You also have the option of installing the Ultimate Addons For Elementor plugin, which adds a table widget, and a ton of other cool features too. This isn’t a free plugin, but you get a lot of value for money here.

Now, speaking of value for money, Elementor just happens to be an open source page builder.

The first of its kind. The breaker of chains. The mother of Dragon…never mind.

Game of Thrones fan here.

Being open source means third party developers can create widgets, templates and blocks for sites built with Elementor, all resources that you can find for free, or for a fee, on the WordPress plugin market.

This presents any marketer with their own dev team/person with a business opportunity – developing addons for Elementor.

Elementor has an active community of over 61,000 members, so that’s a huge market for you to tap into.

How do you come up with ideas for an addon for Elementor?

Find something you don’t like about it, and have your dev create a solution to resolve that issue 🙂

Saving Time With Widgets

When creating a complex layout for a new site, it can be super useful to drop in a group of pre-styled elements.

For example, in Thrive Architect, I can quickly drop in a pre-styled, call-to-action element like this:

Thrive Architect pre-styles call to action element

Sure, the design itself is pretty basic but it’s more than enough for most people.

And, most importantly, it only took a second to drop onto the page.

In its early days, Elementor used to struggle with this. It didn’t feature the same amount of pre-made elements, and if we’re honest, it’s still not quite there yet.

When talking about resources or templates, Elementor can lag behind competitors like Thrive Architect or the Divi Builder.

But is it enough to compete with the likes of Thrive Architect? (Check out our Thrive architect vs Elementor comparison if you want to find out more.)

Yes, definitely. Elementor is a phenomenal choice, especially if you’re an experienced developer and web designer that wants more control over their workflow.

But that doesn’t mean it’s perfect. We aim for a fair Elementor review, so do consider the fact that Divi has an incomparable amount of page templates, and Thrive Architect has features and widgets that are better suited for marketers.

It struggles to find its focus.

It can feel like it’s trying to cater to everyone.

But it’s getting better at this with each update.

Another potential solution for a perceived or actual lack of templates is to use something like the Envato Elements plugin.

You get hundreds of free template “kits” and blocks you can import directly into Elementor for later use.

Envanto Elementor Element

Do remember, however, that this can have an impact on your site’s backend. Mixing so many elements from a lot of plugins can make your site hard to load. So don’t overdo it.

That said, I do think Elementor covers the basics really well and if you don’t mind installing a handful of additional plugins, it does an excellent job at handling everything else.

Now let’s continue with our Elementor review.

Global Widgets

As you might expect from any page builder these days, Elementor allows you to create custom ‘widgets’ from your content elements.

(These are different from page templates, which we’ll cover soon.)

So let’s say I’m using an ‘icon box’, and I’ve styled it exactly how I like.

Icon Box Widget in Elementor

If I wanted to use it again the future, I can save this (now custom) element to my library.

All you have to do is right click the element, and then click ‘Save As Template’.

You’ll then be presented with a popup window.

Pop in a name, hit ‘Save’, and your custom element will be added to your library.

How To Save Widget As Template in Elementor
Global Elements in elementor

The element you saved will also have a yellow border to indicate that it’s a global widget.

At this point, you can use the global widget on any page (or even again, on the same page) by going to the global widget tab.

Elementor global widget list

Okay, so that’s how it works, but let’s get practical.

What if you want to make changes to your global widget?

Well, if you click the widget you’ll notice a few things in the left pane.

making changes to global widgets in Elementor

First of all, the global widget is locked.

That means you can’t edit it or make styling changes as you would with a regular element.

You can temporarily unlock the element by clicking the ‘Edit’ button, which will apply your changes to this global widget across ALL your pages.

So what if you want to make changes to the widget without applying those changes globally?

That’s where ‘unlinking’ comes in.

Elementor Global Widget Unlinking

Clicking this button will effectively convert your global widget into its normal, ‘elemental’ form.

You’ll notice the yellow border turns back to blue, and you can make changes as you normally would within Elementor.

Elementor Global Widget Editor

And what’s great about using global widgets with Elementor, is that they can be used virtually anywhere throughout your site.

If you no longer need a certain widget then they’re equally easy to remove.

Just head over to your WordPress dashboard, click ‘Templates’, ‘Saved Templates’ and then highlight whichever widget you want to send to your digital trash heap.

saved templates in Elementor


Elementor shortcodes

Elementor shortcodes work on pages, regardless of whether or not they’ve been built with Elementor.

And there’s even a dedicated WordPress widget for them.

Elementor Library WordPress Widget

Using this, you can easily design “call to actions” within Elementor, and then have them display globally in your sidebar.

Here’s an example from Copyblogger.

Elementor Global Element In Sidebar On Copyblogger

Overall, Elementor handles global widgets really well.

In fact, it does it far better than some other “premium” page builders.

The shortcode feature makes it easy to mix plugin elements, widening your toolset and helping you personalize pages.

Section Templates

This kinda follows on from the ‘Global Widgets’ feature we just covered above, but ‘Sections’ do work a little differently.

So what exactly is a ‘Section Template’?

It’s basically a container, marrying individual elements in a given section to give you control over the group as a whole.

Example of Section Template in Elementor

To save myself having to recreate the same sections over and over again, I can simply save them as a ‘Section Template’.

save as template in Elementor

We’re saving the entire section because my call-to-action is made up of several individual elements.

So, I’ll just give it a name and hit ‘Save’.

Elementor Save Your Section To Library

Now I can essentially add that section to any page with a few clicks.


But here’s where things got a little confusing.

Unlike global widgets, section templates don’t show up under the ‘Global’ tab.

global elements in Elementor

So where does Elementor keep them hidden?

There are two ways you can import sections, and, as I found out, they both behave very differently:

  1. The templates widget
  2. The Add Template button
how to find templates in Elementor

The ‘Add Template’ Button Method

  1. Click on the ‘Add Template” button from the main workspace.
  2. Click on the ‘My Templates’ tab
  3. Choose your template
  4. Click ‘Insert’
inserting saved templates in Elementor

You’ll now be presented with all the templates you’ve ever saved within Elementor, including ‘Section’ templates.

Click on ‘Insert’, and the section will appear on your page. Simple as that.

One quick note here is that if you can accidentally import the document settings of the template.

Or, in layman’s terms, you’ll accidentally import a lot of gunk that could (and probably will) mess up your layout.

But Elementor warns you about this in advance:

Impor Document Settings in Elementor

The neat thing about adding a section this way, is that you can immediately make changes to it before saving it again.

editing template in Elementor

It’s all pretty straightforward, with everything working as you might expect.

The ‘Template Widget’ Method

That brings me to our second option.

Strangely enough, this doesn’t work the same way as the ‘Add Template’ function.

This time, we’re going to insert the section template using the ‘Template widget’ from the side panel.

Template Widget in Elementor

As with any other Elementor widget, you first need to drag and drop it onto the page.

After that, it’ll ask you to select your saved template.

In this case, we’re looking for our saved section template.

Now here’s a random quirk – the template widget doesn’t show you a list of section templates until you actually type something into the search field:

Template Widget in Elementor

You have to “Enter 1 or more characters” for anything to show up here.

Template Widget Search in Elementor

That’s a pretty bizarre UX choice from a user’s point of view.

Obviously if you have hundreds of saved sections then this makes sense.

But even then, if you can’t remember what your saved section is called, you’d have to back out of Elementor, go to your Dashboard, and find the name of the saved section there under ‘Templates’.

The section template will load… but here’s where things get a little confusing.

This time, the section templates are treated as a single block, so making changes requires clicking the ‘Edit Template’ button.

Editing Template Block in Elementor

And once you do click on ‘Edit Template’, it opens the section in a separate editor in a new browser tab.

This is where you have to make the changes you want, and then save the template section.

Not only that, but any templates imported using the ‘template element’ are automatically regarded as “global”.

But — and this is a big BUT — unlike global widgets, these templates cannot be unlinked.

It took me a while to figure this out because Elementor didn’t give me any indication that these would treated differently.

Very confusing.

So here’s the bottom line:

If you want a static, unlinked section, you’ll need to use the ‘Add Template’ button.

Otherwise, use the template widget.

Page Templates

What’s a page builder without some full-page templates, eh?

Again, there are two ways to load a page page template within Elementor.

  1. From the ‘Add Template’ button in the main workspace
  2. From the ‘Template’ widget in the sidebar
adding templates in Elementor

Page templates suffer from the same issue as section templates – using the template widget leaves you with a single element that then needs to be edited in separate editor window to change anything.

So we’re going to bypass that as an option.

I’m sure the developers have a reason for handling templates this way, but it’s lost on me.

Elementor comes pre-loaded with a bunch of professionally designed templates, which you can use right away.

To check out the available templates click on the ‘Add Template’ button:

designed templates in Elementor

From there, click to preview an individual template, and if you like what you see, you can deploy it on your page by clicking ‘Insert’.

N.B. One thing I noticed when inserting a template was that if you have a ton of existing content on the page, it can take a while to load.

Once the template loads, you’ll probably find that it doesn’t look anything like the preview you saw.

inserting Elementor template

This happens because Elementor is restricted to the boundaries of your theme.

Basically, if your theme says “content goes here!”, that’s where content goes.

Elementor Content Area

So what next?

In order to properly utilize a full page template, you first need to have a full-width (or blank) page template for Elementor to work with.

A full-width template retains the header and footer of your theme, while a blank template is exactly that, blank.

There’s no right or wrong one to use, it just depends on what you’re trying to achieve.

Now, I’m gonna be straight with you.

In the first draft of this review, I went on an epic rant about Elementor not having this functionality built-in, along with ways you can get around it.

Shortly after, guess what happened?

That’s right, they went and added it in.

And while it’s always fun deleting an entire section of your article, I was still pleased to see that we’re all on the same page. (No pun intended.)

To get to it click on the ‘Page Settings’ button and then look for the ‘Page Layout’ dropdown menu:

page settings in Elementor
page layout settings in Elementor

You can now choose between ‘Full-width’, ‘Elementor Canvas’, and any other templates included with your theme.


The ‘Elementor Canvas’ option is just a blank template. For some reason, they decided to get fancy with the name 😛

So let’s try it again with the ‘Canvas’ option selected.

canvas option in Elementor

That’s more like it, Elementor!

Now, with the technical stuff out the way, what about the actual page templates?

Honestly, I was quite impressed with the designs.

They’re clean, professional and easy to work with.

In an earlier iteration of this review, I waxed lyrical about there being a good mixture of templates, but that they might become prone to overuse.

But that’s only if:

  1. You do very little to customize the template for your own use
  2. You never upgrade to Elementor Pro

Elementor does make the “mistake” of trying to be the perfect WordPress page builder for everyone on Earth.

Which means they’ll never be able to keep everyone happy, no matter how hard they try.

Templates Library in Elementor

If you depend on pre-built landing or sales pages, the Elementor Pro templates should have something to suit you

But If — like me — you’re happy to build landing pages yourself, you can simply save your own page templates to reuse again and again.

On a final note, you can import other people’s templates as well.

This site has a very respectable selection of page templates, popup templates and section blocks, with some tutorials throw in for good measure.

Even better – it won’t cost you a cent, although the site does accept donations 🙂

imported templates in Elementor

However, one more point before we continue with the Elementor review. While the page templates are great, and while for some people page templates don’t matter at all, Elementor started to lag behind its competition.

Thrive Architect is targeted towards marketers, so their landing page templates are more complex.

Divi just blows Elementor out of the park, handing over 2000 individual page templates at your disposal. More about that in our Divi vs Elementor showdown.

So if page templates are important to you, Elementor might not always be the best choice.


Not unlike most page builders today, Elementor is responsive by default, so your design will automatically adapt to different screen sizes.

Elementor lives up to the market standard of page builders allowing users to live preview their site, on different device sizes, with the touch of a button.

And what surprised me even more was that you can make independent changes for each device.

To illustrate what I mean, I’ve got two headings here:

Headings in Elementor

If I switch over to the preview for ‘Mobile’, my headings look more or less the same.

Mobile preview in Elementor

But for arguments sake, let’s say I’m not happy with the spacing between them on mobile devices

This is really easy to fix in Elementor.

  1. Select the element you want to adjust
  2. Click on ‘Advanced’
  3. Add a margin for the element
  4. All done!
Editing Mobile Preview in Elementor

And here’s the real magic.

When I go back to my desktop preview, Elementor hasn’t applied the same changes to my desktop layout.

headings in Elementor

Seriously, how can you not love that?

If you’ve ever battled with responsive design, and struggled to make your content look good on any device, this is a real game changer.

Pro Tip

You can also press ‘Cmd + Shift + M’ on a Mac, or ‘Ctrl + Shift + M’ on a PC to cycle through the device previews.

But guys… it gets even better.

Not only can you control styling for different devices, but you can also hide the element completely.

responsive settings in Elementor

AND this isn’t limited to single elements, it also works with sections.

While this amount of control over your page is featured in other page builders as well, Elementor was the first to pull it off, and it’s still going strong with one of the easiest ways to do responsive editing.

Theme Builder

You know when you find a theme you really like, but you still need to tweak certain aspects of it to get it looking just right?

Especially the header or footer, because they never look quite how you want them to.

What if…there was some kind of tool that would allow you to build a custom headers, footers, and other layout elements?

And what if you could then deploy them across your entire site with a few clicks of a mouse?

Yes, yes, I’m building up to talking about Elementor Theme Builder.

So, how does it work?

As usual, Elementor keeps this nice and simple – you launch it from your WordPress dashboard:

Elementor Theme Builder

Then you simply click on ‘Add New’ and choose a template type and click on ‘Create Template’.

For the purpose of this review we’re going to create a new header.

creating header template type in Elementor

You can then choose to either create your own header from the ground up, or use one of the handy default header templates that you can then restyle to your liking.

header templates in Elementor

And with a few mouse clicks you can create a logo that looks and feels more like you.

edited header template in Elementor

Then all you need to do is click ‘Publish’ and use the ‘Add Condition’ function to tell Elementor where you want your new header deployed:

Hey presto – your new header is published to every page of your site.

You can follow the exact same process to create a snazzy new footer for your entire site.

And if you make a mistake you can always back up and change the ‘Display Conditions’ for the header.

So, now you can make any theme bend to your design will.

But it gets better. With the new update, Elementor 3.0, the Theme Builder gives you a ton more customization options by making the entire site available in one dashboard.

With the new Theme Builder, you can make advanced tweaks to:

  • Headers
  • Footers
  • Pages
  • Posts
  • Product pages
  • Error pages

And a lot more, according to what you need from it. It’s a big update for an already powerful tool, and the added control it gives to the regular user is noteworthy.

Definitely a plus in our Elementor review.

That’s pretty cool, Elementor. Nicely done.

Well we timed the update for this review quite nicely, because Elementor recently rolled out their popup builder.


Note: This is only available in the Pro version.

This is a great move on their part for a number of reasons:

1. It shows they listen to customer feature requests
2. You now won’t need a separate plugin to create popups

So how do you use it?

You’d assume this feature would be available as a widget, but you have to go back out to the WordPress dashboard to find it…under templates.

popup templates in Elementor

Now, the weird thing is that you start the popup creation process from the WordPress dashboard instead of from within Elementor…but you edit the popup from within the regular Elementor workspace.

how to add a new popup in Elementor
how to create a new popup in Elementor

It just seems like it would make more sense to integrate it into the interface itself, no?

Of course, the reasoning behind the location of the popup builder is probably based on how often the average web developer creates a popup?

Once a week maybe?

And you can always use the new ‘Finder’ feature to jump back out to the dashboard when you need to.

But I digress.

options to display popups in Elementor

There are dozens of different popup templates to choose from, with something to suit pretty much anyone, including us marketer types.

A nice touch is that you can choose which category of popup you’d like from a dropdown menu:

  • Bottom Bar
  • Classic
  • Fly-in
  • Full Screen
  • Hello Bar
  • Slide in

Simply click on your template of choice and then click the green ‘Insert’ button as illustrated here:

how to insert popup in Elementor

Another option is to close down the Library window and you’re then brought straight to the Elementor editor.

From here you can design your own popup from scratch, if you really want to:

Design Popup From Scratch in Elementor

You get a dizzying number of design options that allow you to tweak not just the content of the popup, but its dimensions, shape, colour scheme, etc, etc.

popup in Elementor

Some very interesting features in the ‘Advanced’ tab include being able to prevent visitors closing the popup with the escape key, and disabling page scrolling until you interact with the popup.

Popup Settings in Elementor

This appeals to the tiny bit of Sith in me, but hopefully these features aren’t abused.

After all, some people are more full of Sith than others though. *cough*

You also get dozens of entrance animations to play around with under the main popup settings tab – “Lightspeed” is my current favourite.

Popup animation settings in Elementor

Once you’re satisfied with the layout of your popup you can then click ‘Publish.

This is where you’re introduced to the various settings to control the behaviour of your new creation:

Conditions – you choose where you want the popup to appear e.g. one one page vs. your entire site. You can also set multiple conditions for the same popup.

Triggers – this is what causes the popup to trigger in the first place. All the usual suspects are covered including “on scroll”, “on click” and “on page exit intent”, among others.

Advanced rules – has settings to cover things like only display the popup after your visitor reads x number of pages, or has visited your site x number of times, for example.

Popup advanced settings in Elementor

Autoresponder Integration?

So you can create amazing looking popups, and set them to trigger in dozens of different ways.

How well does the popup builder integrate with MailChimp, GetResponse or Aweber?

Ideally this would be a point-and-click affair.

But it’s not.

Yes, you can integrate any of the above autoresponders with the popup…you just have to get an API key and then figure out what form elements in your popup you need to tweak for it to work.

Or alternatively you can use a plugin like Mailoptin, although I haven’t tested that personally. It just comes recommended by the nice folks at Elementor, and I trust them 🙂

It would just be nice to have autoresponder functionality directly within Elementor because more plugins = more potential for things to go wrong.

Custom Fields

Okay, we know that this is pure nerd territory but we need to cover it.


Because Elementor makes managing this stuff super easy.

And if you’re even remotely interested in e-commerce, then you need to learn a little more about how dynamic data and custom fields work.

It also makes perfect sense if you build affiliate sites, and you’ll see why as we walk through how you actually use custom fields and dynamic data within this page builder.

Before we go any further, we should mention there are three requirements for the examples we use here:

  1. Elementor Pro
  2. The Custom Post Type UI plugin
  3. The Advanced Custom Fields plugin.

Once you have the above two plugins installed it’s time to actually create your custom post types.

But wait…what are custom post types?

These are basically types of posts that don’t fit in with your standard post layout.

Typical examples of this would are product pages for an e-commerce store, or maybe an artist’s portfolio that needs to include pricing and other information.

They’re the types of posts where you need to add extra information to them in a way that a standard install of WordPress doesn’t support.

So, let’s go ahead and set up some custom post types for Dave’s Bike Emporium.

We do this from the WordPress dashboard, using the Customer Post Type UI plugin.

custom post type in Elementor

Once you add a new post type, you’ll see you have a new menu option in your WordPress dashboard.

In this example it’s ‘Bikes; because…well….Dave sells bikes.

menu option after adding custom post type in Elementor

Next up we need to add a taxonomy for our custom posts.

A taxonomy is basically a way of grouping similar pieces of data together in one place.

For this we’re calling our taxonomy “biketype”.

We also need to attach it to our custom post type of “Bikes”.

custom post taxonomy in Elementor

We now need to add different sub-categories (New bike types) within our custom post structure:

sub-categories for custom post type in Elementor

Okay cool, that’s the custom post type stuff taken care of, but how do we add in the product details?

This is where Advanced Custom Fields (ACF) comes into play.

When do we get to how to using this stuff in Elementor?

Patience Padawan….patience.

Here are the custom fields we created by adding new ‘Field Groups’ in ACF:

how to create custom fields in Elementor

The red asterisk beside each ‘Label’ means it’s a required field, just in case you were wondering.

Now when you click on ‘Add New’ under your ‘Bikes’ custom post type you get this screen:

example of custom post type data in Elementor

Once you’ve added in some sample data here, it’s time to actually get to getting, and create a single post template in Elementor.

Note: You do this from ‘Templates’ on your dashboard, and then ‘Add New’.

how to create a single post in Elementor

You can choose to use one of Elementor’s snazzy templates, or go it alone with a hands-on layout.

We chose the manual approach because we’d already designed a basic header for Dave’s Bike Emporium earlier.

The first piece of dynamic content we add to our template page is a background image.

We do this by clicking the section we want to work on, and going to the ‘Style’ tab.

From there we click on ‘Background’ type and then the ‘Dynamic’ data button.

how to add background image in Elementor

We also add in a dynamic ‘Post title’ widget from the ‘Single’ widget category – these were called ‘Theme Elements’ until a recent update changed that.

In fact, if you haven’t used Elementor for a few months, you could find yourself feeling a bit lost.

Minor gripe, but there you go.

dynamic post title widget in Elementor

Adding the ‘Post Title’ widget this automatically inserts the name of the first bike of our custom post types – the “Hustle 2000.”

That end of things all works pretty well.

But what about styling other parts of your layout with dynamic data?

Let’s add an icon box and then use custom fields to drag some data into it.

icon box and custom fields in Elementor

A feature I really liked is the ability to preview your final design with different data before hitting the publish button.

preview of a template with custom fields

That way you can test that your template works for each of your custom posts/products/portfolio pieces, etc.

Finally click on ‘Publish’ when you’re all set, and then choose where you want the template applied to i.e. your entire site vs. certain types of posts or pages.

So, how well does Elementor handle custom post types, custom fields and dynamic data?

Honestly, once you get your head around their structure, designing these templated pages is a snap.

Even complete newbies could have dynamic pages up and running in an afternoon.

The Downsides

But it’s not perfect.


Well, for some weird reasons Elementor forgets certain data fields when I exited a page.

This happened even after updating the page, and checking the previews.

To be fair, this could be something I’m missing, but if that’s the case we’ll update this review again in the future.

Any other gripes?

The dynamic data menu layout is messy and not really all that intuitive.

What we mean by that is when you choose your ACF field to drop data into the page, you have to click on it again to choose your key from ‘Settings’

…and then another sub-sub-menu to add text before or after the dynamic data.

How To Add Data in Custom Fields in Elementor

It just felt clunky, even though it does actually get the job done.

Undo & Revision History

Okay, this is one area I was eager to cover.

We all make mistakes when designing layouts. Things get moved. Other things get deleted.

Or you mentally tune out for a few seconds and do something catastrophically dumb…but you can’t remember what.

It happens.

But what if you want to simply undo an action?

That shouldn’t be too difficult, right?

In previous versions of Elementor the lack of an ‘Undo’ function was a major gripe for me.

I’m starting to suspect that the Elementor team crawl through product reviews and find the most glaring flaws in their product…and then promptly correct them.

Are they stalking me….?

Elementor has gone from having no real “Undo” function to having 2.5

The .5 is that you can use CTRL + Z to manually undo your most recent changes, but beyond that you have to rely on the ‘History’ function and ‘Revisions’ tab.

The other two options for undoing your “handiwork” are both available through the ‘History’ button.

History option in Elementor

Clicking on ‘History’ brings you to a screen with two separate tab: ‘Actions’ and ‘Revisions’.

Actions are the changes you made during your current design session.. To undo whatever change you just made, roll your mouse over it and you’ll see a “rollback” option.

I like this because it’s pretty similar to what I’m used to seeing in other design programs like Photoshop.

history of actions in Elementor

If you click on the ‘Revisions’ tab you’ll see a list of changes dating back up to 30 days.

Once you’ve found the revision you’re after, just click the green ‘Apply’ button.

revision history in Elementor

It works great, fair enough.


Firstly, it’s not as simple as clicking a button.

It requires navigating through the menus and previewing different revisions before you even find the right one.

Some kind of logical naming system would help stop this being a nuisance.

Secondly — and this is the real kicker — this feature is built on the WordPress revisions system, which means revisions only appear for each time you’ve hit the save/update button.

Basically, if you haven’t saved your changes in a while and you really mess something up, it’s game over.

Which usually results in tearing of hair, gnashing of teeth and questioning your place in the universe.

Pro Tip

Having month’s worth of revisions might seem like a good idea, but they can really hog resources and slow down your site.


Because each saved revision adds more clutter and bloat to your WordPress install, increasing the size of the database that runs the show.

A solution is to occasionally use a WordPress database “cleaner” plugin, like this one.

I haven’t tested the plugin myself, so I’d advise making a backup before running it.

But I’m told it does a solid job at cleaning up the revision history stuff (as well as other database fluff).

Though it’s not exactly a deal-breaker — and I do really like the revisions history feature — it still boggles my mind that such a well thought out page builder lacks a more visual approach to handling page/site revisions.

Still, for a fair Elementor review – they do a good job of it nonetheless.

Copy Style and Copy Paste

If you’ve been around the world of websites and page builders for any length of time, you’ll understand how tedious it can be at times.

Not the design and layout process – that’s pretty much always the fun bit.

The tedium kicks in when you have to update the styling of multiple elements or sections of your site.

Usually because of a tiny change you made that you now have to cascade to the rest of your site.

Enter hours of not-very-fun work.

Sure you could write a pile of custom CSS for this…or you could hope for a point-and-click solution instead.

Elementor obviously heard the cries of developers suffering from RSI when they introduced the Copy Style and Copy Paste features in mid-2018.

So, how do these features work?

Well, let’s say you’ve just created a new element that you’re quite happy with the look of:

Copy Style and Copy Paste feature

But you want to recreate that style elsewhere in your design.

how to copy icon box style in Elementor

Urrghhh….great, now I have to manually go in and update the style of all the other elements!

Or I could just use Elementor’s “Copy Style” function instead.

All you need to do is right-click within the source element – the one you want to copy the styling of – and choose “Copy”.

And then right-click within the destination element, and choose “Paste Style”.

Copy Style and Copy Paste feature in Elementor

If you don’t like the changes you’ve made, then simply right-click again and “Reset Style”.

how to reset style in Elementor

How easy is that?

Again, this might seem like a trivial feature to some, but it’s worth its weight in gold if and when you need to change the styling of a bunch of different elements.

So, what about the “Copy Paste” feature I mentioned earlier?

Elementor offers a full drag-and-drop interface, which works really, really well.

But what if you want to just copy an entire column or section to a different part of the page?

You could recreate the elements in a new section, and then shortcut things by applying the “Copy Style” function.

Or you could just copy and paste the entire section onto a new part of your page.

Which is exactly what we’re going to do.

Highlight the section or element you want to copy, in this case we’re copying an entire section, and select “Copy”.

Copy feature in Elementor

Then scroll to the part of your page you want to place it, and select “Paste”

Paste Feature in Elementor

Job done!

Nice time-saving feature, right?

Copy Paste feature in Elementor

What’s that – you want to be able to copy and paste entire sections to another page?

No problem.

Just copy your element or section as we did in the earlier example,

Then exit to your WordPress dashboard. Open the new page in Elementor, and right-click where you want to place the copied content.

This tiny feature means being able to add entire sections to other pages in seconds instead of (potentially) hours.

We’re not going to get hyperbolic here and describe either of these features as “game changers.”

But once you get used to using them you’ll find it difficult to work any other way.

Open Source

Let’s lift the mood again. 🙂

Easily one of the biggest differences between Elementor and other page builders is that it’s open source.

That means… uhm… Google, what does it mean?

Open source: denoting software for which the original source code is made freely available and may be redistributed and modified.

Since the code is freely available, it allows users to fix bugs, improve existing features and even introduce completely new features to the software.

In fact, you can see all the “action” on GitHub, right here.

Elementor Open Source

As a result, development generally moves faster than with “in house” page builders. And most people agree that open source is the way forward.

It also opens the doors to useful third-party plugins.

The effects of this are already evident when searching for ‘Elementor’ in the WordPress plugin repository:

Elementor plugin search in WordPress

Those are all third-party plugins designed to enhance Elementor, and many of them are free.

While some of them offer minor improvements, others virtually give Elementor super powers.

A good example of this is Essential Addons For Elementor.

Essential Addons for Elementor

This plugin adds a stack of new widgets to the Elementor library, and more than 100 ‘Blocks’ ready for you to drop into your layouts.

There are lots of other Elementor plugins I’d love to include here, but it would take up an entire post.

Hmmm….stay tuned on that one…maybe.

Although it’s a bit of a hassle having to install plugins on top of plugins, I’ve always been a fan of this approach because it keeps the core product lean for those who don’t need all the additional bells and whistles.


I don’t think I’ve ever seen so much praise for support as I’ve seen with Elementor.

Where this would normally be due to some top-notch, live chat support, that’s actually not the case here.

In fact, Elementor doesn’t offer live chat support.

Instead, it has something even better.

An active, raving community of “Elementorists” at your beck and call.

Elementors Community on Facebook

I referred to this community multiple times throughout the writing of this review, and no doubt I’ll continue to do so for as long as I use Elementor.

It’s amazing to see how quickly this community has grown! The last time I checked it had fewer than 5,000 members.

As of right now there’s over 30,000 Elementorists who have probably already answered any questions you might have about the plugin.

search option in Elemenor Community on Facebook

If a search comes up short, just ask in the group.

It’s a collaborative community and you’ll generally get responses flooding in within an hour or so of posting.

Aside from that, I found their YouTube channel super helpful.

Elementor Youtube channel

Elementor has a lot of moving parts and it can be overwhelming when you first start using it – particularly if you’ve never used a page builder before.

In my opinion, their videos are the perfect starting point since they cover all the core features of the tool.

They even have playlists dedicated to newbies, like the ‘Getting Started’ one, and their ‘One Minute How To’s’ is another solid choice for beginners.

They also have detailed documentation, if you’re more of a reader.

IF for some reason you still need help, there is a VIP option, but that’s only available to Pro members.

Elementor Technical Support

To be honest, I think that’s fair given the quality of free support options available to you.

The premium support is basically a ticketing system.

Of course, I made a request to test how reliable it was for this review.

Elementor Contact Form

As expected, it was stellar.

Overall, you really can’t complain.

And if you did, I’m sure they’d take care of you 😉

Are You PRO, Or No?

Throughout this review, I’ve only briefly touched on the paid version of Elementor – also known as Pro.

And while Elementor is, for the most part, a free plugin, upgrading does give you a little more firepower.

Elementor Pricing

So what are the benefits of going Pro?

I won’t write a novel on this, because you can get it straight from the horse’s mouth, right here.

What I will do, however, is comment on the most notable differences between the free version, and the Pro version.

So for starters, you get access to a bunch of extra widgets.

Elementor Pro widgets

While I’d class a few of these as slightly gimmicky, there are some very useful additions.

Other important features of the Pro version of Elementor include:

  • A visual form builder
  • WooCommerce integration
  • Pop-up builder and templates
  • The theme builder

You’ll also be able to use global widgets that can be used throughout your content, as well as other areas of your site.

Elementor Global Widgets

I covered global widgets earlier in the review, so you probably won’t be surprised that I’d recommend Pro for this reason alone.

As for page templates, you’ll be pleased to hear that upgrading will unlock a slew of premium page templates for you to dabble with.

Elementor Pro Premium Page Templates

And the last one I’ll mention gives you an extra layer of design control with ‘live custom CSS’.

So if you’re a stylesheet-ninja, you’ll appreciate this one.

Elementor Heading Custom Css

Personally, I feel like the idea of a page builder is to eliminate the need for CSS entirely. I almost see it as a safety net for when the tool can’t deliver.

For that reason, I don’t think this should be a Pro feature.

Is Elementor Right For You?

Now that I’ve covered all the different features and functions of Elementor, weighing up the pros and cons and giving my experience along the way — let’s talk about YOU.

As with any tool, Elementor isn’t going to be the right choice for everyone, so I want to get to the bottom of who exactly this page builder is suitable for.

Budget Bloggers

I’m just gonna come right out and say it.

Elementor is a budget-bloggers wet dream. I mean, come on… it’s 100% free!

Elementor Free Version Download

Yes, there’s a Pro version.

And yes, as I mentioned before, it does offer some useful additions.

But this isn’t your usual “freemium” product.

In most cases, freemium means getting access to a small slice of the pie. A slice that’s riddled with heavy, and often annoying restrictions and/or intrusive advertising.

Elementor gives you access to MOST of the pie without taking anything significant away from the product. In my opinion, it’s 100% usable without going Pro.

Does that mean you shouldn’t upgrade?

Well, not quite.

Like I said earlier, there are some definite advantages of the paid version, but these are things you can absolutely live without if… well…

No Money Wallet
(Sorry, I just had to throw that in there.)

Beginner Bloggers

Is Elementor suitable for beginners?

Despite the slight learning curve I experienced, most likely due to being too familiar with how Thrive Architect works, I still think it’s a GREAT page builder for beginners.

Of course, if you’ve never used a page builder before, it will take some getting used to, but I think the same can be said for any page builder with the same capabilities.

There were some instances where things just didn’t make sense — the global vs non-global templates being a good example .

But in most cases, a simple post in the Facebook group quickly cleared up my confusion.

Overall, if you’re a beginner and you’re looking for a page builder that’ll give you the least amount of friction with the most amount of flexibility, Elementor is an excellent choice.

High Level Marketers

I touched on this earlier in the review, but wanted to elaborate on it here.

Elementor isn’t geared towards marketers, which means it’s missing a few features.

Things that we – as marketers – might rely on from a page builder.

With that said, Elementor has come on in leaps and bounds.

A perfect example of this is the integration of the most popular autoresponders via API:

autoresponders API integration in Elementor

So, if you’re a GetResponse, Drip, Mailchimp, ConvertKit (and others) user, then you won’t have to rely on hacking Elementor to get it to play ball.

One area it still falls down on is that there’s no way to run A/B tests on popups or opt-ins.

This is a real shame considering that you can integrate Elementor with most email marketing/autoresponder platforms, but your ability to make the most of their features is limited.

But what I’d like to focus on here is the positive stuff.

Yes, Elementor has flaws, but it’s still a great page builder for marketers at almost any level.


There’s no doubt that Elementor is one of the best, if not the best, free page builder on the market.

This feature-packed WordPress plugin even stands its ground against many premium, more established page builders, with development showing no signs of slowing.

(You can see our comparison review of Elementor against other popular page builders (including Beaver Builder) right here.)

Perhaps most interestingly, it’s the first open source page builder.

As for Elementor Pro, it’s already an attractive upgrade despite being in its infancy, and I imagine most new features from this point forward will be exclusive to members.

Only time will tell though!