Elementor 文档

Popups: Bottom Bar

Bottom Bars can be used for a variety of reasons, including announcements or options. Another common use of a popup bottom bar is to comply with the EU Cookie Consent law. In this example, we』ll quickly create a Cookie Consent banner. The bar will satisfy several requirements:

Show on any page of the site. (Publish Settings > Conditions)Show immediately when the page loads. (Publish Settings > Triggers)Show an overlay to hide the site underneath. (Popup Settings > Settings Tab)Prevent scrolling of the site underneath. (Popup Settings > Advanced Tab)Only close when the user clicks the OK button, making sure to prevent closing when clicking the overlay or pressing ESC. (Popup Settings > Advanced Tab)Only show the popup once, so the user doesn』t have to continually deal with it on subsequent page views. (Publish Settings > Advanced Rules)

To adjust the Popup Settings, click the Popup Settings gear icon in the panel』s bottom toolbar. To adjust the Publish Settings, click the arrow next to the Publish / Update button and choose either Conditions, Triggers, or Advanced Rules.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own design

Popup Settings

Settings

Set the Horizontal position to Center and the vertical position to bottom.Show OverlayHide Close Button

Style

Configure style as desired

Advanced

Prevent Closing on Overlay: YesPrevent Closing on ESC Key: YesDisable Page Scrolling: Yes

Publish Settings

Conditions: Include: Entire Site

Triggers: On Page Load: within 0 seconds

Advanced Rules: Show Up To X Times: 1

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.

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.

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

How To Become A Beta Tester

Being a beta tester will keep you on the cutting edge of our releases, and help us monitor and fix possible bugs whenever we release a new beta version. 

Beta testers enable us to test the compatibility of the upcoming versions in a variety of hosting configurations. Each beta tester will be running under a unique server setup, with varied combinations of plugins, themes, and custom code, all of which helps us understand which types of configurations may present issues that we can resolve before release. 

Beta testing is especially useful for website developers & designers, as well as plugin developers, as they are able to test the compatibility of their plugin or website with the upcoming version of  Elementor.  

Beta user feedback plays an important role in our ability to improve Elementor.  Feedback about any Issues should be reported in the relevant Github thread.

Important! We recommend only beta testing on a development or staging site, as beta versions are not stable and may break a live production site.

How To Enable Beta Testing Mode

Go to Elementor > Tools > Version Control and look for the section labeled Become A Better TesterBeta Tester: Select Enable to be notified whenever a new beta version of Elementor or Elementor Pro has been released. After enabling, go to Dashboard > Updates and click the Check Again button to make the latest beta version available to you. All subsequent beta update notifications will show up on the Plugins admin page as normal. 

Note: The Beta version will not install automatically. You always have the option to ignore the update notification.

Featured Image Widget

The Featured Image 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 featured image.

Content

Image

Choose Image: Featured Image is the only option (see note below).Image Size: Select the size of the image, from thumbnail to full, or enter a custom sizeAlignment: Align the image to the left, center, or rightCaption: Enter text to be included as a caption under every Featured Image. Note that the same caption will be displayed under each. This is not dynamic.Link to: Choose to link the image to None, Media File, or Custom URL. If Media File is chosen, you have the option to choose to use the Lightbox or not. If Custom URL is chosen, you can either input a URL, or more appropriately, select the  icon to choose a dynamic URL such as the Post URL.

Note: If you click 「Featured Image」, a window will pop up to allow you to choose a Fallback Image in the event that a Featured Image does not exist.

Style

Image

Width: Set the width of the imageMax Width: Set the maximum width of the image as a percentageOpacity: Control the opacity of the imageCSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settingsBorder Type: Select the type of borderBorder Radius: Set the border radius to control corner roundnessBox Shadow: Adjust box shadow options

When setting the Hover state, two new options appear:

Transition Duration: Set the duration time in milliseconds for the hover effectHover Animation: Choose the hover animation for the image

Read the tutorial showing how to Create a Single Post Template

Create Headers Using Elementor』s Theme Builder

The Header Template lets you easily design and edit custom WordPress headers.

Under Templates > Theme Builder > Header > Add New, from the dropdown select Header and click Create Template.Choose a Header Block and Insert. Alternatively, you can design your own.Click the Section Settings  > Layout > HTML Tag > Change Default to Header.After you』ve finished designing, click Publish.Choose a Condition. Click to learn about conditions.

Tip: Did you know? You can create more than one Header, and assign it to different areas on your site!   Click to learn more

Note: You will not be able to see your Header if you』re using the Canvas Template

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.

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.

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.