Author 诗语

I Receive An Error When I Try To Update Elementor Pro

Table Of Contents

I Receive This Error – 「Update: Could Not Copy File」I Receive This Error – 「Update Failed: Download failed. Unauthorized」Please deactivate and reactivate the license following these steps:Once you have done the steps above, please follow these steps:Does the issue persist?

This guide lists some of the specific errors you may receive when trying to update the Elementor plugin.

I Receive This Error – 「Update: Could Not Copy File」

This occurs generally when you work with Elementor Pro from a localhost and/or with any Windows Server. 

You can install a  plugin to solve this issue (which is an incompatibility issue between Easy Digital Downloads, Windows and WordPress).If this did not help, ask your hosting company to verify your permission settings. If nothing helped, you can download Elementor Pro via your Elementor Account in https://my.elementor.com. You will find the file in  Purchases > View Details and Downloads. Once the file downloaded, go to your WP Dashboard, delete Elementor Pro, then in Plugins, click on 「Add New」 and upload the file of the new version downloaded from elementor.com.

I Receive This Error – 「Update Failed: Download failed. Unauthorized」

In order to be able to update your plugin, you need to have an active license.

Please deactivate and reactivate the license following these steps:

First, log in at https://my.elementor.com/Go to My Account > View websitesNext to the website in question, click on Deactivate Site

Once you have done the steps above, please follow these steps:

Go to your website』s WordPress dashboard > Elementor > License Click on the Disconnect button (if there is one) and afterward, click on the Connect & Activate button and attempt to update the plugin again.

Does the issue persist?

If the issue persists, then this may be related to a permissions error. In this case, delete the current plugin and upload the newest version of the plugin via FTP, as explained here, in the section labeled, 「I receive an error message when I try to update Elementor Pro」.

More information about update issues may be found on our Update Issues guide.

Site Migration

Table Of Contents

What』s The Best Way To Migrate My Site?I Already Migrated My Site, But Something』s Wrong!After MigratingUse the Replace URL tool:Regenerate the CSS:Additional TroubleshootingI want to write my own code to migrate. Any tips for me?Using Programmatic MigrationReplace URL behavior:WP CLI:

When you migrate pages built with Elementor there are a few things to take into account.

What』s The Best Way To Migrate My Site?

If you haven』t yet migrated your site, and you are ready to do so, we have a good guide to follow. Click this link to begin:

How To Migrate Your WordPress Site With Elementor

I Already Migrated My Site, But Something』s Wrong!

if you』ve already migrated your site, but see some outstanding issues, start here:

After Migrating

Use the Replace URL tool:

Now, you should use the Replace URL tool to make sure that all instances of the URL have been replaced. Even if you believe your plugin has already done this, it may have missed some instances, since Elementor stores some of these in files rather than in the database.

Go to Elementor > Tools > Replace URLEnter your old and new URLs

Regenerate the CSS:

After migrating, you should regenerate the CSS. It will erase the CSS and then the cache will be generated one more time. Sometimes, you will have to clear your caching layers (server cache, plugin cache) given that a caching software can prevent Elementor from rewriting the CSS files. 

Go to Elementor > Tools > Regenerate CSS

Additional Troubleshooting

Migrating Background Images: Background images are saved in a CSS file which has an absolute URL. To avoid migrating issues with the background images without having to write a script, you can define the  CSS Print Method to be inline instead of using external files, if you want. This can be done by going to Elementor > Settings > Advanced > CSS Print Method > Internal Embedding> CSS print method: inline, on your WP dashboard.If you find that you are receiving mixed media errors after a migration from http:// to https://, or if you are missing images and other assets when viewing the new site, please follow the AFTER MIGRATING steps above.If you use the Text Editor widget after migrating, and find that its editor panel is grayed out, this is because the new URL of the website has an extra character, such as a space, within it. To resolve this problem, go to Settings > General in the WordPress admin, and type the correct URL into the settings there. (The extra character may not be visible, so delete the entire URL and type again manually).

I want to write my own code to migrate. Any tips for me? 

Using Programmatic Migration

Replace URL behavior:

If you are writing your own code to migrate programmatically, you will need to take into account that the  add_post_meta of Elementor removes the JSON escaped strings with the wp_unslash function of WP.

To avoid issues while searching and replacing in the database, you can imitate the code of the replace  URL tool of Elementor (find the code located in wp-content > Elementor > Includes > Utils):

WP CLI:

You can also use WP CLI to migrate your websites. For further information about the commands, please check our integration with WP CLI.

