Author 诗语

Video Playlist Widget (Pro)

By using the Elementor Video Playlist Widget, you can create amazing video content for your site visitors. It is useful for anyone who wants to showcase unique video content on their website.

Controls

Playlist

Playlist Name – Name your playlist by entering the desired text

Playlist Items

Type – Select between YouTube, Vimeo, Self-Hosted, or SectionLink – Enter The URL of the video you want to useGet Video Data – When clicked, the title and video thumbnail will be retrieved from the sourceTitle – Enter your title to be displayed in the playlistDuration – Enter the duration of the videoContents Tab Toggle – If you wish to provide additional content below the playlist enable this by selecting Show / HideTab Content (if enabled) – Enter the tabs content in the text editor or use the dynamic options

Tip: Sections can be used to separate video categories or courses. You may use HTML to format the text or create links if needed.

Tabs

Tab One Name – Enter the desired text or use the dynamic functionsTab Two Name – Enter the desired text or use the dynamic functions

Image Overlay

Image Overlay Toggle – Select to Show / Hide the image overlay optionsChoose Image – (if enabled) Select a image from your media library or upload from your computerImage Size – Set the image size propertiesPlay Icon – Choose a custom play icon from the library or upload in SVG format

Additional Options

Layout – Choose left or right alignment of the playlistAutoplay – Chose the autoplay options by selecting to show / hide on the toggles below:On Load – Playlist will begin on page loadNext Up – Additional videos will play in succession Indicate Watched – Display a icon over the video thumbnail to indicate that a video has been watchedVideo Count – Show / Hide the number of videos in your playlistDuration – Show / Hide the time duration of your video in the playlistThumbnails – Show / Hide the video thumbnail in the playlistPlay Icon – Select the play icon to be displayed over the video thumbnailWatched Icon – (if enabled) Select the watched icon to be displayed over the video thumbnailLazy Load – Toggle to enable Lazy Loading of the videos

Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.

Style

Layout

Height – Use the slider to set the desired height of the playlist in PX, VH, or VW

Top Bar

Playlist Name

Background – Chose the desired color of the top bar background Color – Choose the color of the playlist name headingTypography – Set the font properties of the playlist name heading

Videos Amount

Color – Chose the color of the amount textTypography – Set the font properties of the amount text

Videos

Item

Background – Select the background color of the list itemColor – Select the color of the text of the list itemTypography – Set the font properties of the video title

Duration

Color – Select the color of the duration timeTypography – Set the font properties of the duration time

Icon

Color – Select the color of the play or watched iconShadow – Use the shadow options to display a shadow on your iconSize – Use the slider to increase or decrease the size of the iconSeparator – Select the border properties between the list items

Sections

Background – Choose the color of the section backgroundColor – Choose the color of the text in the section displayTypography – Set the font properties of the section textBorder Type – Choose the border properties of the section Width – Set the padding width of the section Color – Choose the color of the border

Tabs

Tabs

Border Width – Use the slider to control the slider widthBorder Color – Choose the color of the borderBackground Color – Choose the background color of the tab

Title

Color – Choose the color of the tab titleActive Color – Choose the active color of the tab titleTypography – Set the font properties of the tab title

Content

Color – Choose the color of the font in tab contentTypography – Set the font properties of the tab contentPadding – Adjust the padding of the tab content

Show More

Color – Choose the color of the 「Show More」 headingTypography – Set the font properties of the 「Show More」 heading

Advanced

There are no additional settings specific to this widget, but it is compatible with the standard Advanced Tab options.

How to Add & Edit a Background Video in Elementor

You can set a video as the background of a Section, enabling you to create interesting hero headers and other engaging areas on your page. The background video options can be found within the section』s Style tab.

Style

Background

Background Type: Click the video icon Video Link: Enter a YouTube, Vimeo or .mp4 link to the videoStart Time: Specify start time in secondsEnd Time: Specify end time in secondsPlay Once: Slide to Yes to only play the background video once, with no repetition.Play on Mobile: Slide to Yes to play background video on mobile devices, if the device supports it.Background Fallback: Upload a cover image, to replace the background video on mobile and tablet devices, as background videos are disabled on mobile devices to avoid browser restrictions and bandwidth draining.

