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.
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)
Note: when using the code snippet above, ensure that straight quotes are used rather curly quotes.
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
These are still in the Alpha/Beta versions of each experiment. They are likely to change before final release.
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
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
Green – Active (even if the value “Default’ is selected)Gray – Inactive (even if the value “Default” is selected)
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.
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.
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.
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).
In order to edit the title, alt-tags, and descriptions of your files, you will need to use the WP Media library functionality.
Easily add a stroke to your headings and other typography with thickness and color picker options by using the Text Stoke feature.
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.
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.
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.
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.
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 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 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.
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 %.
Use the Flip Horizontal icon control to reverse your element on the X axis.
Use the Flip Vertical icon control to reverse your element on the Y axis.
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.
Save valuable time by selecting multiple items on your page. Once selected, you may duplicate, copy/paste styles, or delete with ease.
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
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.
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
Size: Use the slider control or manually enter the value desired
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
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)
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
The Scroll Snap feature allows you to stop the scroll of your page when the section reaches a defined point in the viewport. This is useful in full height sections where you wish to pause the user before they scroll to the next section similar to a slide.
Enabling Scroll Snap
The Scroll Snap feature may be enabled on any page in the Page Settings. Click the gear icon in the bottom corner of your editor panel and navigate to the Advanced tab.
Note: Scroll snap is currently an experiment. To activate it, navigate to Dashboard > Elementor > Settings > Experiments
Scroll Snap: Toggle to enable the feature on the pageSnap Position: From the dropdown menu select the position you wish to stop the scroll from the following options: Top, Center, or BottomScroll Padding: Set the distance in PX you wish to offset the section from the position above (example: adjust to accommodate for a sticky header)Scroll Snap Stop: From the dropdown menu choose the behavior of the scroll snap from Normal, which is the default value and allows an element to be scrolled past without snapping, or Always which will force the browser to snap to this element, even if the scroll would normally go past this element.
Note: Scroll Snap only works with Pages edited with Elementor. It does not currently function with Templates, or Theme Builder site parts.