Author 诗语

When Does my License Expire? What Happens After That?

Is the price of Elementor Pro a one-time fee, monthly or yearly fee?

The pricing, as we write in our pricing page, is a YEARLY fee. Each year your license will auto-renew. This means you will continue to receive premium support, Pro templates, and updates.

If you choose to cancel your auto-renewal, all your existing projects will remain intact, and the Pro features you used in your designs will continue to function as before, if the versions of both Elementor Free and Elementor Pro remain exactly as they are at that moment in time. However, if you continue to update the free version of Elementor, but do not update Elementor Pro, then over time, the two will likely become incompatible with one another, and problems may occur. The code for Elementor』s free version is constantly being updated to add new features, fix bugs, and solve security issues. These code changes may eventually conflict with the old version of Elementor Pro that is not being updated as well. 

Important: In addition, Elementor Pro widgets are not draggable if the license is not activated in versions 2.9 and above. Learn more about this here.

Elementor Library FAQ

What is the Elementor Library?

The Elementor Library is a library which contains over 30 pre-designed page templates, as well as templates that were saved by the user. The Library allows you to quickly create designed pages and customize them to be your own, saving you from building all pages from scratch.

Pick any template from the library and add it to your page with one click. It saves you time and energy. 

For tutorials about the Elementor Library, check this  guide. Check out the Hero kit templates we previously released.

Where can I find the Pre-designed Templates?

Click on the 『Add template』 button

Where can I find my saved Templates?

All the templates that you saved can be found under Templates in your WordPress Admin Dashboard. 

These templates are also available, along with the pre-designed templates, in the Library that is accessible from the Elementor panel. 

Is there a hotkey to open the template library?

Yes. 『Ctrl / Cmd + Shift + L』 opens up the Template Library modal.

Are there landing page templates in the Elementor Library?

Yes. Several landing page templates are available in the Elementor Library. It is easy to identify them in the list since their title always includes the words 「Landing page」.

The 「Insert」 option is gone, what can I do?

1. Try to deactivate all your plugins (besides Elementor) and see if it solves it.

2. If it didn』t help, try to switch your theme to a default WP theme such as Twenty Sixteen.

How can I export a template?

Check the section 「How to export / import templates to external websites」 of this  guide for the whole procedure.

How to import a template to another website?

Check the section 「How to export / import templates to external websites」 of this  guide for the whole procedure.

Can I sell pre-built templates that use Elementor Pro elements?

Yes! You are allowed to sell pre-built templates, even templates that are designed with Pro elements. Please make your end users aware, however, that when templates are made with Pro elements, those elements will only be active and visible if the end user purchases Elementor Pro.

SUPPORT

I am trying to save several templates to my Templates library but, for some reason, I can』t. What is the problem?

Go to Elementor > System Info in your WordPress Dashboard and check whether Elementor』s Library is connected or not. Go to Elementor > Tools in your WordPress Dashboard and synchronize the library. 

If it still doesn』t work, please contact your hosting company and ask them to set this configuration: allow_url_fopen

I cannot load templates, what can I do?

Go to Elementor > System Info, and check whether Elementor』s Library is connected or not.Go to Elementor > Tools and synchronize the library.

Click on 「sync library」 in the 「tools」 tab of Elementor in your WordPress dashboard if it is not synced yet.

I purchased Elementor Pro but when I try to use a Pro template I am required to go pro, why?

This happens when Elementor does not recognize that you have a Pro license key. In this case, verify that you have the latest version of Elementor Pro. Go to Dashboard (in your WP Dashboard) >Updates >  and click on Check again.

When I try to load a template I receive the error cURL ERROR 7? What should I do?

In this case, you have to contact your Hosting Company so that they can change the configuration of your server that blocks the request.

The predesigned templates in the library do not load for me, why?

This is generally due either to a memory issue or to the configurations of your server (file permission issues).

Verify if you meet the requirements of Elementor regarding the WP memory limit and check via your console browser if you receive 403 errors.

If you cannot open the library, contact your hosting company and ask them to verify the configurations set on your server.

How To Add A New WordPress User