Tip: Use Background Overlay to darken your video or to add your own personal color overlay.

Note: Youtube changed their API in September, 2018 and does not allow the possibility to disable related videos any longer. The parameter 「rel=0」 is no longer a working parameter. In addition, background videos now briefly show the title of the video. Elementor cannot disable this as it is controlled solely by Youtube.

Note: Only Vimeo premium accounts can remove Vimeo background video controls and titles.

Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.

Video Widget

Use the Video Widget to easily embed videos on your page.

Video

Source: Select the source of the video. Choose between Youtube, Vimeo, Dailymotion, or Self Hosted (which includes hosting on external servers)URL: Enter the URL of the videoStart / End Time: Set Start and End time for your video. Leave blank for full length video

 

Video Options

Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.

Youtube

Autoplay: Slide to YES to automatically play the video on page loadPlay on Mobile: This option only appears if Autoplay is set to Yes. Useful to allow iOS to autoplay the video.Mute: Slide to YES to Mute the videoLoop: Slide to YES to Loop the videoPlayer Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.Modest Branding: When Player Controls is set to YES, you can Hide the YouTube logo by sliding Modest Branding slider to YESSuggested Videos: Choose from 「Current Video Channel」 or 「Any Video」Privacy Mode: Slide ON or OFF. When ON, Youtube won』t store information about visitors on your website unless they play the video

Vimeo

Autoplay: Slide to YES to automatically play the video on page loadMute: Slide to YES to Mute the videoLoop: Slide to YES to Loop the videoControls Color: Choose the color of the Player Controls, such as Play/Pause, etc.Intro Title: Show or Hide the Intro TitleIntro Portrait: Show or Hide the Intro PortraitIntro Byline: Show or Hide the Intro Byline

Dailymotion

Autoplay: Slide to YES to automatically play the video on page loadMute: Slide to YES to Mute the videoPlayer Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.Video Info: Show or Hide the Video Info, such as the video』s titleLogo: Show or Hide the Video LogoControls Color: Choose the color of the Player Controls, such as Play/Pause, etc.

Self Hosted

Autoplay: Slide to YES to automatically play the video on page loadMute: Slide to YES to Mute the videoLoop: Slide to YES to Loop the videoPlayer Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.Download Button: Show or Hide the Download Button (applicable for Chrome only)

Image Overlay

Image Overlay: Show or Hide an Image Overlay

Note: Using Image Overlay overrides Autoplay. Videos will not autoplay if an Image Overlay is set.

If Image Overlay is set to Yes, the following options become available:

Image: Set your ImageLazy Load: Defer loading of the video resources until the user clicks the Play button *Image Size: Set your Image SizePlay Icon: Slide to YES to show a Play IconLightbox: Slide ON to view the video in a Lightbox. Once ON, you will have to set an image

* Lazy Load replaces the video embed code with a static image of your choice, and optionally, a play icon on top of the static image. The video is only loaded when the user clicks on the image.This greatly helps speed up the initial page load time because the user』s browser doesn』t download the many extra resources Youtube and other video services embed, all before a user even needs them. If you want faster load times on pages that embed videos, Lazy Load is a good option to enable.

Style

Aspect Ratio: Change the videos aspect ratio. Choices include: 1:1, 3:2, 4:3, 16:9, 21:9, and 9:16CSS Filters: Set up a blur, brightness, contrast, saturation, and hue

Advanced

Set the Advanced options that are applicable to this widget

Installing Elementor Pro

Congratulations on signing up for Elementor Pro. This guide walks you through the entire process of installing and activating Elementor Pro on your WordPress site.

Note: Elementor Pro is an extension of Elementor, so you must have Elementor installed. If you still haven』t installed Elementor, check out this installation guide.

