Elementor V4 - Big Changes and New Features

This 47-minute tutorial provides a brutally honest walkthrough of Elementor Version 4 Preview, highlighting new features, current limitations, and preparation strategies for this major update. Dive into the new V4 elements including the FLEXBOX Element, DIV Element, HEADING Element, PARAGRAPH Element, IMAGE Element, SVG Element, and BUTTON Element. Explore the comprehensive Style Tab with its Layout, Spacing, Size, Position, Typography, Background, Border, and Effects settings. Learn about the revolutionary CLASS System that allows for creating reusable styles like Large-Text, Medium-Text, and Background-Colour classes. Discover how to apply multiple classes to elements, work with pseudo-states like hover, and understand class hierarchy through the Class Manager. The tutorial also addresses missing features such as Global Colors (variables coming soon) and limitations with custom units for Clamp. Perfect for Elementor users wanting to prepare for the biggest change to the platform yet.

Syllabus

00:00 Intro
00:40 Activate V4 Features
01:45 V4 Elements for now
02:32 Reminder of Pre-V4 Flex Container
02:59 V4 FLEXBOX Element
05:32 Style Tab for all V4 Elements
05:58 Layout Settings from the Style Tab
07:03 Spacing Settings from the Style Tab
08:02 Size Settings from the Style Tab
08:16 Overflow Setting
08:27 Selecting Units
08:35 Where are the Custom Units for Clamp?
09:56 Position Settings from the Style Tab
10:02 Static v Relative v Absolute v Fixed v Sticky
11:03 Z-Index
11:18 Typography Settings from the Style Tab
11:33 Custom Fonts are at the bottom
12:26 No Global Colours yet variables will come soon
13:37 Background Settings from the Style Tab
15:49 Adding Gradients
17:30 Border Settings from the Style Tab
17:46 Effects Settings from the Style Tab
18:14 Which settings are missing?
19:15 Sticky won’t work without this
20:20 V4 DIV Element
21:34 Impact of Flexbox Typography on Text
23:04 V4 HEADING Element
23:22 V4 PARAGRAPH Element
25:09 V4 IMAGE Element
25:20 V4 SVG Element
25:49 Icon Library?
26:11 V4 BUTTON Element
27:10 Aligning Buttons
27:57 The CLASS System
28:32 Important Video Sharing Info
29:04 We’ve been waiting for the Class System
30:04 The Local Class
30:48 Quick Look at the Class Manager
31:03 Create our first Class: Large-Text
33:09 Applying an existing a Class to another element
33:31 Be careful with messing up Classes
35:29 So Font Clamp can’t be used?
36:54 Create our second Class: Medium-Text
37:18 Understanding the Class Hierarchy/Class Manager
39:08 Create our third Class: Background-Colour
39:34 Applying multiple Classes to the button
42:14 Class Pseudo-States
43:10 The Hover State
44:34 Naming Classes can be important
45:07 Conclusion
46:45 Cue the Music