Elementor 文档

Blockquote Widget (Pro)

The Blockquote Widget allows you to embed fully styled quotes. You can also set these as Click To Tweet quotes, enabling users to easily share them on Twitter.

Content

Skin: Choose the Blockquote skin, selecting either Border, Quotation, Boxed, or CleanAlignment: (available for Quotation, Boxed and Clean Skins) Align the quote elements to the left, center, or rightContent: Type your Blockquote contentAuthor: Enter the Author nameTweet Button: Toggle the Tweet Button ON or OFF

Tweet Button Settings:

View: Choose between Icon & Text, Icon, or Text onlySkin: Choose between Classic, Bubble and LinkLabel: Type your LabelVia: Type your Twitter Account username i.e. @your_acountTarget URL: Choose between the Current Page, None, or a Custom Link

Style

Content 

Text Color: Choose the color of the quotation textTypography: Set the typography options for the quotation textGap: Set the amount of spacing between the quotation text and the author

Author 

Text Color: Choose the color of the author』s nameTypography: Set the typography options for the author』s name

Button 

Size: Adjust the size of the buttonBorder Radius: Set the border radius to control corner roundnessColor: Select the Official Twitter colors or set your own custom button colorsTypography: Set the typography options for the button text

If Custom Color option is chosen, the following options become available:

Background Color: Choose the background color of the buttonText Color: Choose the color of the button』s textTypography: Set the typography options for the button text

Border (available only for the Border skin)

Color: Choose the color of the borderWidth: Set the border』s widthGap: Set the space between the left border and the quote textVertical Padding: Set the top and bottom padding around the content

Quote (only available for Quotation skin)

Color: Choose the color of the quotation markSize: Set the size of the quotation markGap: Set the spacing between the quotation mark and the quote text

Box (only available for Boxed skin)

Padding: Set the padding around the quote textBackground Color: Choose the background color of the boxBorder Type: Select the border type from Solid, Double, Dotted, Dashed, or GrooveBorder Radius: Set the border radius to control corner roundnessBox Shadow: Adjust box shadow options

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Blockquote widget

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

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.

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

WooCommerce Breadcrumbs (Pro)

Control the colors and layout for WooCommerce Breadcrumbs

Style

Text Color: Choose the color of the Breadcrumbs text

Link Color: Choose the color of the Breadcrumbs link text

Typography: Set the typography options for the Breadcrumbs text

Alignment: Align the breadcrumbs to the left, right, or center

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.

Server Configuration Conflicts

If you are having hosting or server difficulties using Elementor, we』ve included a simple switch that may solve your issue.

To use it, go to Elementor > Settings > Advanced, and under 『Editor Loader』, enable 『Switch front-end editor loader method』.

This setting changes the Elementor editor loader method. It is very helpful in solving some shared hosting issues.

WooCommerce Single: Product Price (Pro)

Set the style and position of the Product Price in the WooCommerce Single template

Style

Alignment: Align the Price to the left, right, or centerColor: Choose the color of the Price』s textTypography: Change the typography options for the Price

Sale Price

Color: Choose the color of the Sales Price textTypography: Change the typography options for the Sales PriceStacked: Select Yes to place the Sales Price under the Price or No to place the Sales Price next to the PriceSpacing: Adjust the amount of space between the Price and the Sales Price

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.

My Widget Is Being Covered Up By Something Else

Adjust The Z-Index

If one element is on top of, or under, another element, and the positions should be reversed, you need to change the Z-index of one of the elements. For example, if your menu is being hidden by an image that is displayed on top of the menu dropdown, you have a Z-index problem.

The Z-Index property specifies the stack order of elements. An element with greater stack order will always be in front of an element with a lower stack order. To solve this you simply need to adjust the Z-index value of one of the element』s, which can be found in the element』s Advanced tab. Make the Z-index lower or higher to move the layer below or above the other element, as needed.

See Also: How to use Z-Index in Elementor

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.

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.