Table of Contents

Navigate To Add New User FormHow To Delete The New User Account When It Is No Longer NeededAlternative Method to Provide Administrator Access 

If you are an Elementor Pro user, you are eligible for Premium Support. When contacting the Elementor support team, Pro users may be asked to provide WordPress admin credentials*, so that our representatives can log into your WordPress site to investigate and troubleshoot any problems you may be experiencing. In order to solve your issue, our reps will need access with Administrator rights. 

*Note: The term 「credentials」 refers to the necessary information required to log into your site』s administrative backend, which in this case would consist of a valid username and password.

Although you could supply the representative with your own user credentials, we suggest that you create a new WordPress user account, with Administrator rights, specifically for the Elementor team to use. Once the problem is resolved, you can then delete the account you created. 

Important: Before giving administrative credentials to support agents or others, it is important to always backup your website.

Below, we will show you how to quickly and easily add a new WordPress user for this purpose. In addition, we』ll also share a handy plugin that lets you sidestep the process completely if you wish. But first, let』s see how to add a new user.

Navigate To Add New User Form

From your WordPress dashboard, go to Users > Add New to navigate to the Add New User form.

Fill Out And Submit The Add New User Form 

Username (required): Enter the email address [email protected] as the user name.Email (required): Enter [email protected] as the email address. First Name: Optional. Unnecessary for support purposes.Last Name: Optional. Unnecessary for support purposes.Website: Optional. Unnecessary for support purposes.Password: We recommend using the password that WordPress automatically generates for you, as it is guaranteed to be strong. Please copy this password to your clipboard or paste it in your computer』s notepad, so you can give it to your representative later.Send User Notification: Checking this box will email the user with the new credentials, however, we recommend giving the credentials directly to your representative rather than using this process, to ensure your specific representative receives the information. Role: Please select Administrator for the Role here. Any other role will prevent your support rep from being able to solve your issue.Click the Add New User button to finish the process and create the new user account.Provide your Elementor support representative with the newly created username and password. Please don』t rely on the 「Send User Notification」 for this. Elementor has many representatives, and the specific one handling your ticket may not receive that notification. Remove the user account after the problem has been resolved.

How To Delete The New User Account When It Is No Longer Needed

Go to Users > All UsersHover over the account you wish to delete, and click the Delete link.A new screen will appear. Click the Confirm button to confirm that you wish to delete this user』s account.

Alternative Method to Provide Administrator Access 

If you are uncomfortable with adding a new user, you can install the 3rd-party Temporary Login Without Password plugin instead. The primary advantage of using this method is that you will not have to remember to delete the user account once the problem has been resolved. Instead, this plugin will automatically cancel access after a set amount of time of your choosing, such as one week, one month, etc.

Install the Temporary Login Without Password pluginGo to Users > Temporary Logins.Click The Create New button.Fill out and submit the Create New Temporary Login Form.Give the generated temporary login link to your support representative

Email: Required. Enter the email address [email protected] as the user name.First Name: Optional. Unnecessary for support purposes.Last Name: Optional. Unnecessary for support purposes.Role: Please select Administrator for the Role here. Any other role will prevent your support rep from being able to solve your issue.Expiry: Choose when to expire this link, such as One Week After Access or One Month From Now.Language: Please choose English (United States) here.Click the Submit button to finish the process and create the new temporary login.

A temporary login link for this user will now be created. Simply click the Click To Copy button for that account to copy the link to your computer』s clipboard. Give this link to your support representative. They will then be able to quickly access your account without needing a password. The link will expire after the amount of time you specified in the Expiry field.

WooCommerce Cart Widget

Using the Elementor WooCommerce Cart Widget, you may customize your cart layout. You may edit the section titles, labels, and placeholders of the form fields. You may also style the layout, typography, and color options as a whole, or customize even further by section. 

When publishing, you will be prompted with the option to automatically set your new page as the default cart page rather than needing to go through the WooCommerce settings.

Content

General