Troubleshooting Layout Issues

Table Of Contents

General Layout IssuesCache IssuesPlugin ConflictsTheme IssuesVersion ProblemsiOS IssuesSpecific Layout Issues

Are you having layout issues? These are the most common issues, causes, and solutions available.

General Layout Issues

Cache Issues

Quite often, cache is causing the layout issue you see.

You can first try to simply clear your browser』s cache, use a different browser, or view in an incognito browser. If this doesn』t help, then follow these steps:

Go to Elementor > Tools > Regenerate CSS and click the Regenerate Files button. Update your page. You may need to make a small change to enable the Update button. Clear all cache including server cache if it exists, any WordPress caching plugins you are using, and your own browser cache. You can also try checking in another browser, or in an incognito browser.

Plugin Conflicts

To find a plugin that is causing the layout issue, deactivate all of your plugins except Elementor and Elementor Pro, if applicable. If this solves the problem, reactivate each plugin one by one, until you spot the problematic plugin. If found, contact that plugin』s support for help, or use a different plugin.

Theme Issues

Switch your theme (temporarily) to a default WP theme such as Twenty Nineteen to see if your theme is causing an issue. If so, contact the theme』s developers for help, or use a different theme.

Version Problems

 Layout issues can also be due to the use of an older version of Elementor. Sometimes it isn』t obvious that there is a plugin update available. Go to Dashboard > Updates and click the Check Again button to be sure.

iOS Issues

Column layout issues can happen in old versions of iOS due to the use of CSS grid by Elementor. iOS supports CSS grid starting from iOS 9.3. iOS versions before that may have issues with column layouts.

Specific Layout Issues

Please see the Specific Layout Issues: FAQ Index for articles that help troubleshoot more specific issues you may be having with the layout of your site.

Hello Header and Footer Customization

The introduction of free Header and Footer customization for the Hello Theme allows everyone to create a basic Header and Footer design for their site by using the Elementor Site Settings. If using Elementor Pro, and already have a Header and Footer with display conditions set, the ones created here will not be displayed.

Locating The Settings

The Header and Footer customization options will be found under your Site Settings. For more information about global site settings click here.

Note: This feature will be active only on a new site. Existing sites need to opt-in to this feature through the Experiments screen. Once activated, there will be two new sections under the Site Settings > Theme Style.

Site Header Customization

From the site header customization menu you may configure the look of your site header. In addition to choosing the layouts, you can customize the width, background color, menu, appearance and style of each element.

Header

Control Options

Site Logo – Toggle this to show / hide your logo or titleTagline – Toggle this to show / hide your taglineMenu – Toggle this to show / hide your menuLayout – Choose between Default, Inverted, or CenteredWidth – Choose full width, or boxedGap – Set the margin gaps of your header here in percentage or pxBackground Type – Choose classic or gradient optionsColor – Set the background color(s) using the color pickerImage – Choose an image to display from your media library or upload. Once this is completed, you may choose from the standard image controls for position, attachment, repeat, and size options

Site Logo

Control Options

Type – From the dropdown menu, select between title and logo optionsText Color – (if Text is selected above) Choose the color from the picker, input, or dynamic optionsTypography – (if Text is selected above) Set the font size and family of the titleLogo Width (if Logo is selected above) – Use the slider to adjust size in percentage, PX, or VH.

Tagline

Control Options

Text Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the tagline

Menu

Control Options

Menu – From the dropdown, select the menu to be displayed. These can be configured from the WP menus Menu Layout – Select horizontal or dropdown layoutBreakpoint – Select the breakpoint at which to show your toggle menuColor – Choose color from the picker, input, or dynamic optionsToggle Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the menu

Site Footer Customization

Footer

Control Options

Site Logo – Toggle this to show/hide your logo or titleTagline – Toggle this to show / hide your taglineMenu – Toggle this to show / hide your menuCopyright – Toggle to show / hide the copyright text in footerLayout – Choose between Default, Inverted, or CenteredWidth – Choose full width, or boxedGap – Set the margin gaps of your header here in percentage or pxBackground Type – Choose classic or gradient optionsColor – Set the background color(s) using the color pickerImage – (if Classic is selected above) Choose an image to display from your media library or upload. Once this is completed, you may choose from the standard image controls for position, attachment, repeat, and size options

Site Logo

Control Options

