Author 诗语

Gradient Background

Follow these steps to create a gradient background visually, without relying on CSS.

Add a Section

Click Add SectionDrag in a WidgetClick the Section Settings handle to enter the Section SettingsGo to Style > BackgroundUnder Background type click the icon to enter the Gradient Settings

Gradient Background Settings

Color: set the first gradient colorLocation: set the location of the first color. This will affect the spreadSecond color: set the second gradient colorLocation: set the location of the second color. This will affect the spreadType: Choose between a linear or radial gradientAngle: Set the gradient angle

Form Border

You can style the Normal and Hover state of the form border.

Border Type – Choose between different border stylesWidth – Set the width of the form borderColor – Set the color of the form borderBorder Radius – Set the radius of the borderBox Shadow – Set a shadow for the form 

Learn more about the Form Widget (Pro)

Background Slideshow

You can set a slideshow of images as the background of a Section, Column, or Inner Column, enabling you to build more complex structures and layouts, while still preserving a transition effect.

The background slideshow options can be found within the Style tab of the section or column.

Style

Background

Background Type: Select the Background Slideshow icon Add Images: Click the Add Images button to select images to display. Once selected, click Create a New Gallery button and then click the Insert Gallery buttonInfinite Loop: Set to YES to have the images continue rotating, infinitelySlide Duration: Set the time the slide will remain in view, in millisecondsSlide Transition: Choose from Fade, Slide Right, Slide Left, Slide Down, or Slide UpTransition Duration: Set the speed with which the slides transition from one to another, in millisecondsBackground Size: Set the size of the background, selecting from Default, Auto, Cover, or ContainBackground Position:Choose the focal position of the background image selecting from Default, Top Left, Top Center, Top Right, Center Left, Center Center, Center Right, Bottom Left, Bottom Center, or Bottom RightKen Burns Effect: Slide to YES to enable this popular zooming effect on the background image.Direction: If Ken Burns Effect is set to Yes, this additional option will appear. Set the zoom Direction to In or Out.

Role Manager

Manage and limit what your users can edit with Elementor.

Under Elementor Settings > Role ManagerUnder any user type, you can click the checkbox No access to editor to block the user from editing the page.In Elementor Pro you have an added feature Access to edit content only, so the user can edit the content only, without the ability to change the layout of the page/post.

Scrolling Effects – Transparency

Transparency lets you gradually make elements more transparent or more visible in correlation to the visitor』s scroll. An example is having a title appear and then dissolve in accordance with the scroll.

Advanced or Style > Background

Motion Effects

Scrolling Effects: Slide to ONTransparency: Click pencil edit icon Direction: Choose one of 4 possible effect directions:*Fade In – The element starts as transparent and gradually becomes visible, based on the viewport settings. *Fade Out – The element starts as visible and gradually becomes transparent, based on the viewport settings*Fade Out In – The element starts as visible, then fades out, then becomes visible again, based on the viewport settings.*Fade In Out – The element starts as transparent, then becomes visible, then transparent again, based on the viewport settings.Level: Set level of transparency  from 0 to 10Viewport: Determine when to begin the effect, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the effect starts only after you scroll half the viewport height.Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devicesEffects Relative To: Choose from Default, Viewport, or Entire Page

Tip: Try the following scenario. Set the Direction as Fade In Out.  Set the viewport between 30-60, and notice what happens: the heading starts off transparent, reaches peak Transparency level at 30%, stays the same until 60%, and fades out until the end of the screen.

Why Should I Choose Elementor Over Other Page Builders?

Three big reasons (and many other smaller reasons):

It』s not just a page builder; with Elementor Pro, it is an entire website builder.It』s faster, so you don』t need to drag, drop and wait.It delivers high-end designs. Most page builders can』t reach this level of design, as seen for big brand websites.

Scrolling Effects – Vertical Scroll

