Author 诗语

Star Rating Widget

The Star Rating widget allows you to display author-assigned star ratings within your content. Both the label and the stars are fully customizable for size, color, and typography.

Content

Rating

Rating Scale: Choose a scale from 0 to 5 or 0 to 10Rating: Assign a numerical rating for the element, based on the scale chosenIcon: Choose the type of icon to use, either Font Awesome or UnicodeUnmarked Style: Choose Solid or Outline for unmarked iconsTitle: Enter the title for the ratingAlignment: Align the rating, left, center, right, or justified.

Style

Title

Color: Choose the color of the label title textTypography: Change the typography options for the text of the label titleGap: Control the space between the title and the icons

Stars

Size: Change the size of the starsSpacing: Control the space between each starColor: Choose the color of the filled/marked starsUnmarked Color: Choose the color of the unmarked stars

Advanced

Set the Advanced options that are applicable to this widget

Media Carousel Widget (Pro)

The Media Carousel widget allows you to create a slider of videos and images.

The widget includes 3 skins:

Carousel is the standard rotating carousel skin that shows a customized number of image or video slides per view. Slideshow is a slider skin that displays one primary slide and small image thumbnails below.Coverflow is a slider skin that shows a central slide in the front and two side slides in the back. 

Inside each slide, you can add the image or video, and have it link to its media file or an external link. The carousel can display a mixture of both images and videos at once. If you have Lightbox enabled, this will also be available for this widget.

The Media Carousel widget also has options for optimal display on mobile devices.

 

Carousel Skin

Content

Slides

Skin: CarouselSlides: Choose the image or video to display and set the URL to link toEffect: Choose how each slide transitions, either Slide, Fade, or CubeSlides Per View: Set number of slides to view at one time, maximum of 10Slides to Scroll: Set number of slides to scroll per swipe, maximum of 10Height: Set the height of the carouselWidth: Set the width of the carousel

Additional Options

Arrows: Choose to show or hide the navigation arrowsPagination: Select None, Dots, Fraction, or ProgressTransition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second.Autoplay: Show or hideAutoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 second.Infinite Loop: Show carousel in continuous loop, infinitely. Yes or NoPause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or NoOverlay: Select overlay type, when user hovers over a slide. None, Text, or IconImage Size: Select size of image, from Thumbnail to Full, or CustomImage Fit: Select how image fits into its container, either Cover, Contain, or Auto

Slideshow Skin

Content

Skin: SlideshowSlides: Choose the image or video to display and set the URL to link toEffect: Choose how each slide transitions, either Slide, Fade, or CubeHeight: Set the height of the carouselThumbnails: Slides Per View: Number of slides, per view, maximum of 10 Ratio: Select from 1:1, 4:3, 16:9, or 21:9

Additional Options

Arrows: Choose to show or hide the navigation arrowsTransition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 secondAutoplay: Show or hideAutoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 secondInfinite Loop: Show carousel in continuous loop, infinitely. Yes or NoPause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or NoImage Size: Select size of image, from Thumbnail to Full, or CustomImage Fit: Select how image fits into its container, either Cover, Contain, or Auto

Coverflow Skin

Content

Skin: CoverflowSlides: Choose the image or video to display and set the URL to link toSlides Per View: Set number of slides to view at one time, maximum of 10Slides to Scroll: Set number of slides to scroll per swipe, maximum of 10Height: Set the height of the carouselWidth: Set the width of the carousel

Additional Options

Arrows: Choose to show or hide the navigation arrowsPagination: Select None, Dots, Fraction, or ProgressTransition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second.Autoplay: Show or hideAutoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 second.Infinite Loop: Show carousel in continuous loop, infinitely. Yes or NoPause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or NoOverlay: None, Text, or IconIf Text is chosen:Caption: Choose which text to display as the caption – Title, Caption, or DescriptionAnimation: Choose from Fade, Slide Up, Slide Down, Slide Right, Slide Left, Zoom InIf Icon is chosen:Icon: Choose from a search icon, plus icon, eye icon, or link iconAnimation: Choose from Fade, Slide Up, Slide Down, Slide Right, Slide Left, Zoom InImage Size: Select size of image, from Thumbnail to Full, or CustomImage Fit: Select how image fits into its container, either Cover, Contain, or Auto