Type – From the dropdown menu, select between title and logo optionsText Color – (if Text is selected above) Choose color from the picker, input, or dynamic optionsTypography – (if Text is selected above) Set the font size and family of the titleLogo Width (if Logo is selected above) – Use the slider to adjust size in percentage, PX, or VH.

Tagline

Control Options

Text Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the tagline

Menu

Control Options

Menu – From the dropdown, select the menu to be displayed. These can be configured from the WP menus Menu Layout – Select horizontal or dropdown layoutBreakpoint – Select the breakpoint at which to show your toggle menuColor – Choose color from the picker, input, or dynamic optionsToggle Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the menu

Copyright

Control Options

Textarea – Input your copyright text in this field using plain text, HTML, or dynamic optionsText Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the copyright

Note: In some cases, the page may need to be refreshed in order to see the changes you have applied.

MailChimp & Elementor Integration

This guide explains how to integrate MailChimp with Elementor Pro Form Widget.

Subscribe to our YouTube Channel 

First set your MailChimp API Key in the Integrations Settings. Under Elementor > Settings > Integrations TabCreate a form using Elementor Form WidgetClick Actions After SubmissionUnder Add Action choose MailChimp

Tip: Click to learn how to get your API Key from MailChimp

Selecting MailChimp Options

API Key: Use the default API Key or a custom oneAudience: Pick an audienceGroups (available once Audience has been chosen): Choose groupsTags (available once Audience has been chosen): Add comma-separated tagsDouble Opt-in (available once Audience has been chosen): Set Double Opt-in to send a second verification emailField Mapping (available once Audience has been chosen): Set the option to map your fields

Note: For the moment, the visitors of the websites will not be able to self-select their group.

Forms not sent with MailChimp:

If you have issues sending forms integrated with MailChimp make sure that you have not added an 「address」 field or a 「birthday」 field within your field mapping settings in your MailChimp account.If you receive specific errors on form submissions, please see this form error troubleshooting guide.

Conditional and Inline CSS Load Experiment

We are working constantly on improving the performance of the sites created with Elementor. We have now focused on achieving a faster page load by reducing the amount of unused CSS generated by the pages by adding the Conditional and Inline CSS Load Experiment.

Activating The Experiment

In order to use this feature, you must navigate to Elementor > Settings > Experiments and activate it in the dropdown. Save your changes at the bottom of the screen.

Conditional CSS Load

Until Core v3.3.0 , all the CSS was loaded in the same file: frontend.css (120KB in Elementro core, 225KB in Elementor Pro ). This means CSS assets that are not in use are being loaded anyway, a thing that harms page score and generates render-blocking processes.

Now, when you activate the Improved CSS Loading experiment, we load only the CSS of the widgets that are placed in your page once. This way, we save up to 37KB of render-blocking assets (CSS) in Elementor Core, and save up to 171KB, based on your usage.

Inline CSS Load

In addition to this experiment, and in order to prevent multiple requests to the server, we are now loading the CSS files as inline style tags. This will reduce even further the render-blocking processes and should improve the overall performance (only up to 8KB, otherwise – the CSS file will be loaded as an inline link tag).

If the widget is being used more than once, there will not be an additional request or print.

The mechanism of understanding the CSS file size (the 「expensive act」) will happen once for a widget.

Conditional Load of the Animations library

The animations.css library will be loaded only if you used it on your page, and will help reduce unused asset loading even further (19KB).

We also added 「under the hood」 improvements to load the sticky JS (7KB) library per use.

When using Elementor combined with Elementor Pro with the performance experiments active, you should expect a major performance boost and save up to 523KB.

Import Kit

By using the Imports Kit function, you may import your packaged Elementor Export Kit from another website.

To use this feature, activate the Import / Export experiment via Elementor > Settings > Experiments. Once you activate the new Import/Export functionality experiment, you will be able to find the options located in Elementor > Tools

Steps

To Import your Export Kit from another website:

From Elementor > Tools > Import / Export click the Start Import buttonThe Import Kits page will open Drag your Export Kit .ZIP file to the area provided, or click to select the .ZIP file from your local computerYou will now be asked to choose the content you wish to be imported. By default, all items are checked.The importer will notify you of any templates that are currently in use on your existing website and give you the option to overwrite each.Templates left unchecked will still be imported, however, the display conditions will not be set.  Choose the most appropriate options for you at this time.The process will start immediately. Depending on your file size, the process will take several seconds to a couple of minutes to complete. Once completed, you will be prompted to return to your dashboard.

Important: We recommend that you backup your site before importing a kit file.