After purchasing Elementor Pro, go to my.elementor.comLogin with the details you received in the email after purchaseAfter the login, you will reach the 『My Account『 page. Click on the Download Plugin button in the upper right of My Account section and download the .zip file to your desktopHead over to your site, to the WordPress dashboard, and click on Plugins > Add New. Choose the zip file you have just downloaded. Click on install and activateOn top of your site』s dashboard, you should get a message telling you to activate your license key.

Note: If you receive an error message saying that you are missing the style.css stylesheet, that means that you have tried to install this as a theme instead of a plugin. Elementor Pro is a plugin, not a theme. Install it as a new plugin only.

Download

Upload

Activate

Click to learn how to activate your license.

Note: If you encounter any issues with the ZIP File, check this article

Build Your First Page

Elementor uses three main building blocks: Sections, Columns, and Widgets.

Sections are the largest building blocks, and inside them are groups of Columns. Columns sit inside of Sections and are used to house the Widgets. Widgets are placed inside of Columns. You control the Section, Column, and Widgets with their handle.

You can choose to show or hide the editing handles by clicking the hamburger menu to open Elementor』s Style & Settings Configuration menu. Click the Preferences tab and slide the switch to Yes to show Editing Handles when hovering over the element』s edit button or No to hide the handles on hover.

Editing

To edit the Section, Column, or Widget, Right Click their handle. 

Note: Learn more about Right Click

Section

Click the  icon to create a Section, or click the  icon to use a pre-designed Page or Block from our librarySet your Column structure Right click to Edit, Duplicate, Copy, Delete etc. Use the Section handle to: add a section, drag a section, or delete.

Note: Learn more about Sections here

Column

Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.To add more Columns Right Click > Add New ColumnInsert Widgets to your Columns

Note: Learn more about Columns here

Widget

Insert Widgets inside your ColumnsA Widget width is set by the Column width

Copy or Delete All Content

You may Copy or Delete all content on your page by right clicking on the empty section near the add section and templates icons. You can also paste items in another page on the same website.

Note: Learn more about Elementor Widgets here

Next step – Insert templates to your page

Single Page Site Part

The Single Page Site Part section of the Theme Builder lists all Single Page Templates you』ve created, if any, giving quick access to add, edit, or delete any Single Page Template.

If no Single Page Templates have been created yet, you need to create one. Click Add New in the upper right corner of the Single Page Site Part screen.

Once you』ve created at least one Single Page Template, you will be able to manage them here.

Edit An Existing Single Page Template』s Design

To edit an existing Single Page Template, click the Single Page label in the sidebar. This will open the Single Page Template』s details dashboard.Click the Edit link in the upper right corner of the specific Single Page Template you wish to edit. This will open the Elementor editor for that Single Page Template.

Edit An Existing Single Page Template』s Conditions

Click the Edit Conditions link in the bottom left corner of the Single Page Template you wish to edit. This will directly open the Display Conditions editor for that Single Page Template.

Note: The Dot Display in the upper left corner of the Single Page Template indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Single Page Template, while a Gray Dot indicates a draft Single Page Template. 

Note: The Instances label in the lower left corner of the Single Page Template displays the specific instances in which this template is being used on the site. 

Export A Single Page Template

Click the Three Horizontal Dots in the upper right of the Single Page Template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.

Delete A Single Page Template

Click the Three Horizontal Dots in the upper right of the Single Page Template you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don』t want to delete the Single Page Template, or click Delete to confirm that you do wish to delete this Single Page Template.

Rename A Single Page Template

Click the Three Horizontal Dots in the upper right of the Single Page Template you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don』t want to rename this Single Page Template.

Important: Only pages that use Default Template will have the Single Page Template applied to them, even if they otherwise meet the Display Conditions criteria. Pages that use Canvas or Full Width template (or any template other than Default) will not have the Single Page Template applied to them.

Creating A Download Link With Elementor

You may use the link custom attributes on your Elementor Buttons, Call To Action, and many more widgets to allow users to download PDF documents, Zip files, and other allowed files from your media library.

