Learning Elementor for WordPress Design
4h 13mIntermediate2022-06-01
Authors

Emily Kay
Web Developer and Graphic Designer
Course details
Elementor is a drag-and-drop page builder plugin for WordPress that enables you to customize and edit your WordPress website without having to be proficient in code. In this course, instructor Emily Kay walks you through everything you need to know to create WordPress-based experiences and layouts. After explaining some definitions and features, Emily goes over the general setup for working with Elementor in WordPress. She introduces Elementor basics like templates, sections, widgets, responsive mode, and more. Emily steps through starting your project and using widgets to achieve a wide variety of formats and effects. Then she deep dives into more that you can do with widgets, such as an image carousel, incorporating testimonials and ratings into your layout, adding a map, and more. Emily covers fancy widgets, then finishes up with useful tips on pointing your webpage to your custom homepage and customizing your CSS.
Skills covered
WordPressContent Management Systems (CMS)ProjectWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Elementor - The ultimate WordPress plugin
- 02 - What you should know
- 03 - Exercise files
1. What Is Elementor
- 04 - What is Elementor
- 05 - Elementor features
2. General Setup
- 06 - Working locally
- 07 - Install Local
- 08 - Configuring WordPress
- 09 - Choose and install your theme
- 10 - Install Elementor
- 11 - Other plugins
3. Elementor Basics
- 12 - Introduction to Elementor workspace
- 13 - Understand the structure of Elementor
- 14 - Template overview
- 15 - Sections
- 16 - Columns
- 17 - Widgets
- 18 - Responsive mode
- 19 - Working with Navigator and undo
- 20 - Creating custom templates
4. Getting Started with Your Project
- 21 - Project overview
- 22 - Creating project content and menu
- 23 - Design system - Global colors
- 24 - Design system - Global fonts
- 25 - Theme styles and buttons
- 26 - Setting up the basic header
- 27 - Building a basic footer
5. Using Widgets
- 28 - Interior hero - Working with background images
- 29 - Designing responsively
- 30 - Interior CTA section
- 31 - Informational block with custom divider
- 32 - Create multiple column blocks
- 33 - Duplicate and move elements
- 34 - Work with the icon box widget
- 35 - Reusable page chunks
- 36 - Custom template blocks
- 37 - Social icons and saving custom template
- 38 - Challenge
- 39 - Solution
6. More with Widgets
- 40 - Carousel
- 41 - Testimonial and rating
- 42 - Gallery
- 43 - Icon List
- 44 - Add a map
7. Fancy Widgets
- 45 - Background image slideshow
- 46 - Overlapping elements
- 47 - Use inner sections
- 48 - Add video
- 49 - Use masks on images
- 50 - Scroll background image
- 51 - Challenge
- 52 - Solution
8. Completing Your Project
- 53 - Set the homepage
- 54 - Customize your CSS