Elementor has established itself as the standard website builder solution ever since the launch of Elementor 2.0, back in 2018.

Professionals know they can edit every part of their website, visually and without code, using Elementor.

BUT… Being the standard didn’t mean they can be complacent.

3.0 Core is introducing some cool new features and functionalities. Now, the editor is a ‘one-stop-shop’ for all of the elements needed to create a consistent design for their website.

The new Global Settings panel, showing all kinds of site configuration tools. This way, users can stay inside the editor and have one place to set all of the site’s settings!

Inside the Global Settings panel we will have:

  • Site Identity: For easily customizing the cross-site identity such as Logo, Title, Tagline, and even Favicon!
  • Global Colors: Setting an entire site’s color scheme with just one click!
  • Global Typography: Managing text styles in the smartest way possible
  • Layout: Define Elementor’s default layout settings like default content width or default page layout 
  • Lightbox: Set all the default styling of Elementor Lightboxes
  • Theme Style: Global settings that allow creating default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields

 

The 3.0 Pro version, comes with a new and revamped Theme Builder!

This amazing new Theme Builder will allow users to manage their entire site structure in the front-end editor. They See which parts are active and which are not, manage which template applies to different areas of their websites, and have easy access to change, update or add content as with a simple click.

What’s new in this Theme Builder?

The new Theme Builder is a React-based application, which provides an overview of the site, including all the site parts: header, footer, global page template, 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.

Your confused days are over! The new Theme Builder will allow you to get a 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.

Each site part gets an automatic image preview and a screenshot of the actual template. This lets you get a visual ‘birds-eye-view’ of your entire site, so you can pinpoint the exact template you wish to edit.

Confused about what each part does? Whether its Archive, search results or single post… If you or your client are confused, we added tooltips to help you know the role and logic of each part.

How It Works

This next paragraph is going to turn you into a ‘super-Elementor-builder’, ahead of most web creators, so I suggest you pay special attention.

To start building your site using Theme Builder, click on the hamburger icon on the top left of the editor, then click on ‘Theme Builder’.

You will now see all the parts of your site.

If it’s a new site, and it doesn’t have any parts yet, click on any part and build it. We suggest starting with a new header (just to stay ‘on top’ of things…)

After you build the header, you can go back to the Theme Builder screen, and see where this header is applied across the site.

Here are some of the practical actions you can do from the Theme Builder screen:

Visually access, edit, rename and delete any part of your site

The Theme Builder revamp dramatically improves your site building experience. It also improves how you manage and update your site. Basically, it’s your visual map of the site.

Decide where each site part appears

You can now access Display Conditions right from the Theme Builder screen. A great example of its usefulness is if you want 2 headers, one for your blog and the other for the rest of the site. Finally, control all your site conditions from one place! The days you had to edit a header just to change its instances are over. From now on, you can change, add or remove display conditions without leaving the Theme Builder

Import and export any site part

If you want to use a site part on another site, quickly import and export it from the Theme Builder.

Which site part is live or has conditions?

When managing a large-scale site, it’s sometimes difficult to get a grip over all the templates on the site. I’m sure you know what I’m talking about.

Theme Builder solves this, by adding a green dot next to the site parts that have conditions. This way, you know which templates are active and which are drafts.

Design System – The Structure Part

With global colors, typography and structure, you now have more control over your site’s design system.

Global colors allow you to set your color scheme once, and complete a full site design with the same colors, consistently.
Same goes for global typography.

For your site structure, a similar approach applies. You build your site parts in one place, and assign them wherever you want. Instead of building single templates that are spread across multiple places and are impossible to manage, every part of your site is viewed from one visual Theme Builder.

This is the smart way of building websites, and we see it as a big improvement in the workflow of our users.

Test Flows:

A: Make sure all access points to Theme Builder works properly

  1. Set up an environment with Elementor Pro installed, with v2.9.x installed (Core and Pro), and create several different Site Parts (Header, Footers, Single Post templates, Single Page templates etc)
  2. Upgrade to v3.0 Pro Beta 1 and make sure Elementor Core v3.0 Beta 4 is installed
  3. Click CMD/CTRL + Shift + E to open the new Theme Builder from any screen
  4. Make sure the screen opens up and responds to any of your interactions
  5. Close the Theme Builder, go ahead and edit any page or post with Elementor
  6. In the Editor, click on the menu (hamburger) icon and click “Theme Builder”
  7. Make sure the screen opens up and responds to any of your interactions
  8. Close the Theme Builder, go ahead and view the page that you are in
  9. In the frontend view of your page, go to the top admin bar, hover over the “Edit with Elementor” item and click on “Open Theme Builder” item
  10. Make sure the screen opens up and responds to any of your interactions
  11. Create a new Site Part, and publish it, click on “Open Theme Builder” button which located in the publish message (Editor toaster)
  12. Make sure the screen opens up and responds to any of your interactions

B: Make sure all previous Site Parts are located under the correct tab

  1. Open Theme Builder by using one of the ways mentioned in test flow A
  2. Make sure you can see all of your previously created Site Parts under “All Parts” tab
  3. Make sure that under “All Parts” tab you can see automatically-generated screenshots (generated automatically on publish/update) or a fallback image based on Site Part type
  4. Go to each tab and make sure you can find the corresponding Site Parts there

C: Make sure Add New screen and it’s contents functioning

  1. Open Theme Builder by using one of the ways mentioned in test flow A
  2. If you haven’t created any Site Part yet, the Add New screen should be visible without any interaction
  3. If you created Site Parts already, the Add New screen should be available by clicking on “Add New” button, in the top right corner, when in the “All Parts” tab
  4. Click on the ‘i’ icon and make sure an educational modal has opened. Make sure you can view the video, and try opening the modal for each Site Part
  5. Close the Educational modal and click on any Site Part you want to create, for example Header
  6. You will be redirected to the corresponding Part editing screen and would be able to use the Library to import any template
  7. Publish this part with several display conditions and go back to the Theme Builder
  8. Go the All Parts tab and the specific Site Part tab and make sure it’s visible there

D: Make sure specific Site Part “Add New” button opens the corresponding part

  1. Open Theme Builder by using one of the ways mentioned in test flow A
  2. Go to any Site Part tab and click on the “Add New” button and make sure it creates the correct Site Part (e.g clicked Add New under Header tab – a header should be created)
  3. Publish this site part and make sure it appears in the correct place in Theme Builder
  4. Go back to the Theme Builder, hover over each of the tabs and click on the circular ‘+’ icon
  5. Make sure it creates the correct Site Part (e.g clicked Add New under Footer tab – a footer should be created)

E: Make sure dynamic screenshots are being generated

  1. Using different browsers publish several Site Parts, and wait about 1 minute for the thumbnails generation to take place
  2. Open Theme Builder by using one of the ways mentioned in test flow A
  3. Make sure you can see the generated thumbnails for your newly created Site Parts
  4. If, for any reason, your Site Parts thumbnail generation failed, you would be able to see a fallback SVG placeholder per part type
  5. Please note that the auto-generated thumbnails may produce different outputs per browser
  6. Add a featured image to one of your Site Parts and hit Update
  7. Open Theme Builder by using one of the ways mentioned in test flow A and make sure the featured image appears in the Site Part card instead of the auto-generated thumbnail

F: Make sure Parts preview screen works correctly and all of its properties work properly

  1. After creating several Site Parts, open the Theme Builder by using one of the ways mentioned in test flow A
  2. Under “All Parts” tab hover over any of your Site Parts and click Preview
  3. You’ll be directed to the corresponding Part tab and would be able to see a live view of your Site Part
  4. Make sure everything works properly even when you have more than 5 parts in the same frame
  5. Validate each one of the options that are available in each Site Part card:
  6. Make sure the “Conditions Indicator” works properly – Site Part with any display condition should be marked with green color, Site part without any display condition applied should be marked with gray color
  7. Make sure the part’s name is correct
  8. Make sure the author and creation date is correct and by clicking “Edit” will move you to the editing of the part
  9. Make sure the “Instances” are correct and you can edit and affect the Display conditions of each Site Part
  10. Make sure that by clicking on the “More Options” button you can see the options menu appears and Rename, Delete and Export are available and works properly
  11. Repeat step 5 on various Site Parts and make sure everything works properly

Elementor Pro vastly improves your design workflow and lets you design faster and better than ever.

With Elementor Pro, everything is done visually and without code.

More Videos to Help You Get Started!