Layout: From the dropdown menu, select between one column, or two column layoutSticky Right Column: If two column layout is used, use the toggle control enable / disable sticky option for the right columnOffset: If sticky option is enabled, enter a value in PX to offset the top margin of the sticky effect

Order Summary

Update Cart Button

Text: Enter the desired text in the field or using the dynamic options

Coupon

Apply Coupon Button

Text: Enter the desired text in the field or using the dynamic options

Totals

Title

Section Title: Enter the desired text in the field or using the dynamic optionsAlignment: Using the icons, select between left, center, or right alignment

Update Shipping Button

Text: Enter the desired text in the field or using the dynamic options

Checkout Button

Text: Enter the desired text in the field or using the dynamic optionsAlignment: Using the icons, select between left, center, right, or justified alignment

Additional Options

Update Cart Automatically: Use the toggle control to enable or disable AJAX loading of the cart totals.

Style

Sections

Background Color: From the color picker, choose the background color for your sections. This color will apply to all sections. You may apply a different background color to a section(s) in the Customize options shown below Box Shadow: Click the pencil icon to set the color and shadow optionsBorder type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %Margin: Enter a chosen value in the fields based on px, em, or %

Typography

Titles

Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow (Titles Only): Click the pencil icon to open the shadow properties options.Spacing: Use the slider to increase or decrease the spacing between components.

Descriptions

Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsSpacing: Use the slider to increase or decrease the spacing between components.

Links

Choose the appearance of the link options on normal and hover states

Link Color: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the Customize options shown below 

Radio Buttons

Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Forms

Layout

Column Gap: Use the slider or enter the value in the field in PXRows Gap: Use the slider or enter the value in the field in PX

Labels

Color: From the color picker, choose the color for your labels. This color will apply to all labels.Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsSpacing: Use the slider to increase or decrease the spacing between components.

Fields

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text.Background Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Borders (Fields)

Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %

Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Borders (Button)

Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %

Order Summary

Layout

Rows Gap: Use the slider or enter the value in the field in PX

Items

Color: From the color picker, choose the color for your ItemsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Variations

Color: From the color picker, choose the color for your VariationsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Product Links

Choose the appearance of the link options on normal and hover states

Link Color: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the Customize options shown below 

Dividers

Color: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)

Quantity Borders

Color: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)

Remove Icon

Choose the appearance of the link options on normal and hover states

Color: From the color picker, choose the color for the icon.

Totals

Layout

Rows Gap: Use the slider or enter the value in the field in PX

Titles & Totals

Color: From the color picker, choose the color for your Titles & TotalsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Checkout Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow: Click the pencil icon to open the shadow properties optionsText Color: From the color picker, choose the color for your button text. Background Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %

Customize

The customize option allows you to style a section(s) independently of the other sections. Click the + icon to add or remove actions from the customizer. Additional styling options per section will appear below the customizer.

Advanced

Global Advanced tab options are available for this widget.

Elementor Pro does not work

If you cannot edit when you activate Elementor Pro, check the following:

Activate the Safe Mode and check if it helps. If it does not help try the following:Enable the editor loader method in the Elementor > Settings > Advanced on your WordPress Dashboard (if the issue happens on a specific server).Deactivate your plugins besides Elementor and Elementor Pro and check if it solves the issue. Switch to a WordPress default theme (temporarily) such as Twenty Nineteen and verify if it fixes the problem.If it did not help, make sure that your memory limit is set to at least 128MB according to our requirements. You can check the memory limit for WordPress via your system info located in the 「system info」 tab of Elementor settings on your WordPress dashboard. If your memory limit is under 128MB, send this article to your hosting company: https://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHPAsk your hosting company to deactivate ModSecurity via your Cpanel to troubleshoot. Some configurations set via this firewall can block Elementor Pro. Instead of deactivating ModSecurity, they can check the error logs of ModSecurity to figure out if some rule of this firewall is not leading to the issue. Memory limits added via this firewall can prevent Elementor Pro from working.If nothing helped, edit from another computer to rule out an issue with a program installed on your computer.

If you were unable to solve the issue after trying the tips mentioned above, please open a support ticket via my.elementor.com and provide us with Administrator-level WordPress login details.