Add A File To Your Media Library

Upload your files: Upload your files to the WordPress Media LIbrary. You may filter your media files by type in the dropdown for easier location. Click the Add New button, to add a PDF, ZIP, MP3, MP4, Image formats and other allowed types to your library.Copy the permalink of your file: Click on the media file you wish users to be able to download. On the popup modal, click the copy to clipboard button.

Add The Download Link To An Elementor Widget

You may now add this media file link to your Elementor widget links.

In the Media library, select the file you wish to add a download link to. Use the copy URL to clipboard optionPaste the URL of the file into any link field in an Elementor widgetFrom the gear icon, select to show the link options panelTick the checkbox for the option to open in a new window. You may also add the nofollow option if desired.In order for the file to be downloaded rather than displayed in the new window, add a custom attribute separated with piping. (example: download | filename.pdf)

Maintenance Mode

With Elementor』s Maintenance Mode, you can display a custom maintenance mode page to visitors, and send the right HTTP response to search engines.

Create a 『Maintenance』 Page Template from scratch, or use one of our pre-designed templates and publish it. Note: The template hierarchy needs to be set to Page and not Section or other options. Go to Elementor > Tools > Maintenance ModeChoose Maintenance in the mode selectorSelect the User Roles that are able to access the websiteSelect the template you created in the dropdown selectorSave your changes and view the website from another browser or incognito mode to test your page.

Maintenance Mode Response Code

When you set Elementor』s Maintenance Mode on, it will make your site tell search engines that your site is temporarily down for maintenance. It does so by sending the temporary maintenance response (HTTP 503). This way, search engines know to come back a short time later to check again if the site is already online.

Note: The following 3rd party cache plugins are automatically cleared on every change in Maintenance Mode: 

WP Rocket (premium)W3 Total Cache (free)WP Super Cache (free)WP Fastest Cache (free + premium)

(Read the complete Maintenance Mode post here)

Note: You will see a red button on your top WordPress bar with the text: 」 Maintenance Mode ON「.

Tip: You can use the same process described here for 『Coming Soon』

How to Speed Up a Slow Site With Elementor

Table Of Contents

Common Causes of a Slow Site / ElementorTests You Can RunSpeed Optimizations You Can RunHow Are We Improving

Elementor is the fastest website builder for WordPress, written with the strictest code standards. Some websites, however, might have a configuration that causes slow loading.

Here are the most common ways to deal with a slow Elementor site:

Common Causes of a Slow Site / Elementor

There are several possible causes for a site or editor to show slow performance, each one should be examined:

Servers – Factors like memory, bandwidth, the location of the server in relation to the user and so on have a major impact on site speed. Free or shared hosting services are often the cause of a slow site. 

Media (images, videos and so on) – Any image you place inside your site slows it down, especially if the image is placed in areas that are always loaded like the header and footer. Always make sure you upload images that are not too big (Under 1 MB is a good rule of thumb). Use tools like TinyPNG to reduce the size of your images. 

External scripts – Any use of external scripts, i.e. Google Maps, Facebook share count, Avatar images, all considerably slow down a page load. You can deactivate Google Fonts, Font Awesome, and Eicons for example, by adding the following lines of code to your functions.php file in your child theme.

For Google Fonts:add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

For Font Awesome:

add_action('elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );

Note: By default, Font Awesome icons will only load on the pages where you』ve used them, so FA won』t load on pages that aren』t using any Font Awesome icons. This brings faster performance and faster page speed to your site, which can benefit your SEO and your users』 experience.Only the CSS and fonts of the icon family you actually use are loaded. So only dequeue Font Awesome if you truly plan to not use any Font Awesome icons at all.If you dequeue Font Awesome, the icons will no longer show on any of your pages.

For Eicons: 

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}

Plugins – Plugins make WordPress slower. If you are not using a certain plugin – switch it off and delete it.

Theme – A good theme shouldn』t slow down a site, but unfortunately a lot of themes do. A well-coded theme uses scripts and methods to reduce its file sizes. Switching between themes and seeing the effect might give you a good indicator if the theme is the culprit.

