Version 4 Classes Masterclass - and ADD Custom CSS!

👉 Courses & Packs: https://learn.websquadron.co.uk
👉 Let's Strategise: https://learn.websquadron.co.uk/#book

Let's have a look at using CSS and Classes with Elementor's Version 3 and 4 - and show you the simple way to use Custom CSS with Version 4 Elements and make them applicable to Version 3 at the same time.

This Masterclass will strengthen veterans and completely remove fear about CSS and Classes :)

00:00 Intro
00:44 Set Up
01:55 Page with V3 and V4 Elements
02:41 Reminder of using V3 Custom CSS
04:46 Using Fluid Typography with V3

Link for Font Clamp Calculator: https://learn.websquadron.co.uk/codes...

06:59 Reminder of V3 Global Colors and Fonts
07:45 Building a V4 Class
10:30 Applying V4 Classes elsewhere
11:35 V4 Class Inheritance Marker
12:05 Adding a V4 Font Class
12:43 V4 Green Marker versus V4 Grey Marker
13:36 V4 Pseudo Classes eg: Hover
14:41 Understanding V4 Class Hierarchy
15:19 V4 Class Manager
16:23 Using Color as a V4 Class
17:00 Adding V4 Variables for Colors
19:16 Using V4 Variables for Fonts (but not Clamp)
20:27 Will V3 and V4 Classes work together?
23:51 MUST WATCH !! Custom CSS for V3 and V4
29:08 The Custom CSS V3 and V4 Proof
32:33 Conclusion


Example Custom CSS that works across Version 3 and Version 4 !!

:is(.v4_xxxlarge :is(h1, h2, h3, h4, h5, h6, p, a, button, span),
:is(h1, h2, h3, h4, h5, h6, p, a, button, span).v4_xxxlarge:is(.e-heading-base, .e-paragraph-base, .e-button-base)) {
font-size: clamp(3.00rem, 2.48276rem + 2.20690vw, 4.00rem);}


:is(.v4_poppins :is(h1, h2, h3, h4, h5, h6, p, a, button, span),
:is(h1, h2, h3, h4, h5, h6, p, a, button, span).v4_poppins:is(.e-heading-base, .e-paragraph-base, .e-button-base)) {
font-family: "Poppins", Sans-Serif;}


:is(.v4_grey_bg :is(h1, h2, h3, h4, h5, h6, p, a, button, span),
:is(h1, h2, h3, h4, h5, h6, p, a, button, span).v4_grey_bg:is(.e-heading-base, .e-paragraph-base, .e-button-base)) {
background-color: #999999;}


:is(.v4_orange :is(h1, h2, h3, h4, h5, h6, p, a, button, span),
:is(h1, h2, h3, h4, h5, h6, p, a, button, span).v4_orange:is(.e-heading-base, .e-paragraph-base, .e-button-base)) {
color: #FFA900;}


Version 4 Classes Masterclass - and ADD Custom CSS!


👉 WordPress Hosting - https://be.elementor.com/visit/?bta=2...
👉 The Pro Page Builder - https://be.elementor.com/visit/?bta=2...

Affiliate Links for my 2025 gear:
Flexispot Electric Desk 200cm x 80 cm - https://amzn.to/3IuL4ZS
Sony ZV-E10 Mark II - https://amzn.to/454zLjG
Sigma 16mm F1.4 Sony Lens - https://amzn.to/4lF0mcQ
CPL Polarising Lens - https://amzn.to/3TAV5H8
Edifier Speakers - https://amzn.to/4lC2eDy
Sandisk 2TB USB4 SSD - https://amzn.to/4kBNcw0
Godox ES45 Lights - https://amzn.to/44ZgRe1
56cm Light Diffuser Panel - https://amzn.to/3U9Rr7g
Smallrig clamps - https://amzn.to/3IqYdTt
ASUS ProArt Monitor 3840 x 2160 - https://amzn.to/4kzud5f
Electriq 49" Ultrawide Monitor 3840 x 1080 - https://amzn.to/40imP74
FiFine K688 Dynamic Microphone - https://amzn.to/4ePXnMl
FiFine Microphone Arm - https://amzn.to/44wanmT
Mac Mini M2 Pro - https://amzn.to/4kONlws
Elgato 4k Camlink - https://amzn.to/4lUhoUe
Smallrig Projector Light - https://amzn.to/452oZud
LED Standing Light - https://amzn.to/46Ildrb
LED Shelf lights - https://amzn.to/4meYAzp
Camera Boom Arm - https://amzn.to/3GCxaUQ
Remarkable Pro: https://amzn.to/4i0q35I