Kit Has Been Imported – What To Do Next?

Kit Has Been Imported – What To Do Next?

Change The Logo And Site IdentityCreate A Menu + Link It To The Nav Menu WidgetReplace Demo ContentLink Popups Where Needed

The Site Identity

Navigate to Site Settings > Site Identity. Here you can change the name of your site, the tagline, the logo, and the favicon.

Adding The Logo

To add a logo to your imported Kit, you may assign it by uploading your logo in the Site Identity settings. It will then be used for the header and footer of your website when the Site Logo Widget is used. You may use jpg, png, and gif file types.

Note: SVGs may be used if previously uploaded to the media library. You must also define a size in the style tab of your Site Logo Widget.

Creating The Menu

At this time, the Site Kit does not automatically create your Navigation Menu. You will need to create your own menu from the WordPress dashboard located at Appearance > Menus or from the Customizer.

Creating A Menu With The Customizer

From the top Admin Bar of your website, choose to enter the Customizer. For this example we will be using the Hello Theme. Select the Menus accordion here:

Click the Create New Menu buttonName your new menu (example: Primary) and toggle the menu location.Click the Add Items button. A panel will expand showing the available items to add to your menu. Add our newly imported Elementor Pages.You will now have these pages in your menu. You may click and drag to reorder them as desired.You can also add Categories or other content related to your Kit by expanding the items.Create Sub-Menus by dragging the items under a parent item so they are slightly indented.Publish your menu. It will now appear in the header of your kit.

Note: Learn more about the Navigation Widget here.

Replace Demo Content

When importing your kit, be advised that Kits contain third-party images, videos, media, files, audio and other visual components. While we have the right to use them in our Kits Library, we cannot ensure that you may use them in your own product. Therefore, please replace or remove all above assets from your copy of the Kits.

Editing The Popups

If your Kit includes popups for contact forms, navigation, or other uses, you may locate these in the dashboard located in the Templates region.

You can add the Kit Popups to the icons or links by using the dynamic options. For more about popups click here.

Hosted Elementor Website: Adding Your Custom Domain Name To Your Hosted Elementor Website

Hosted Elementor Website: Adding Your Custom Domain Name To Your Hosted Elementor Website

Once you have purchased your domain, you may add it to your Hosted Elementor Website as a Custom Domain. In order to do this, you will first need to make some changes to your domain』s DNS (Domain Name System) records.  This document will walk you through the steps.

Let』s Get Started

From your Elementor dashboard, go to Websites and click the Manage This Website button located in your website』s card to open the site details screen. From the Manage Domains section, click the Add Custom Domain link. 

A popup screen will then appear that looks like the following:

Keep this popup screen open as you will need to copy the information to your registar. To do this, you will need to log into your domain』s registrar account where you purchased your domain in a new tab.

Log in to your Registrar Website Account

Once you』ve logged in to your registrar』s website in a new browser tab, you will need to edit your DNS records by adding or editing the A record to point at your Hosted Elementor Website』s IP address. Please refer to your registrar』s documentation for locating their DNS tools.

Adding An A Record

An A Record is the most common method for directing a domain to point to your Hosted Elementor Website. An A record assigns an address for your domain to a specific IP address (eg. point example.com to IP address 162.159.137.9).The correct IP addresses are currently 162.159.137.9 and 162.159.138.9. You will see the correct IP from your Hosted Elementor Website Dashboard.

Important: If your domain is hosted at CloudFlare, you cannot turn on Proxy as this will not allow the domain to be properly connected. It has to be set to 『DNS Only』.

Adding A CNAME

The alternative method of pointing your domain to your cloud account is to add a CNAME record that points your domain to your Hosted Elementor Website Domain. For example, if your domain name is example.com and your Hosted Elementor Website, e.g. example.elementor.cloud, create a CNAME record on example.com that points to example.elementor.cloud.

Using CNAME For WWW

In order to direct the www to your Hosted Elementor Website, you must create a CNAME record with the name set to www, the value set to @, and the TTL set appropriately (example: 1 Hour). See example below (GoDaddy):