Note: Safe Mode can be activated only by site admins (i.e. users with administrator privileges), because only they can deactivate plugins. If you are not receiving the Enable Safe Mode option, please ask your site administrator to activate safe mode and troubleshoot the problem for you. In the case of a multisite setup, only Super Admins can activate Safe Mode.

How To Add Facebook Pixel To Elementor

The Facebook Pixel allows you to track, measure, and analyze user actions on your site and then be able to use this information to reach customers again in future Facebook ads. To make use of it, you』ll need to first create the Pixel in your Facebook Events Manager by following the official Facebook instructions to manually add pixel code. Once you have the code, you are ready to paste it into your site.

There are two basic ways to add this code.

Method 1 (easiest): Use Elementor』s Custom Code Feature To Manage The Code

You can easily insert tracking codes to your website by using the Custom Code feature in Elementor.

Navigate To Dashboard > Elementor Custom CodeCreate A New Custom Code, and name it Facebook Pixel (or as desired)Paste the code that you obtain from Facebook into the main content region of the Custom Code editorSelect the location of the code to load at the headerSet the display conditions to Entire Site, or a selected landing page if needed.

For more info click here.

Method 2 (more technical): Edit Your Child Theme』s header.php Code

Simply paste the code that you obtain from Facebook into the header.php of your child theme.

Warning: Never update your core / parent theme code, as anything you change will be deleted during the next theme update. Always use a child theme if you plan to edit any of the code. 

Note: You can also choose to use one of Facebook』s Pixel Partner Integrations such as its WooCommerce integration if you prefer. This document does not address that method since there are many integrations to choose from, and Facebook has documented each of them. The following directions are only for the manual method of adding the code.

Is There a Refund Policy?

Yes! 

You can cancel your order within 30 days, and get your full money back, no questions asked.

Open a customer experience ticket at https://my.elementor.com to request a refund. See how to open a support ticket here.

Note: Refunds do not apply to upgrades or renewals.

Elementor Benefits – Pro VS Free

Elementor』s Free version offers limitless design possibilities. Elementor Pro, however, empowers you with more professional tools that speed up your workflow, and allow you to get more conversions and sales.  

Following is a long detailed list of all features of Elementor Pro, compared side-by-side with the free version of Elementor. If you, however, want a short 4 point summary of why you should upgrade to Pro today, here are the main points:

1. Theme Builder lets you customize every part of your theme. With Elementor Pro Theme Builder, you are no longer restricted to your theme limitations. You can visually design your header, footer, archive page, single posts and all other parts of your site using Elementor. This works on any WordPress theme, and requires no coding. No other theme or plugin offers this solution. By making the entire web design process visual and code-free, you are able to complete projects considerably faster than ever before.

2. Visually design forms and integrate them seamlessly. Contact forms are an essential part of every website, since they are the engines for conversions and leads. Elementor Pro』s Forms widget is revolutionary because the entire process of managing them is visual. Design your forms on the front end, then connect them to any automation marketing platform or CRM of your choosing with a few clicks.

3. Professional templates and blocks. Elementor Pro offers many more professionally made templates and blocks that can be easily customized to create stunning websites. The templates and blocks integrate the Pro widgets, so you can create pages featuring slides, animated headlines, forms and other important Elementor Pro features.

4. Key professional widgets and features. Elementor Pro includes some vital widgets and features that are important for any professional web designer. These include Animated Headlines for impressive headline design, Posts widget for an amazing display of blog posts, WooCommerce widgets, Slides, Media Carousel and custom fonts. 

Join Elementor Pro today and start enjoying the best designer solution for WordPress.

Here is the full list of free and Pro features available in Elementor:

