Author 诗语

Entrance Animations

The Entrance Animations feature lets you animate your Widgets, Sections, and Columns. This way, as your site visitor scrolls down the page, the elements appear with an entrance animation.

Right-click the Section, Column, or Widget』s handle  to edit the element.Go to the element』s Advanced > Motion Effects tab.Choose an animation from the Entrance Animation dropdown selections. Note that you can choose your Entrance animation, including 「None」, per device.

You can choose from 37 different entrance animations including:

Fading: Fade in, fade in up, down, left, rightZooming: Zoom in, zoom in up, down, left, right,Bouncing: Bounce in, bounce in up, down, left, rightSliding: Slide in up, down, left, rightRotating: Rotate in, rotate in down left, down right, up left, up rightAttention seekers: Bounce, flash, pulse, rubber band, shake, head shake, swing, tada, wobble, jelloLight speed: Light speed inSpecials: Roll in

 See it live in our  Entrance Animations release post. 

Note: Elementor respects the 「reduced motion property」 preference that a user may set. If a user has set any of the following, then motion effects will be disabled for that user:

Mac: 「System Preferences > Accessibility > Display」 and check/un-check the box for 「Reduce motion」iOS: 「Settings > General > Accessibility」 and turn on/off 「Reduce Motion」Windows 10: 「Settings > Ease of Access > Display > Simplify and Personalise Windows」 and turn on/off 「Show Animations in Windows」

Note: In Safari, if you are not seeing mouse effects, or you are experiencing the problem of elements disappearing in Safari, this is due to an old jQuery version being used by WordPress. In some cases, viewing Mouse Track effects via Safari might cause a jQuery error which will cause elements to disappear, such as missing carousel arrows, for example. If this happens, you may also see an error which references 「maximum call stack size exceeded」. To resolve the issue, either remove entrance animations from widgets with motion effects and/or remove mouse effects from areas that have both scrolling and mouse effects simultaneously activated.

The Template Library is Empty

If you do not see any templates in the 「Predesigned Templates」 after hitting on the 「Add Template」, please check the following steps:

1. On your WordPress Dashboard, go to 「Elementor > Tools」 and click on 「Sync Library「.

2. Go to Elementor > System Info on your WordPress Dashboard and check the 「Memory Limit」 allocated to WordPress. If your memory limit is under 128MB (40MB for instance) please ask your hosting company to raise it. The official WordPress guide to increase the memory limit can be found here.

3. Check if it is not a permission issue. Contact your hosting company so that they can check the error logs of your server.

4. Ask your hosting company if the allow_url_fopen function is activated.

To troubleshoot, you can test Elementor on a localhost to rule out a server issue.

WooCommerce Single: Product Title (Pro)

Use this widget to control the style and layout of the Product Title in the WooCommerce Single template

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

Icon Library Is Empty

If your Icon Library becomes corrupted, you may see an empty Icon Library. To restore it, please do the following:

Go to Elementor > Custom Icons and check for any custom icons that may be listed in either the Trash or Draft listings. If any are there, permanently delete them and check if this resolves the issue.If you don』t have any icons in the Trash or Draft folders at Elementor > Custom Icons, just install any custom icon to reset the library to its normal state. Learn how to install custom iconsThis issue can also be due to specific server configurations and in this case, it needs to be checked by your hosting provider.

Custom Labels & Values in Select, Radio and Checkbox Form Fields

You can use the pipe character on your keyboard (『|』) to differentiate between label and value. If you use a pipe (『|』) character in an option value, the part before the pipe will be used as the label, and the part after the pipe will be the actual value. 

You can use this method in a Select, Radio buttons and Checkbox fields.

The backend will look like this:

And the frontend will look like this:

Learn more about the Form Widget and its options here.

WooCommerce Single: Short Description (Pro)

Use this widget to control the layout and style of the product Short Description on WooCommerce Single template

Short Description

Style

Alignment: Align the short description to the left, right, center, or justifiedText Color: Choose the color of the Short Description textTypography: Set the typography options for the Short Description text

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.

When I Try to Activate the License Key, I Receive the Error Message cURL error 7: (http_request_failed)

This happens when the request is blocked by some firewall or restriction of your server. 

In this case, you have to contact your Hosting Company so that they can give the green light to Elementor.

WooCommerce Archive Products (Pro)

Set the style and layout of the WooCommerce Archive Products

Content

Content

Allow Order: Select Yes to give users the option to sort the products by Default, Popularity, Rating, Latest, Price: Low to High, or Price: High to LowShow Result Count: Select Yes to show number of results for this archive, or No to hide it

Advanced

Nothing Found Message: Enter the message to be shown to users when there are no results to display

Style

Products

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 product Title colorTypography: Set the typography options for the Title textSpacing: Adjust the amount of space after the Title

Rating

Star Color: Choose the color of a filled starEmpty Star Color: Choose the color of an empty starStar Size: Set the size of starsSpacing: Adjust the amount of space after the Rating Stars

Price

