Author 诗语

Progress Tracker

Encourage users to engage with your content and to continue to keep reading as they』ll know exactly how much is left. Full style customization is available for the Progress Indicator and Tracker Background.

Adding A Progress Tracker

From the widget panel drag a progress widget to your page or Single Post template to the desired location. You may also use positioning and sticky effects from the Advanced Tab.

Content Controls

Tracker Type: From the dropdown menu select between Horizontal, or CircularProgress Relative To: Select between Entire Page, Post Content, or Selector from the dropdown menuIf selector is chosen, provide the #id or .class you wish to track the progress of in the fieldDirection: Select the appropriate alignment iconPercentage: Use the toggle to choose to hide/show the percentage text of the progress

Style Controls

Tracker

Size: Use the slider control or manually enter the value desired

Progress Indicator

Color: Use the color picker to set the progress indicator colorWidth: Use the slider control or manually enter the width for the progress indicator (PX)Alignment: Use the appropriate icon to set the alignment of the progress indicator

Tracker Background

Color: Use the color picker to set the tracker background colorWidth: Use the slider control or manually enter the width for the tracker background (PX)

Content

Percentage

Color: Use the color picker to set the percentage text colorTypography: Use the typography settings for family, size, weight, and decoration valuesText Shadow: apply a text shadow to the percentage using the controls

Multi Select Feature

Save valuable time by selecting multiple items on your page. Once selected, you may duplicate, copy/paste styles, or delete with ease. 

Multi-selecting items

From the Editor window

Edit a page using ElementorSelect any page elementHold down the Command key (Mac), or Control key (Windows)Left clicking a page element in the editor while holding the ctrl / ⌘ key adds it to the current selection. If the element is already selected – it removes it from the current selectionRight click or use hotkeys to duplicate, copy, paste, paste style, or delete the items selectedSupported actions will apply for the entire selection

From the Navigator

Select an item you wish from the navigator panelHold down the Command key (Mac), or Control key (Windows)Left clicking a page element in the navigator while holding the ctrl / ⌘ key will add it to the current selection. If the element is already selected – it removes it from the current selectionSelect additional items desiredRight click or use hotkeys to duplicate, copy, paste, paste style, or delete the items selected

CSS Transform

Transform your designs with the Elementor CSS Transform Controls. Rotate, offset, scale, skew, and flip your page elements with ease. These controls can be located in any compatible widget in the Advanced Tab > Transform settings.

Note: Transform only works with widgets and not sections, columns, or inner sections at this time. 

Controls

The controls for each CSS Transform effect may be set for both Normal, and Hover states. When editing a hover state, you may enter a duration of the effect to reduce the jitter or for visuals. They may also be set per breakpoint in the Responsive settings by clicking on the device icon located at the label of each control.

Rotate

You may rotate your page elements easily by using the sliders or entering the values in the field based on degrees. Toggle the 3D Rotate to be able to rotate on a specific axis and change the perspective(px). The Rotate X and Y axis is to be used in combination with perspective to achieve the desired goal.

Offset

Offset your elements horizontally on the X axis or vertically on the Y axis. The values can be controlled by the slider or entering the values in the text fields. The values can be measured in % or PX.

Scale

Scale elements to the perfect size in your design. The value can be controlled by the slider or entering the values in the text field based on %. You may also choose to keep the proportions intact by using the toggle control.

Skew

Use the skew controls to give your element a leaning effect. You may set the Skew X and Y values using the slider or manually entering the field values based on %.

Flip Horizontal

Use the Flip Horizontal icon control to reverse your element on the X axis.

Flip Vertical

Use the Flip Vertical icon control to reverse your element on the Y axis.

Anchor Points

Use the anchor point controls to set the horizontal (X) and vertical (Y) basis in which you wish to define.

X Anchor Point

Choose between left, center, or right anchor point using the icons.

Y Anchor Point

Choose between top, center, or bottom anchor point using the icons.

Text Stroke Feature

Easily add a stroke to your headings and other typography with thickness and color picker options by using the Text Stoke feature.

Usage

From any supported widget, navigate to the Style tab. Click on the pencil icon beside Title > Text Stroke. You may reset this option at any time by clicking the reverse icon. Text stroke is currently supported in the following widgets: Headings, Icon Box, Tabs, Accordion, and Text Path.

Note: Text Stroke will be available for the following Pro widgets in upcoming Elementor Pro releases: Posts, Animated Headline, Price List, Price Table, Flip Box, Call to Action, Testimonial Carousel, and Countdown.

Controls

Text Stroke: Use the slider or manually enter a value for the thickness of the stroke in PX, EM, or REMStroke Color: Use the global color options or color picker tool to assign a color to your stroke.

Import Files From Desktop

You may insert a file or group of files directly from your computer to the editor window by dragging and dropping into a section or column. This feature supports the allowed file types .jpeg, .png, .gif, and mp4. In addition to media files, you are able to easily drag any saved template files (.json) into the editor window.

