Learn Elementor WordPress FrontEnd Development Course

Elementor page builder gives you total control to design and create the site you’ve always wanted, without restrictions.
Learn Elementor WordPress FrontEnd Development Course
File Size :
4.47 GB
Total length :
6h 57m



Andrew Williams


Last update




Learn Elementor WordPress FrontEnd Development Course

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.

Learn Elementor WordPress FrontEnd Development Course


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.


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!


Section 1: Get Ready…

Lecture 1 Introduction

Lecture 2 Why Elementor?

Lecture 3 Course Goals

Section 2: Installing Stuff

Lecture 4 Installing Elementor

Lecture 5 Choosing a Theme

Lecture 6 Installing Astra

Section 3: Designing Your Site

Lecture 7 Thinking Sections, Columns & Elements

Lecture 8 Finding Inspiration

Lecture 9 Finding Fonts

Lecture 10 Colour Palettes

Lecture 11 Design Summary

Section 4: Essential Skills & Resources

Lecture 12 Box Model

Lecture 13 Hex Colours

Lecture 14 Images

Section 5: Elementor Backend Settings

Lecture 15 Backend Settings

Lecture 16 Custom Fonts (Pro Only)

Lecture 17 Custom Icons (Pro)

Lecture 18 Role Manager

Lecture 19 Tools

Lecture 20 System Info

Lecture 21 Getting Started

Section 6: Elementor Interface Settings

Lecture 22 Interface Layout

Lecture 23 Hamburger Menu

Lecture 24 Global Colours

Lecture 25 Global Fonts

Lecture 26 Theme Styles

Lecture 27 Dial Pad Menu

Section 7: Elementor Page Structure

Lecture 28 Elementor Page Structure

Lecture 29 Sections

Lecture 30 Columns

Lecture 31 Elements 1 of 2

Lecture 32 Elements 2 of 2

Lecture 33 Homework 1

Lecture 34 Homework 2

Lecture 35 Homework 3

Section 8: FlexBox Designs

Lecture 36 Inner Sections V Flexbox

Lecture 37 Flexbox Responsive Design

Section 9: Using Templates

Lecture 38 Re-Useable Templates

Lecture 39 Global Widgets

Lecture 40 Import & Export of Templates

Lecture 41 Built-In Templates

Section 10: Theme Builder

Lecture 42 Building a theme

Lecture 43 Template Display Conditions

Section 11: Demo Site

Lecture 44 Create Pages

Lecture 45 Create a Menu

Lecture 46 Creating a Header Template

Lecture 47 Creating a Footer

Lecture 48 Design Homepage

Lecture 49 A Better Parallax

Lecture 50 The Other Pages

Lecture 51 Archive Template

Lecture 52 The Blog

Lecture 53 Single Post Template

Lecture 54 The 404 Page

Lecture 55 Creating a Landing Page

Lecture 56 Creating a Popup Template

Lecture 57 Managing your Templates

Lecture 58 Full Site Editing

Section 12: Mobile Rendering

Lecture 59 Mobile Optimization

Section 13: Dynamic Sites With Custom Fields & Custom Post Types (PRO)

Lecture 60 What are Custom Fields

Lecture 61 Creating Custom Fields

Lecture 62 Creating Custom Post Types

Lecture 63 Adding Recipes

Lecture 64 Displaying the Recipes

Lecture 65 Adding the Archive Page

Section 14: Resources

Lecture 66 Problem with Animations?

Lecture 67 Motion Effects

Lecture 68 Bonus Lecture

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 Information:

Udemy | English | 6h 57m | 4.47 GB
Created by: Andrew Williams

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top