Elementor 文档

Image Box Widget

The Image Box Widget lets you add an image box that combines an image with a headline and text, which is often used in Features sections, as an alternative to using the Icon Box widget.

Content

Choose Image: Select an image from the media library, or upload a new imageImage Size: Select the size of the image, from thumbnail to full, or enter a custom sizeTitle & Description: Add the title and description that will appear in the image boxLink to: Enter the URL for the item』s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.Image Position: Set the position of the image to left, top or right, relative to the title and description (on Mobile view it will stay centered).Title HTML Tag: Set the HTML tag of the title as H1…H6, div, span or paragraph

Style

Image

Spacing: Set the exact space between the image and the titleWidth: Scale the image width from 0 to 100%Hover Animation: Add Hover Animation to the imageCSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings in Normal and Hover statesOpacity: Control the opacity of the image in Normal and Hover statesTransition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second

Content

Alignment: Align the content to the left, right, center or justifiedVertical Alignment: Align the content to the top, middle or bottom of the box

Title

Spacing: Set the space between the title and descriptionColor: Set the color of the titleTypography: Set the typography options for the title

Description

Color: Set the color of the description textTypography: Set the typography options for the description

Advanced

Set the Advanced options that are applicable to this widget

How To Set Absolute Position For An Element

Set Absolute Position for an element, with the ability to set positioning separately for desktop, tablet, and mobile devices.

Positions Explained

Static Position – The element is in its natural state, positioned merely by the natural flow of the page. This is the default position of all elements.

Absolute Position – The element is positioned absolutely to its first positioned parent.

Fixed Position – The element is positioned relative to the user』s viewport.

How to Set An Element Using Absolute Positioning

Under any widget go to the Advanced tab > Custom Positioning

Absolute: Click pencil icon to set the element to absolute on.Grab the element and drag and drop it on your specific position.

Tip: You can manually enter the numeric X and Y positions in the Horizontal and Vertical Offset scales.

What is Horizontal and Vertical Orientation?

These set the reference point for the absolute positioning, with options of Start and End for each.

Note:  Absolute positioning is not the recommended method for building web page layouts. Having said that, it does come in handy in many situations where you want to position the various page elements more freely.

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

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.

How To Use Selector In The Custom CSS Tab

Use 「selector」 (without the leading dot) to target a wrapper element.

For example, if you』ve placed an image (or any child element) in a column, you may want to style either the wrapper surrounding the image, or the image itself.

Let』s place a solid 5px red border around the various elements to see what happens.

First, drag an Image widget into a column, and go to Image > Advanced > Custom CSS

Now, in the Custom CSS tab, enter the following:

selector { border: 5px solid red; }

Because you are editing the Image widget, you might be surprised to discover that the border does not surround the image at all. Instead, it surrounds the wrapper element, which in this case, is the column that the image is within.

To specify the child element, or in this case, the image, enter the following into the Custom CSS instead:

selector img { border: 5px solid red; }

This will place the border around the image because you』ve specified that it should affect the 「selector img」.

Now try this with another example.

Drag a Button widget into a column, and give it 10px of padding so you can see the column surrounding it nicely. Do this by going to the button』s Advanced tab, and setting Padding to 10 for all sides.

Your button should now look something like this (your colors may vary):

Next, let』s apply a background color using Custom CSS.

Enter the following:

selector { background-color: #ffff00; }

As before, this will apply to the wrapper of the button element, rather than the button itself. This time, you』ll notice that the 10px of padding prevents the entire column from being affected by our style.

And of course, if you want the background color to apply to the button instead of its wrapper, you can enter the following instead:

selector .elementor-button { background-color: #ffff00; }

This will result in the button』s background being yellow.

Use selector as an Elementor shortcut to help you write Custom CSS more quickly and easily. You always have the option, however, of using your own custom class instead.

Let』s redo that button background, but this time, we』ll give the button a custom class, which we』ll name 「so-yellow」. (Go to Advanced > CSS Classes and make sure you don』t include the preceding dot here).

Now, in the Custom CSS tab, instead of using 「selector」, we』ll simply reference the custom class 「.so-yellow」, and yes, you will need to include the preceding dot here.

As expected, the button』s wrapper now shows our bright yellow color for its background.

What happens if we then target the button itself?

Enter the following:

.so-yellow .elementor-button { background-color: #ffff00; }

You』ll notice that the button』s purple color does NOT change!

That』s because our new style needs an !important declaration added in this case.

.so-yellow .elementor-button { background-color: #ffff00 !important; }

Now, our styling is applied, and our button is yellow again.

Just for fun, and to prevent our button』s text from being lost in the bright yellow background, let』s finish styling the button by changing the text』s color. We』ll also add a border to the button as well. Regardless of which method you use, 「selector .elementor-button」 or 「.so-yellow .elementor-button」, the additional code will be the same.

selector .elementor-button { background-color: #ffff00; color: #000000; border: 2px solid #000000; }

Enjoy using selector whenever you want to quickly add Custom CSS to target that element』s wrapper.

Tip: For a list of Class names, see Frank Tielemans』 excellent Widget Classname Reference Guide

Entrance Animations

The Entrance Animations feature lets you animate your Widgets, Sections, and Columns. This way, as your site visitor scrolls down the page, the elements appear with an entrance animation.

Right-click the Section, Column, or Widget』s handle  to edit the element.Go to the element』s Advanced > Motion Effects tab.Choose an animation from the Entrance Animation dropdown selections. Note that you can choose your Entrance animation, including 「None」, per device.

You can choose from 37 different entrance animations including:

Fading: Fade in, fade in up, down, left, rightZooming: Zoom in, zoom in up, down, left, right,Bouncing: Bounce in, bounce in up, down, left, rightSliding: Slide in up, down, left, rightRotating: Rotate in, rotate in down left, down right, up left, up rightAttention seekers: Bounce, flash, pulse, rubber band, shake, head shake, swing, tada, wobble, jelloLight speed: Light speed inSpecials: Roll in

 See it live in our  Entrance Animations release post. 

Note: Elementor respects the 「reduced motion property」 preference that a user may set. If a user has set any of the following, then motion effects will be disabled for that user:

Mac: 「System Preferences > Accessibility > Display」 and check/un-check the box for 「Reduce motion」iOS: 「Settings > General > Accessibility」 and turn on/off 「Reduce Motion」Windows 10: 「Settings > Ease of Access > Display > Simplify and Personalise Windows」 and turn on/off 「Show Animations in Windows」

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.

Hover Effects

Elementor provides Hover Effects that help to increase and improve your website』s engagement and design interaction.

Hover effects can be applied at the Widget, Column, and Section level, and can be combined to create unlimited effect variations.

Wherever you see the Normal and Hover buttons  , you have the option to add hover effects.

Dynamic Lightbox (Pro)

The Dynamic Lightbox feature provides the ability to link an element to an image or video which will open in a lightbox. The widget accepts Youtube, Dailymotion and Vimeo movies.

To set an element』s link to open an image or video in a lightbox:

From the element』s Link field, click the Dynamic icon and select Actions > Lightbox. This will insert the 「Lightbox」 tag in the Link field.Click in the Link field to open the Lightbox popup Settings window.To open a video in a lightbox, select the Video icon, and enter the video』s URL.To open an image in a lightbox, select the Image icon, and choose an image from the media library.

Custom Icons (Pro)

Upload your own custom icons to your website using Elementor Pro』s Custom Icons feature. You can use Fontello, Icomoon, or Fontastic for the job.

Creating your font set

Fontello

Go to http://fontello.com/Choose some icons, or upload your own custom SVG filesClick the wrench. Add a CSS prefix. Make sure it』s uniqueGive your font a nameDownload the font (zip file) 

IcoMoon

Go to https://icomoon.io/appChoose some icons, or upload your own custom SVG filesClick on the 『Generate Font』 tabClick the Preferences buttonGive your font a nameUnder 『Class prefix』, give it a unique prefixClick the X to exitClick 『Download』 to download your font (zip file) 

Fontastic

Create a Fontastic accountSelect some icons or alternatively import your ownTo import click 『Add More Icons』 in the top menu barClick on the 『Modify Font』 tab Give your font a nameGive your font a unique CSS Class PrefixClick SaveGo to the 『Publish』 tabClick 『Download』 to download your font (zip file)

Installing your Font Set

In the WordPress dashboard go to:

Elementor > Custom IconsClick Add NewDrag & Drop your font zip fileEnter your icon set nameClick UpdateYou will now find your new custom icons under the 『Custom Icons』 area, where you』ll see your icon set name, icons number indicator and your unique CSS Prefix for each icon set.

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.