Learn Elementor - Elementor for WordPress

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

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.

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

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

I am adding this "info" lecture near the start, as I have no idea when or if you will come across this feature during the course.  It's just something you need to know about a possible change to the user interface.

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 creating a theme with Elementor Pro.  In this video, we'll install the free version of Astra.

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.

Installing custom fonts is the first step to using them in your design.  This video covers the next step.

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.

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

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.

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

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

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

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.

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

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 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.

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

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.

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.

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

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.

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

This video shows how to create a simple archive page using the Posts widget.

The Posts widget lets us add post archives to any web page we want. In this video we add a recent posts list to the homepage of the site.

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

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.

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

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

Let's create a custom 404 error page.

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

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

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

Breakpoints are used to all designers to create a responsive design that will look good on all devices.

The elements in your toolbox have a variety of size units.  This video discusses these.

Font clamps can be used to scale fonts according to viewport size.

Elementor allows you to hide an element on one or more of the viewports.  This video shows you how.

On a mobile device, it sometimes make sense to swap columns.   This video looks at why and how.

This video looks at the Style tab to see what properties of an element can be modified in responsive mode.

This video looks at the Advanced tab to see what properties of an element can be modified in responsive mode.

Let's check the site we've built in the course and make changes where necessary to the responsive design.