Completely Free Course

Connect with Facebook

or

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free Course

Connect with Facebook

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Module 3: Elementor Basics

How To Add Animations In Elementor

Action Plan

Step 1: Add Hover Animations To Widgets And Columns


Watch Our Video Tutorial For This Step

This video will walk you through how to add hover animations to widgets and columns.

Video Summary

  • In the Elementor editor go to Edit Widget > Style > Hover (0:14)
  • Choose a hover animation from the drop-down menu (0:42)
  • Change the background color when users move their mouse over a column (1:33)
  • Add a border when users move their mouse over a column (2:12)
  • Add an invisible border to the “normal” non-hover state so there isn’t any unnecessary movement on mouse-over (2:33)
  • Duplicate columns to save time (3:20)
  • Add a box shadow when users move their mouse over a column (3:31)
  • Adjust the “Transition Duration” to change the animation speed (4:01)
  • Hover animations are available in many different widgets as well as columns and sections (4:25)

(I added hover animations to a widget and a column)

Step 2: Add Entrance Animations To Widgets And Columns


Why This Step Is Important

Entrance animations can be a great way to draw attention to important areas of your website (such as opt-in forms or other call-to-actions). However, keep in mind that these animations should be used sparingly. Using too many entrance animations on a page can be really distracting. I wouldn’t recommend using more than one animation per page (if any at all).

Watch Our Video Tutorial For This Step

This video will walk you through how to add entrance animations to widgets, columns, and sections.

Video Summary

  • In the Elementor editor go to Edit Widget > Advanced > Entrance Animation (0:14)
  • Choose an “Entrance Animation” from the drop-down menu (0:25)
  • Click the “Preview Changes” button to preview the animation as you scroll down the page (1:08)
  • Animations will start once a user scrolls down to the section where the animation is located (1:17)
  • Adding too many animations can become very distracting for the user, so use them sparingly (1:38)
  • Add an entrance animation to an image (2:02)
  • Entrance animations can also be added to columns and sections (2:28)
  • Add an entrance animation to a section (2:35)
  • Choose an “Animation Duration” of slow, normal, or fast from the drop-down menu (2:52)
  • If users have to wait for animations to display as they scroll down the page it can become frustrating (3:17)

(I added entrance animations to a widget and a column)

Continue To The Next Tutorial Below

Module 3

Elementor Basics

Module 3 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

Our course is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.