{"id":137328,"date":"2025-08-13T14:10:20","date_gmt":"2025-08-13T11:10:20","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=137328"},"modified":"2025-08-13T14:26:47","modified_gmt":"2025-08-13T11:26:47","slug":"elementor-331-v4-alpha-variables-filters","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/","title":{"rendered":"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Take full control with Editor V4 Alpha<\/h2>\n\n\n\n<p>We\u2019re excited to introduce another <strong>Editor V4 Alpha <\/strong>update that continues to push boundaries with improved workflows, scalable design systems, and new styling capabilities. From Variables to Filters and more, now Editor V4 Alpha gives you even more control and clarity.<\/p>\n\n\n\n<p><strong>Note:<\/strong> Editor V4 is still in Alpha and should be used on test and staging sites only.<\/p>\n\n\n\n<p>To activate Editor V4 Alpha, update to the latest Elementor version, then in the WordPress dashboard, go to Elementor &gt; Settings &gt; Editor V4 tab and click \u201cActivate\u201d.<\/p>\n\n\n\n<p>Now is your time to give us feedback! Want to shape Editor V4?<a href=\"https:\/\/github.com\/elementor\/elementor\"> Join the conversation on GitHub<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_30-_-Opt-in-experience-1024x538.webp\" alt=\"\" class=\"wp-image-137336\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_30-_-Opt-in-experience-1024x538.webp 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_30-_-Opt-in-experience-300x158.webp 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_30-_-Opt-in-experience-768x403.webp 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_30-_-Opt-in-experience-1536x806.webp 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_30-_-Opt-in-experience-2048x1075.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Build consistent design systems with color &amp; font Variables<\/h2>\n\n\n\n<p>Designing at scale becomes significantly easier with the introduction of Variables. Rather than assigning styles manually element by element, Variables allow you to define once and apply consistently across your site.<\/p>\n\n\n\n<p>Combined with Global Classes, this feature allows for a modular, maintainable workflow that saves time and ensures visual consistency. Variables define the value, while Classes define the scope of where those Variable values, as well as other styles, are applied.<\/p>\n\n\n\n<p>Let\u2019s say you use the same colors and fonts across multiple Global Classes and across different sections of your site. Instead of manually setting the background, text color, and font family each time, you connect those properties to Variables like primary-color, button-font, and accent-text. Now, if your brand palette changes, a single Variable update will cascade throughout every component styled across all those Classes and Elements.<\/p>\n\n\n\n<p>Variables can be fully controlled by Admins: they can create, edit, and manage all Variables, just like Global Classes. Non-admins (Editors, Authors, Contributors, Store Managers) can apply existing Variables to Elements but cannot edit them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Variables-1024x538.webp\" alt=\"\" class=\"wp-image-137378\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Variables-1024x538.webp 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Variables-300x158.webp 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Variables-768x403.webp 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Variables-1536x806.webp 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Variables-2048x1075.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apply layered visual effects with Filters<\/strong><\/h2>\n\n\n\n<p>Elementor 3.31 brings full support for Filters directly into Editor V4. These filters empower you to enhance your site\u2019s visual aesthetics without writing any code.&nbsp;<\/p>\n\n\n\n<p>In total there are 9 Filters to choose from and combine:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blur<\/li>\n\n\n\n<li>Brightness<\/li>\n\n\n\n<li>Contrast<\/li>\n\n\n\n<li>Hue Rotate<\/li>\n\n\n\n<li>Saturate<\/li>\n\n\n\n<li>Grayscale<\/li>\n\n\n\n<li>Invert<\/li>\n\n\n\n<li>Sepia<\/li>\n\n\n\n<li>Drop shadow<\/li>\n<\/ul>\n\n\n\n<p>These filters are managed through an intuitive repeater interface, enabling you to stack multiple filters, preview changes in real-time, and reorder or remove filters as needed. Each filter adapts to its context with unit-specific controls like percentages or pixels, and integrates seamlessly with Variables, Classes, and States. This gives designers and developers fine-grained control over visual expression without needing custom <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"13895\">CSS<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-CSS-Filters-1024x538.webp\" alt=\"\" class=\"wp-image-137357\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-CSS-Filters-1024x538.webp 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-CSS-Filters-300x158.webp 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-CSS-Filters-768x403.webp 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-CSS-Filters-1536x806.webp 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-CSS-Filters-2048x1075.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Create advanced effects like glassmorphism with Backdrop Filters<\/strong><\/h2>\n\n\n\n<p>Backdrop Filters allow you to apply styling effects to the background behind an element, not just the element itself. This opens the door to contemporary design techniques like glassmorphism. It\u2019s now easier than ever to create layered, transparent containers that maintain readability and elegance, even over busy backgrounds.<\/p>\n\n\n\n<p>When combined with transparency and layered containers, you can now:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blur what\u2019s behind a semi-transparent header<\/li>\n\n\n\n<li>Create readable panels over videos, images, or busy backgrounds<\/li>\n\n\n\n<li>Achieve a modern, refined UI aesthetic with zero custom CSS<\/li>\n<\/ul>\n\n\n\n<p>Just like with Filters, you can choose from 9 different effects like blur, brightness, grayscale, or drop shadow, stack multiple Backdrop Filters and apply them into your V4 classes.<strong>Tip<\/strong>: To use Backdrop Filters effectively, the element must have a transparent background.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Backdrop-Filters-1024x538.webp\" alt=\"\" class=\"wp-image-137343\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Backdrop-Filters-1024x538.webp 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Backdrop-Filters-300x158.webp 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Backdrop-Filters-768x403.webp 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Backdrop-Filters-1536x806.webp 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Backdrop-Filters-2048x1075.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Manage classes smarter with usage insights and locator tools<\/strong><\/h2>\n\n\n\n<p>The updated Class Manager helps you maintain control over your design system. Now, each Global Class shows a usage count, so you know how often it&#8217;s being used across your site. Clicking on this count opens the Locator Panel, where you can view which pages the class appears on and how frequently. This visibility is especially useful for large sites or collaborative projects where hundreds of utility or atomic classes are in play.<\/p>\n\n\n\n<p>You can even search through your class list, helping you identify redundant styles, rename classes thoughtfully, and refactor your system with confidence.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Class-Manager-enhancements-_-search-and-usage-counter-1024x538.webp\" alt=\"\" class=\"wp-image-137350\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Class-Manager-enhancements-_-search-and-usage-counter-1024x538.webp 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Class-Manager-enhancements-_-search-and-usage-counter-300x158.webp 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Class-Manager-enhancements-_-search-and-usage-counter-768x403.webp 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Class-Manager-enhancements-_-search-and-usage-counter-1536x806.webp 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Class-Manager-enhancements-_-search-and-usage-counter-2048x1075.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Understand styling at a glance with inherited values<\/strong><\/h2>\n\n\n\n<p>One of the challenges of <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"13894\">responsive<\/a> design and class-based styling is understanding where a given value is coming from. Editor V4 Alpha introduces visual indicators for inherited styles. These muted placeholders appear within the control panels, showing you at a glance whether a style was inherited from a Class, a base style, or a different responsive breakpoint.<\/p>\n\n\n\n<p>The inherited value is still fully editable but the muted state improves the editing experience and helps prevent unintentional overrides, making it easier to keep your styles clean and intentional.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Inherited-values-1024x538.webp\" alt=\"\" class=\"wp-image-137371\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Inherited-values-1024x538.webp 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Inherited-values-300x158.webp 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Inherited-values-768x403.webp 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Inherited-values-1536x806.webp 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Inherited-values-2048x1075.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>[Pro] Add semantic markup with Attributes<\/strong><\/h2>\n\n\n\n<p>Advanced users can now take full control of their element markup with the Attributes Repeater. This feature allows you to add any number of HTML attributes to elements\u2014such as aria-* for accessibility, data-* for analytics, or role for semantic clarity.<\/p>\n\n\n\n<p>The Attributes panel is available to Elementor Pro users with an Advanced plan or higher and is an essential tool whether you\u2019re optimizing markup for performance and compliance or creating more accessible frameworks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-Pro-Attributes-1024x538.webp\" alt=\"\" class=\"wp-image-137385\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-Pro-Attributes-1024x538.webp 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-Pro-Attributes-300x158.webp 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-Pro-Attributes-768x403.webp 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-Pro-Attributes-1536x806.webp 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-Pro-Attributes-2048x1075.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Add clean visual structure with the new Divider Element<\/strong><\/h2>\n\n\n\n<p>Often overlooked, dividers play a crucial role in layout design. The new Divider Element in Editor V4 is a semantic <code>&lt;hr&gt;<\/code> that introduces clean separation between sections with no unnecessary markup. It\u2019s responsive, easily stylable via Classes, and ideal for anyone building atomic or utility-based design systems. This seemingly small update contributes greatly to a leaner, more maintainable DOM.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Divider-Element-1024x538.webp\" alt=\"\" class=\"wp-image-137364\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Divider-Element-1024x538.webp 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Divider-Element-300x158.webp 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Divider-Element-768x403.webp 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Divider-Element-1536x806.webp 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2025\/08\/Blog-_-Release-3_31-_-Divider-Element-2048x1075.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Try Editor V4 today<\/strong><\/h2>\n\n\n\n<p>Whether you&#8217;re a designer or a developer, this update provides the tools you need to work faster, maintain consistency, and deliver better user experiences. To activate Editor V4 Alpha, update to the latest Elementor version, then navigate to the WordPress dashboard &gt; Elementor &gt; Settings &gt; Editor V4 tab and click \u201cActivate\u201d.<\/p>\n\n\n\n<p>Now\u2019s the time to explore what Editor V4 can do for your workflow. Dive in, experiment, and help shape the future of Elementor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elementor 3.31 is here, pushing Editor V4 forward with powerful design system enhancements and modern visual styling tools. From Variables and Filters to smarter editing workflows and semantic markup, this version makes it easier than ever to design beautiful, performant, and accessible sites.<\/p>\n","protected":false},"author":2024242,"featured_media":137329,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,15],"tags":[173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-137328","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-new-features","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More<\/title>\n<meta name=\"description\" content=\"Elementor 3.31 is here, pushing Editor V4 forward with powerful design system enhancements and modern visual styling tools. From Variables and Filters to smarter editing workflows and semantic markup, this version makes it easier than ever to design beautiful, performant, and accessible sites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More\" \/>\n<meta property=\"og:description\" content=\"Elementor 3.31 is here, pushing Editor V4 forward with powerful design system enhancements and modern visual styling tools. From Variables and Filters to smarter editing workflows and semantic markup, this version makes it easier than ever to design beautiful, performant, and accessible sites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-13T11:10:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-13T11:26:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Roi Tal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roi Tal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/\"},\"author\":{\"name\":\"Roi Tal\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/09f7425d5f0e4e8ac7764b202c165fc0\"},\"headline\":\"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More\",\"datePublished\":\"2025-08-13T11:10:20+00:00\",\"dateModified\":\"2025-08-13T11:26:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/\"},\"wordCount\":981,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp\",\"keywords\":[\"Video\"],\"articleSection\":[\"Elementor\",\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/\",\"url\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/\",\"name\":\"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp\",\"datePublished\":\"2025-08-13T11:10:20+00:00\",\"dateModified\":\"2025-08-13T11:26:47+00:00\",\"description\":\"Elementor 3.31 is here, pushing Editor V4 forward with powerful design system enhancements and modern visual styling tools. From Variables and Filters to smarter editing workflows and semantic markup, this version makes it easier than ever to design beautiful, performant, and accessible sites.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp\",\"width\":2400,\"height\":1260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/09f7425d5f0e4e8ac7764b202c165fc0\",\"name\":\"Roi Tal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/53a4b8103bf51815f66eec9532fb9ba89fb71bfb887c67660c39f06e73f509a5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/53a4b8103bf51815f66eec9532fb9ba89fb71bfb887c67660c39f06e73f509a5?s=96&d=mm&r=g\",\"caption\":\"Roi Tal\"},\"description\":\"Roi is a Product Marketing Manager at Elementor, working in the Editor Plugin team. He comes from a background of music and experience in content marketing and broadcasting, taking pride in creating meaningful communications that evoke and inspire. In his spare time, Roi enjoys making music, cooking, and watching movies.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/roit\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More","description":"Elementor 3.31 is here, pushing Editor V4 forward with powerful design system enhancements and modern visual styling tools. From Variables and Filters to smarter editing workflows and semantic markup, this version makes it easier than ever to design beautiful, performant, and accessible sites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More","og_description":"Elementor 3.31 is here, pushing Editor V4 forward with powerful design system enhancements and modern visual styling tools. From Variables and Filters to smarter editing workflows and semantic markup, this version makes it easier than ever to design beautiful, performant, and accessible sites.","og_url":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-08-13T11:10:20+00:00","article_modified_time":"2025-08-13T11:26:47+00:00","og_image":[{"width":2400,"height":1260,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp","type":"image\/webp"}],"author":"Roi Tal","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Roi Tal","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/"},"author":{"name":"Roi Tal","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/09f7425d5f0e4e8ac7764b202c165fc0"},"headline":"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More","datePublished":"2025-08-13T11:10:20+00:00","dateModified":"2025-08-13T11:26:47+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/"},"wordCount":981,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp","keywords":["Video"],"articleSection":["Elementor","New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/","url":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/","name":"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp","datePublished":"2025-08-13T11:10:20+00:00","dateModified":"2025-08-13T11:26:47+00:00","description":"Elementor 3.31 is here, pushing Editor V4 forward with powerful design system enhancements and modern visual styling tools. From Variables and Filters to smarter editing workflows and semantic markup, this version makes it easier than ever to design beautiful, performant, and accessible sites.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/08\/Blog-Cover-_-Release-3.webp","width":2400,"height":1260},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/elementor-331-v4-alpha-variables-filters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/category\/elementor\/"},{"@type":"ListItem","position":3,"name":"Introducing Elementor 3.31: New Editor V4 Variables, Filters, and More"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/09f7425d5f0e4e8ac7764b202c165fc0","name":"Roi Tal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/53a4b8103bf51815f66eec9532fb9ba89fb71bfb887c67660c39f06e73f509a5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/53a4b8103bf51815f66eec9532fb9ba89fb71bfb887c67660c39f06e73f509a5?s=96&d=mm&r=g","caption":"Roi Tal"},"description":"Roi is a Product Marketing Manager at Elementor, working in the Editor Plugin team. He comes from a background of music and experience in content marketing and broadcasting, taking pride in creating meaningful communications that evoke and inspire. In his spare time, Roi enjoys making music, cooking, and watching movies.","url":"https:\/\/elementor.com\/blog\/author\/roit\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/137328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024242"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=137328"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/137328\/revisions"}],"predecessor-version":[{"id":137392,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/137328\/revisions\/137392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/137329"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=137328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=137328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=137328"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=137328"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=137328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}