Elementor 文件

Why Can』t Users See My Popup?

「I』ve created a popup but users can』t see it「. If your visitors aren』t seeing your popup as expected, check that the Conditions, Triggers, and Advanced Rules are set properly.

Conditions determine where (on which page(s)) a popup will occur. Do your conditions indicate that the popup will happen on the page you expect?Triggers are user actions that cause a popup to happen. Did the user do what was needed to trigger the popup? (i.e. click something, scroll, etc).Advanced Rules cover other situations that would cause a popup to happen. Do you have an Advanced Rule set? Is that situation occurring? For example, you may have set an advanced rule to show a popup when a visitor comes to the page from a search engine. Did that scenario happen?Advanced Rules > Hide for Logged In Users option may not work properly on cached websites.

Also consider that you may have several different conditions, triggers, and advanced rules set that must all happen before a popup will occur. If only some of those rules are met, but not all, then the popup will not happen.

Let』s look at an example.

One of the services offered on a website is a high-priced business mentor membership program. In order to show the value of joining the program, three high-quality comprehensive free guides have been created for anyone who signs up as a trial member. A popup will be shown to anyone who attempts to leave the membership landing page without having joined. The popup will offer one of the three guides to be given to the user if they fill out the form within the popup. Which guide offered will depend upon where the user came from before landing on this page, so three popups will be created.

Popup A – Offers a guide about acquiring new clients

Condition: only shown on the membership landing page

Trigger: only shown when the user intends to exit the page

Advanced Rule: only shown to users who are not logged in who came from an internal page that discusses client acquisition

Popup B – Offers a guide about managing client projects effectively

Condition: only shown on the membership landing page

Trigger: only shown when the user intends to exit the page

Advanced Rule: only shown to users who are not logged in who came from an internal page that discusses project management

Popup C – Offers a generic guide about the benefits of the entire business membership program

Condition: only shown on the membership landing page

Trigger: only shown when the user intends to exit the page

Advanced Rule: only shown to users who are not logged in who came from a search engine

For any of the three popups to be shown, each of the rules must apply, or the popup will not occur. In this example:

If the user came from anywhere other than the 2 specified internal pages, or from a search engine, no popup will be shown.If the user meets all of the rules for one of the popups but the user is logged in, no popup will be shown.If the user is not on the membership page, no popup will be shown.

Popups may encounter layout issues with iOS10 or below, and Popups are not compatible with, or supported by, IE 11 or below.

Learn more about Popups here

I』ve activated Safe Mode but it didn』t solve the problem

If Safe Mode didn』t help you to resolve the problem, there are other possible solutions.

Check if you meet the system requirements for Elementor. If you don』t meet the memory requirements, edit your wp-config.php file or contact your hosting company and ask them to increase your WP memory by using the following guideTry the following: Use the option switch front-end editor loader method. You can find it in the settings of Elementor in your WordPress Dashboard (see the screenshot below). Enable this option and see if it solves the issue.

Sometimes, if your URL in the back-end is different than the one in the front-end it can also lead to this problem. Make sure that the Site Address (URL) is similar to the WordPress Address (URL) to avoid loading issues These URLs can be checked in 「Settings > General」.On some servers, you will have to change the SubstituteMaxLineLength.In rare cases, the white screen of death can occur because of a program installed on your computer. To rule out this possibility, edit from another computer.Sometimes, this can happen because of a Fatal error. To confirm this, you can check Elementor > System Info to see if there are any PHP errors logged.

Problems sometimes exist because of an add-on installed on your browser. In this case, you can switch to another browser (It has to be Safari, Chrome, Firefox, or Opera).A gray page might be due to X frame restrictions. You can see if it is the issue by checking the error messages of your browser console (to do it, click right on your mouse, select 「inspect」 and then 「console」. Error messages are written in red). In this case, you will have to change the X-Frame-Options from DENY to SAMEORIGIN. Please ask your host to do this for you. Note: If you use traefik and docker then add this to your docker-compose…traefik.frontend.headers.customFrameOptionsValue: SAMEORIGIN If you use Cloudflare, you will have to switch off Rocket Loader. When Rocket Loader is activated, it can take time to load the editor of Elementor, and sometimes you will get stuck on the gray loading page. Click here for a solution   

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.

What Can I Expect in Terms of New Pro Features and Templates Releases?

Since our launch, we have been known for our frequent feature release, and plan to keep working hard to deliver new and promising features & templates almost every week.

Follow our blog to see the latest release: https://elementor.com/blog

WooCommerce Product Categories (Pro)

Display a grid of WooCommerce Product Categories anywhere on your site.

Content

Layout

Columns: Set the exact number of columns to display, from 1 to 12Categories Count: Select the number of categories to display

Query

Source: Select the source from which to display categories, choosing from All, Manual Selection, By Parent, or Current Subcategories. If Manual Selection is chosen, manually select which categories to display. If 「By Parent」 is chosen, select from Only Top Level, or select an individual category from the dropdown list.Hide Empty: Set to Yes to categories with no products within themOrder By: Set the order in which the categories will be displayed. Options include Name, Slug, Description, or CountOrder: Select to display categories in ASC or DESC (Ascending or Descending) order

