Author 诗语

Plugins and Addons For Elementor

Elementor works great with any well-written plugin, including Yoast SEO, CSS Hero, WooCommerce, WPML, BuddyPress, Polylang, CF7 and more.

Here are a few popular plugins that extend Elementor』s functionality, in no particular order:

Essential Addons for Elementor – Many widgets, elements, blocks, and templates https://wordpress.org/plugins/essential-addons-for-elementor-lite/Premium Addons for Elementor – Many widgets, addons, and templates https://wordpress.org/plugins/premium-addons-for-elementor/Elementor Custom Skin – Design your own custom loop / post skin to create the post grid design you want https://wordpress.org/plugins/ele-custom-skin/Woolentor – WooCommerce addons and builder to get more creative with WooCommercehttps://wordpress.org/plugins/woolentor-addons/PowerPack Addons for Elementor – Many widgets and addons https://wordpress.org/plugins/powerpack-lite-for-elementor/Master Addons for Elementor – Many addons and elements https://wordpress.org/plugins/master-addons/Happy Addons for Elementor – Many addons, templates, and effects https://wordpress.org/plugins/happy-elementor-addons/Elementor Contact Form DB – Stores contact form submissions in database https://wordpress.org/plugins/sb-elementor-contact-form-db/ElementsKit – Many widgets, section templates https://wpmet.com/plugin/elementskit/Envato Elements – Over 2,000 free templates and over 680,000 stock images plus more assets https://wordpress.org/plugins/envato-elements/Ultimate Addons for Elementor – Many widgets, website templates and section blocks https://ultimateelementor.comThePlus Addons for Elementor – Many widgets, templates, elements, and listing builder https://theplusaddons.com/elementor/Crocoblock (JetPlugins for Elementor) – Extensive amount of custom and dynamic features and addons https://crocoblock.comDynamic Content for Elementor – Advanced and unique extensions, great for developershttps://www.dynamic.oooAnd many others.

Note: Elementor attempts to notify 3rd party plugin developers of upcoming changes during beta periods of new releases, so the developers of those plugins can make changes to their code as needed. However, Elementor has no direct control over 3rd party plugin code. Therefore, there may be potential conflicts with addons following Elementor plugin updates. If you encounter such a conflict, please contact the 3rd party plugin』s developer or support team for help in resolving the problem. Please see Update Issues and Premium Support for more information.

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

Getting Started With Elementor and Layers

Layers now integrates seamlessly with Elementor.

What is Elementor?

Elementor is a drag & drop website builder plugin that enables you to create complex layouts visually and design your website live.

This integration means that you』ll find some differences in the Dashboard and other functions of 『Layers』 you are currently familiar with.

You』ll no longer find the 『Layers』 tab on the WordPress menu.

Nor will you see the 『Layers』 dashboard.

You will find the known 『Layers』 steps setup, with 『Install Elementor』 as the last step.

How to create a new page

With 『Layers』 you created a page via the 『Layers』 tab. Now with Elementor, you just need to click the regular WordPress 『Add new page』, and click to 『 Edit with Elementor』.

To learn more about creating pages with Elementor click here.

Pre-designed Page Layouts – Elementor Library

When creating a new page with 『Layers』, you』ve had some pre-designed page layouts to choose from. With Elementor, you get to choose from a vast library of pre-designed pages & blocks.

With Elementor Pro you get 300+ layouts and designs.

Customizer / Elementor Live Preview Editor

Elementor uses a live preview drag & drop editor, while with 『Layers』 you are used to editing via the Customizer:

Layers: Edit via Customizer

With Elementor, you literally design your site via a live preview:

Elementor: Edit via Live Preview

Widgets

Elementor uses widgets, just like 『Layers』. It uses them in an intuitive, user-friendly matter.

To learn more about all the different widgets click here.

Layers』 Widgets

Elementor Widgets

How Will Elementor Work With WordPress 5.0 (Gutenberg Editor)

We ♥ Gutenberg: Get Answers to All Your Questions Regarding Gutenberg & Elementor.

The new Gutenberg editor is here, and we know this is intimidating for many WordPress users. Gutenberg naturally raises questions and concerns, some directly related to Elementor.

In this doc, we want to help fill in all the blanks regarding Gutenberg, and how it is going to play out in relation to Elementor. 

General Questions

What is Gutenberg?

Gutenberg is the replacement of the old Wysiwyg editor, allowing users for a much better writing experience when creating content on WordPress. This way, you can easily add image, videos, headlines, buttons and other elements besides your text. A post in Gutenberg is a collection of blocks, and this new structure is what makes it easier to create rich content in Gutenberg.