Style

Slides

Space Between: Set the space between slidesBackground Color: Choose a background color for the carouselBorder Size: Control the thickness of the borderBorder Color: Choose a color for the borderPadding: Set the paddingBorder Radius: Set the border radius to control corner roundness

Navigation

Arrows

Size: Scale arrow size up or downColor: Choose the color for the arrows

Pagination (not available on Slideshow type)

Position: Place pagination outside or inside of slidesSize: Scale pagination size up or downColor: Set the color of the pagination

Play Icon (You must have videos in the slides to see it)

Color: Set the color of the video play iconSize: Set the size of the video play iconText Shadow: Set the text shadow of the video play icon

Overlay (not available on Slideshow type)

If Text was chosen for the Overlay:

Background Color: Choose a background color for the overlayText Color: Choose the color of the overlay textTypography: Change the typography options for the overlay text

If Icon was chosen for Overlay:

Background Color: Choose a background color for the overlayText Color: Choose the color of the overlay iconIcon Size: Scale the size of the overlay icon up or down

Lightbox

Color: Choose the lightbox background colorUI Color: Choose the UI Color. This affects the lightbox arrow and dot navigations and the X closing icon.UI Hover Color: Choose the UI hover color. This affects the lightbox arrow and dot navigations and the X closing icon when the user hovers over each.Video Width: Set the width of the video

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

Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Media Carousel Widget

Portfolio Widget (Pro)

The Portfolio Widget allows you to display your posts, pages, and custom post types in an attractive, filterable grid.

Note: The Portfolio widget ONLY works with posts, pages, and custom post types. The Portfolio widget does NOT work with Galleries.

Content

Layout

Columns: Set the number of columns displayed in the widgetPosts count: Set the exact amount of posts to be displayed in the widgetImage size: Set the size of the imagesItem ratio: Set the ratio of the itemsShow title: Choose whether to show or hide the title. The title will display while hovering over the imagesTitle HTML tag: Wrap the title with a tag, either H1…H6, span, div or paragraph

Query

Source: Select the source from which the widget will display the content. Options include posts, pages, custom post types if available, manual selection, current query, and related. Depending upon which source you』ve chosen for the query, you』ll be given options which allow you to filter the results.

Include

Include By: Term or Author, then use Search and Select to choose which ones to useDate: Select from All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates) Order By: Set the order in which the posts will be displayed. Options include: Date, Title, Menu Order, or RandomOrder: DESC (descending) or ASC (ascending)Ignore Sticky Posts: Yes or NoQuery ID: Give your Query a custom unique ID to allow server side filtering

Exclude

Exclude By: Current Post, Manual Selection, Term, or Author, then use Search and Select for Manual,Term, or Author choicesAvoid Duplicates: Yes or No – Choose Yes to avoid displaying duplicate posts on the frontend only. Elementor looks for duplicates at the page level (not at the widget level) given that there cannot be duplicates in a Posts widget.Offset: Use this setting to skip over posts (e.g. 「2」 to skip over 2 posts)Date: All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates)Order By: Date, Title, Menu Order, or RandomOrder: DESC (descending) or ASC (ascending)Ignore Sticky Posts: Yes or NoQuery ID: Give your Query a custom unique ID to allow server side filtering. See the developer docs for more information on how to use this advanced feature.

Filter Bar

Show: Set whether to show or hide the filter bar above the portfolioTaxonomy: Choose the taxonomy from which to display the posts. Options include: Categories, Tags, and any custom post type taxonomies

Style

Items

Item Gap: Set the exact gap between the itemsRows Gap: Set the exact gap between rows of itemsBorder Radius: Set the border radius for the images to control corner roundness

Item overlay

Background Color: Set the background color of the overlay when you hover over the imageColor: Set the post』s Title color. The title appears within the overlay when you hover over the imageTypography: Customize the typography of the Title