Tests You Can Run

Check why your website is slow on page speed analyzers such as Google Page Speed Insights and GTmetrix.Deactivate all plugins besides Elementor and Elementor pro and verify if it betters the page speed.Switch toTwentySixteen (one of the default themes of WordPress).Create a page with the Canvas template and test it for speed again.After following these steps run a speed test and check for improvements.

Speed Optimizations You Can Run

1. Use a caching plugin like  WP Rocket and Autoptimize or any other cache plugin that will meet your needs.

2. Use a CDN service like  CloudFlare.

2. Check with your hosting provider regarding possible causes of the site being slow on the server side.

3. Switch editor loader method.

4. Reduce image sizes.

5. If you have developer know-how, we recommend to check the ping speed of your servers and analyze the various elements』 loading time to pinpoint to cause of the slowness.

How Are We Improving?

The Elementor Developers are working very hard and listening to the needs of our users. We are improving our performance from the foundations up and empowering third party developers to do the same. Learn more here.

How Elementor Improved Asset Loading and Made Your Website Run Faster

Why Is My Widget Grayed Out?

Table of Contents

Why Is My Widget Element Grayed Out In The Elementor Editor?The Element Has Been Hidden On Certain DevicesHow to edit a hidden / muted elementHow to check the visibility of the elementThe Element Is Dynamic And Has No Content To Show

Why Is My Widget Element Grayed Out In The Elementor Editor?

There are two common reasons for seeing an element 「grayed out」 in the editor, when you are expecting to see content there instead.

The Element Has Been Hidden On Certain Devices

If the element』s Visibility has been hidden (on desktop, tablet, and/or mobile), you will see that this element is 「muted」. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed.

How to edit a hidden / muted element

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

How to check the visibility of the element

Go to Section > Advanced > ResponsiveSet your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.

The Element Is Dynamic And Has No Content To Show

If you are pulling content in dynamically, either from a custom field or from WooCommerce Products, or even displaying Post or Page content and meta data within Archive or Single Templates, you may occasionally encounter a grayed-out widget. This occurs because there is no content available to display within the widget. To solve this, you will need to add the content to the products, pages, or posts. 

Here are a few examples:

You are setting up your WooCommerce Single Product template and one of the product elements, such as the short description, is grayed out. In this example, you must edit your products in the WooCommerce Products editor to add a short description to each product. Once the products have short descriptions entered, the Single Product template will display the short description and will no longer be grayed-out. If you only have this content in some of the products, you can verify it is working by previewing one of those products in the template editor.You are setting up your Single Post template and one of the post elements, such as the Featured Image, is grayed out. In this example, you must edit your posts in the WordPress editor and add the Featured Image to each of them. Once the posts have Featured Images attached to them, the Single Post template will display the Featured Image and will no longer be grayed out. If you only have featured images for some of your posts, you can verify this is working by previewing one of those posts in the template editor.You are dynamically including a custom field, but it is grayed out. As with the other examples, the field does not have any content, so you will need to go to the posts or pages in question and add content to the custom field. Once the custom field has content, it will be displayed and will no longer be grayed out.

These are only a few examples. You may encounter this in other ways, but in all cases, you should assume that if you are trying to display content dynamically, and you are encountering the grayed-out situation within the editor, you should assume that there is no content available to be displayed. Go add content in the relevant area of your site, and the grayed-out situation within the editor will resolve itself.

Of course, site visitors will never see anything 「grayed out」. Naturally, in many cases, some products or posts will have this type of content and some will not. This is fine. On the live site, if the product or post is lacking a specific content element, it will simply not be shown. Those products and posts that do have the content will display it dynamically as intended.

Note: If you are seeing gray areas and none of the above applies, then you are likely experiencing a conflict with another plugin or you have custom code that has been added which is causing this issue. In this case, you will have errors in the console. You can follow these guidelines to troubleshoot such a circumstance.