Author 诗语

Post Content Widget

The Post Content widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display the current post』s content.

Important: This widget is a REQUIRED element on the Single Post Template. If this widget is not added to the Single Post Template, the Elementor editor will not load.

Style

Alignment: Align the content left, centered, right, or justifiedText Color: Choose the color of the content』s textTypography: Set the typography options for the content』s text

Read the tutorial showing how to Create a Single Post Template

Note:  Only one instance of the Post Content widget can be used on a Single Post Template. You cannot add multiple Post Content widgets on a Single Post Template, and then try to hide the variations based on device (such as hiding an instance of it on mobile or tablet). Adding multiple instances of the Post Content widget, even if you select to hide them per device, will result in the widgets not functioning properly.

Elementor 2.3 – Overview

Elementor 2.3.0 introduces several workflow improvements designed to speed up your processes, and includes a new widget that we think you』ll love.

Introducing Finder (Ctrl/Cmd+E)

Meet Finder, a new search bar that pops up on click, giving you easy access to literally every area of your site – all from within one single window. These areas include the WordPress admin, the front end of your site, other pages and more.

With Finder, you』ll be able to Edit different pages or templates, Create new pages, and Go To various Elementor or WordPress areas quicker than ever before.

Press CTRL + E or CMD + E to open Finder, then start writing to search for either an existing page or template, or type Post, Page, etc. to quickly navigate to another area.

Learn more about Elementor Finder or Check out the release post.

Meet Keyboard Shortcuts (Ctrl/Cmd+?)

With all of the recent interface improvements we』ve made, including Elementor Finder and Navigator, some of our users wondered how to reach them quickly. We』ve added a new keyboard shortcut help window that pops out when you press CMD + ? (Mac) or  CTRL + ? (Windows).

Font Family Preview

To solve the difficult task of choosing a font from the thousands potentially available in our Font Family selection dropdowns, we have added the Font Family Preview feature.

You can now preview fonts right in the selection box, making it easier to browse through the list and pick just the right font for your needs.

Learn more about the Font Family Preview

Star Rating Widget

The Star Rating widget lets you add star ratings to different elements of the page. The Star 

Rating widget can be used multiple times on a page, so you can rate and compare books, movies, recipes, gadgets, services, or virtually anything.

Learn more about the Star Rating widget

Dealing with flickers/FOUC

Loading issues can cause a FOUC (flash of unstyled content). Several specific reasons can explain this.

First of all, this can be due to the way that Elementor embeds its templates.

Why are template stylesheet embedded in the footer and not on the ?

When a page is loading, we cannot recognize which templates have been embedded in the page. This is why we load them in the footer. 

In some cases, this can cause a small flash (flicker or FOUC) when the page loads.

How To Solve FOUC?

You can solve this issue by using one of the following methods:

1. Define the CSS Print Method to be inline instead of using external files. This can be done by going to the Elementor > Settings > Advanced > CSS Print Method > Internal Embedding 

2. The second option is to load the CSS files with an action in the functions.php file of your child theme. For example:

add_action( 'wp_enqueue_scripts', function() {
if ( ! class_exists( 'ElementorCoreFilesCSSPost' ) ) {
return;
}
$template_id = 123456;
$css_file = new ElementorCoreFilesCSSPost( $template_id );
$css_file->enqueue();
}, 500 );

Instead of $template_id = 123456, enter the ID of your template, and it will always load in the site』s header. You can use this method for specific pages only.

3. Some optimization plugins can solve this as well.

The above solutions are relevant if you embedded a template or a global widget of Elementor in your header or your footer via your theme options.

Note: Please note that a FOUC (flash of unstyled content) can be experienced when the 「stretch section」 feature is used because this option works with a JS code and flickers can happen while loading scripts.

Note: Flash of unstyled content can also happen if you use large/heavy pictures.

Tip: In some cases, such as when a section of large images is causing the FOUC, a quick workaround can be used. Just add an Entrance Animation, such as Fade In, to the specific SECTION that is having the problem. In many cases, this will easily solve the problem.

WooCommerce Single Product Builder

With  Elementor WooCommerce Builder you can now design your single product and archive page templates. Here is a breakdown of all the parts that make up a regular WooCommerce product page, and it』s corresponding Elementor Widgets.

Menu Cart Widget – This special custom widget we』ve built, opens the cart in a window, so you can display your cart from any page of your website without leaving it. Woocommerce Breadcrumbs Widget – Control the colors and layout for WooCommerce Breadcrumbs. Product Title Widget – Control the style and layout of your Product Title. Product Price Widget – Set the Product Price position and style. Product Rating Widget – Add a Product Rating Widget. Short Description Widget – Control the Short Description layout and style.Product Stock Widget – Add a Product Stock Widget to display the product』s stock number.Add To Cart Widget – Control the layout and style of the Add To Cart button.Product Meta Widget – Set the distance between the text, display it stacked or inline, and control the style of your Metadata. Product Data Tabs Widget – Control the Data Tabs style. Product Images Widget – Set the image or gallery you wish to display. Upsells Widget – Set your own style to the Upsell Products.Product Related Widget – Set your own style to the Related Products. *See note below.Additional Information Widget – Add  Additional Information to your product display.