Wait for the DNS changes to propagate

DNS servers across the world periodically check for any changes to the DNS records. A DNS change requires up to 72 hours to propagate worldwide, although this often happens within a few hours, and in some cases, within a few minutes.

Return to the Hosted Elementor Website Dashboard

On the Elementor Dashboard browser tab, you may now click the green acceptance button. If the popup has gotten closed, you may return to this step by clicking Add Custom Domain Button at any time.

Adding Your Domain Name To The Dashboard

In the next popup, you will enter your domain name in the input area provided. 

Add your domain name into the text area, without 「www」. So in this example, shown above, we』re adding a custom domain name of 「justanothercoolwebsite.com」. At this time, you may also set your domain as the Primary Domain and also create the www. You may add or edit these later if you wish.

Wait for Elementor to connect to your domain.

Sit back and relax. Once you have completed the steps above, Elementor will attempt to connect to your registrar. This process could take a few minutes, but up to 72 hours. 

Setting the Custom Name as Primary

To set your domain as the primary destination for visitors, you will need to click on the Set Primary Domain link beside your custom domain name. The following popup will appear. Click the green Set Primary button. The popup window will close. It will take 30 seconds to several minutes for the changes to appear. You will also receive email notifications once ready.

So, what』s next?

We』ll check that your DNS is available (this might take up to 72 hours).We』ll issue an SSL certificate for your website.When your domain is ready, we』ll notify you by email.

Deleting Your Website to Start Again

Deleting Your Website to Start Again

Sometimes you make a mistake designing and building your website and rather than try and fix it, it』s better just to start from scratch. That answer depends on when you created your website.

For sites created on or after December 22, 2021

For sites created after this date, Elementor automatically creates a backup of your site as a clean installation, so you just need to restore the original site backup.  

From your My Elementor dashboard, select Manage this website.Scroll down to the Backups section.Locate the first backup.Select Restore.

For sites created after January 1, 2022

For sites created before December 22, 2021

Contact support with a request to delete your website.Support will contact the Accounting and Billing department (A&B). A&B will delete the old site.Elementor will email you to inform you that your site has been deleted.Visit your My Elementor dashboard.A new form will popup to create a new site, fill out this form.You』ll see your old site on the My Elementor dashboard.Delete your old site by clicking on the ellipsis (three vertical dots), next to the site name and select delete.Click Create Website to create your new site.

My Elementor

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.

Search

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.

Migrating Your Existing Elementor Site to a Hosted Elementor Website

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 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

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.

Hosted Elementor Website: Migrating An Existing Site To Elementor Hosting

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.

Known Bugs and User Experience Issues

Known Bugs and User Experience Issues

Version Elementor Core 3.5.1

Issue: When using the responsive controls to reverse columns, some breakpoints are not compliant. Columns will not display in reverse order. This primarily affects the tablet breakpoint. 

Issue: When using the multi select feature, copied elements are pasted in the reverse order. 

