Learn Elementor - Elementor for WordPress

This lecture outlines changes to the Elementor interface since these videos were recorded, so you can see where everything is.

In this lecture we'll see how to install both the free and pro versions of Elementor.

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.

Wordpress needs a theme to be installed even if you are using Elementor Pro.  In this video, we'll install the free themes I recommend. One for Elementor free, and one for Elementor Pro.

Flexbox introduced containers into Elementor, replacing the older Inner Sections elements.  This video shows how Elementor content is built using elements, organised inside containers.

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.

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

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.

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

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

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.

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

The Submissions page is where you can see all form submissions from your website.  These submissions are stored in an internal database.  While Elementor free allows you to create forms for submissions, these will not be saved to the Submissions screen.

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

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

A storage area for creating and managing code snippets you want to use on your site.

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

This feature allows you to hide elements you don't want to use, making your workflow smoother and more streamlined.

This video goes through the Tools options in Elementor.

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.

A quick look at the final three options in the Elementor menu.

This video looks at the Templates menu.

Elementor has a built in features for Popups. This video gives an overview of this feature.

A quick look at the new (and old) theme builder, and why you may prefer the older version.

Add a Floating element so your users can easily get in touch!

What is a kit library?

The Add New menu gives us another way to create new templates.

Templates can be put into categories, though it's not very intuitive at the moment.

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.

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.

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

There are a few ways you can add a container.  This video looks at them.

Containers can have horizontal and vertical alignment.  These help give containers their flexibility.

Containers can be set to full width or boxed, but what do these terms mean and how do we use them?

Alignment often causing confusion as it doesn't appear to do as instructed.  However, it does work if you know how, so this video de-mystifies the alignment options.

This video looks at container padding and margin, and how best to add spacing between containers.

Containers have a wrap feature that can help minimize the number of containers you need for your design. This video explores the wrap feature.

Custom positioning allows you to move elements in X & Y axis so as to appear as if they are not part of a container.

Container styles give us some interesting options for our containers.  This video goes through the styles.

This video looks at the Grid element.

This video looks at the Basic tab in the toolbox, offering free & pro users a number of commonly used elements.

A look at the elements on the General tab.  These are available for free and pro users.

A look at the WordPress elements n the toolbox.

A quick look at the range of elements available to Pro users.

Here are three design elements for you to have a go at to test your knowledge of using Elementor.

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

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

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

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

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

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.

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

This video looks at how the display conditions can be used to tell Elementor where to use specific categories.

I've set up a brand new, blank site for this section of the course.  This video shows you exactly what I have done to get the demo site ready so you can do the same.

In this video we add the color scheme to Elementor

In this video we'll install the fonts we are using for the site.

Let's set up out fonts and colors in Theme Styles so that everything looks unified.

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

Let's get on and design the footer template.

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

When you are editing a template, you can easily jump back and forth between other templates used to create the one you are working with.

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

This video looks at two similar elements - posts archive and archive posts elements.

This video shows how you can create highly customized archive pages using the Loop Grid.

In this video, I'll show you how to quickly create the other two custom category pages.

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.

We need to create a simplified template for the blog posts, but we can use the Post Template as a starting point.

In this video, we'll create a template to display the pages on our site.

This video shows how to add a Live Search bar to your site.

In this video, we'll create a search results template.

Let's create a custom 404 error page.

This video shows you how to create a floating social media bar and stick it to the side of your site.

With the theme nearly finished, I've decided to make a couple of changes to the homepage.

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

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

In February 2025, Elementor released the AI Planner.  This video takes a look.