FeatureElementorElementor ProTemplate Library✓✓Export / Import Templates✓✓Mobile Editing✓✓Shape Divider✓✓Video Lightbox✓✓Box Shadow✓✓Text Shadow✓✓Background Overlay✓✓Hover Animation✓✓Entrance Animation✓✓Heading✓✓Image✓✓Text Editor✓✓Video✓✓Button✓✓Image Box✓✓Testimonials✓✓Icon✓✓Icon Box✓✓Social Icons✓✓Image Gallery✓✓Image Carousel✓✓Icon List✓✓Counter✓✓Progress Bar✓✓Tabs✓✓Accordion✓✓Toggle✓✓Alert✓✓HTML✓✓Shortcode✓✓Menu Anchor✓✓Sidebar✓✓Google Maps✓✓SoundCloud✓✓Divider✓✓Spacer✓✓Columns✓✓Background Gradient Effect✓✓Revision History✓✓Blank Canvas Template✓✓Maintenance Mode✓✓Page Settings✓✓Element Hover✓✓Redo / Undo✓✓Formsx✓Slidesx✓Postsx✓Portfoliox✓Embed Anywherex✓Global Widgetx✓Custom CSSx✓Pro Templatesx✓ Price Tablex✓ Price Listx✓Countdownx✓WC Productsx✓WC Elementsx✓WC Categoriesx✓WC Add to Cartx✓Flip Boxx✓Masonry Layoutx✓Blog Paginationx✓Ken Burns Effectx✓Share Buttonsx✓Form Integrationsx✓Login Widgetx✓Animated Headlinex✓Facebook Widgetsx✓Blockquotex✓Nav Menux✓Media Carouselx✓Testimonial Carouselx✓Call to Action Widgetx✓Custom Fontsx✓Header & footer builderx✓Dynamic single post & archive page designx✓ACF & Toolset integrationx✓Scrolling Effectsx✓Popup Builderx✓

Technical FAQ for Elementor 3.0

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』re using any 3rd party addon for Elementor, make sure it has compatibility for Elementor 3.0. Check the 3rd party addon』s changelog for any notes that indicate they』ve made it compatible or speak with the addon』s support channel if uncertain.

Update:

We』ve released a new update (Elementor Core 3.0.11), with fixes which include:

Tweak: Added 「Loading」 state for Global controls to reflect data loading stateFix: Inaccurate height in Divider widgetFix: Global Colors and Fonts are not being generated on non Elementor pagesFix: Inactive 「Delicious」 social network from Social Icons widgetFix: Can』t restore the Site Settings document revisionsFix: Creating a new Global Color or Font won』t reflect in other dropdowns until the controls section initFix: Selecting a new Global Color or Font won』t be indicated in the dropdown until the controls section init

Update:

We』ve released a new update (Elementor Core 3.0.10 and Elementor Pro 3.0.5), with fixes which include:

Fix: `space_between_widgets` is missing on upgrade in some cases Fix: Global Color does not apply to some patterns in Divider widget Fix: Users with 「Access to edit content only」 aren』t able to access the Editor Fix: If the default page layout is set to 「Canvas」 Headers and Footers cannot be edited Fix: Global Color and Fonts that were deleted might cause style removal from the same elementFix: Opacity indication is missing in the Global Color control dropdown and in the creation promptFix: Wrong placement of 「Add New」 section in a Popup when using Optimized DOM modeFix: 「Edit with Elementor」 button is not in the correct locationFix: Global Dropdown scrollbar has redundant border in Chromium based browsersFix: Entrance animation isn』t working on edge cases in Tabs widget

Fix: If the default page layout is set to 「Canvas」 Headers and Footers cannot be editedFix: Product Image Dynamic Tag throws an error when no image is setFix: Missing Single document placeholder in Theme BuilderFix: Document editing handles inherit the `font-family` from 3rd party sourceFix: Can』t add linebreaks to Textarea input when used as Multi Step FormFix: Incorrect width in Facebook Page widgetFix: Added compatibility to allow the use of 『get_create_url』 in Theme Builder

Update:

We』ve released a new update (Elementor Core 3.0.9), with one fix which includes:

Fix: Kit settings get deleted when modifying the Site Title or Tagline in WordPress Settings and Customizer screens, resulting in loss of styles and all Site Settings.

Update:

We』ve released a new update (Elementor Core 3.0.8.1), with fixes which include:

Fix: Reverted Shape Dividers are in front other elements in Chrome 85 fix due to display glitchesFix:  Auto Columns control setting causes layout to be displayed in one row in Social icons