Filter bar

Color: Set the color of the Filter Bar textActive Color: Set the color for the Filter Bar』s active textTypography: Customize the typography of the Filter Bar textSpace Between Items: Set the space between the items in the Filter BarFilter Spacing: Set the spacing between the Filter Bar and the images

Advanced

Set the Advanced options that are applicable to this widget

Note: Featured images must be used in your posts for any images to show up in the Portfolio widget.

Posts Widget (Pro) vs Archive Posts Widget (Pro)

How do you know when to use the Posts widget and when to use the Archive Posts widget?

Although similar in that both widgets produce a list or grid layout of posts, the Archive Posts Widget (Pro) and the Posts Widget (Pro) are not interchangeable.

When and Where To Use Each Widget

The Archive Posts widget should only be used on Archive templates, which are created in Templates > Theme Builder > Archive. If you attempt to use it on a normal page or post, it will only display the current post.The Posts Widget  is meant to be used on any Single page or post where you would like to display a group of posts.

Which Posts Will Be Displayed?

The Archive Posts widget does not include a query control function, so you have no control over which posts are shown within the widget itself. All posts that satisfy the Display Conditions of the Archive Template will be shown in this widget.The Posts widget includes a robust method of controlling which posts to show in the grid display, using its query control function.

Why Doesn』t The Excerpt Length Work Consistently in Archive Posts widgets or Posts widgets?

When Elementor displays a post, if it has no excerpt, Elementor automatically generates an excerpt from the post』s content. Both the Archive Posts widget and the Posts widget includes an Excerpt Length option to allow you to control the length of this auto-generated excerpt. In both, however, the excerpt length only applies to posts in which no manual excerpt has been entered. The length specified in the Elementor widget is ignored if a manually-generated excerpt exists for a post.

Share Buttons Widget (Pro)

The Share Buttons Widget adds share buttons to any WordPress page or post. Share Buttons Widget gives you full control over your Share Buttons design & style.

Content

Share Buttons

Click Add Item to add a social networkUnder the Network dropdown > Choose a social networkView: Choose between Icon & text, Icon only, and Text onlyLabel: Show or Hide the LabelSkin: Choose your Social Buttons SkinShape: Choose your Social Buttons ShapeColumns: Choose the number of ColumnsAlignment: Set the Social Buttons AlignmentTarget URL: Sets the Social Buttons URL

Style

Share Buttons

Columns Gap: Set the space between each button』s columnRows Gap: Set the space between each row of buttonsButton Size: Set the size of the buttonsIcon Size: Set the size of the iconsButton Height:Set the height of the buttonsColor: Choose either the Official button color combination or specify a custom color combination, with Primary Color for the background color of the buttons, and Secondary Color for the button text. Custom Colors can be set for both the Normal and Hover states.Typography: Set the typography options for the buttons』 text.

Advanced

Set the Advanced options that are applicable to this widget

Note: If a custom excerpt exists for a post, the Twitter share button will use the custom excerpt as the tweet』s content, followed by the post』s link.

Some elements disappeared on my live site, how can I solve this?

Generally, when some elements disappeared, this is due to a conflict with a plugin or with some script added via your theme.

This is what you can do to troubleshoot this:

Deactivate your plugins besides Elementor and Elementor Pro. If it solves the issue, reactivate them one by one.Switch to a default WordPress theme such as Twenty Nineeen. It if helps, that means that there is some script added via your theme which is conflicting with the elements.Make sure that you do not have mixed content. For instance, images or icons loaded via HTTP while your website uses the HTTPS protocol. To solve these mixed content issues, please consult this guide. Mixed content can make your pictures and icons disappear.

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.

Submit Button

Text – Choose the text displayed on the Submit ButtonSize – Set the size of the Submit ButtonColumn Width – Set the width for the buttonAlignment – Set the alignmentIcon – Add an icon from the Font Awesome icon list.Icon Position – Set the icon position Before or After the textIcon Spacing – Set the space between the icon and the text.Button ID – Optionally, assign a unique ID to the button for use in external scripts, if needed.

