{"id":142898,"date":"2025-11-12T10:41:55","date_gmt":"2025-11-12T08:41:55","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=142898"},"modified":"2025-12-14T14:33:01","modified_gmt":"2025-12-14T12:33:01","slug":"elementor-333-v4-variables-manager-custom-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/elementor-333-v4-variables-manager-custom-css\/","title":{"rendered":"Introducing Elementor 3.33: Variables Manager, Custom CSS, Blend Modes, & more!"},"content":{"rendered":"\n

Editor V4: more flexibility and control!<\/strong><\/h2>\n\n\n\n

Editor V4 represents a new CSS-first, class-driven architecture that reimagines how design systems work inside Elementor. It\u2019s built to scale\u2014from single websites to global brand systems\u2014and to ensure that styling remains predictable, reusable, and lightweight.<\/p>\n\n\n\n

Currently, Editor V4 is for testing on staging<\/strong> environments only<\/strong>. Soon, after the Alpha is stable, a production-ready Beta version will be rolled out, followed by the full release.<\/p>\n\n\n\n

To activate Editor V4 Alpha:<\/strong><\/p>\n\n\n\n

    \n
  1. Update to the latest version of Elementor.<\/li>\n\n\n\n
  2. Go to Elementor \u2192 Settings \u2192 Editor V4<\/strong> in your WordPress dashboard.<\/li>\n\n\n\n
  3. Click activate.<\/li>\n<\/ol>\n\n\n\n

    Manage design systems with the Variables Manager<\/strong><\/h2>\n\n\n\n

    Editor V4\u2019s new Variables Manager<\/strong> introduces a centralized workspace to view, create, and manage all your design variables from one place. It transforms how you organize and maintain your design system, giving you full control over every color, typography<\/a>, and size variable across your website.<\/p>\n\n\n\n

    Instead of managing Variables separately in each widget or control, the Variables Manager gives you an overview of all existing design tokens and lets you update them in real time. You can edit, search or delete Variables directly within the panel, with live feedback and validation. <\/p>\n\n\n\n

    Main highlights of the Variables Manager:<\/p>\n\n\n\n