Dragging a media file onto the page will automatically add the media files to the media library, and create the correlating widget on the page (a dragged image will automatically place an image widget in the section, and a video will automatically place a video widget in the section).

Other Information

In order to edit the title, alt-tags, and descriptions of your files, you will need to use the WP Media library functionality.

Add Widget To Favorites

The Add To Favorites option is a valuable time saving feature that allows you to add your frequently used widgets to the Favorites tab in the widget panel.

Steps

Add To Favorites

Select any widget from the widget panelRight click on the widget and select the add to favorites optionWidget will be added to the favorites tab

Remove From Favorites

Select a widget from the favorites listRight click on the widget and select the remove from favorites optionWidget will now be removed from this list but still in its proper location.

Elementor Experiments

Elementor Experiments

Elementor Experiments is a way for Elementor users, if they choose, to test and help shape new features before they are released. Future experiments might include widget enhancements, editor settings and functions, or even WordPress backend functionality.

Experience and play with new features in a safe environmentTurn features on and off as desired Potentially influence future feature releases by sharing feedback and reporting issues about the experience 

Note: Some experiments are activated by default for NEW sites only.

How To Use Experiments

Go to Elementor > Settings > Experiments tabSelect Active from the dropdown of any experiment you wish to useYou may alternatively use the Activate All / Deactivate All buttons to quickly apply changesClick the Save Changes button.

Types Of Experiments

Ongoing Experiments

These are still in the Alpha/Beta versions of each experiment. They are likely to change before final release.

Stable Features

These experiments have been marked as stable by the developers but may be activated/deactivated if found to cause issues or unneeded for your website. 

Each experiment will contain:

A brief explanation about the feature and a Learn More link if neededA status ( Dev, Alpha, Beta, Release Candidate) which indicates the stage the feature is inAn activity indication

Statuses:

Alpha – Likely to change and evolveBeta – Fairly stable but will need checks. Usually acted by default only on new sitesRelease Candidate – Stable, minor changes might be added but the feature is mostly completeDev – Like Alpha, this is likely to change and evolve, but this is only in the Dev version

Activity Indicators:

Green – Active (even if the value 「Default』 is selected)Gray – Inactive (even if the value 「Default」 is selected)

FAQ

Q: What does 「Default」 mean? 

A: The default value can either be Active or Inactive and is defined by Elementor per experiment, per release. The default can change according to conditions, such as whether the site is new or already existing.

Q: Can I deactivate an experiment if I no longer want to use it?

A: Yes! You can deactivate experiments at any time. Simply choose Inactive from the dropdown next to the experiment.

Q: Can you randomly remove an experiment?

A: Yes, each experiment has a status, which is shown under the description of each experiment. When the status is in Alpha phase, it can be changed multiple times. 

Q: Can these experiments affect live pages?

A: Yes, absolutely. Please keep in mind that when using experiments, these features may change or be removed.

Q: What happens if I change an experiment to inactive after I already used it? 

A: Elementor acts as if the feature has never existed.

Q: Will you let us know before an experiment is removed?

A: Yes, we will communicate before removing experiments.

Q: How do you decide which experiments to keep?

A: We decide based on your feedback as well as the stability and performance of the feature.

How to Trigger an Elementor Popup on a Link Click

Opening A Popup By Text Link

Create your Popup in the Elementor builder Learn More HereNavigate to the Popup Settings by clicking the gear icon in the lower cornerIn the Advanced Tab > Open By Selector create an anchor trigger link shortcode (example: a[href="#link-popup"] )Set the Display Conditions to Include > Entire SiteApply this link anywhere on your website by linking to the anchor trigger link (example: #link-popup)

Example Resources

Note: when using the code snippet above, ensure that straight quotes are used rather curly quotes.

Word Spacing Feature

To easily add additional spacing between words, you may use the word spacing feature. It can be found in typography styles of any supported widget. Use the slider or enter a value in the field based on PX, or EM.

How To Trigger A Popup From A Nav Menu Item

Triggering a popup from a nav menu item is easy to do.

Create the Popup

First, create your popup.In the Advanced tab of the Popup Settings, we will add a small code snippet into the Open By Selector field. For this example, we』ll enter the code shown below.a[href="#popup-menu-anchor"]Now publish the popup and set the Display Conditions. If the menu is in a site wide header, set the Display Conditions to Entire Site. If the menu is on a specific page, set the Display Conditions to that specific page (Singular > Pages > search and select your page).Ensure that no Triggers or Advanced Rules are set for your popup.

Note: Make sure that straight quotes are used and not curly quotes to avoid jQuery errors.

Enter code in the field shown in this image.

Edit The Menu Item

Next, edit your WordPress menu located at Appearance > Menus.Add a new Custom LinkIn the URL, use the selector name created above ( example: #popup-menu-anchor)Enter the link textSave your menu

Add selector to custom link in menu.

That』s it! Now, when a user clicks the menu item, the popup you designed will be triggered.