诗语，作者 Elementor 文档

Elementor Experiments

Elementor Experiments is a way for Elementor users, if they choose, to test and help shape new features before they are released. Future experiments might include widget enhancements, editor settings and functions, or even WordPress backend functionality.

Experience and play with new features in a safe environmentTurn features on and off as desired Potentially influence future feature releases by sharing feedback and reporting issues about the experience

Note: Some experiments are activated by default for NEW sites only.

How To Use Experiments

Go to Elementor > Settings > Experiments tabSelect Active from the dropdown of any experiment you wish to useYou may alternatively use the Activate All / Deactivate All buttons to quickly apply changesClick the Save Changes button.

Types Of Experiments

Ongoing Experiments

These are still in the Alpha/Beta versions of each experiment. They are likely to change before final release.

Stable Features

These experiments have been marked as stable by the developers but may be activated/deactivated if found to cause issues or unneeded for your website.

Each experiment will contain:

A brief explanation about the feature and a Learn More link if neededA status ( Dev, Alpha, Beta, Release Candidate) which indicates the stage the feature is inAn activity indication

Statuses:

Alpha – Likely to change and evolveBeta – Fairly stable but will need checks. Usually acted by default only on new sitesRelease Candidate – Stable, minor changes might be added but the feature is mostly completeDev – Like Alpha, this is likely to change and evolve, but this is only in the Dev version

Activity Indicators:

Green – Active (even if the value 「Default』 is selected)Gray – Inactive (even if the value 「Default」 is selected)

FAQ

Q: What does 「Default」 mean?

A: The default value can either be Active or Inactive and is defined by Elementor per experiment, per release. The default can change according to conditions, such as whether the site is new or already existing.

Q: Can I deactivate an experiment if I no longer want to use it?

A: Yes! You can deactivate experiments at any time. Simply choose Inactive from the dropdown next to the experiment.

Q: Can you randomly remove an experiment?

A: Yes, each experiment has a status, which is shown under the description of each experiment. When the status is in Alpha phase, it can be changed multiple times.

Q: Can these experiments affect live pages?

A: Yes, absolutely. Please keep in mind that when using experiments, these features may change or be removed.

Q: What happens if I change an experiment to inactive after I already used it?

A: Elementor acts as if the feature has never existed.

Q: Will you let us know before an experiment is removed?

A: Yes, we will communicate before removing experiments.

Q: How do you decide which experiments to keep?

A: We decide based on your feedback as well as the stability and performance of the feature.

Progress Tracker

Encourage users to engage with your content and to continue to keep reading as they』ll know exactly how much is left. Full style customization is available for the Progress Indicator and Tracker Background.

Adding A Progress Tracker

From the widget panel drag a progress widget to your page or Single Post template to the desired location. You may also use positioning and sticky effects from the Advanced Tab.

Content Controls

Tracker Type: From the dropdown menu select between Horizontal, or CircularProgress Relative To: Select between Entire Page, Post Content, or Selector from the dropdown menuIf selector is chosen, provide the #id or .class you wish to track the progress of in the fieldDirection: Select the appropriate alignment iconPercentage: Use the toggle to choose to hide/show the percentage text of the progress

Style Controls

Tracker

Size: Use the slider control or manually enter the value desired

Progress Indicator

Color: Use the color picker to set the progress indicator colorWidth: Use the slider control or manually enter the width for the progress indicator (PX)Alignment: Use the appropriate icon to set the alignment of the progress indicator

Tracker Background

Color: Use the color picker to set the tracker background colorWidth: Use the slider control or manually enter the width for the tracker background (PX)

Content

Percentage

Color: Use the color picker to set the percentage text colorTypography: Use the typography settings for family, size, weight, and decoration valuesText Shadow: apply a text shadow to the percentage using the controls

Hosted Elementor Website: Migrating An Existing Site To Elementor Hosting

If you already have a website, or you have developed a site locally, and wish to migrate it to your Hosted Elementor Website account you may use the following methods.

Using the Elementor Import / Export Tools

The Export Kit function will allow you to export your entire Elementor content or selected content from one website and import it into another using the Import Kit function. Imported pages and templates will retain display conditions and site settings including colors, typography, and other globals.

Note: You will need to install all the plugin dependencies of your old site to your Hosted Elementor Website (example: WooCommerce, Elementor Third Party Addons)

Using The WordPress Import / Export Tools

You may also use the WordPress native import / export tools to migrate your website. You can find this by navigating to WP Dashboard > Tools

Export Your Data

From the Export dashboard, choose the content you want to migrate over. For smaller sites, you may choose the All content option. For larger sites however, it may be necessary to break the process into separate files.

Import Your Data

On your Hosted Elementor Website, Navigate to the Import Dashboard. From the list below, install the WordPress ImporterFrom the Importer screen select your downloaded XML file. Due to Hosted Elementor Website restrictions, you may only upload a 50mb file maximum. This cannot be increased. You will need to break up the file into smaller files aboveOn the next screen, you will be prompted to assign the author, or create one. Choose yourself if unsure. Toggle the import attachments to retrieve the images and other media of your original site. Some images and Featured images may fail to import. This is an old issue from many years and not related to ElementorThe importer will take a few minutes to run and give you an 「All Done Have Fun」 messageInstall all dependent plugins on the Hosted Elementor Website.Resave permalinksRun the Elementor Find And Replace toolsReplace any missing images / dependencies

