4.6 out of 5
761 reviews on Udemy

Learn Elementor – WordPress Front-End Development Course

Elementor page builder gives you total control to design and create the site you've always wanted, without restrictions.
Andrew Williams
3,864 students enrolled
English [Auto]
Why learning Elementor is a great option if you want a page builder and/or theme creator.
The differences between the free & Pro versions of Elementor.
Where to get inspiration for your website design, colour & fonts.
What the box model is, and why it's so important as you design your site.
How to use Elementor as a page builder.
How to create a use (and re-use) templates.
How to use Elementor Pro to create your own theme.
How to use motion effects in your design.
How to ensure your site looks great on desktop, tablet and mobile phone.
How to use custom fields and custom post types for better website design and easier maintenance.

Learn Elementor and unleash a powerful & free page builder for WordPress with this Elementor course.  With it, you can drag and drop your way to a powerful website design.  Elementor works a little differently from most page builders.  For a start, you design live on the front-end of your site, not in the back-end Dashboard.

The free version is a page-builder that comes with dozens of beautiful widgets and templates that you can use to build your web page content with pixel perfect precision.  It’s an impressive and well-established page-builder.

The Pro version of Elementor will blow you away!  If you have ever been frustrated trying to make your WordPress theme look like the demo you saw on the theme’s homepage, you are not alone.   Most themes require extra plugins and an in-depth knowledge of the support documentation to make it look anything like the one that drew you to it in the first place.  With Elementor Pro, you don’t need to ever feel that frustration again.  Elementor Pro gives you the same drag and drop page builder, but also allows you to create your own WordPress theme, designed exactly as you want it.

This Elementor course covers both the free and paid versions of Elementor. 

After a discussion of why you should learn Elementor, you’ll install the plugin and a theme.  We’ll then cover:

  • How to borrow inspiration from other websites, to craft your own unique design.  That includes choosing the right fonts and colours for your site.

  • We’ll look at the box model and you’ll learn how padding and margin can affect placement of elements on the page. 

  • We’ll take a look at Hex colour codes.

  • We’ll go through all of the back-end settings, including how to install custom fonts and icons (for Pro users).

  • You’ll become familiar with the front-end Elementor interface as we go through all of the menu and settings.

  • You’ll get to know how an Elementor page is structured using sections, columns and elements.  At this stage, I’ll set you a few design tasks and then go over the solutions in detail.

  • You’ll learn how to use templates so that you can create a design element once, and re-use it as many times as you want.  You can even export your templates from one site and import them into another.

  • You’ll see why global widgets are a powerful asset in your toolbox.

  • For Pro users, we’ll look at building an entire theme with Elementor, based on the inspiration we got earlier in the course.  We’ll see how different templates can be created and used in different areas of the site design.  We’ll create templates for the site header, footer, blog page, 404 page, single post template & archive page template.  Will design the homepage.  We’ll design a landing page.  We’ll even design a popup and set the trigger conditions to define when it shows on your site.

  • Elementor offers you some great tools, including motion effects.  These can be used to bring movement to your pages, so we’ll look at those.

  • How (and why) we can use and integrate advanced custom fields and custom post types into our site design.

  • And finally, we’ll look at mobile optimization.  This powerful set of tools will allow you to check (and fix) your site design so that it looks great on a desktop, tablet AND mobile phone.

    Elementor was created for every site owner that wants to create beautiful web content.  It was created to allow you to design the site YOU want.  This course teaches you how to use it!

Get Ready...


This video is a quick introduction to myself and the course content.

Why Elementor?

Elementor is a page builder that can replace the Gutenberg editor.  But the Pro version takes it to another level, giving you the option of designing the entire site template.

Course Goals

This lecture covers the course goals including a brief overview of the course.

Installing Stuff

Installing Elementor

In this lecture we'll see how to install both the free and pro versions of Elementor, and the basic differences between them.

Choosing a Theme

This lecture describes the relationship between the theme and the page builder.  By understanding this, you'll have a better idea of the features your theme needs.

Installing Astra

Wordpress needs a theme to be installed even if you are creating a theme with Elementor Pro.  In this video, we'll install the free version of Astra.

Designing Your Site

Thinking Sections, Columns & Elements

 This video is an introduction to page layouts.  You can create complex designs with Elementor using sections, columns and elements.

Finding Inspiration

I am not a designer, and you might not be either.  That doesn't mean you cant build a beautiful design.  Do what I do.  Take your inspiration from other sites, and elements of those sites that you love.

Finding Fonts

New to font selection?  Don't worry!  I'll show you how to choose fonts that work together.

Colour Palettes

Part of a great design is the colour palette you use on the site.  This lecture shows you an easy ways to choose the colour scheme of your website.

Design Summary

Before moving on to the next section, make sure you have completed these steps.

Essential Skills & Resources

Box Model

The box model is a fundamental design model.  This lecture explores the box model and explains how it works.

Hex Colours

This video looks at the hex color system.


You have to be careful about using images on your website.  You must have a license (if required ), for anything you use.  This lecture shows you where to get reasonably priced images.

Elementor Backend Settings

Backend Settings

This lecture goes through the backend settings, and covers the important settings you need to know.

Custom Fonts (Pro Only)

You can easily add custom fonts to Elementor using the custom fonts options.  This video show you how to do that.