Color: Choose the color of the product PriceTypography: Set the typography options for the product Price

Regular price

Color: Choose the color of the product』s Regular PriceTypography: Set the typography options for the product』s Regular Price

Button

Normal | Hover

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

Text Color: Choose the color of the product』s Button TextBackground Color: Choose the background color of the product』s ButtonBorder Color: Choose the border color of the product』s Button

Typography: Set the typography options for the product』s Button TextBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the product』s ButtonBorder Radius: Control corner roundness of the button』s borderText Padding: Set the padding within the buttonSpacing: Adjust the amount of space above the buttons

View Cart

Color: Choose the color of the View Cart text under the buttonsTypography: Set the typography options for the View Cart text

Box

Border Width: Control the thickness of the border around the product』s boxBorder Radius: Control corner roundness of the products boxPadding: Change the padding within the products box

Normal | Hover

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

Box Shadow: Adjust box shadow optionsBackground Color: Choose the background color of the products boxBorder Color: Choose the border color of the products box

Pagination

Spacing: Set the amount of space above the paginationBorder: Show or Hide border around paginationBorder Color: Choose the color of the pagination borderPadding: Set the padding within the pagination

Normal | Hover | Active

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

Typography: Set the typography options for the pagination textColor: Choose the color of the pagination textBackground Color: Choose the background color for the pagination

Sale Flash

Sale Flash: Show or HideText Color: Choose the color of the Sale Flash textBackground Color: Choose the background color of the Sale FlashTypography: Set the typography options for the Sale Flash textBorder Radius: Control the corner roundness of the Sale FlashWidth: Control the thickness of the border for the Sale FlashHeight: Set the height of the Sale FlashPosition: Set the position of the Sale Flash, Left or Right, of the products boxDistance: Set the distance of the Sale Flash from the top of the products box

Nothing Found Message

Color: Choose the color of the Nothing Found Message textTypography: Set the typography options for the message text

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.

Which Widgets Support ACF and PODS Custom Fields?

Elementor (Free)

WIDGET NAME
WIDGET FIELD
ACF FIELD(S)
PODS FIELD(S)

Heading                                
Title                              
ACF Field
PODS Field and PODS Date Field

 
Link
ACF URL Field
PODS URL Field

Text Editor
 
ACF Field
PODS Field

Image
 
ACF Image Field
PODS Image Field

Video
URL
ACF URL Field and ACF Field and ACF oEmbeds
PODS Field and PODS Date Field and PODS URL Field

Button
Text
ACF Field
PODS Field and PODS Date Field

 
Link
ACF URL Field
PODS URL Field

Google Maps
Address
ACF Field
PODS Field and PODS Date Field

Icon
Link
ACF URL Field
PODS URL Field

Icon List
Text
ACF Field
PODS Field

Image Box
Image
ACF Image Field
PODS Image Field

 
Title
ACF Field
PODS Field and PODS Date Field

 
Description
ACF Field
PODS Field and PODS Date Field

 
Link to
ACF URL Field
PODS URL Field

Icon Box
Title
ACF Field
PODS Field and PODS Date Field

 
Description
ACF Field
PODS Field and PODS Date Field

 
Link to
ACF URL Field
PODS URL Field

Image Gallery
 
ACF Gallery Field
PODS Gallery Field

Image Carousel
 
ACF Gallery Field
PODS Gallery Field

Progress Bar
Title
ACF Field
PODS Field and PODS Date Field

 
Inner Text
ACF Field
PODS Field and PODS Date Field

Testimonial
Content
ACF Field
PODS Field and PODS Date Field

 
Name
ACF Field
PODS Field and PODS Date Field

 
Job
ACF Field
PODS Field and PODS Date Field

Accordion
Title
ACF Field
PODS Field and PODS Date Field

Soundcloud
Link
ACF URL Field and ACF Field
PODS Field and PODS Date Field and PODS URL Field

Shortcode
 
ACF Field
PODS Field and PODS Date Field

Elementor Pro

WIDGET NAME
WIDGET FIELD
ACF FIELD(S)
PODS FIELD(S)

Animated Headline
Before
ACF Field
PODS Field and PODS Date Field

 
After
ACF Field
PODS Field and PODS Date Field

 
Link
ACF URL Field
PODS URL Field

Price Table
Footer > Link
ACF URL Field
PODS URL Field

Call to Action
Image
ACF Image Field
PODS Image Field

 
Button > Link
ACF URL Field
PODS URL Field

 
Title
ACF Field
PODS Field and PODS Date Field

 
Description
ACF Field
PODS Field and PODS Date Field

Reviews
Link
ACF URL Field
PODS URL Field

Blockquote
Content
ACF Field
PODS Field and PODS Date Field

 
Author
ACF Field
PODS Field and PODS Date Field

I Use Elementor with a Localhost, Can the License be Transferred to the Real Server?

Yes. When you use Elementor with a localhost, it is not considered as an activation, so the license can be used on the production site.

To activate Elementor Pro on a live site, simply follow these instructions.