Important: Using third party migration plugins such as All In One Migration, Duplicator, or others is not recommended for migrating your existing site to Hosted Elementor Websites as they may overwrite the Elementor Pro Subscription connection. If this happens, you may use the Hosted Elementor Website backup restore tools to restore your original connection.

How to Trigger an Elementor Popup on a Link Click

Opening A Popup By Text Link

Create your Popup in the Elementor builder Learn More HereNavigate to the Popup Settings by clicking the gear icon in the lower cornerIn the Advanced Tab > Open By Selector create an anchor trigger link shortcode (example: a[href="#link-popup"] )Set the Display Conditions to Include > Entire SiteApply this link anywhere on your website by linking to the anchor trigger link (example: #link-popup)

Example Resources

Note: when using the code snippet above, ensure that straight quotes are used rather curly quotes.

Multi Select Feature

Save valuable time by selecting multiple items on your page. Once selected, you may duplicate, copy/paste styles, or delete with ease.

Multi-selecting items

From the Editor window

Edit a page using ElementorSelect any page elementHold down the Command key (Mac), or Control key (Windows)Left clicking a page element in the editor while holding the ctrl / ⌘ key adds it to the current selection. If the element is already selected – it removes it from the current selectionRight click or use hotkeys to duplicate, copy, paste, paste style, or delete the items selectedSupported actions will apply for the entire selection

From the Navigator

Select an item you wish from the navigator panelHold down the Command key (Mac), or Control key (Windows)Left clicking a page element in the navigator while holding the ctrl / ⌘ key will add it to the current selection. If the element is already selected – it removes it from the current selectionSelect additional items desiredRight click or use hotkeys to duplicate, copy, paste, paste style, or delete the items selected

Migrating Your Existing Elementor Site to a Hosted Elementor Website

Elementor has developed import and export tools to help you migrate your website in just a few simple steps. While there are third-party plugins for exporting websites, these plugins are not supported by Elementor and may break your site.

Note: Your third-party subscription plugins will need to be disconnected from your old site and connected to your new site.

Now let』s get started.

Preparing your new site

First, make sure your new site』s infrastructure matches your existing site. Make sure that all the plugins installed in your existing site are installed in your new site and updated to the same version.

Using the Elementor Import/Export Tools

Part 1: Exporting your current site

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.

Great! This completes the export process.

-Now switch to your new Elementor hosted account.-

Part 2: Importing the content to your Hosted Elementor Website

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

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.

Finishing Up

Now that you』ve migrated your content, there are a couple more steps you can take to ensure everything is running smoothly.

From the dashboard, go to Settings>Permalinks and resave your permalinks.

Next you』ll need to run the Elementor Replace URL tool to make sure users can find your new site:

Go to Elementor>Tools on the dashboard. Enter your old URL and your new URL in their respective fields and then click Replace URL.

Now select the General tab and click Regenerate Files & Data.

After importing your content, we suggest going over the site again to check for any missing media or broken links.

Congratulations! Your site should be working properly – with all the content migrated.

Troubleshooting

If the Import/Export Kit tab does not appear

Some users may have to manually activate the Import/Export tool. Here』s how:

Go to Elementor>Tools from the dashboard.If you don』t see Import/Export Kit in the tabs, select the Experiments tab.Use the dropdown to activate 「Import Export Template Kit」.

The Import/Export Kit tab should now appear.

Word Spacing Feature

To easily add additional spacing between words, you may use the word spacing feature. It can be found in typography styles of any supported widget. Use the slider or enter a value in the field based on PX, or EM.

CSS Transform

Transform your designs with the Elementor CSS Transform Controls. Rotate, offset, scale, skew, and flip your page elements with ease. These controls can be located in any compatible widget in the Advanced Tab > Transform settings.

Note: Transform only works with widgets and not sections, columns, or inner sections at this time.

Controls

The controls for each CSS Transform effect may be set for both Normal, and Hover states. When editing a hover state, you may enter a duration of the effect to reduce the jitter or for visuals. They may also be set per breakpoint in the Responsive settings by clicking on the device icon located at the label of each control.

Rotate

You may rotate your page elements easily by using the sliders or entering the values in the field based on degrees. Toggle the 3D Rotate to be able to rotate on a specific axis and change the perspective(px). The Rotate X and Y axis is to be used in combination with perspective to achieve the desired goal.

Offset

Offset your elements horizontally on the X axis or vertically on the Y axis. The values can be controlled by the slider or entering the values in the text fields. The values can be measured in % or PX.

Scale

Scale elements to the perfect size in your design. The value can be controlled by the slider or entering the values in the text field based on %. You may also choose to keep the proportions intact by using the toggle control.

Skew

Use the skew controls to give your element a leaning effect. You may set the Skew X and Y values using the slider or manually entering the field values based on %.

Flip Horizontal

Use the Flip Horizontal icon control to reverse your element on the X axis.

Flip Vertical

Use the Flip Vertical icon control to reverse your element on the Y axis.

Anchor Points

Use the anchor point controls to set the horizontal (X) and vertical (Y) basis in which you wish to define.

X Anchor Point

Choose between left, center, or right anchor point using the icons.

Y Anchor Point

Choose between top, center, or bottom anchor point using the icons.

My Elementor

My Elementor is your Elementor account home. Here, you are able to easily access all your Elementor connected sites, manage your account profile and billing details, get help from the support team, and quickly navigate to the Elementor Experts network, as well as the Affiliates area.

Dashboard

Your 「My Elementor」 dashboard consists of 3 main areas. The Top Panel contains quick access to download Elementor Pro, and Profile management. The Left Panel contains navigation to available management areas. The main content area contains the details and available actions for each management area.

Top Panel

Downloads

In the upper right, click the Downloads icon to view your account』s available downloads.

Profile Options

In the upper right, click the arrow next to your account name to see all available options.

View Profile

Account Details

Account Details enables you to view the name and email address associated with your account. You can change your password and edit your profile information here.

Change Password

Click Change Password link to create a new password. Click the Save button when done.

Edit Account Details

If you have not yet verified your email, you will see a reminder notification here. Click Edit Account Details link to change the name or email address associated with your account. Click the Save button when done.

Note: Changing an email address will require verification.

Log Out

Click Log Out link from the profile dropdown to log out of My Elementor.

Websites

A list of all your connected websites that use this account』s license or are connected via 「Library Connect」.

Websites Dashboard

The top right of the Websites Dashboard consists of a Search bar and the ability to display websites as either cards or as a list.

Click the Search icon to quickly find one of your websites by searching for either its url or title.

Display As Cards or List

Click the Display icon to switch between viewing your websites in either Cards view or List view.

Link To Live Site

Click the Link icon next to the URL to go to the site.

Link to WP Admin

Click WP Admin to go to the WordPress admin area for the site. The link URL is a best guess. Some sites may have security in place to obfuscate or change the standard wp-admin location, in which case this link will be incorrect.

Subscriptions

If you have any Elementor Pro subscriptions, they will be listed here. If you don』t yet have a subscription, click the Buy Elementor Pro button to proceed with the purchase of a new subscription.

If you do have any subscriptions, they will be listed here. Click View billing info to see the billing details.

The Billing details screen will appear. You may also deactivate any connected websites from this screen if needed.

Default Billing Address

The email address that is designated as the default billing address for the account is displayed.

The default billing address will be used as the billing address in any new subscription that is purchased.

The billing address cannot be changed during checkout, but can be changed at the subscription level per subscription.

The billing email does NOT replace the account email in any way. All emails regarding payment are sent to the account email, not the billing email.

Edit Billing Info

Click the Edit Billing link to change the information stored here. Click the Save button when done.

Saved Payment Methods

The saved payment methods are displayed here. Click Update Payment Method if you need to update an existing method of payment. For example, you may need to update the expiration date.

Click Confirm & Close button to continue.

Add New Payment Method – Click the pencil icon next to any payment method to edit or add a payment method.

In the popup, either select a payment method to edit and click the Update button, or select Add Payment Method to add a new method of payment.

Billing History

Click Invoice to generate an invoice for any purchase.

Active Websites

All active websites are listed here. You can view how many activations are left on your subscription. Click Deactivate Website next to a site that you wish to deactivate.

3 Dots … Menu

Click the 3 dots icon in the upper right corner to turn Auto Renewal on or off.

Support

The Support tab provides helpful links to get support.

Tutorials

Click Start Studying to go to the Elementor Youtube channel. There you will find many videos and playlists to help you learn any aspect of using Elementor.

Feature Request

Click Open Github to go to the Elementor code repository. Here you can open an issue to request a feature you would like to see implemented within Elementor in the future.

Email Support

Click Get Help to open a Customer Experience ticket with Elementor customer or technical customer experience.

Experts

Click Experts to go to the Elementor Experts Network.

Affiliate

Click Affiliate to go to the Affiliates area.

How To Trigger A Popup From A Nav Menu Item

Triggering a popup from a nav menu item is easy to do.

Create the Popup

First, create your popup.In the Advanced tab of the Popup Settings, we will add a small code snippet into the Open By Selector field. For this example, we』ll enter the code shown below.a[href="#popup-menu-anchor"]Now publish the popup and set the Display Conditions. If the menu is in a site wide header, set the Display Conditions to Entire Site. If the menu is on a specific page, set the Display Conditions to that specific page (Singular > Pages > search and select your page).Ensure that no Triggers or Advanced Rules are set for your popup.

Note: Make sure that straight quotes are used and not curly quotes to avoid jQuery errors.

Enter code in the field shown in this image.

Edit The Menu Item

Next, edit your WordPress menu located at Appearance > Menus.Add a new Custom LinkIn the URL, use the selector name created above ( example: #popup-menu-anchor)Enter the link textSave your menu

Add selector to custom link in menu.

That』s it! Now, when a user clicks the menu item, the popup you designed will be triggered.