{"id":41969,"date":"2020-09-30T11:29:00","date_gmt":"2020-09-30T11:29:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=41969"},"modified":"2025-12-03T19:33:12","modified_gmt":"2025-12-03T17:33:12","slug":"elementor-3-new-professional-features","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/","title":{"rendered":"Introducing Elementor 3.0: Design System Features, New Theme Builder &amp; Significant Performance Improvements"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"41969\" class=\"elementor elementor-41969\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-50b21aa7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"50b21aa7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2327e8b8\" data-id=\"2327e8b8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cd7889d elementor-align-center elementor-widget elementor-widget-button\" data-id=\"cd7889d\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/pricing\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Get Elementor Pro<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-babe654 elementor-widget elementor-widget-text-editor\" data-id=\"babe654\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>IMPORTANT<\/b>&nbsp;&#8211; Elementor 3.0 is a major release, and that&#8217;s why we recommend you <a href=\"https:\/\/elementor.com\/blog\/backup-wordpress\/\">backup your site before updating<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1891811c elementor-widget elementor-widget-text-editor\" data-id=\"1891811c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Every feature release moves Elementor forward, but the major ones produce substantial leaps for our user&#8217;s workflow.<\/p><p>Elementor 1.0 in 2016 brought a whole new approach to WordPress visual design. Elementor 2.0 in 2018 included a revolutionary <a href=\"https:\/\/elementor.com\/features\/theme-builder\/\">Theme Builder<\/a>.<br \/>Now, in 2020, I&#8217;m ecstatic to unveil\u00a0Elementor 3.0, which comes with not one, but 3 different groundbreaking features: Design System Features, New Theme Builder &amp; significant performance improvements.<\/p><p>It took months of work, and a comprehensive rebuild of our infrastructure, but the hard work paid off. Elementor 3.0 includes both core and Pro improvements and a whole new way to build websites. Read on to discover how this version will revolutionize your workflow, and allow you to create faster, more consistent websites than ever before.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e366716 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"e366716\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/how-elementor-prioritizes-and-improves-website-performance\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">See How Elementor Prioritizes and Improves Website Performance<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3761b7ed elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3761b7ed\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4b497245\" data-id=\"4b497245\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-54f3e2d elementor-widget elementor-widget-heading\" data-id=\"54f3e2d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Design System Features<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47ec2c5e elementor-widget elementor-widget-heading\" data-id=\"47ec2c5e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Manage Your Site's Design System From One Place<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4087a241 elementor-widget elementor-widget-text-editor\" data-id=\"4087a241\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>How do big brands like Spotify, Apple or Nike manage to deliver a consistent, winning experience across all platforms?\u00a0<\/p><p>No matter what <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/landing-page-builder\/\"   title=\"Landing Page Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25793\">landing page<\/a>, website page, banner or asset you see, they maintain the same look and feel. This is thanks to something called a Design System.<\/p><p>But what if we told you that web creators like you can now offer the same kind of big brand consistency to their clients?<\/p><p><b>Introducing Design System Features. <\/b>Implement a design system, revolutionize your workflow and keep your entire team consistent around one design language.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-75f70 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"75f70\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6c11e401\" data-id=\"6c11e401\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c5d5901 elementor-blockquote--skin-clean elementor-blockquote--align-center elementor-blockquote--button-view-icon elementor-blockquote--button-skin-bubble elementor-widget elementor-widget-blockquote\" data-id=\"4c5d5901\" data-element_type=\"widget\" data-widget_type=\"blockquote.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<blockquote class=\"elementor-blockquote\">\n\t\t\t<p class=\"elementor-blockquote__content\">\n\t\t\t\tRevolutionize your workflow, and create faster, more consistent websites.\t\t\t<\/p>\n\t\t\t\t\t\t\t<div class=\"e-q-footer\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/twitter.com\/intent\/tweet?text=Revolutionize+your+workflow%2C+and+create+faster%2C+more+consistent+websites.&amp;url=https%3A%2F%2Felementor.com%2Fblog%2Fblog%2Felementor-3-new-professional-features%2F&amp;via=elemntor\" class=\"elementor-blockquote__tweet-button\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-twitter\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z\"><\/path><\/svg>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-screen-only\">Tweet<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/blockquote>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6f795530 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6f795530\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e365521\" data-id=\"e365521\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-261df4ca elementor-widget elementor-widget-heading\" data-id=\"261df4ca\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What is a Design System?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-325fa24e elementor-widget elementor-widget-text-editor\" data-id=\"325fa24e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For those of you unfamiliar with the term, a <a href=\"https:\/\/elementor.com\/blog\/design-system\/\">Design System<\/a> is the single source of truth that forms the base around which a team designs a website.\u00a0<\/p><p>Let&#8217;s say you are building a site that includes several pages, landing pages and blog posts. How can you make sure all the colors, fonts, and layout across all these pages and posts remain consistent to one language? This is the role of the design system.\u00a0<\/p><p>Implementing design system capabilities enables you to design and edit new and existing websites lightning fast, cut through workflows and shortening time-to-market while maintaining brand and visual consistency.<\/p><p>You have all your website design components built-in &#8211; so your entire team is synced and your website is 100% consistent, all the time.<\/p><p>Elementor\u2019s Design System Features include:<\/p><ul><li>New Site Settings panel &#8211; including site identity, lightbox settings, theme styles and more<\/li><li>Global Colors<\/li><li>Global Fonts<\/li><\/ul><p>Let\u2019s explore each of these features and see how they will help you <a href=\"https:\/\/elementor.com\/features\/for-professionals\/\">build more professional websites<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-73a8116a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"73a8116a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6b4b508d\" data-id=\"6b4b508d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-47fe0e31 elementor-widget elementor-widget-heading\" data-id=\"47fe0e31\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Design System Feature #1<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-490cf5ed elementor-widget elementor-widget-heading\" data-id=\"490cf5ed\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Site Settings<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9bb48ed elementor-widget elementor-widget-video\" data-id=\"9bb48ed\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2020\/08\/Design-system-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-504ddd8b elementor-widget elementor-widget-text-editor\" data-id=\"504ddd8b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Defining the very basic settings of a website can be quite time-consuming.<\/p><p>Juggling Theme code, Customizer, functions.php \u2026 forget about it.<\/p><p>We added a new Site Settings panel, showing many site wide configuration tools. This way, you can stay inside Elementor, and have one place to set all of your site settings. Sweet!<\/p><p>Inside any page you edit with Elementor, go to the left panel, and click on the top left icon. You will switch to the Global Settings panel.<\/p><p>Inside the Global Settings panel you will find:<\/p><ul><li><b>Site Identity: <\/b>Customize your cross-site identity such as Logo, Title, Tagline and even <a href=\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/\">Favicon<\/a><\/li><li><b>Layout: <\/b>Define Elementor&#8217;s default layout settings like default content width or default page layout<\/li><li><b>Lightbox:<\/b> Set all the default styling of Elementor Lightboxes<\/li><li><b>Theme Style: <\/b>Customize your non-Elementor HTML elements (usually set by the theme) for <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"26 Best Fonts For Websites &amp; Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25795\">Typography<\/a>, Buttons, Images and Form Fields.<\/li><li><span style=\"font-weight: bold\">Global Colors and Fonts<\/span>\u00a0(will be explained in detail below)<\/li><\/ul><div><a href=\"https:\/\/www.youtube.com\/watch?v=GX4AKb2mYHw\" target=\"_blank\" rel=\"noopener\">Watch Site Settings tutorial &gt;<\/a><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2cbc36c8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2cbc36c8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6def1794\" data-id=\"6def1794\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-366bf248 elementor-widget elementor-widget-heading\" data-id=\"366bf248\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Design System Feature #2<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3adc2fcf elementor-widget elementor-widget-heading\" data-id=\"3adc2fcf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Global Colors<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea08c51 elementor-widget elementor-widget-video\" data-id=\"ea08c51\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2020\/08\/Global-colors.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43eae6bb elementor-widget elementor-widget-text-editor\" data-id=\"43eae6bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Version 3.0 introduces a new method of working with site colors: Global Colors.<\/p><p>Global Colors enable you to change the color in one place, and have that color update everywhere you placed it.<\/p><p>Start by choosing your site&#8217;s four basic Global Colors. Then, go into any color style in Elementor, and set it to be one of the four colors. You can also add as many custom colors to the Global List, and name them however you like.<\/p><p>Now the magic of <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25792\">CSS<\/a> variables kicks in. Go back to Global Colors, and change one of the colors. Your entire site&#8217;s <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\"   title=\"7 Rules for Choosing A Website Color Scheme\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25794\">color scheme<\/a> changes according to the new Global Color. Mixing and matching colors during your web design process has never been easier.<\/p><p>We built this so you can see the actual Global Color inside the control, removing all guesswork. You&#8217;ll also be able to assign a different Global Color from within the control, or create a new Global Color, all using the same color picker inside the control.<\/p><p>Do you offer services for maintaining, updating or redesigning existing sites? Then this is your lucky day! This feature is perfect for making changes to a website&#8217;s color scheme without the need to go over all of your pages and posts and edit each one of them individually. From now you can set, edit and remove any global color from one place with few clicks.<\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=CjdFxKPPikU\" target=\"_blank\" rel=\"noopener\">Watch Global Colors tutorial &gt;<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-48693f00 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"48693f00\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-636e61e3\" data-id=\"636e61e3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3bf0e46 elementor-widget elementor-widget-heading\" data-id=\"3bf0e46\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Design System Feature #3<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4be0223c elementor-widget elementor-widget-heading\" data-id=\"4be0223c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Global Fonts<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3932fe2 elementor-widget elementor-widget-video\" data-id=\"3932fe2\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2020\/08\/Global-fonts.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1753afe5 elementor-widget elementor-widget-text-editor\" data-id=\"1753afe5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Colors and Typography are the building blocks of any website. Using the same logic of Global Colors, we created a whole new method of working with your site&#8217;s text styles.<\/p><p>With Global Fonts, every typography settings can be set globally. You can now configure all your site typography settings globally, including: Font Family, Font Size &amp; Scale, Font Weight, Font Transform, Font Style, Font Decoration, Line Height, Letter Spacing, and Responsive Settings.<\/p><p>You&#8217;ll be able to apply these settings to every widget that contains text, and customize your own Global Fonts beyond the basic list.<\/p><p>Once you set your site&#8217;s typography, you&#8217;ll be able to make changes that affect all the text areas that you set with Global Fonts.<\/p><p>You can also see exactly which Global Fonts was applied.<\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=CjdFxKPPikU\" target=\"_blank\" rel=\"noopener\">Watch Global Fonts tutorial &gt;<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-114168f elementor-widget elementor-widget-heading\" data-id=\"114168f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">The New Theme Builder<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b21547 elementor-widget elementor-widget-heading\" data-id=\"6b21547\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Your Entire Site Visualized &amp; Organized in One Place<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1196aac elementor-widget elementor-widget-video\" data-id=\"1196aac\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2020\/08\/Theme-builder.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db6967d elementor-widget elementor-widget-text-editor\" data-id=\"db6967d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Although Elementor&#8217;s\u00a0<a href=\"https:\/\/elementor.com\/features\/theme-builder\/\" target=\"_blank\" rel=\"noopener\">Theme Builder<\/a>\u00a0has become the industry leader in terms of visual full website design, we decided to make it even better.\u00a0<\/p><p><b>Introducing the new Theme Builder, a single place to manage your ENTIRE site in a visual and intuitive way.<\/b><\/p><p>The Theme Builder is a React based application, which provides an overview of the site, including all the site parts: header, footer, global page <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25796\">template<\/a>, global post template and more. Every part of the site is intuitively within reach, making the task of designing a complete website that much easier.<\/p><p>The new Theme Builder will allow you to glance over your entire site structure visually. See which parts are active and which are not, manage which template applies to different areas of your website, and have easy access to change, update or add content as you please.<\/p><p>Each site part gets an automatic image preview and a screenshot of the actual template. This lets you get a visual \u2018birds-eye-view\u2019 of your entire site, so you can pinpoint the exact template you wish to edit.<\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=BWx8NQm2hdI\" target=\"_blank\" rel=\"noopener\">Watch Theme Builder tutorial &gt;<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8535cc5 elementor-widget elementor-widget-heading\" data-id=\"8535cc5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How It Works\n\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b649b5 elementor-widget elementor-widget-text-editor\" data-id=\"6b649b5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This next paragraph is going to turn you into a \u2018super-Elementor-builder\u2019, ahead of most web creators, so I suggest you pay special attention.<\/p><p>To start building your site using the new Theme Builder, click on the hamburger icon on the top left of the editor, then click on \u2018Theme Builder\u2019. You can also access it from the top admin bar and using a shortcut CMD \/ CTRL + Shift + E. This is applicable from anywhere in your site.<\/p><p>You will now see all the essential parts that are needed to create a complete site.<\/p><p>If it\u2019s a new site, and it doesn\u2019t have any parts yet, click on any part and build it. We suggest starting with a new header (just to stay \u2018on top\u2019 of things\u2026)<\/p><p>After you build the header, you can move on to designing additional site parts, and insert them to any page you&#8217;d like.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-277839b7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"277839b7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2d64ecae\" data-id=\"2d64ecae\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4ee5ca91 elementor-blockquote--skin-quotation elementor-blockquote--align-center elementor-blockquote--button-view-icon-text elementor-blockquote--button-skin-classic elementor-widget elementor-widget-blockquote\" data-id=\"4ee5ca91\" data-element_type=\"widget\" data-widget_type=\"blockquote.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<blockquote class=\"elementor-blockquote\">\n\t\t\t<p class=\"elementor-blockquote__content\">\n\t\t\t\tNew Theme Builder: Finally, a Visual Birds-Eye-View of Your Entire Website.\t\t\t<\/p>\n\t\t\t\t\t\t\t<div class=\"e-q-footer\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/twitter.com\/intent\/tweet?text=New+Theme+Builder%3A+Finally%2C+a+Visual+Birds-Eye-View+of+Your+Entire+Website.&amp;url=https%3A%2F%2Felementor.com%2Fblog%2Fblog%2Felementor-3-new-professional-features%2F&amp;via=elemntor\" class=\"elementor-blockquote__tweet-button\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-twitter\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z\"><\/path><\/svg>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-blockquote__tweet-label\">Click to Tweet<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/blockquote>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d31f5a9 elementor-widget elementor-widget-heading\" data-id=\"d31f5a9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Bonus Feature: Performance Improvements<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c289438 elementor-widget elementor-widget-text-editor\" data-id=\"c289438\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We are always making performance tweaks and improvements, but this time, we\u2019ve made some major updates to our code and infrastructure, and those resulted in some noticeable performance improvements.<\/p><p>We\u2019ve reduced the number of DOM elements, and made Elementor render your web pages faster.<\/p><p>This will improve your page speed rankings and the overall experience for users on your website.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50546f4 elementor-widget elementor-widget-heading\" data-id=\"50546f4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What Changed in Terms of Page Load Speed?\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a49e5af elementor-widget elementor-widget-text-editor\" data-id=\"a49e5af\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor 3.0 includes significant improvements to server side rendering processes and to the way Elementor renders dynamic CSS values.<\/p><p>Elementor allows you to incorporate dynamic elements and values in your website. For example, you can create a template for site posts, and decide you want to display each post&#8217;s featured image as a background behind the post title.<\/p><p>Behind the scenes, when Elementor prepares a post to be sent to the browser, it scans the post for dynamic values, fetches them, and if they include any CSS values, prints that CSS. This process is &#8220;expensive&#8221; &#8211; meaning it\u2019s time consuming and resource-heavy.<\/p><p>In Elementor 3.0, we substantially reduced the time spent on this process. This is done by storing a list of dynamic values for each post. Once that list has been created, whenever someone visits the post, Elementor goes straight to this list, thus making the process faster and lean. Dynamic values affected by this optimization include background images, colors, and more.<\/p><p>This improvement brings with it a substantial reduction of server loads, time to first byte and, as a result, much faster loading time for site visitors. Noticed a performance improvement in one of your sites? Let us know in the comments.<\/p><p>At Elementor, we consider site performance a high priority subject, and we will continue to improve on that front in upcoming versions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d00f4d elementor-widget elementor-widget-heading\" data-id=\"9d00f4d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Important Note About Upgrading \n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25e98a7 elementor-widget elementor-widget-text-editor\" data-id=\"25e98a7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor 3.0 is a major version, and includes some substantial infrastructure changes. Before you upgrade to v3.0, please make sure you backup your site, and if you\u2019re using any 3rd party addon for Elementor, make sure it has compatibility for Elementor 3.0.<\/p><p>Please make sure you upgrade to the core version of Elementor 3.0 <b>before<\/b> upgrading the Pro 3.0.<\/p><p>For more answers to 3.0 related questions visit our <a href=\"https:\/\/elementor.com\/help\/faq-for-elementor-3-0\/\">3.0 FAQ page<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df2bd0d elementor-widget elementor-widget-heading\" data-id=\"df2bd0d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Time to Take 3.0 for a Spin!\n\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a9affb elementor-widget elementor-widget-text-editor\" data-id=\"2a9affb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As we mentioned, this version is packed full of goodies, and we believe it will truly impact your day-to-day work. Let&#8217;s summarize:<\/p><p><b>The\u00a0Design System Features\u00a0<\/b>helps you work more consistently and efficiently.<\/p><p><b>The new Theme Builder <\/b>is a powerful visual tool for\u00a0managing every part of your website without code.<\/p><p><b>Our\u00a0Performance Improvements<\/b> will improve your site load time.<\/p><p>Elementor 3.0 will help you get an edge as a professional web creator. If you still haven\u2019t,\u00a0 upgrade now to\u00a0<a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">Elementor Pro<\/a>\u00a0and make 2020 the year your business skyrockets!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elementor 3.0 is finally here, and it brings a whole new way to build sites. Get ready for a special 3-in-1 release that includes: Design System Features, New Theme Builder and significant performance improvements.\u200b<\/p>\n","protected":false},"author":4,"featured_media":42035,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,15],"tags":[79,173],"marketing_persona":[],"marketing_intent":[49],"class_list":["post-41969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-new-features","tag-build","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.0: Design System Features, New Theme Builder &amp; Major Performance Improvements<\/title>\n<meta name=\"description\" content=\"Elementor 3.0 is finally here, and it brings a whole new way to build sites. Get ready for a special 3-in-1 release that includes: Design System Features, New Theme Builder, and significant performance improvements.\u200b\" \/>\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-3-new-professional-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Elementor 3.0: Design System Features, New Theme Builder &amp; Major Performance Improvements\" \/>\n<meta property=\"og:description\" content=\"Elementor 3.0 is finally here, and it brings a whole new way to build sites. Get ready for a special 3-in-1 release that includes: Design System Features, New Theme Builder, and significant performance improvements.\u200b\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/\" \/>\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=\"2020-09-30T11:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-03T17:33:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\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=\"Ben Pines\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"Introducing Elementor 3.0: Design System Features, New Theme Builder &amp; Significant Performance Improvements\",\"datePublished\":\"2020-09-30T11:29:00+00:00\",\"dateModified\":\"2025-12-03T17:33:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/\"},\"wordCount\":1882,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Elementor\",\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/\",\"url\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/\",\"name\":\"Introducing Elementor 3.0: Design System Features, New Theme Builder & Major Performance Improvements\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png\",\"datePublished\":\"2020-09-30T11:29:00+00:00\",\"dateModified\":\"2025-12-03T17:33:12+00:00\",\"description\":\"Elementor 3.0 is finally here, and it brings a whole new way to build sites. Get ready for a special 3-in-1 release that includes: Design System Features, New Theme Builder, and significant performance improvements.\u200b\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png\",\"width\":1200,\"height\":628,\"caption\":\"Design System Features\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Features\",\"item\":\"https:\/\/elementor.com\/blog\/category\/new-features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducing Elementor 3.0: Design System Features, New Theme Builder &amp; Significant Performance Improvements\"}]},{\"@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\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing Elementor 3.0: Design System Features, New Theme Builder & Major Performance Improvements","description":"Elementor 3.0 is finally here, and it brings a whole new way to build sites. Get ready for a special 3-in-1 release that includes: Design System Features, New Theme Builder, and significant performance improvements.\u200b","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-3-new-professional-features\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Elementor 3.0: Design System Features, New Theme Builder & Major Performance Improvements","og_description":"Elementor 3.0 is finally here, and it brings a whole new way to build sites. Get ready for a special 3-in-1 release that includes: Design System Features, New Theme Builder, and significant performance improvements.\u200b","og_url":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2020-09-30T11:29:00+00:00","article_modified_time":"2025-12-03T17:33:12+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"Introducing Elementor 3.0: Design System Features, New Theme Builder &amp; Significant Performance Improvements","datePublished":"2020-09-30T11:29:00+00:00","dateModified":"2025-12-03T17:33:12+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/"},"wordCount":1882,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png","keywords":["Build","Video"],"articleSection":["Elementor","New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/","url":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/","name":"Introducing Elementor 3.0: Design System Features, New Theme Builder & Major Performance Improvements","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png","datePublished":"2020-09-30T11:29:00+00:00","dateModified":"2025-12-03T17:33:12+00:00","description":"Elementor 3.0 is finally here, and it brings a whole new way to build sites. Get ready for a special 3-in-1 release that includes: Design System Features, New Theme Builder, and significant performance improvements.\u200b","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/design-system-features.png","width":1200,"height":628,"caption":"Design System Features"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/elementor-3-new-professional-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"New Features","item":"https:\/\/elementor.com\/blog\/category\/new-features\/"},{"@type":"ListItem","position":3,"name":"Introducing Elementor 3.0: Design System Features, New Theme Builder &amp; Significant Performance Improvements"}]},{"@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\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/41969","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=41969"}],"version-history":[{"count":7,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/41969\/revisions"}],"predecessor-version":[{"id":146496,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/41969\/revisions\/146496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/42035"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=41969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=41969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=41969"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=41969"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=41969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}