Update:

We』ve released a new update (Elementor Core 3.0.8), with fixes which include:

Fix: Additional cases of Global Style inconsistencies in Editor and Frontend Fix: Edit with Elementor button is missing from the admin top bar in some cases since WordPress 5.4 Fix: Unexpected columns view when Inner Section is muted Fix: Some Shape Dividers are in front other elements in Chrome 85 Fix: JS error `elementorCommon` is undefinedFix: Site description doesn』t get updated from the 『Customizer』 screenFix: When Global values aren』t available don』t return an empty objectFix: Message After Submit RTL icon spacing glitchFix: Select2 control dimensions adjustments

Update:

We』ve released two new updates (Elementor Core 3.0.7 and Elementor Pro 3.0.4), with fixes which include:

Fix: Additional cases of Global Style inconsistencies in Editor and Frontend Fix: Plugins conflict on non-admin login to the dashboard Fix: PHP error undefined method `add_repeater_row` caused data updater issues and server overload Fix: Global Colors and Fonts not being saved when created in Site Settings Fix: Shared link is attached to post text in Twitter Share Button widget Fix: 「No route was found matching the URL and request method」 error when using plain permalinksFix: Site favicon that was set from WordPress customizer is missing in Site Identity screen

Fix: Autogenerated screenshots appear in  WP media library modal Fix: Make sure Elementor Posts widget Pagination doesn』t interfere with 3rd party plugins Fix: Shrinking conditions indicator in Theme BuilderFix: Column can』t be dragged and dropped if it populates a Global widgetFix: Styles are missing from Single templates in some edge cases

Update:

We』ve released a new update (Elementor Core 3.0.6)

