Author 诗语

Facebook Comments Widget

Add Facebook Comments to the end of your posts to allow your readers to easily comment using their Facebook account.

Content

Comments Box

Comment Count: Set the number of comments displayed in the pageOrder By: Sort the comments order according to the Facebook Social factor, Time or Reverse TimeTarget URL: Get the Comments of the Current Page, or for a Custom URLURL Format: Select Plain Permalink or Pretty Permalink

Advanced

Set the Advanced options that are applicable to this widget

Note: Set your Facebook App ID in the Elementor Settings > Integrations tab.

Read the full release post about the Facebook Comments widget.

Note: If you are developing for European based sites, users must accept cookies, and be currently logged in to Facebook before the like, share, or comment buttons are displayed on the front end.

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.

Menu Cart Widget (Pro)

The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page. 

Content

Menu Icon

Icon: Select the icon to show, choosing from Cart, Basket, or Bag, in Light, Medium or Solid designs.Items Indicator: Select the type of indicator to use for number of items in the cart, choosing from None, Bubble, or PlainHide Empty: Slide to YES to hide items indicator if cart is emptySubtotal: Show or Hide the cart』s current subtotalAlignment: Align the menu cart to the left, right, or center

Cart

 Main Options

Cart Type: Select the type of cart to display choosing between Side Cart or Mini CartOpen Cart: Select the desired option choosing between On Click or On HoverCart Position: Click the Left or Right position icon to set the position of the cart in the container.

Close Cart

Close Icon: Toggle the Show / Hide option on the panelIcon Position: Click the Left and Right position icon to set the position of the close icon in the container.

Remove Item

Remove Icon: Toggle the Show / Hide option on the panelIcon Position: Click the Top, Center or Bottom position icon to set the position of the remove icon in the container.

Price & Quantity

Position: Click the Top or Bottom position icon to set the position of the Price and Quantity heading in the container.

Cart Dividers: Toggle the Show / Hide option on the panel to set the desired state.

Note: This is also dependent on the settings in the style tab for dividers.

Buttons

View Cart: Toggle the Show / Hide option on the panel to set the desired stateCheckout: Toggle the Show / Hide option on the panel to set the desired stateVertical Position: Click the Top or Bottom position icon to set the position of the buttons in the container.

Additional Options

Cart Additional Options

Automatically Open Cart: Toggle the Show / Hide option on the panel to Open the cart every time an item is added.Automatically Update Cart: Toggle the Show / Hide option on the panel to show updates to the cart (e.g., a removed item) via Ajax. The cart will update without refreshing the whole page. 

Note: In order for the auto open cart feature to function, you must check the enable AJAX in your WooCommerce settings located in WooCommerce > Settings > Products.

Style

Menu Icon

Main Normal | Hover Options

Icon Color: Choose the color of the cart iconBackground Color: Choose the background color of the widget containerBorder Color: Choose the border color of the widget containerBox Shadow: Click the icon to set additional box shadow optionsBorder Width: Control the thickness of the border around the widget containerBorder Radius: Set the border radius to control corner roundness

Icon

Size: Adjust the size of the cart iconSpacing: Adjust the amount of space between the cart icon and the subtotal textPadding: Change the padding settings of the widget container

Items Indicator

Text Color: Choose the color of the number of items in the items indicatorBackground Color: Choose the background color of items indicatorDistance: Set the distance between the icons indicator and the subtotal text

Note: When the Menu Cart is clicked, a cart overlay slides open. The following options control the design aspects of the cart overlay.

Cart

Main Style Options

Background Color: Use the color picker to set the background of the cartBorder Type: Select a border type or leave set to noneBorder Radius: Use the values to set the radius of borders if selectedBox Shadow: Click the icon to display the box shadow optionsPadding: Change the values to set the desired padding of the container

Close Cart

Icon Size: Use the slider or manually set the values of the icon size in % or PXColor: Use the color picker to set the value of the close icon

Remove Item

Icon Size: Use the slider or manually set the values of the icon size in % or PXColor: Use the color picker to set the value of the Remove Item icon

Note: The above options may be set for the Normal and Hover States if desired.

Subtotal

Color: Choose the color of the subtotal text in the cart overlayTypography: Change the typography options for the subtotal text in the cart overlayAlignment: Click the icons to choose between Left, Center, or Right alignmentDivider Style: Select the divider type between Solid, Dotted, Dashed, Grooved or leave set to NoneWidth: Set the width of the divider in the valesColor: Use the color picker to select the color of the divider

Products

Product Title

Color: Choose the color of the product title in the cart overlayTypography: Change the typography options for the product title in the cart overlay

Product Price

Color: Choose the color of the product price in the cart overlayTypography: Change the typography options for the product price in the cart overlay

Quantity

Color: Choose the color of the product price in the cart overlayTypography: Change the typography options for the product price in the cart overlay

Divider

Style: Select the style of the divider above and below the subtotal in the cart overlay, choosing from none, solid, double, dotted, dashed, or groovedColor: Choose the color of the subtotal divider in the cart overlayWeight: Set the thickness of the subtotal dividerSpacing: Set the spacing between subtotal dividers and the subtotal text

Note: These settings may be affected by the divider toggle in the controls. 

Buttons

Layout: Choose the layout of the buttons in the cart overlay, either Inline or Stacked.Space Between: Set the amount of space between the cart overlay buttons

View Cart

Text Color: Choose the color of the Show Cart button text in the cart overlayBackground Color: Choose the background color of the Show Cart button in the cart overlayBorder Color: Choose the border color of the Show Cart button in the cart overlayBorder Width: Control the thickness of the border around the Show Cart button in the cart overlay