Style

Columns Gap: Set the exact gap between the columnsRows Gap: Set the exact gap between the rowsAlignment: Align the products data to the left, right, or center

Image

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the radius to control corner roundness of the borderSpacing: Adjust the amount of space between the images and their data

Title

Color: Choose the Title colorTypography: Set the typography options for the Title text

Count

Color: Choose the color for the CountTypography: Set typography options for the Count

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.

Global Widget (Pro)

A  Global Widget gives you full control over a specific widget that is displayed in multiple places on your site. Editing it in one place will instantly update the rest. 

 

For example, let』s say you』ve edited and designed a Testimonial widget on one page, and you now want to use your creation on many other pages on your site. Simply save it as a Global Widget and then drag your new widget onto any page. You can then edit all of them at once by editing the global widget. 

Create a Global Widget

Right Click the widget』s handle and click on Save as a GlobalName your new global template and click the Save button

Edit a Global Widget

Once the widget is saved as a global widget it is instantly surrounded by a yellow border instead of the standard blue border. In addition, in the panel, all of the saved global widgets are displayed as a two column widget list.

To edit the global widget, Right Click the widget』s handle 

You』ll see the message 「 This is a global widget and is now locked」

Clicking Edit global widget allows editing the global widget. Any changes made here will instantly update all the places in which the global widget is placed on the siteClicking Unlink from global will unlink the widget from the rest of the global widgets, and let you edit only the specific widget, without affecting all other global widgets.

Insert a Global Widget

There is a number of ways to insert a global widget to other places on your site:

Elementor Dashboard:

On the new page click Global, and drag a global widget to your page.

WordPress widgets area:

Go to Appearance > WidgetsAdd the Elementor Library Widget to the area you want (footer, sidebar, etc.)Click the dropdown and pick the template or global widget you want to use.

Shortcode

Go to Templates > Saved Templates > Global Widget.Copy the ShortcodePaste it in any area that supports shortcodes.

How to delete the Global Widget

Go to

Templates > Saved Templates

and delete the widget.

Important! Notice that deleting a Global Widget will delete it from everywhere.

How to Access a Section That is Hidden

Sometimes, because of using Negative Margins, Z-Index, or Absolute Positioning, a section or the section』s handle can become hidden and inaccessible, making it seemingly impossible to edit it. This is because either another section overlaps it, or because it gets hidden behind the header that comes from the theme.

Elementor』s Navigator enables you to easily reach and edit these hidden section handles.

Navigator』s tree panel provides easy access to every element on the editor with just one click. Now you can edit and move elements that have been hidden by Z-Index, negative margins, and absolute positions. 

Learn more about how this wonderful tool puts you in complete control over the elements on the page.

Technical FAQ Index

The most common issues can often be solved using one of our troubleshooting guides.

How to Fix the 『Preview Could Not Be Loaded』 ErrorMy changes do not appear online, what can I do?Can』t Edit with ElementorFatal error after updating or installing Elementor or Elementor ProThe Content Area Was Not Found in Your PageThe Publish / Update Button Does Not Work

Breadcrumbs Widget (Pro)

Elementor』s Breadcrumbs Widget works with the popular Yoast SEO Plugin. So to use this widget, INSTALL YOAST SEO.

Content

Alignment: Set the Alignment.HTML Tag: Choose an HTML Tag

Note: Additional settings are available in the Yoast SEO Breadcrumbs Panel

Style

Typography: Click the  icon to design the typography using Elementor』s design optionsText Color: Set the color for the textLink Color: Set the color for the link. Set it for Hover as well

「Undefined」 error while loading templates

If you see the error message 「Undefined」 when you try to add a template:

Upgrade your PHP version to PHP7 (backup your website before)In some cases, the latest version of PHP may cause undefined errors. Although staying up to date with PHP versions is often a good idea, it may cause problems for edge cases. Downgrade to a PHP version one version lower than the latest if this occurs.Ask your hosting company to increase the timeout value of your serverAsk them also to check the database encodingVerify that it is not due to a plugin conflict by deactivating all your plugins besides Elementor and Elementor Pro. If this solves the issue, reactivate them one by one to find the culprit.Check if it is not due to a conflict with a browser add-on by editing in incognito mode with your browser.

WooCommerce Archive Title (Pro)

Control the style and layout of your WooCommerce Archive Title

Content

Title: Automatically dynamically generatedLink: Enter the URL for the item』s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.Size: Choose from Default, Small, Medium, Large, XL, XXLHTML Tag: Select the HTML tag to use for the Title, from H1 to H6, or div, span, or pAlignment: Align the Title to the left, right, center, or justified

Style

Text Color: Choose the color of the textTypography: Change the typography options for the textText Shadow: Add a shadow and blur to the textBlend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc. View Blend Mode demo

Tip: Want to hide the Category name? Click the title to open the Settings options. Slide Include Context to No.