Learn Elementor - Elementor for WordPress
- Description
- Curriculum
- FAQ
- Reviews
![13474](https://elearn.zorarte.com/wp-content/uploads/2024/06/2578302_aa50_4.jpg)
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!
-
1Introduction
This video is a quick introduction to myself and the course content.
-
2Why Elementor?
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.
-
3Course Goals
This lecture covers the course goals including a brief overview of the course.
-
4Installing Elementor
In this lecture we'll see how to install both the free and pro versions of Elementor, and the basic differences between them.
-
5Choosing a Theme
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.
-
6Installing Astra
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.
-
7Thinking Containers and Elements
Flexbox introduced containers into Elementor, replacing the older Inner Sections elements. This video shows how Elementor content is built using elements, organised inside containers.
-
8Finding Inspiration
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.
-
9Finding Fonts
New to font selection? Don't worry! I'll show you how to choose fonts that work together.
-
10Colour Palettes
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.
-
11Design Summary
Before moving on to the next section, make sure you have completed these steps.
-
12Box Model
The box model is a fundamental design model. This lecture explores the box model and explains how it works.
-
13Hex Colours
This video looks at the hex color system.
-
14Images
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.
-
15Backend Settings
This lecture goes through the backend settings, and covers the important settings you need to know.
-
16Submissions (PRO)
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.
-
17Custom Fonts - Installing (PRO)
You can easily add custom fonts to Elementor using the custom fonts options. This video show you how to do that.
-
18Custom Fonts - Linking (PRO)
Installing custom fonts is the first step to using them in your design. This video covers the next step.
-
19Custom Icons (PRO)
This video looks at adding custom icons to the Elementor editor.
-
20Custom Code (PRO)
A storage area for creating and managing code snippets you want to use on your site.
-
21Role Manager
The Role Manager is perhaps more important if you are building designs for clients. This video looks at the Role Manager in Elementor.
-
22Element Manager
This feature allows you to hide elements you don't want to use, making your workflow smoother and more streamlined.
-
23Tools
This video goes through the Tools options in Elementor.
-
24System Info
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.
-
25Get Help, Apps & License
A quick look at the final three options in the Elementor menu.
-
26An Overview
This video looks at the Templates menu.
-
27Theme Builder
A quick look at the new (and old) theme builder, and why you may prefer the older version.
-
28Kit Library
What is a kit library?
-
29Add New
The Add New menu gives us another way to create new templates.
-
30Categories
Templates can be put into categories, though it's not very intuitive at the moment.
-
31Interface Layout
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.
-
32Hamburger Menu
The hamburger menu gives you access to some global settings, plus a nice finder tool.
-
33Global Colours
You've chosen the colour palette you wanted to use, so let's get Elementor set up to use those colours.
-
34Global Fonts
You've chosen your default fonts, so let's enter them into Elementor.
-
35Theme Styles
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.
-
36Dial Pad Menu
The DialPad button takes you to the Elements screen, where you can choose and configure the elements as you design your site.
-
37Elementor Page Structure
This lecture is a short reminder about sections, columns and elements.
-
38Adding Containers
There are a few ways you can add a container. This video looks at them.
-
39Container Direction
Containers can have horizontal and vertical alignment. These help give containers their flexibility.
-
40Container :: Boxed v Full Width
Containers can be set to full width or boxed, but what do these terms mean and how do we use them?
-
41Container Alignment & Spacing
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.
-
42Container Padding & Margin
This video looks at container padding and margin, and how best to add spacing between containers.
-
43Container Wrap
Containers have a wrap feature that can help minimize the number of containers you need for your design. This video explores the wrap feature.
-
44Custom Positioning in Containers
Custom positioning allows you to move elements in X & Y axis so as to appear as if they are not part of a container.
-
45Container Styles
Container styles give us some interesting options for our containers. This video goes through the styles.
-
46Basic Elements
This video looks at the Basic tab in the toolbox, offering free & pro users a number of commonly used elements.
-
47General Elements
A look at the elements on the General tab. These are available for free and pro users.
-
48WordPress Elements
A look at the WordPress elements n the toolbox.
-
49Pro Elements
A quick look at the range of elements available to Pro users.
-
50Some homework for you
Here are three design elements for you to have a go at to test your knowledge of using Elementor.
-
51Solution: Homework 1
Let's create the section for homework task #1.
-
52Solution: Homework 2
Let's create the section for homework task #2.
-
53Solution: Homework 3
Let's create the section for homework task #3.
-
54Re-Useable Templates
Elementor Free allows you to create re-usable templates for sections of a web page. The Pro version adds a lot more functionality.
-
55Import & Export of Templates
You might like to share your templates between sites. This lecture shows you how to easily do that.
-
56Global Widgets
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.
-
57Built-In Templates
This video looks at the range of built in templates in Elementor.
-
58The Theme Builder
In this introductory lesson to theme building, we'll look at what is required to create your own WordPress theme using Elementor Pro.
-
59Template Display Conditions
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.
-
60Demo Site Setup
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.
-
61Create a Menu
Let's set up a couple of menus that we can use in our design.
-
62Creating a Header Template
Using the ideas we had earlier, let's consider the website's header template.
-
63Creating a Footer
Let's get on and design the footer template.
-
64Design Homepage
Let's design the homepage based on the prototype we created earlier in the course.
-
65Archive Page - The Blog
In this video, we'll create a unique template for the blog page.
-
66Archive page - Posts Widget
This video shows how to create a simple archive page using the Posts widget.
-
67Adding Recent Posts to the Homepage
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.
-
68Archive page - Loop Grid
This video shows how you can create highly customized archive pages using the Loop Grid.
-
69Single Post Template
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.
-
70Page Template
In this video, we'll create a template to display the pages on our site.
-
71Search Results Template
In this video, we'll create a search results template.
-
72The 404 Page
Let's create a custom 404 error page.
-
73Creating a Landing Page
You can create landing pages with both the free and Pro versions of Elementor. This video shows you how.
-
74Creating a Popup Template
Elementor includes a handy popup template style, with lots of trigger settings. Let's have a look.
-
75Full Site Editing
Elementor actually lets you design your site from a single location. In this video, we take a look at the full site editing feature.
-
76BreakPoints
Breakpoints are used to all designers to create a responsive design that will look good on all devices.
-
77CSS Size Units
The elements in your toolbox have a variety of size units. This video discusses these.
-
78Font Clamps
Font clamps can be used to scale fonts according to viewport size.
-
79Hide Elements
Elementor allows you to hide an element on one or more of the viewports. This video shows you how.
-
80Swapping Columns on Mobule
On a mobile device, it sometimes make sense to swap columns. This video looks at why and how.
-
81Responsive Styles
This video looks at the Style tab to see what properties of an element can be modified in responsive mode.
-
82Responsive Advanced
This video looks at the Advanced tab to see what properties of an element can be modified in responsive mode.
-
83Site Checks
Let's check the site we've built in the course and make changes where necessary to the responsive design.