Tip: If you develop your website locally using Local by Flywheel, Xampp, or other server solutions, you must allow inbound traffic to your web server. The importer must be able to reach the source files in order to grab images and other dependencies.This is done by enabling the Live Link (Local by Flywheel), or by Port Forwarding on others. Refer to your server documentation. If unable to do so, you will need to manually replace the missing dependencies on the new website.

Export Kit

The Export Kit function will save you time by allowing you to export your entire Elementor content or selected content from one website and import it into another using the Import Kit function.

To use this feature, activate the Import / Export experiment via Elementor > Settings > Experiments. Once you activate the new Import/Export functionality experiment, you will be able to find the options located in Elementor > Tools

Export Options

Choose which Elementor components – pages, site settings, headers, etc. – to include in your Export file. By default, all of your components will be checked for export.

Templates: Exports saved templates and Theme Builder Templates, such as: headers, footers, single posts, etc. This will also export Global display conditions such as 「Entire Site」, 「All Singular」, 「All Posts」… specific conditions will not transfer.

Content: This option exports all Pages and Landing Pages that have been created with Elementor. WordPress pages, posts, or content created by additional plugins such as WooCommerce will also be exported. At this time the number of pages, posts, and CPT』s to be exported is limited to 20 items per post type.

Site Settings: This exports the Global Site Settings. Global Colors, Global Fonts, Theme Style settings, Layout Settings, Lightbox Settings, Background Settings will be saved and exported.

Kit Information

In this section, you may give your Export Kit a name, and custom description for later use and organization.

Export The File

After selecting your options, click the green Export button in the lower corner of your screen. This will bundle the files and automatically start exporting via a .ZIP file saved to your local computer. You will then be prompted to return to the dashboard in the lower corner of your screen.

Tip: If you develop your website locally using Local by Flywheel, Xampp, or other server solutions, you must allow inbound traffic to your web server. The importer must be able to reach the source files in order to grab images and other dependencies.This is done by enabling the Live Link (Local by Flywheel), or by Port Forwarding on others. Refer to your server documentation. If unable to do so, you will need to manually replace the missing dependencies on the new website.

Optimized Assets Loading

Optimized Assets Loading is an experiment meant to improve a website』s front end performance, speeding up each page by only loading the functionalities needed by that page. This experiment provides the option to load less code by default, which translates to significantly faster page load times and better page speed scores.

By loading parts of the infrastructure JS code only when needed on the page, this can result in significant JS files size reduction. See more details here.

In addition, by breaking the loading method to small chunks, users who use HTTP/2 protocol in their sites will benefit from efficient loading, due to multiplexing which allows a browser to request all the assets in parallel. This results in a dramatic performance gain.

Core Improvements

Smaller E-icons Library

The e-icons library has now been split into separate frontend and backend files. This change will reduce the frontend CSS load to 1KB.

Improved Asset Loading

The following elements will only load if used on the page.

Lightbox and Screenful libraries (±20KB)Dialog library (11KB)Share links library (3KB)

Note: In order for this experiment to work properly, you』ll have to use the Elementor Pro v3.0.9 version and above. Currently, this experiment only applies to Elementor Core widget handlers (JS files), and the Swiper library in Elementor and Elementor Pro instances. Pro widgets handlers will be added in a later Pro version.  3rd party addons may cause potential conflicts if they have not optimized their plugins to use this feature properly.

How To Use This Experiment

Go to Elementor > Settings > Experiments tab.Select Active from the Optimized Assets Loading dropdown. (Must be activated manually).Click the Save Changes button.

Conditional and Inline CSS Load Experiment

For information about this, please click here.

How to Make Money with Elementor

Elementor empowers hundreds of thousands of users, but it also offers freelancers, marketers and web professionals the chance to make money online in a wide variety of legitimate ways. Here are several suggestions to help you start profiting from Elementor.

1. Publish your Elementor skills on Elementor ExpertsYou can join the many experts that specialize in Elementor services at https://experts.elementor.com

2. Join our affiliate programOur  Affiliate Program offers a 50% commission on all plans of Elementor.

3. Create Elementor templates to sell

4. Create addons and themes for Elementor and sell them through ThemeForest

You sell addons for Elementor on  CodeCanyon, sell premium templates on  ThemeForest, and integrate Elementor into your theme and earn from affiliate commissions.We』ve always supported our community of developers, freelancers and other professionals helping to build the Elementor ecosystem. You can contact us if you need help, or ask other community members in the  Elementor community. Checkout our  developer API, which includes examples how to extend Elementor.