Custom Icons (Pro)

This video looks at adding custom icons to the Elementor editor.

Role Manager

The Role Manager is perhaps more important if you are building designs for clients.  This video looks at the Role Manager in Elementor.


This video goes through the Tools options in Elementor.

System Info

If you ever need to contact Elementor support, the System Information  screen provides the support team with invaluable information about your system, so that they can help fix the problem.

Getting Started

If you want some additional help with Elementor, check out the Getting Started screen.  There is also the Elementor Youtube channel which I recommend you subscribe to.

Elementor Interface Settings

Interface Layout

We've already looked at the back-end settings, so this video will take you to the front-end and the Elementor Interface, where you'll find more settings and the tools you need to design your web site.

Hamburger Menu

The hamburger menu gives you access to some global settings, plus a nice finder tool.

Global Colours

You've chosen the colour palette you wanted to use, so let's get Elementor set up to use those colours.

Global Fonts

You've chosen your default fonts, so let's enter them into Elementor.

Theme Styles

Theme styles were introduced towards the end of the v2 life-cycle and start of version 3.  Thee allow you to make changes to your design that were only previously allowed via the theme you were using with Elementor.

Dial Pad Menu

The DialPad button takes you to the Elements screen, where you can choose and configure the elements as you design your site.

Elementor Page Structure

Elementor Page Structure

This lecture is a short reminder about sections, columns and elements. 


This video looks at sections in a little more detail.


This video looks at columns in a little more detail.

Elements 1 of 2

This video looks at the elements you have available to you as you design your site.

Elements 2 of 2

This is the second part of the video looking at the elements you have available to you as you design your site.

Homework 1

Let's create the section for homework task #1.

Homework 2

Let's create the section for homework task #2.

Homework 3

Let's create the section for homework task #3.

Using Templates

Re-Useable Templates

Elementor Free allows you to create re-usable templates for sections of a web page.  The Pro version adds a lot more functionality.

Global Widgets

You can save an element you are working on as a Global Widget.  This makes the styled element available on other pages on your site.  Changing the style of a global widget will change the style of that widget on all pages of your site.  This video looks at global widgets and how to use them.

Import & Export of Templates

You might like to share your templates between sites.  This lecture shows you how to easily do that.

Built-In Templates

This video looks at the range of built in templates in Elementor.

Theme Builder

Building a theme

In this introductory lesson to theme building, we'll look at what is required to create your own WordPress theme using Elementor Pro.

Template Display Conditions

When you create a theme using Elementor, you need to assign your theme templates to the pages on your site using display conditions.  This video introduces Display Conditions.

Demo Site

Create Pages

In this lecture we'll create the pages for our demo business site.

Create a Menu

Let's set up a couple of menus that we can use in our design.

Creating a Header Template

Using the ideas we had earlier, let's consider the website's header template.

Creating a Footer

Let's get on and design the footer template.

Design Homepage

Let's design the homepage based on the prototype we created earlier in the course.

A Better Parallax

In the homepage lecture, we created an animated parallax effect.  However, you will have seen stronger effects online, so let's see how to do that.

The Other Pages

This video shows you the power of the built in Elementor templates for quickly building out some key pages on your site.

Archive Template

In this video, we'll create the archive template to be used by default on all archive pages.

The Blog

In this video, we'll create a unique template for the blog page.

Single Post Template

At the moment, your posts are showing using the default template provided by our theme, Astra.  That doesn't fit the rest of our site, so lets create a single post template.

The 404 Page

Let's create a custom 404 error page.

Creating a Landing Page

You can create landing pages with both the free and Pro versions of Elementor.  This video shows you how.

Creating a Popup Template

Elementor includes a handy popup template style, with lots of trigger settings.  Let's have a look.

Managing your Templates

With all of those templates, lets see how you go about managing them.

Full Site Editing

Elementor actually lets you design your site from a single location.  In this video, we take a look at the full site editing feature.

Mobile Rendering

Mobile Optimization

This video explains how you can optimize your website to look great on desktop, tablet and mobile phone.

Dynamic Sites With Custom Fields & Custom Post Types (PRO)

What are Custom Fields

Learn what custom fields are and how they can be useful for your website deisgn.

Creating Custom Fields

Learn how to create custom fields

Creating Custom Post Types

Learn how to create custom post types.

Adding Recipes

See how easy it is to add new recipes using our custom post type and custom fields.

Displaying the Recipes

Learn how to create an Elementor template to display the recipes using our custom fields.

Adding the Archive Page

Let's create a custom archive page for our custom post types.


Problem with Animations?

If you are having problems with animations not showing on your computer, please read this.

Motion Effects

Motion effects, when used carefully, can add interest to your pages, and catch the attention of your visitor.  This video teaches you the basics of motion effects, and how to use the viewport to define when animations begin and end.


This final lecture provides a list of resources used in this course.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6 out of 5
761 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
30-Day Money-Back Guarantee


6 hours on-demand video
2 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Learn Elementor – WordPress Front-End Development Course
$218.98 $159


For Professionals

For Businesses

We support Sales, Marketing, Account Management and CX professionals. Learn new skills. Share your expertise. Connect with experts. Get inspired.


Partnership Opportunities

Layer 1
Register New Account
Compare items
  • Total (0)