Checkout

Text Color: Choose the color of the Checkout button text in the cart overlayBackground Color: Choose the background color of the Checkout button in the cart overlayBorder Color: Choose the border color of the Checkout button in the cart overlayBorder Width: Control the thickness of the border around the Checkout button text in the cart overlayTypography: Change the typography options for both buttons in the cart overlayBorder Radius: Set the border radius for both buttons in the cart overlay

Messages

Typography: Change the typography options for the messages in the cartEmpty Cart Message Color: Use the color picker to set the color of the messageAlignment: Use the icons to choose Left, Center, Right or Justified alignment.

Other Information

Default WooCommerce Mini Cart Configuration

To avoid conflicts with WooCommerce plugins or themes that may utilize their own Mini Cart templates, Elementor gives you the option to enable or disable Elementor』s version of the Mini Cart template. If WooCommerce is activated, follow these steps to enable or disable Elementor』s Mini Cart template.

Go to Elementor > Settings > Integrations > WooCommerceChoose Enable for this option in order to replace the default WooCommerce mini cart template or your theme』s mini cart template with Elementor』s template. Unless manually set to Disable, this setting is automatically enabled once the Menu Cart widget is used anywhere on your site.Choose Disable to opt out of using Elementor』s Mini Cart template.

How To Fix Elementor Text Color Not Changing

When editing text on your site you may experience text that is not changing color as expected. This can be caused by several factors that we will explain in this document.

Text Is Inheriting The Source Style

This is one of the most common causes for text not changing colors. If you are copy / pasting content from an external source such as another site or from Word documents, the text may be inheriting the styles from the source. To troubleshoot this, click on the text tab of the text editor to see the raw text. If you see unwanted HTML styling such as , this is causing the issue.

Solution

Paste your content into the Text Editor in the text tab to remove all formatting. You may also right click and 「Paste Special」 on a PC, or 「Paste and Match Style」 on a Mac. 

Elementor Default Styles Conflicting With Theme

Elementor has a set of default colors and typography settings. These may be conflicting with your Theme or Theme Builder styles.

Solution

Navigate to Dashboard > Elementor > Settings and tick the checkboxes to disable the Elementor default colors and fonts (shown below)

The Theme Has Default Color Settings

Some themes have advanced customizer settings for controlling the colors and fonts. You may need to reset these settings in order for the Elementor styles to take effect.

Solution

Navigate to the Customizer of your theme in Dashboard > Appearance > Customize or from the WordPress Admin bar. Refer to your themes documentation for the location of these settings.

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.

How To Fix: Common Errors With Kit Library

When using the Kit Library feature you may occasionally encounter the following message(s). To help resolve these issues use the following guide below:

Types Of Errors – Resolution

Error while loading the kit preview – This could be because of missing kit data or server error. Please try again in a few minutes. If the error continues, contact support.Error while loading the kit library – Please try again clicking the ? icon at the top corner of the screen or try again in a few minutes. If the error continues, contact support.Error while trying to apply the kit – This could be because of a server or license validation error. Please try again in a few minutes. You may also try disconnecting and re-connecting your license in order to make a fresh connection to the Kit Library. If the error continues, contact support.Error Forbidden – If you get the following message when trying to download a kit:{「code」:」rest_forbidden」,」message」:」Sorry, you are not allowed to do that.」,」data」:{「status」:401}} it can be corrected by making sure you have updated to the latest versions of Elementor Core and Pro (if installed). You may also try disconnecting and re-connecting your license in order to make a fresh connection to the Kit Library.

Additional Resolutions

If unable to apply the kit, verify that ZIPArchive has been installed on your server. You may do this by navigating to Elementor > System Info and locating the following information. If this is set to No, you will need to change the settings in your cPanel or contact your host to have this enabled.

Horizontal Scrollbar on Mobile Devices

How To Debug And Solve The Problem Of A Horizontal Scroll Bar On Mobile Devices

This is due to an element which creates overflow.

Once you』ve determined which section has overflowed, you can edit that Section』s Layout tab, and change Overflow to Hidden.

If you prefer, you can opt for a less technical way to find the section that has overflowed. Simply save the page as a template, then edit the template. Delete each section, one by one, and test on mobile after each deletion. When the problem disappears, you』ve found the problematic section.

Facebook Page Feed (Pro)

Add your Facebook Page Feed (previously named Like box) to your site. 

URL: Type your Facbook Page URLLayout: Choose between Timeline, Events and Messages Small header: Displays a Facebook Header in a narrow viewCover: Show / hide the cover imageProfile photos: Show photos of people who liked your pageCustom CTA button: Choose between the page』s official CTA button, or the default Share ButtonHeight: Set the height of the box (desktop, tablet and mobile)

Advanced

Set the Advanced options that are applicable to this widget

Note: If you are developing for European based sites, users must accept cookies, and be currently logged in to Facebook before the like, share, or comment buttons are displayed on the front end.

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 Change The Administration Email Of Your Website

To change the primary email address of your site or, when transferring the ownership of your website, it is necessary to change the Administration Email Address in order to be able to receive emails and updates. This is done in the WP Settings.

Steps

Navigate to Dashboard > Settings > GeneralChange the current Administration Email Address to the new email address designated to be the primary email address.Please verify, or notify the new owner to verify this change from the email they receive. The site will automatically update once this has been verified

Note: The email will often be directed to the new owners junk mail folders and may take several minutes to appear.