From version 2.9.11 and on, Elementor will use the use wp_allowed_protocols() function to handle allowed URI protocols in links. These protocols are often used to create a deep-link (i.e. a direct link to an app via unique protocol) to a 3rd party application (such as mailto: or tel:)
If you add a custom link or a dynamic link (in any URL field) with a URI protocol that is not supported by WordPress such as waze:// etc., it will no longer work.
For more information, see the developers doc.
The Error 404 Site Part section of the Theme Builder lists all Error 404 Templates you’ve created, if any, giving quick access to add, edit, or delete any Error 404 Template.
If no Error 404 Templates have been created yet, you need to create one. Click Add New in the upper right corner of the Error 404 Site Part screen.
Once you’ve created at least one Error 404 Template, you will be able to manage them here.
Edit An Existing Error 404 Design
To edit an existing Error 404 Template, click the Error 404 label in the sidebar. This will open the Error 404 Template’s details dashboard.Click the Edit link in the upper right corner of the specific Error 404 Template you wish to edit. This will open the Elementor editor for that Error 404 Template.
Edit An Existing Error 404’s Conditions
Click the Edit Conditions link in the bottom left corner of the Error 404 Template you wish to edit. This will directly open the Display Conditions editor for that Error 404 Template.
Note: The Dot Display in the upper left corner of the Error 404 indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Error 404 Template, while a Gray Dot indicates a draft Error 404 Template.
Note: The Instances label in the lower left corner of the Error 404 displays the specific instances in which this template is being used on the site.
Export An Error 404 Site Part
Click the Three Horizontal Dots in the upper right of the Error 404 Template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.
Delete An Error 404 Site Part
Click the Three Horizontal Dots in the upper right of the Error 404 Template you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don’t want to delete theError 404 Template, or click Delete to confirm that you do wish to delete this Error 404 Template.
Rename An Error 404 Site Part
Click the Three Horizontal Dots in the upper right of the Error 404 Template you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don’t want to rename this Error 404 Template.
The Search Results Site Part section of the Theme Builder lists all Search Results Templates you’ve created, if any, giving quick access to add, edit, or delete any Search Results Template.
If no Search Results Templates have been created yet, you need to create one. Click Add New in the upper right corner of the Search Results Site Part screen.
Once you’ve created at least one Search Results Template, you will be able to manage them here.
Edit An Existing Search Results’ Design
To edit an existing Search Results Template, click the Search Results label in the sidebar. This will open the Search Results Template’s details dashboard.Click the Edit link in the upper right corner of the specific Search Results Template you wish to edit. This will open the Elementor editor for that Search Results Template.
Edit An Existing Search Results’ Conditions
Click the Edit Conditions link in the bottom left corner of the Search Results Template you wish to edit. This will directly open the Display Conditions editor for that Search Results Template.
Note: The Dot Display in the upper left corner of the Search Results indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Search Results Template, while a Gray Dot indicates a draft Search Results Template.
Note: The Instances label in the lower left corner of the Search Results displays the specific instances in which this template is being used on the site.
Export A Search Results Site Part
Click the Three Horizontal Dots in the upper right of the Search Results Template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.
Delete A Search Results Site Part
Click the Three Horizontal Dots in the upper right of the Search Results Template you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don’t want to delete the Search Results Template, or click Delete to confirm that you do wish to delete this Search Results Template.
Rename A Search Results Site Part
Click the Three Horizontal Dots in the upper right of the Search Results Template you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don’t want to rename this Search Results Template.
The Archive Site Part section of the Theme Builder lists all Archive Templates you’ve created, if any, giving quick access to add, edit, or delete any Archive Template.
If no Archive Templates have been created yet, you need to create one. Click Add New in the upper right corner of the Archive Site Part screen.
Once you’ve created at least one Archive Template, you will be able to manage them here.
Edit An Existing Archive’s Design
To edit an existing Archive Template, click the Archive label in the sidebar. This will open the Archive Template’s details dashboard.Click the Edit link in the upper right corner of the specific Archive Template you wish to edit. This will open the Elementor editor for that Archive Template.
Edit An Existing Archive’s Conditions
Click the Edit Conditions link in the bottom left corner of the Archive Template you wish to edit. This will directly open the Display Conditions editor for that Archive Template.
Note: The Dot Display in the upper left corner of the Archive indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Archive Template, while a Gray Dot indicates a draft Archive Template.
Note: The Instances label in the lower left corner of the Archive displays the specific instances in which this template is being used on the site.
Export An Archive
Click the Three Horizontal Dots in the upper right of the Archive Template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.
Delete An Archive
Click the Three Horizontal Dots in the upper right of the Archive Template you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don’t want to delete the Archive Template, or click Delete to confirm that you do wish to delete this Archive Template.
Rename An Archive
Click the Three Horizontal Dots in the upper right of the Archive Template you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don’t want to rename this Archive Template.
The Single Post Site Part section of the Theme Builder lists all Single Post Templates you’ve created, if any, giving quick access to add, edit, or delete any Single Post Template.
If no Single Post Templates have been created yet, you need to create one. Click Add New in the upper right corner of the Single Post Site Part screen.
Once you’ve created at least one Single Post Template, you will be able to manage them here.
Edit An Existing Single Post Template’s Design
To edit an existing Single Post Template, click the Single Post Template label in the sidebar. This will open the Single Post Template’s details dashboard.Click the Edit link in the upper right corner of the specific Single Post Template you wish to edit. This will open the Elementor editor for that Single Post Template.
Edit An Existing Single Post Template’s Conditions
Click the Edit Conditions link in the bottom left corner of the Single Post Template you wish to edit. This will directly open the Display Conditions editor for that Single Post Template.
Note: The Dot Display in the upper left corner of the Single Post Template indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Single Post Template, while a Gray Dot indicates a draft Single Post Template.
Note: The Instances label in the lower left corner of the Single Post Template displays the specific instances in which this template is being used on the site.
Export A Single Post Template
Click the Three Horizontal Dots in the upper right of the Single Post Template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.
Delete A Single Post Template
Click the Three Horizontal Dots in the upper right of the Single Post Template you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don’t want to delete the Single Post Template, or click Delete to confirm that you do wish to delete this Single Post Template.
Rename A Single Post Template
Click the Three Horizontal Dots in the upper right of the Single Post Template you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don’t want to rename this Single Post Template.
The Header Site Part section of the Theme Builder lists all Headers you’ve created, if any, giving quick access to add, edit, or delete any header.
If no headers have been created yet, you will be prompted to create one. Click Add New in the upper right corner of the Header Site Part screen.
Once you’ve created at least one header, you will be able to manage them here.
Edit An Existing Header’s Design
To edit an existing Header, click the Header label in the sidebar. This will open the Header’s details dashboard.Click the Edit link in the upper right corner of the specific Header you wish to edit. This will open the Elementor editor for that Header.
Edit An Existing Header’s Conditions
Click the Edit Conditions link in the bottom left corner of the Header you wish to edit. This will directly open the Display Conditions editor for that Header.
Note: The Dot Display in the upper left corner of the Headerindicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Header, while a Gray Dot indicates a draft Header.
Note: The Instances label in the lower left corner of the Header displays the specific instances in which this template is being used on the site.
Export A Header
Click the Three Horizontal Dots in the upper right of the Header you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.
Delete A Header
Click the Three Horizontal Dots in the upper right of the Header you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don’t want to delete the Header, or click Delete to confirm that you do wish to delete this Header.
Rename A Header
Click the Three Horizontal Dots in the upper right of the Header you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don’t want to rename this Header.
Elementor’s developers continually work to improve both the free core version of Elementor as well as Elementor Pro. New features, bug fixes, and security hardening will always be a priority. To take advantage of these changes requires updating your Elementor plugin(s). Learn how to safely update Elementor by following these instructions.
Always Start By Backing Up Your Elementor Site
This is the one step that is most critical. Most people will never need to restore their site from a backup, but on the off chance that an update causes issues with your site, you’ll want to be able to quickly restore it to its pre-update status. So don’t neglect taking a backup of your site before you begin the update process. This is true for all updates – not just Elementor updates. Any time you update any plugin or theme, or WordPress itself, run a backup first. The few seconds or minutes it takes is worth it in an emergency site situation.
How To Create A Backup Of Your Site
Many plugins are available to help you easily create a backup of your site. A few we like include UpdraftPlus, Jetpack Backup, and BackupBuddy. You can read more about these plugins and the entire backup process in general in our blog post: How to Backup Your WordPress Site
Update On A Staging Site First, When Possible
To prevent unexpected problems on your live site, it’s a good idea to test updates on a staging server first. A staging site is essentially a copy of your live site, where you can test changes and updates without affecting your live site. If all goes well, then you can apply the update to the live site with a little more confidence. To learn more about staging sites, see our Monday Masterclass: Setting up a Staging Environment for WordPress Websites
How To Update Elementor and Elementor Plugins
There are actually several ways to update WordPress plugins, Elementor’s included. The most common way is to go to Plugins > All Plugins and look for the plugins that have updates available. These are easily recognizable as they are highlighted and stand out from the rest of the plugins in the list. They will look similar to this:
Simply click the update now link in the plugin’s description to proceed.
For a complete list of ways to update your plugins, as well as themes and WordPress core files, see our blog post: How To Update WordPress Safely, especially the section titled How to Update WordPress Themes and Plugins.
Set and edit 4 predefined global typography styles (Primary, Secondary, Text, and Accent) or add new global text styles from Elementor’s Site Settings. From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Design System > Global Fonts.
Edit Global Font Style: Click the pencil icon to select typography options for any existing text style. The Style Names can also be changed. Click the name to change it. For example, you could change Primary to Main, Accent to Highlight, etc.Add Global Font Style: Click Add Style button to add a new custom text styleDelete Global Font Style: Hover over the pencil icon for the text style and click the trash can icon that appears
Note: By deleting a global font style, all of its instances will inherit their values from an unknown source, possibly your theme, or your browser, etc.
What is the Theme Builder in Elementor?
Elementor’s Theme Builder lets you customize every fundamental part of your WordPress site without coding including your Header, Footer, Global Pages and Posts, Global Archives and WooCommerce Products and Product Archives.
The Theme Builder provides a visual overview of the site elements of your site, helping to guide you through each of the site parts you need to create in order to achieve a complete website.
Using the Theme Builder, you can add new site parts (e.g. add a new Header), edit existing site parts, or delete site parts. Existing site parts include a visual indicator to inform you if a condition is applied to that site part. For example, a Global Post site part template may have a condition to only show for a particular category. A green indicator will let you see at a glance that this site part has a condition. A gray indicator is an indication that a site part has no condition set.
How To Access The Theme Builder
There are several ways to access the Theme Builder. Choose whichever is most convenient for you.
METHOD ONE: Go to Elementor > Theme Builder from the WordPress admin menu.
METHOD TWO: From within any page or post’s Elementor Editor screen, click the hamburger menu in the upper left corner of the Widget Panel, then select Theme Builder in the Settings tab.
METHOD THREE: Get quick access to the Theme Builder from any screen by using its keyboard shortcut hotkey combination. On a Mac, click CMD+SHIFT+E to immediately jump to the Theme Builder. On Windows, click CTRL+SHIFT+E to immediately jump to the Theme Builder.
Theme Builder Main Dashboard
For Free users, you can see which site parts would be available with Elementor Pro.
For Pro users, your existing Site Parts will be shown, if any have been built. Thumbnails for each site part will be auto-generated for you.
Note: Any featured image assigned to a site part will be used as the site part’s screenshot. This enables you to use a thumbnail of your choice, rather than an auto-generated thumbnail, if you prefer.
If no site parts have yet been built, the default thumbnails will be shown for all available site parts.
Add A New Site Part
To add a new Site Part, click the Add New link in the upper right corner of the dashboard, or the PLUS sign that appears when hovering over a site part’s sidebar label, or the PLUS sign on its thumbnail.
Or you can add a new Site Part by importing a template.
Click the Import icon in the upper right of the Theme Builder. Drag and drop or select a .JSON or .zip file that contains the template you wish to import.The template will now be added to your Site Parts dashboard.
Edit An Existing Site Part’s Design
To edit an existing Site Part, click the Site Part’s label in the sidebar. This will open the site part’s details dashboard.Click the Edit link in the upper right corner of the site part you wish to edit. This will open the Elementor editor for that site part.
Edit An Existing Site Part’s Conditions
Click the Edit Conditions link in the bottom left corner of the site part you wish to edit. This will directly open the Display Conditions editor for that site part.
Note: The Dot Display in the upper left corner of the Site Part indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live site part, while a Gray Dot indicates a draft site part.
Note: The Instances label in the lower left corner of the Site Part displays the specific instances in which this template is being used on the site.
Export A Site Part
Click the Three Horizontal Dots in the upper right of the site part you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.
Delete A Site Part
Click the Three Horizontal Dots in the upper right of the site part you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don’t want to delete the site part, or click Delete to confirm that you do wish to delete this site part.
Rename A Site Part
Click the Three Horizontal Dots in the upper right of the site part you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don’t want to rename this site part.
Background
Control the site’s background, including its mobile background. From any Elementor page or post, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Settings > Background.
Background Type
Classic
Color: Choose the background’s color
Image: Choose an image from the media library
Gradient
Color: Choose the first gradient color
Location: Set the location of the first color. This will affect the spread
Second Color: Choose the second gradient color
Location: Set the location of the second color. This will affect the spread
Type: Choose between a linear or radial gradient
Angle: Set the gradient angle
Mobile Browser Background
Color: Choose the mobile background’s color.