How to create a Single Product Template

Under Templates > Theme Builder > Single Product > Add New, from the dropdown choose Single Product, give it a name, and click Create Template.Choose a Single Product Block and Insert. Alternatively, you can design your own.After you』ve finished designing, click Publish.Choose a Condition. Click to learn about conditions.

Important! In order for the Woocommerce Builder to work, you need Elementor pro 2.1 + WooCommerce 3.4 or higher.

*Note: The Product Related Widget uses the WooCommerce related products function to link products with the same tags and categories, not with the same up-sells and cross-sells.

Layout Issue: Padding at the Top and Bottom of Site

Solving The Problem Of Mysterious Padding At The Top Or Bottom Of The Website 

This is generally due to padding added by your theme and there is usually an option to remove it via the customizer. Go to Appearance > Customize and look for an option that controls this. You may need to check with your theme』s support or documentation. 

In this example, a theme allows you to enable or disable a Top Bar. If it is enabled, but there are no widgets assigned to it, then it may appear as a blank space. Disabling an empty top bar may solve the problem.

In addition, padding can be applied to the top bar as well, so even if you are using a Top Bar with widgets, there may be padding above and/or below it, based on this setting.

Each theme may handle this differently, so the screenshot is only one possible example and many themes may not have a top bar at all, but they may still have Header or Footer options that allow you to control padding or margins. In addition, the theme may have assigned margins or padding within it』s CSS stylesheet, but doesn』t have an option in Customizer to easily change this. In this case, check with the theme』s support or documentation for help in overriding the CSS.

Does Elementor Work on Multisite?

Yes. 

However, for Elementor Pro, you will need to activate a license key for each of your sites.

Note: You have to accept the automatic updates via the main site when you work with a multisite installation.

Known Plugin Conflicts

Elementor works with *almost* every plugin, and especially with popular plugins such as WooCommerce and WPML. However, some plugins are incompatible with Elementor. Here we listed the known plugin conflicts with Elementor and added an alternative to almost each of them. If you experience compatibility issues with other plugins please let us know about them.

The following plugins are not compatible with Elementor:

Shortcodes Ultimate

It is not possible to open the interface of Shortcodes Ultimate from Elementor.

Alternative: Use shortcodes in another environment and paste it to the Shortcode Widget.

For more information, check this thread:  https://github.com/elementor/elementor/issues/1033

Better WordPress Minify

There is a conflict with Better WordPress Minify due to a problem with the compression of the javascript files.

The issue is known and handled  here. 

Alternative: Use instead this plugin.

qTranslate X

qTranslate X does not create separate translations for each page,

as a matter of fact, we recommend using more adapted plugins for your translations.

Alternative: Use Polylang or WPML.

Facebook feed WD

This plugin leads to bugs with the Text Editor

Alternative: Try to follow these instructions https://developers.facebook.com/docs/plugins/page-plugin

The code provided includes JS so you cannot integrate it via Elementor.

If you are not a tech-savvy, ask your developer to help you with this task.

Image Map Pro

When you use the shortcode widget (and sometimes the text widget) to insert the shortcodes of this plugin, you can hardly edit or delete them in Elementor.

Heartbeat Control

Elementor works with the HeartBeat API of WordPress. This plugin may disrupt the functioning of Elementor according to the value chosen.

WP Clone by WP Academy

The plugin does not use the API of WordPress to query the database. As a matter of fact, this plugin can corrupt the JSON data of Elementor and this can lead to fatal errors.

TheSaas Theme & TheElementor

TheSaas theme includes a modified version of Elementor, called TheElementor. This version is not supported by us and cannot work with Elementor Pro.

Troubleshooting Other Issues

For other issues, check out our  FAQ page .

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.

How to Use Caldera Forms on Elementor

This guide explains how to add a contact form to your WordPress site using Caldera Forms and Elementor Website Builder, using the image below as the example.

Create the Contact Form Using Caldera Forms

After you』ve installed Caldera Forms plugin, create a new form within its interface, with four fields, First Name, Last Name, Email Address, and Comments/Questions. You can also integrate the form with MailChimp using Caldera』s add-in to Mailchimp. Caldera offers mailing list add-ons to services like MailChimp, Aweber, and ConverKit. To connect to Mailchimp, add the API key, choose the list, connect its fields to my form』s fields, and that』s it. From the Caldera Forms dashboard, copy the shortcode of the form you just created.

Add the section on your page where the Caldera Form will be placed

In the Elementor editor, add a two column section where the form will be placed. The first column will include the main heading and subheading on the left, and the right column will include the contact form on the right. 

Drag and Drop the Shortcode Widget

Now drag the  Shortcode Widget into the right column that you created above, and paste the shortcode of the Caldera Form that you created in the widget』s options.

Font Family Preview

When choosing a font family from any element』s Typography > Family dropdown, each family displays a preview of the font. 

Notice that the preview only works when scrolling through the fonts. This way all the font previews are not loaded on page load. The previews are only generated upon demand. After selecting a font, only that specific font』s resources will load.