Elementor Complete Tutorial

 in WordPress  tagged plugin / tutorial / Elementor by

There is a three-hour YouTube video called Elementor Complete Tutorial 2019 – Build a Full Website with Elementor that has almost one million views that seems good. I watched some of it. The entire video is 3 hours and 6 minutes.

It was released by “Web Monkey” in January 2019. His name is Alex. The website is “Don’t Get Hacked”. It’s a fictional company called White Hat Hackers, who are ethical hackers. It’s a one-page website that you scroll down to reveal the different sections. He uses the free version of Elementor in the first part of the tutorial. Later he uses the paid version of Elementor and add more effects and annimations.

The video starts from the beginning. He assumes you already have WordPress installed, but nothing else. No pages or post added. It looks like he also assumes Elementor plugin is installed and activated, which is easy to do. He’s hosting with Siteground, but that’s not important. He’s using the 2019 Theme of WordPress. Since he builds the website with Elementor from scratch, the theme he uses is not important.

Have a look at the end result site, live at https://whitehathackers.taskopedia.com.

Video Time Stamps

  • 3:52 – Initial Setup
  • 5:34 – Elementor Settings
  • 11:42 – Setting up the Home Page
  • 15:38 – Setting up our Global Values
  • 21:42 – Adding our First Section
  • 32:50 – Adding the ‘Who We Are’ section
  • 40:18 – Working with the Navigator & History Tools
  • 42:30 – Creating Advanced Structures
  • 47:02 – Elementor Challenge
  • 47:58 – Adding the Services Section
  • 56:31 – Adding the ‘Why Work with Us’ Section
  • 1:06:03 – Adding the ‘Meet the Team’ Section
  • 1:12:18 – Adding the Clients Section
  • 1:16:17 – Adding the Testimonials Section
  • 1:22:06 – Working with Margins and Paddings
  • 1:28:45 – Working with the Spacer Element
  • 1:32:38 – Adding a Number Counter
  • 1:35:35 – Creating the Contact Us Section
  • 1:42:27 – Creating the Header Part 1
  • 1:53:16 – The Page Builder Framework Theme
  • 1:55:09 – Creating the Header Part 2
  • 1:59:39 – Responsive Design with Elementor
  • 2:07:24 – Page Templates & Blocks
  • 2:12:33 – The Finder Tool
  • 2:14:32 – Introduction to Elementor Pro
  • 2:19:09 – Section 1 Review
  • 2:19:57 – Elementor Pro Section Preview
  • 2:20:21 – Recreating the Header with Elementor Pro
  • 2:31:12 – Adding an Animated Headline
  • 2:35:32 – Adding a Countdown Timer
  • 2:40:58 – Recreating the Services Section with Elementor Pro
  • 2:48:13 – Recreating the Why Work with Us Section
  • 2:56:20 – Recreating the Contact Us Section
  • 3:04:48 – THE END HAHAHAHA