Security FAQ

Security FAQ

Elementor takes its responsibility to create secure plugins seriously. Our developers are highly trained to write safe, secure code, and we monitor for vulnerabilities. However, as with all software, even with the level of expertise and scrutiny that we employ, vulnerabilities can sometimes occur. As such, there are things that every web creator should know and do to keep their websites as secure as possible. 

Q: How does Elementor prevent security issues from happening?

A: We have specialized professionals who continuously monitor for potential issues. In addition, we may be notified by people in our community channels, findings from security software makers, and of course our own testing procedures.

Q: Do security issues happen often? 

A: Fortifying security is a continuous process, not just a single effort. Whenever we identify a threat, we always remain vigilant and release a fix as soon as possible.

When we first discover a security vulnerability, we start by examining it and understanding it from each angle. In order not to jeopardize our users before issuing the fix, we keep the reported issue discrete. Once we issue the fix, we can go on to inform users about the vulnerability and its resolution.

Q: What can I do, in general, on my end to prevent security issues from happening?

A: One of the most important steps you can take is to keep WordPress and your plugins up to date, as this will help ensure that any security patches are applied. Other steps include changing your password from time to time, considering the use of security plugins, and being mindful that you only use plugins and themes from known sources such as the WordPress.org repository and established companies that have a strong history of providing quality products. Avoid installing 「nulled」 plugins and themes as these often contain malicious code, and only keep plugins and themes on your site that you are actively using. 

Q: How do I know if and when the security issue has been contained or fixed?  Where do I go for the latest updates about security issues?

A: Follow our social media channels and especially our communities. It will be mentioned there, in our changelog, and when relevant, in a separate email. Please make sure to create an account to receive important updates like these.

Q: Why doesn』t Elementor send me a message the moment a vulnerability happens?

A: We do not want to alert abusers to a problem which could cause them to take advantage of the issue. We focus our efforts on getting a fix out there as soon as possible. When the issue is contained, we quickly inform our users via several channels, including email.

Q: I have an old version of Elementor Pro which was not renewed. Am I still safe?

A: Always upgrade to the latest version of Elementor. This advice may be applied to nearly all software. New versions contain security updates, bug fixes, and offer new features. If you want to test a new version before updating your live site(s), we recommend creating a staging area.

For information on specific security fixes, see below.

Security vulnerability solved on version 2.9.4

Q: What steps should I immediately take?

A: Update your Elementor Pro version to the latest one, 2.9.4. Also, head over to Settings » General page in your WordPress admin area. Scroll down to the 『Membership』 section and uncheck the box next to the 『Anyone can register』 option unless you activated it intentionally and need it for your website.

The vulnerability allows malicious files to be uploaded to the site via the Icon Sets Zip file uploading system. We want to emphasize that this loophole only affects Elementor Pro sites with a specific WordPress option active, namely the 『Anyone can register』 option. We have already released a new version of Elementor Pro which resolves this vulnerability with two main fixes: 

Only Administrator role users can upload Icon Sets.Only authorized files can be processed via a ZIP file.

Q: Who is exposed to this vulnerability and to which version of Elementor does this apply? 

A: The exploit uses the Custom Icons zip files upload mechanism to inject malicious files. The Custom Icons feature was introduced in Elementor Pro 2.6. Users with this and later versions (except 2.9.4) might be exposed and should take action to ensure their site safety. Users that have their site hosted on a server that restricts .php files execution in uploads folder are unlikely to be exposed to this vulnerability.

Q: How do I know if my site was affected? 

A: Check your WordPress users list to see if any new unknown user has registered, especially if you control who registers to your site. If so, it still doesn』t mean that your site is affected: check your Custom icons folder in uploads directory: /wp-content/uploads/elementor/custom-icons/ and check in the inner Custom Icons folders for any unknown .php files. 「index.php」 is part of the original files. If you find any trace of the mentioned above items, it is likely that your site has been compromised. 

Q: What should I do in case my site was affected? 

A: If you think your site was compromised, delete any unknown users, change passwords to your registered users, and contact your hosting provider to let them know about the issue for further assistance. Restoring from a backup prior to the infected custom icons library creation date might be a viable solution for you.

How Elementor』s Theme Style and Design System Options Work Together

How Elementor』s Theme Style and Design System Options Work Together

A design system enables web creators to maintain consistency across a site by establishing a set of common design standards and elements. This is especially useful when a site is large or when a team of creators may be simultaneously working on the site. This design system may be in the form of a written documentation which might include a color and typography style guide, a list of common icons or imagery to be used sitewide, and other brand elements that will form a consistent and coherent website. Designers and content creators can then refer to the design system guide when designing a page, writing content, etc. 

But even this type of design system has its limitations. Web creators must constantly go back and forth between the guide and the work they are doing, adjusting each element, one at a time. 

A common thought that might go through a creator』s head while adding a simple heading to a page: 「What was the hex value of the H3 heading again? And what font-weight was it? 500? No, I think that was for H2 headings, 400 was for H3 headings, wasn』t it?」 The creator then rummages around to find the style guide in either a physical or an online folder, finds the style information, and begins the process of changing the color and the font-weight. Multiply this process by just the number of headings on a site, and then add all the other elements to that process, and it quickly becomes a consistent, but time-consuming design process.

There Is A Better Way To Use A Design System

A design system that is built into the web creation product itself is a huge leap forward from merely referencing a written guide. Imagine our web creator built the entire design system right into Elementor from the start of the project. If an element needed a specific combination of color and typography that had been designated as a standard brand combination, and that combination was a simple one-click option to be chosen when editing the element, that would be a massive time-saver over the previous manual guide reference process.

Equally Important – Future Sitewide Changes

Now imagine in the old way of referencing a design system guide, that the company is undertaking a complete brand makeover, and it』s the web creator』s job to change every color, font family, font weight, etc. across the entire site. This could be an enormous undertaking, and many elements would likely be missed in the process, causing a strange, incoherent design in odd places here and there.

With the design system built into the site design product itself, however, this kind of change can literally take minutes. Elementor makes it easy to make a change in one place, and have that change reflected throughout the entire site. The combination of Elementor』s Theme Style options and Global Colors & Typography embodies this design system methodology.

FAQ

Q: I』m confused. What is the difference between Theme Style and Design System』s Global Colors / Globlal Fonts? Don』t both control colors and typography cross-site?

A: Although Theme Style and Global Colors & Typography are related, they do serve different functions. Theme Style sets fallback style definitions for HTML tags like

, ,

Background Site Settings

Background Site Settings

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.

Elementor』s Theme Builder

Elementor』s Theme Builder

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.

Global Fonts

Global Fonts

https://www.youtube.com/watch?v=CjdFxKPPikU

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.

How To Update Elementor And Elementor Pro

How To Update Elementor And Elementor Pro

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.

Header Site Part

Header Site Part

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.

Single Post Site Part

Single Post Site Part

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.

Archive Site Part

Archive Site Part

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.

Search Results Site Part

Search Results Site Part

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.