Issue: Inner Section can』t be drug into a column (#17249)

Resolution

These known issues are scheduled to be patched on the next release (Core 3.5.2)

Version Elementor Pro 3.4.1

Issue: Custom Breakpoints + Single templates – Custom breakpoints do not work while using a single post/page template.

Description:

When using custom breakpoints for elements on posts/pages edited with Elementor, this does not work on the frontend while a single template is being applied. The CSS for the default desktop breakpoint in the inline styling (added while using the Post Content widget) overrides the post』s stylesheet with the expected custom breakpoint CSS.

Possible Workaround:

Disabling the 「Additional Custom Breakpoints」 beta feature (in 「Elementor > Settings > Experiments」) resolves this issue at this time.

Resolution

This known issue is scheduled to be patched on the next release of the version

Version 3.0 (Elementor Core and Elementor Pro)

Please see FAQ for Elementor 3.0

Some 3rd party plugins are not yet compatible with Elementor 3.0. These include, but may not be limited to:SG Optimizer by Siteground – Siteground has released an update to patch this, so please update this plugin if you are using it.JetElements / JetEngine by Crocoblock – Crocoblock has released an update to patch this, so please update this plugin if you are using it.ElementKitEle Custom Skin – An update has been released to patch this, so please update this plugin if you are using it.Some users were seeing HTML source code which appears on the WooCommerce orders page on WP-admin. A patch has been issued to fix this. Please update to the latest version.If Yoast Premium plugin is activated, some users may be receiving a JSON error or be unable to switch between Visual and Text tabs in the WP text editor. A patch has been issued to fix this.Some users receive a 「go pro」 message although Elementor Pro is installed on their website. This happens when Elementor Pro has been updated before the core. Please go to Elementor > Tools > General and sync the library to receive the invitation to update Elementor free. Now update Elementor free before Elementor Pro.If you cannot update the typography or lose previous typography settings, please try regenerating the CSS by going to Elementor > Tools > Regenerate CSS.If you see two Theme Builder links or cannot access the new Theme Builder and its templates, you may have only updated the free version of Elementor. Elementor Pro should also be updated. Some users are seeing code on their pages that says 「Server Error, see Elementor => System Info」. A patch has been issued to fix this. Please update to the latest version.If you see a Data Migration message, please click Proceed until it is complete. A patch has been issued to fix this. Please update to the latest version.If a site part』s 「Entire Site」 condition is removed, the site part may still be displayed. To fix this, please go to the template itself, and save the condition from there.Some users are reporting that sections or other elements disappear once they are edited. This is being investigated and a patch will be issued once a fix is determined.If a form is integrated with a 3rd party integration such as ActiveCampaign or others, there may be issues with field mapping that affects button colors. The developers are aware of this and are working to find a solution. A patch has been issued to fix this.Cannot delete/duplicate columns/sections – This has been fixed in a later patch.Internal embedding bug causing changes to not update unless regenerate css button was clicked. This has been fixed in a later patch.Column widget space settings broke after updating and disabling Optimized DOM Output setting. This has been fixed in a later patch.

WordPress version 5.5 + Elementor Pro 2.10.3 or less

Posts widget + WP 5.5 – Pagination links lead to 404 page (Page Not Found)

WordPress version 5.5 causes the Elementor Pro Posts widget』s pagination links to break. Clicking these links result in a 404 Not Found page. The developers will release a patch ASAP.

Sorry for the inconvenience these issues are causing.

System Info

System Info

System Information

The system info includes information about your Server and your WordPress environment. The system info can be copied and pasted into an email or downloaded as a .txt file that can be attached to the email. This option is important, given that we sometimes need this information to assist you when you experience a bug. You can find your System Info from your WordPress Dashboard』s menu by going to Elementor > System Info 

What Information is Included in the System Information

Server Environment

Operating System: This is the operating system of your server. Common systems are Windows, Linux, Ubuntu, macOS Server, and Darwin (Local by Flywheel)Software: The software used by your server. This is generally nginx or apache for more detailed information about nginx configuration click hereMySQL Version: The current version of MySQL that is used by your systemPHP Version: This indicates the version of php used by the website. Certain versions of php can affect your website, see this article (system requirements)PHP Max Input Vars: This is the maximum number of variables your server can use for a single function to avoid overloads (example: 4000)PHP Max Post Size: Defines the maximum space allowed for post. This may be increased to avoid timeouts (example: 1000M)GD Installed: GD is used for image processing and should be enabled.ZIP Installed: This allows the server to extract and process zip files. It should be enabledWrite Permissions: In order for WordPress and Elementor to work properly, proper write permissions for folders must be enabledElementor Library: This verifies a connection to the library is active to use the Template and Kit libraries.

WordPress Environment

Version: This is the version of WordPress you are currently using.Site URL: The Uniform Resource Locator (URL) is the address visitors use to visit your website.Home URL: This is the address of your homepage. This should be the same as the site URL to avoid conflictsWP Multisite: This indicates whether Multisite has been activated on your installationMax Upload Size: This defines the maximum size of file uploads such as images, videos, plugins and other files.Memory Limit: This refers to the maximum memory allocated to each script in PHP (256M is recommended but 512M may be required if using numerous plugins)Permalink Structure: This displays the type of Permalinks that your website uses. Some custom configurations may cause issues. Learn more about permalink structureLanguage: The default language of your website and editor. The editor language cannot be set differently than the site.Timezone: This is the time zone the website is set at. It does not necessarily reflect the admin locationAdmin Email: This is the default email email that wordpress uses for all admin notificationsDebug Mode: Displays whether mode is set to active or inactive.

Theme

Name: The name of the WordPress theme installedVersion: Themes should be kept at the latest versions for the best site healthAuthor: This is the name of individual or company that developed this themeChild Theme: This displays whether the active theme is a child theme of a parent

User

Role: This displays the current users role (Example: Administrator, Editor)WP Profile lang: This is the preferred theme language of the userUser Agent: This displays the operating system and browser used to access the site. 

Active Plugins

This lists all the currently active plugins. It contains the version and author of the plugin. Keeping each plugin at the latest release is recommended in site health.

Elementor Compatibility Tag

This lists any plugins being used that do not have a declared compatibility with the Elementor core version you have installed. The plugin developer will need to update the plugin to be compatible with Elementor.

Elementor Pro Compatibility Tag

Lists any plugins being used that do not have a declared compatibility with the Elementor Pro version you have installed. The plugin developer will need to update the plugin to be compatible with Elementor Pro.

Elements Usage

This region lists the widgets used by each site part on your website. It does not list the exact page where each is. 

Elementor Experiments

This is a list of all available experiments and whether they are set to active. Some experiments are still in Alpha or Beta phase and may cause issues.

Log

The log will display a list of changes and errors associated with your website. From here you may find errors with plugins or updates. Our support team can evaluate the log and find potential issues.

What is Safe Mode?

What is Safe Mode?

If you are unable to edit because you encounter a never-ending Elementor Loading page, you can troubleshoot the problem by enabling Elementor』s Safe Mode.

「Safe Mode」 is a safe environment that isolates Elementor and WordPress from the themes and plugins that might be causing the error.

What Does Safe Mode Do?

Safe Mode helps identify any issue that interferes with Elementor loading. In most cases, loading issues are caused by conflicts between plugins or themes. Safe Mode lets you verify if the problem persists even after deactivating plugins and themes, and pinpoint the possible cause of the issue.

The only thing that changes when Safe Mode is enabled is that the Elementor editor loading is done without any activated Plugins or Themes. Enabling Safe Mode also temporarily deactivates all Elementor Experiments.

Using 『Safe Mode』 opens the Elementor editor on a clean version of WordPress, without loading a theme or any plugins. All plugins are deactivated and an empty theme file is loaded.

Note: Safe Mode removes third-party scripts from the Editor, however, it does not remove 3rd-party scripts from the Widget Panel.

How To Activate Safe Mode

You can activate Safe Mode in either of two ways:

Go to Elementor > Tools and select Enable from the Safe Mode dropdown and then click the Save Changes button orClick the Enable Safe Mode button that pops up when the Editor is unable to load.

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 the safe mode and troubleshoot the problem for you. In the case of a multisite setup, only Super Admins can activate Safe Mode.

Note: Safe Mode only affects logged in users while they are using the Elementor editor, and has NO effect on site visitors or other logged-in users. For them, the site will operate as usual, with the regular theme and plugins activated.

Note: Safe Mode only helps solve problems with the Elementor editor itself. It does not help solve issues that prevent the widget panel from loading or issues occurring on the front end of the site, such as changes that do not appear online. 

Important: Safe Mode must be disabled for Elementor Experiments to work. If missing functionalities (example: Landing Pages), please disable safe mode.

Once you』ve verified that Safe Mode helped, now it』s time to Debug Safe Mode to find and fix the plugin or theme issue.

How To Trigger A Popup From A Nav Menu Item

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.