The perfect Typography Setup for Elementor V4, V3 & WordPress Posts
9.7K views · 2026-05-04
UI DesignTypography
In this video, I’ll show you a typography setup for Elementor V4 that also works with older V3 widgets, Gutenberg blog posts, and even the Classic Editor.
Elementor V4 introduces a new way of working with variables and classes, but most websites are still not fully V4 yet. We still use V3 widgets, WordPress posts, global fonts, and site settings. So instead of creating a system that only works in the new Atomic Editor, I wanted to create a setup that works everywhere and is ready for the future.
I’ll show you how to set up font family variables, font size variables, clamp values, typography classes, global fonts, global colors, and site-wide typography styles. This way, your font sizes, font families, and colors are managed from one central place, while still working across Elementor V4, Elementor V3, Gutenberg, and the Classic Editor.
Explore Elementor Pro and One via http://livingwithpixels.com/elementor
Website Stylekit: https://websitestylekit.com/
→ Software I recommend
Hostinger for webhosting: http://livingwithpixels.com/hostinger
Elementor for no-code web-development: http://livingwithpixels.com/elementor
Elementor Add-on for dynamic content: http://livingwithpixels.com/crocoblock
Figma for Web Design: https://livingwithpixels.com/figma
All recommended software & discounts: https://livingwithpixels.com/links/
→ Full A-Z Courses
Elementor Pro Mastery Course: https://livingwithpixels.com/elementor-course
Figma Design Mastery Course: https://livingwithpixels.com/design-course
Business Course: https://livingwithpixels.com/business-course
→ Social media
Tiktok: https://www.tiktok.com/@rinodeboer
Instagram: https://www.instagram.com/rinodeboer/
Twitter / X: https://www.twitter.com/rinodeboer/
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.
Elementor V4 introduces a new way of working with variables and classes, but most websites are still not fully V4 yet. We still use V3 widgets, WordPress posts, global fonts, and site settings. So instead of creating a system that only works in the new Atomic Editor, I wanted to create a setup that works everywhere and is ready for the future.
I’ll show you how to set up font family variables, font size variables, clamp values, typography classes, global fonts, global colors, and site-wide typography styles. This way, your font sizes, font families, and colors are managed from one central place, while still working across Elementor V4, Elementor V3, Gutenberg, and the Classic Editor.
Explore Elementor Pro and One via http://livingwithpixels.com/elementor
Website Stylekit: https://websitestylekit.com/
→ Software I recommend
Hostinger for webhosting: http://livingwithpixels.com/hostinger
Elementor for no-code web-development: http://livingwithpixels.com/elementor
Elementor Add-on for dynamic content: http://livingwithpixels.com/crocoblock
Figma for Web Design: https://livingwithpixels.com/figma
All recommended software & discounts: https://livingwithpixels.com/links/
→ Full A-Z Courses
Elementor Pro Mastery Course: https://livingwithpixels.com/elementor-course
Figma Design Mastery Course: https://livingwithpixels.com/design-course
Business Course: https://livingwithpixels.com/business-course
→ Social media
Tiktok: https://www.tiktok.com/@rinodeboer
Instagram: https://www.instagram.com/rinodeboer/
Twitter / X: https://www.twitter.com/rinodeboer/
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.