More Form Options

This page outlines the Form Submit Button options. For other Form options, click one of the links below:

CONTENT

Form FieldsSubmit ButtonActions after submitAdditional Options

STYLE

FormFieldButtonMessages

Templates Menu

From version 2.4, the Elementor The Templates Menu enables you to add, edit, and organize all of your custom Elementor templates.

Saved Templates

Includes Content, Section, and Global Widgets templates

Learn How To:

Save, Insert, Import, and Export TemplatesUse Global Widgets

Theme Builder

Includes Header, Footer, Single, and Archive templates

Learn How To:

Create HeadersCreate A Single Post TemplateCreate An Archive TemplateCreate A Single Page TemplateCreate FootersCreate a WooCommerce Archive TemplateCreate a WooCommerce Single Product Template

Popups

Includes all Popup templates

Learn How To:

Create Popup Campaigns

Add New

Link to add a new custom template of any type

Categories

Link to manage template categories

Why Can』t I Drag The Pro Widgets?

As of Elementor Pro v2.9, Elementor Pro widgets are not draggable unless your Elementor license has been activated.

Protecting against piracy without bothering honest users

Like many WordPress companies, Elementor suffers from piracy. Unlicensed use of Elementor Pro not only affects Elementor, but our users as well. It has an impact on support, on developing new features and on other services we provide.

As part of our ongoing fight against piracy, In Pro v2.9 we』ve disabled the option to drag and drop widgets to the page until the license has been activated, which only affects users who have never activated their license on their site. We hope this measure will help us reduce the abuse of Elementor Pro.

If you already activated your license on current sites, you will notice no difference and will be able to edit as usual. You can continue to work normally, as long as you』ve activated Elementor Pro at some point in the past, and it has not been deactivated prior to expiring. So if you』ve updated the plugin even once, everything will be as usual.

We strongly suggest activating your license across all your sites, and keeping websites up to date with new releases. Not just for the amazing new features we keep adding, but also for your own security. The entire activation process takes no more than a few seconds.

FAQ

Q: I』m an agency. Will this affect my clients?

A: No. As long as you made sure to activate each new site you created, your client sites won』t be affected.

Q: What if I have Elementor Pro installed on 100 sites for different clients, but never activated?

A: If you are a pro user, you need to activate your license on each website, to make sure you continue to get updates and to use Pro widgets.

Q: How do I handle development and testing?

A: As mentioned in this guide, when building a website using a local machine, Elementor Pro doesn』t register as an install, meaning you can install Elementor Pro on your local machine or staging site and on your online website at the same time. This works on .local, .dev, and .test, as well as many other staging domains . In this way, you can run staging and development without having to activate a license.

Q: What happens if my subscription expires?

A: If you have an expired subscription, you won』t be able to get support, templates, or updates, but you will still be able to drag in Pro widgets as long as the site is activated and was not deactivated prior to the subscription expiring. However, even though you will be able to drag in the widgets, we strongly recommend you renew your license, in order to get the latest version, security updates, support, amazing templates and more.

Q: Can I edit Pro widgets that are already in place on a page if the site does not an activated license?

A: Yes, if the Pro widget is already in place, and doesn』t need to be dragged, you will still be able to edit the widget. However, you will not be able to use any dynamic feature of that widget unless the license is active.

Additional Options – Forms

Form ID – Set a form ID.Custom Messages – Slide the Custom Messages button to customize messages in the form (e.g Success Message, Error Message etc.). 

Note: The Custom Messages are not the standard messages that the server provides. The standard server messages cannot be controlled or customized. These custom messages will rarely ever be seen by the user. The custom messages may occasionally be generated when there is a server conflict that prevents the form from being sent. Please note also that the Custom Messages are fallback messages when the browser does not display its own error.

More Form Options

This page outlines the Form Addtional Options. For other Form options, click one of the links below:

CONTENT

Form FieldsSubmit ButtonActions after submitAdditional Options

STYLE

FormFieldButtonMessages