Fix: Global Colors and Fonts are missing on front-end (#12363)Fix: Database update script causes unexpected errors (#12305)Fix: Custom Breakpoints stopped working since v3.0 (#12320)Fix: Shortcuts for Navigator is not correct (#12365)Fix: Can』t close a Navigator since v3.0 (#11836)Fix: Select field dropdown caret visibility issue in edge cases in Form widget (#12053)Fix: Missing iFrame `title` attribute in Google Maps widget (#9955)Fix: Missing default size unit selection in default Global Font properties `font-size` and `line-height` controlsFix: Toggle widget title style missing in EditorFix: Exiting Site Settings menu after accessing it from 「Manage Global Fonts/Colors」 Global dropdown menu throws a JS error

Update:

We』ve released a new update (Elementor Pro 3.0.3), with fixes which include:

Fix: Pagination which didn』t work since WordPress 5.5 releaseFix: Change delete template action to 「Move to Trash」 in the new Theme Builder view

Update:

We』ve released two new updates (Elementor Core 3.0.5 and Elementor Pro 3.0.2). Some fixes in this update include:

Fix: Elements behave unexpectedly in the Editor when a custom repeater control is added to Column and Section elements which caused an issue with deleting some elements or having them disappear. Fix: Glitches in migration script for Gap Between Widgets global setting which caused an issue with margin/padding changes. Fix: Motion Effects not working when assigned to a column and throws 35 error when DOM optimization is disabled, which caused issues with elements disappearing in the front end.Fix: Revisions not updating properly Fix: Multiple galleries displaying all images in Lightbox slideshow Fix: Old Theme Builder being opened when accessing through the Finder Fix: Card icon sizes in Theme Builder Fix: Preview button leads to 「render_mode」 instead of preview when importing a template from the new Theme Builder

Update:

We』ve released a new update ( 3.0.4 for the Core free version). Some fixes in this update include:

Fixed Global Colors and Fonts inconsistencies between Editor and Frontend in CoreFixed Global dropdown not being available for all users in Core

Update:

We have released two updates, one for the free version ( 3.0.3) and one for Elementor Pro ( 3.0.1). These versions fix most bugs pointed out by our users.

We added an option to re-migrate Global Colors and Fonts from earlier Elementor versions. To see it go to  Elementor > Tools > Version Control > Rerun Update Script, and click Migrate to V3. This button re-migrates the data from the old site – and deletes the new stored values. Please note that this process will revert all changes made to Global Colors and Fonts since upgrading to v3.x.

The fixes include the issue related to forms and MailChimp, repeater related issues, and a DOM fix. The DOM fix means only users who manually enable the Improved DOM Optimization setting will see its effect, thus eliminating any issue caused by the DOM update.

This patch also solves most of the layout issues, form issues, and bring back the option to use the old Theme Builder.If you still have issues after updating to the latest versions, please continue reading.

If you still have issues after updating to Elementor 3.0, first go through these steps:

Make sure Elementor Core & Elementor Pro are both updated to the latest version.Clear cache. See more information on this topic >Clear localStorage.Open the browser』s Console.Select 「Application」 in the console』s top menu.Select 「Local Storage」 in the console』s left menu.Right click your site(s) and click clear to delete the local storage.Regenerate CSS files. Go to Elementor > Tools > Regenerate CSS and click the Regenerate Files button.

Do I lose my current global settings when I update? 

No, we made sure all the settings are migrated properly. Saved Colors will now be renamed Global Colors. 

Will this new version with all it』s new features slow down my website?

No. Better yet, most setups will actually be sped up after upgrading to version 3.0. All the changes of Design System Features and Theme Builder work on the backend and don』t impact the live site. The performance improvements, including the removal of some HTML wrappers, should actually speed up your site.

See more information on this topic > 

What is DOM and do I really need it? 

When a web page is loaded, the browser creates a Document Object Model of the page. This is the DOM. We need it because, without it, the browser won』t know how to organize the page and present it to you.

See more information on this topic >

In what cases will the removal of HTML wrappers break my site?

The sites that might be impacted are ones with custom code or third party addons that hadn』t been updated to be compatible with Elementor version 3.0. In addition, any sites that have applied custom CSS to those specific wrapper classes may also be impacted. In this case, you should refactor your code to use different classes than those that have been removed. 

See more information on this topic >

Internet Explorer is no longer supported, what does this mean for me?

Read our official announcement. Also, this does not affect Microsoft』s newest chromium based version of Edge. That browser will be supported.

Upgraded to v3.0 but now my admin dashboard doesn』t load anymore

Please clear cache and your local storage.

Clear cache. See more information on this topic >Clear localStorage.Open the browser』s Console.Select 「Application」 in the console』s top menu.Select 「Local Storage」 in the console』s left menu.Right click your site(s) and click clear to delete the local storage.

This should clear old settings from loading in your Editor. 

I』ve upgraded to v3.0 but now my site has issues

Please follow these steps before you contact support. This way you』ll have a solution faster and our Support Engineers will be able to help others faster.

Will these updates and planned deprecations break my website?

In general, there shouldn』t be any issues, since we performed many tests before releasing this version. However, we do suggest checking your website, if something does break, follow these steps first to save you time. If this does not solve the problem, please visit our Global Community, or report an issue on GitHub. If those channels do not offer a solution for you and your problem seems an entirely new one, contact support for human assistance. Please be patient when waiting for a reply.

I got a message that says 「Elementor Pro is not working because you are using an old version of Elementor.」

That』s because you upgraded your Pro version before upgrading your Core version, and Elementor Pro 3.0 is not capable of working with previous versions of Core. To get the latest version, try going to 「Updates」 in your WordPress dashboard, clicking the 「Check Again」-button and see if there』s any update pending.

If not, go to Elementor > Tools and click on 「Sync Library」 – this should clear up the cache in your server』s pending updates list, and show up the update for Elementor core v3.0

If that still doesn』t work, manually downgrade Elementor Pro to the previous version (v2.10.3) by downloading the version from Elementor website, and uploading it to your site. Once you』ll get the Core version in your plugin list available, upgrade Elementor Core and then Elementor Pro

Where can I find more information about the new Theme Builder?

The new Theme Builder documents and many others can be found on our Docs website.

WooCommerce Checkout Widget

Intro

Elementor』s WooCommerce Checkout widget can provide you with an even more customizable solution for your ecommerce website. You may edit the section titles, labels, and placeholders of the form fields. You may also style the layout, typography, and color options as a whole, or customize even further by section. 

When publishing, you will be prompted with the option to automatically set your new page as the default checkout page rather than needing to go through the WooCommerce settings.

Content

General

Layout: From the dropdown menu, select between one column, or two column layoutSticky Right Column: If two column layout is used, use the toggle control enable / disable sticky option for the right columnOffset: If sticky option is enabled, enter a value in PX to offset the top margin of the sticky effect

Billing Details

Section Title: Edit the default section title by entering text into the field or choosing the dynamic settingsAlignment: Using the icons, select between left, center, or right alignmentForm Items: For each of the form items you may edit the options belowLabel: Enter the desired value in the text fieldPlaceholder: Enter the desired value in the text fieldAdvanced Options: Additional options may be found in the advanced tab belowDefault Value: Enter a default value in the text field if required.

Shipping Details

Section Title: Edit the default section title by entering text into the field or choosing the dynamic settingsAlignment: Using the icons, select between left, center, or right alignmentForm Items: For each of the form items you may edit the options belowLabel: Enter the desired value in the text fieldPlaceholder: Enter the desired value in the text fieldAdvanced Options: Additional options may be found in the advanced tab belowDefault Value: Enter a default value in the text field if required.

Additional Information

Additional Information Toggle: Use the toggle control to show / hide the additional information section.Items: For each of the items you may edit the options belowLabel: Enter the desired value in the text fieldPlaceholder: Enter the desired value in the text fieldAdvanced Options: Additional options may be found in the advanced tab belowDefault Value: Enter a default value in the text field if required.

Your Order

Section Title: Edit the default section title by entering text into the field or choosing the dynamic settingsAlignment: Using the icons, select between left, center, or right alignment

Coupon

Section Title: Edit the default section title by entering text into the field or choosing the dynamic settingsLink: Edit the default text of the coupon code link by entering the value in the text fieldAlignment: Using the icons, select between left, center, or right alignment

Payment

Terms and conditions

Message: Enter the value in the text field or use the dynamic settingsLink: Edit the default link text by entering the desired value in the text field

Purchase Button

Alignment: Using the icons, select between left, center, or right alignment

Style

Sections

Background Color: From the color picker, choose the background color for your sections. This color will apply to all sections. You may apply a different background color to a section(s) in the Customize options shown below Box Shadow: Click the pencil icon to set the color and shadow optionsBorder type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %Margin: Enter a chosen value in the fields based on px, em, or %

Typography

For each of the following components, Titles, Secondary Titles, Descriptions, Messages, Checkboxes, and Radio Buttons the following style options are available. 

Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow (Titles Only): Click the pencil icon to open the shadow properties options.Spacing: Use the slider to increase or decrease the spacing between components.

Links

Choose the appearance of the link options on normal and hover states

Link Color: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the Customize options shown below 

Forms 

Layout

Column Gap: Use the slider or enter the value in the field in PXRows Gap: Use the slider or enter the value in the field in PX

Labels

Color: From the color picker, choose the color for your labels. This color will apply to all labels. You may apply a custom color to a sections labels in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsSpacing: Use the slider to increase or decrease the spacing between components.

Fields

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Borders

Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %

Order Summary

Layout

Rows Gap: Use the slider or enter the value in the field in PX

Items

Color: From the color picker, choose the color for your ItemsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Variations

Color: From the color picker, choose the color for your VariationsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Dividers

Color: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)

Titles and Totals

Color: From the color picker, choose the color for your VariationsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Divider Total

Color: From the color picker, choose the color for your Divider TotalWeight: Use the slider or manual enter a value in the field (PX, EM)

Purchase Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow: Click the pencil icon to open the shadow properties optionsText Color (Text): From the color picker, choose the color for your field text. Background Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved

Width (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %

Customize

The customize option allows you to style a section(s) independently of the other sections. Click the + icon to add or remove actions from the customizer. Additional styling options per section will appear below the customizer.

Advanced

Global Advanced tab options are available for this widget.