Adding subtle animations to your website can bring it to life, grab attention, and guide your visitors through key information. In this lesson, you’ll learn how to customize entrance animations for text, images, and containers in Elementor.
🎯 What You’ll Learn
-
How to add or adjust motion effects
-
Where to find the animation settings
-
How to change animation direction and speed
-
How to delay animations for better timing
-
How to apply effects to both images and text
🛠 Step-by-Step: Editing Animation Effects
✅ Step 1: Identify What You Want to Animate
For this lesson, we’re focusing on subtle entrance animations like:
-
Images sliding in
-
Text fading in
-
Containers appearing from a direction
These are different from background sliders or pre-set carousels, which are already built-in.
✅ Step 2: Click on the Element or Container
To get started:
-
Hover over the section you want to animate
-
Click on the pencil icon
-
If it’s a background image or group of elements, click the container
✅ Step 3: Open Motion Effects Settings
-
In the Elementor sidebar, click the Advanced tab
-
Scroll down to Motion Effects
Here you’ll find settings like:
-
Entrance Animation – e.g., Slide In Right, Fade In, Zoom In, etc.
-
Animation Duration – Choose Slow, Normal, or Fast
-
Animation Delay – Set how many milliseconds before the animation starts
📦 Animating Containers
If your image is set as a background, make sure to:
-
Click the container holding the background
-
Then go to Advanced > Motion Effects
-
Apply the entrance animation (e.g., Slide In Right)
✅ You can also change it to something else like:
-
Fade In Down
-
Zoom In
-
Bounce In
✍️ Animating Text
You can also animate headings, paragraphs, or buttons:
-
Click on the text element
-
Go to Advanced > Motion Effects
-
Choose the animation type
For example:
-
Fade In if you want something soft
-
Slide In Left for dynamic motion
-
Zoom In to grab attention
⏱️ Adjusting Speed & Delay
To fine-tune the animation:
-
Speed: Fast for quick entrance, Slow for dramatic effect
-
Delay: Useful for staging multiple animations in sequence
📌 Example:
-
Delay:
1000ms= 1 second delay before the animation kicks in
✅ Final Step: Preview and Save
Once done:
-
Click Publish to go live
-
Or click Save Draft if you’re still adjusting other areas
Then go to the front-end of your website, refresh, and watch the animations in action.
🎉 You Did It!
You now know how to bring sections of your website to life with professional animation effects. Use them thoughtfully — subtlety is key for a smooth and engaging user experience.