Wordpress Front End Development Elementor

Elementor page builder gives you total control to design and create the site you've always wanted, without restrictions.

Last updated 2022-01-10 | 4.6

- 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 you'll learn

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.

* Requirements

* A working knowledge of WordPress.
* Elementor plugin is required for this course. If you want to design your own theme
* then you will need the Pro version.

Description

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!

Who this course is for:

WordPress users that are frustrated trying to get a WordPress theme to look good.
Any WordPress user who want flexible website design, and total control over the placement of design elements.
Any WordPress user that wants to learn Elementor.

Course content

13 sections • 66 lectures

Get Ready... 3 lectures

Introduction Preview 04:29

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

Why Elementor? Preview 04:29

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 Preview 01:20

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

Installing Stuff 3 lectures

Installing Elementor Preview 07:32

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 Preview 05:18

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 Preview 03:18

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 5 lectures

Thinking Sections, Columns & Elements Preview 09:29

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

Finding Inspiration Preview 10:15

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 Preview 06:37

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

Colour Palettes Preview 08:39

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 Preview 01:05

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

Essential Skills & Resources 3 lectures

Box Model Preview 09:16

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

Hex Colours Preview 04:11

This video looks at the hex color system.

Images Preview 03:42

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

Backend Settings Preview 04:27

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

Custom Fonts (Pro Only) Preview 04:28

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

Custom Icons (Pro) Preview 02:36

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

Role Manager Preview 01:58

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

Tools Preview 04:44

This video goes through the Tools options in Elementor.

System Info Preview 00:52

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 Preview 01:11

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 6 lectures

Interface Layout Preview 04:48

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 Preview 06:50

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

Global Colours Preview 03:34

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

Global Fonts Preview 04:14

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

Theme Styles Preview 05:52

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 Preview 02:23

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 8 lectures

Elementor Page Structure Preview 02:11

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

Sections Preview 17:09

This video looks at sections in a little more detail.

Columns Preview 07:09

This video looks at columns in a little more detail.

Elements 1 of 2 Preview 19:26

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

Elements 2 of 2 Preview 11:48

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

Homework 1 Preview 07:20

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

Homework 2 Preview 05:37

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

Homework 3 Preview 04:07

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

Using Templates 4 lectures

Re-Useable Templates Preview 01:36

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 Preview 07:45

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 Preview 01:27

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

Built-In Templates Preview 04:45

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

Theme Builder 2 lectures

Building a theme Preview 03:42

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 Preview 05:24

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 15 lectures

Create Pages Preview 02:42

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

Create a Menu Preview 01:21

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

Creating a Header Template Preview 05:42

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

Creating a Footer Preview 18:10

Let's get on and design the footer template.

Design Homepage Preview 19:17

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

A Better Parallax Preview 01:11

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 Preview 03:31

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

Archive Template Preview 07:03

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

The Blog Preview 06:29

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

Single Post Template Preview 04:32

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 Preview 08:04

Let's create a custom 404 error page.

Creating a Landing Page Preview 06:57

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

Creating a Popup Template Preview 10:50

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

Managing your Templates Preview 02:53

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

Full Site Editing Preview 01:59

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 1 lectures

Mobile Optimization Preview 10:23

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) 6 lectures

What are Custom Fields Preview 04:50

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

Creating Custom Fields Preview 09:24

Learn how to create custom fields

Creating Custom Post Types Preview 04:23

Learn how to create custom post types.

Adding Recipes Preview 02:39

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

Displaying the Recipes Preview 06:29

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

Adding the Archive Page Preview 04:03

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

Resources 3 lectures

Problem with Animations? Preview 00:42

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

Motion Effects Preview 17:06

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.