Does Gutenberg replace Elementor? What is the difference between them?

No, Gutenberg does not replace Elementor. While they share the fact that both are editors, there is a fundamental gap between them.

Elementor is a solution built for designers. If you need to design a website – use Elementor.

Gutenberg has been created in order to improve the user experience of the former WordPress editor, making it easier for bloggers and content writers to embellish their posts with images and other types of rich media.

Will I need to use Gutenberg once it is launched, or can I stick strictly to Elementor?

You can continue to use Elementor, just like you are used to.

What about the Classic WordPress editor?

If you are reluctant to use Gutenberg, you will still have the option to revert back to the previous editor. Having said that, we strongly encourage you use Gutenberg.  

How does Gutenberg affect the future direction of Elementor?

We feel like Elementor played a part in substantiating the role of visual design in the experience of every WordPress user. This encourages us to continue to develop Elementor in the same direction we started, opening new realms of possibilities to design in WordPress, some never before seen.

Gutenberg-Elementor Integration

How will the two interfaces work together?

Elementor and Gutenberg already work seamlessly together. As a user, you can easily decide which editor you use at every point while editing your site.

Build a blog post layout in Elementor, then implement it, so every new post you write with Gutenberg automatically gets the design from Elementor. You can also easily embed Elementor blocks on any Gutenberg page.

Will I be able to use Elementor inside Gutenberg or vice versa?

Yes. Check out our Elementor Blocks for Gutenberg plugin in the WordPress repository.

Are Gutenberg blocks going to show up when I drag a Text widget into my page?

No. The text editor widget stays the same.

Will there be corrections in Elementor-built websites once Gutenberg is launched? Will I need to make updates to my pages?

No, there won』t be any changes. In terms of designing in Elementor, your sites and pages will remain the same, and you will be able to continue just where you left off.

Check out our blog post about WordPress 5.0, Gutenberg-Elementor integration and more:https://elementor.com/blog/welcome-wordpress-5-0/

How To Change The Language of Elementor and Elementor Pro

Both Elementor and Elementor Pro use the language set in the WordPress admin.

Go to WordPress Dashboard > Settings > GeneralSelect your desired language from the dropdown of the Site Language option

Now, your WordPress admin and your Elementor and Elementor Pro frontend and backend will all be in the Site Language you』ve chosen.

Note: It is not possible to run Elementor or Elementor Pro in a different language from the one chosen in the WordPress settings.

Update your site』s translations after each update of Elementor

Updating Elementor does not automatically update the translation. When you switch the language from 」  Settings > General「, this changes the language of Elementor and Elementor Pro as well. But there is an additional step to take. 

Go to 「Dashboard > Updates」 and accept the translation of Elementor Pro there by clicking the Update Translations button. 

Note: After each update, there may be new strings to translate, so you should check the  Dashboard > Updates panel after each Elementor update.

If you are interested in joining the team of localizers so you can help translate Elementor into your language, please read How To Translate Or Localize Elementor

Elementor and Cloudflare Rocket Loader

Elementor and Cloudflare integrate smoothly with each other, although there has been an issue with Rocket Loader in the past.

The issue was caused by Rocket Loader automatically changing the scripts to load asynchronously, which breaks the editor.

If this is causing you a problem, you can solve this by creating rules in Cloudflare:

For Elementor pages: Site URL/*elementor*For Elementor templates: Site URL/?elementor_library=*

To learn more about rules in Cloudflare please check their official documentation here.

What is the Viewport Control?

The Viewport Control is a dual-slider control that lets you define viewport starting and ending points for scrolling effects.

The viewport is the user』s visible area of a web page. This visible area varies in size by device.

When scrolling down, each element enters the viewport at the bottom of the screen. When an element first comes into view from the bottom of the viewport, that represents 0 percentage from the bottom. As it scrolls more into view, the percentage of its place in the viewport changes. When the vertical middle of the element is in the center of the viewport, it is at 50%.

If the Viewport control is set at 0 Bottom and 100 Top, then the motion will begin when the element first enters the user』s viewport at the bottom of the screen, and will stop when the element exits the viewport.

If set to 30 Bottom and 65 Top, the motion will begin when the element has entered and reached 30% of the viewport, and will end when it has reached 65% of the viewport.

If using a motion effect such as Transparency > Fade Out In, the effect would be fully visible at 0%, would begin to fade out when the element reaches 30% of the viewport, would be fully invisible when it reaches 65%, and then would begin to fade back in at 65% of the viewport, until it reaches full visibility by the time it exits the viewport.

Fade In Out would be just the opposite. When the element first enters the viewport at 0%, it would be hidden. When the element reaches 30% of the viewport, it would begin to fade in, becoming more and more visible until it reaches maximum visibility at 65%. At 65% it will then begin to fade back out until it is completely hidden again by the time it leaves the viewport.

GetResponse & Elementor Integration

In this guide, we will explain how to integrate GetResponse With Elementor forms.

First set your GetResponse API Key in the Integrations Settings. Under Elementor > Settings > Integrations Tab Create a form using Elementor Form Widget Click Actions After Submission Under Add Action choose GetResponse Match your Form Fields to GetResponse』s fields through the Field Mapping options

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

Note: The integration with GetResponse creates a new contact in your GetResponse account It does not update existing contacts.

Unsupported Form Field Type May Return A 400 Error

If you receive a 400 error, you may have used an unsupported form field type. For example, the 「phone」 type is not supported. If you have this particular problem, here』s how to solve it.

Within your GetResponse account, please change the Phone Number field type to a Text field.Within your Elementor form, set the Type of field to Tel.

Sitemap Widget (Pro)

The Sitemap widget creates a structured, organized, and accessible HTML sitemap of your website, which provides users and search engines easy, one-click access to your site』s pages.

Content

Sitemap

Items

Type: Select either Post Type or TaxonomySource: Choose Posts, Pages, or any available custom post types if Post Type was selected. Choose Categories, Tags, Format, or any available custom taxonomies if Taxonomy was selected.Title: Enter a titleOrder By: Choose how to order the links. For Post Type selection, choose from Date, Title, Menu Order, or Random. For Taxonomy selection, choose from ID or Name.Order: Choose to list the links in ascending (ASC) or descending (DESC) orderHide Empty: If type chosen is Taxonomy, this option is available. Set to YES to hide if taxonomy is emptyHierarchical View: Set to YES to show hierarchical view (both parents and children).Max Depth: If Hierarchical View is set to YES, this option becomes available. Select depth of hierarchy to show, from 1 to 6, or ALL.

Columns: Adjust the number of columns, from 1 to 6Title HTML Tag: Set the Title tag to H1-H6, Div, Span or ParagraphAdd nofollow: Slide to YES to add rel=」nofollow」 to all sitemap links

Additional Options

Exclude: Choose to exclude the current post or manually search and select a post to excludeAvoid Duplicates: Choose Yes to avoid displaying duplicate posts that might appear in multiple categoriesProtected Posts: Choose to HIDE or SHOW protected posts

Style

List

Indent: Set the amount of indentation within the listsPadding: Set the padding around the sitemap columns

Title

Color: Choose the color of the title』s textTypography: Change the typography options for the title

List Item

Color: Choose the color of the page linksTypography: Change the typography options for the page links

Bullet

Color: Choose the color of the list bulletsStyle: Select the type of list bullet, choosing from Disc, Circle, Square, or None

WooCommerce Single: Add To Cart (Pro)

Insert an 「Add To Cart」 button and control the layout and style of the Add to Cart button in the WooCommerce Single template

Style

Button

Alignment: Align the title to the left, right, center, or justifiedTypography: Change the typography options for the Add To Cart buttonBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessPadding: Change the padding settings of the button

Normal | Hover

The following options can be set independently for both the normal and hover states.

Text Color: Choose the color of the button』s textBackground Color: Choose the background color of the buttonBorder Color: Choose the border color of the button

Quantity

Spacing: Adjust the amount of space between the Quantity field and the ButtonTypography: Change the typography options for the Quantity textBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessPadding: Change the padding settings of the Quantity field

Normal | Focus

The following options can be set independently for both the normal and focus states.

Text Color: Choose the color of the Quantity』s textBackground Color: Choose the background color of the Quantity fieldBorder Color: Choose the border color of the Quantity field

Variations

Spacing: Change the amount of space between the variations and the Add To Cart buttonSpace Between: Change the amount of space between each variation

Label

Color: Choose the color of the Variations』 Label textTypography: Change the typography options of the Variations』 Label text

Select Field

Color: Choose the color of the Variations』 Select field textBackground Color: Choose the background color of the Variations』 Select fieldBorder Color: Choose the border color of the Variations』 Select fieldTypography: Change the typography options of the Variations』 Select fieldBorder Radius: Set the border radius to control corner roundness

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.