Learn Elementor - WordPress Front-End Development Course

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.

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.

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

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.

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.

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.

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.

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.

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. 

This video looks at sections in a little more detail.

This video looks at columns in a little more detail.

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

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

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

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

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.

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

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

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

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

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

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.

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.

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

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

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

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

Learn how to create custom fields

Learn how to create custom post types.

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

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

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