The Vertical Scroll scrolling effect is a classic parallax effect. Vertical scroll makes the element move at a different speed than the page while scrolling, in the direction and speed of your choosing.

Advanced or Style > Background

Motion Effects

Scrolling Effects: Slide to ONVertical Scroll: Click pencil edit iconDirection: Choose Up or DownSpeed: Set motion speed of vertical scroll from 0 to 10Viewport: Determine when to begin the movement, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the movement starts only after you scroll half the viewport height.Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devicesEffects Relative To: Choose from Default, Viewport, or Entire Page

Note: The viewport value is calculated according to the height of the viewport (meaning the visible size of the screen), and not to the height of the full page. This is true in all situations, except for elements with a fixed position. See image below:

Can I Include Elementor Pro in my Theme / Hosting / DIY Service?

No. 

You can only include the free version of Elementor.

Elementor Pro 2.5 Motion Effects FAQ

When will Elementor Pro 2.5 be released? Where can I find it?

Elementor Pro 2.5 is already out. If you cannot see an update message under Dashboard > Plugins, go to Dashboard > Updates and click the Check Again button. You should then see an available update of the plugin.

Does this work on smartphones and tablets?

Most Motion Effects can work on desktop, tablets, and mobile. Use the Apply effects on option to specify which devices should render the motion effects. Mouse effects, however, will only work on desktop devices.

Does it work in every browser?

Motion Effects work in Chrome, Firefox, Safari, and Opera. Motion Effects also work in Microsoft Edge, but may have slightly laggy behavior in that browser. Motion Effects do not work in Internet Explorer.

ChromeFirefoxSafariOperaEdgeInternet ExplorerSupportedSupportedSupportedSupportedSupported *Not Supported

* Slightly laggy behavior

Why can』t I add motion effects to my fixed elements?

The effects will not affect elements that have been configured as Fixed Elements since the viewport scroll calculations won』t apply to their position.

Does it add lots of bloat to a site or adversely affect site speed when rendering?

We』ve written our own slim library for the Motion Effects, therefore it shouldn』t affect your loading time. It adds only minor weight (about 4KB) and that is only if Motion Effects are used on the page.

I have a section with a background image and a headline on top. When I apply a motion effect on the section, it also affects the headline. I only want the motion effect to apply to the background, not the headline. What do I do?

Instead of applying the motion effect in the section』s Advanced tab (Section > Advanced > Motion Effects), apply it in the section』s Style tab (Section > Style > Background > Motion Effects) instead. In this way, only the background image will be affected by the motion effect.

Can I trigger the motion effect of one image/asset from another?

No. A motion effect is dependent upon the mouse movement over a specific element it is assigned to. Mouse movement over one element will not cause a motion effect on a different element. Of course, if the motion effect is applied to an entire section, for example, then the entire section (with all elements within it) will move, as though they were all one element.

My site feels busy and distracting with so many motion effects on it? What should I do?

Animations and motion effects should be used sparingly and thoughtfully on a web page. The goal should be to enhance a user』s experience, not distract or confuse them. Use motion to draw attention to important functionality, to help guide users through the page, and yes, even to simply make the experience more enjoyable for the user. Just don』t overwhelm users with excessive movement. More is not always better.

I have an Elementor Pro license. Will I also get Elementor Pro 2.5, including the Motion Effects?

Yes, every user with an active license can update Elementor Pro to the latest version and get all the new features of Pro 2.5, including theMotion Effects capabilities. If you don』t have an active license, you can purchase one, or renew your previous license with by logging into your account at my.elementor.com.

I just updated to the latest version and am experiencing issues with Elementor, what should I do?

Read this guide:

Update Issues

Why is a Section』s Left & Right Margin Not Editable

When you edit a Section, you will see that under the Advanced Tab the right and left margins are not editable, and set to auto.

This is because, in , a section is always a complete row. If you want to restrict the content inside the section you need to go to Section > Layout and adjust the content width.