Welcome to this TUTORIAL on how to ANIMATE your Divi header, well in fact you can basically NAVIGATE anything on your WordPress site.
From the front end of your website you would think that some serious coding has gone in to create these awesome animations, well, not really because its actually an awesome WordPress Plugin called ANIMATE IT – that is doing all the work!

reduced

SO, WHAT CAN THIS PLUGIN DO?

STEP 1: UPLOAD THE PLUGIN – ANIMATE IT

YOU WILL NEED TO UPLOAD THE PLUGIN TO YOUR WORDPRESS SITE:

  1. Upload animate it to the /wp-content/plugins/ directory.
  2. Activate the plugin through the Plugins menu in WordPress.
  3. Set your options from the Settings -> Animate It! admin area.

Alternatively:

  1. Login to your WordPress admin area
  2. Search for Animate It!
  3. Click install Animate It!
  4. Activate through the Plugins menu in WordPress or when asked during installation
  5. Set your options from the Settings -> Animate It! admin area
STEP 2: GENERATING THE ANIMATION CODE

Now you can basically animate anything on your site with this plugin but for todays tutorial, we are going to be ANIMATING THE NAVIGATION MENU ( Same as on the LoveDivi Website )

HERE GOES:

You will need to open the generator link, and create your type of animation (Click on image to right )

Choose the following (In the Generator) :

1. style section – choose Rollin
2. Delay – None
3. Duration – 0.5

Screen Shot 2016-06-08 at 12.44.33

4. Then click on the GREEN GENERATE BUTTON.

5. You will be given a code, copy this code as you will need to put this into your menu CSS

 

 

  • Click on the image to go to the animation generator
STEP 3: PLACING THE CODE INTO YOUR NAV MENU CSS

6. GO TO – APPEARANCE > MENUS ( Choose your menu you want to animate )

 

If you CSS classes are not showing in your Menu Structure, then click on Screen Options at the top of your Menu page and tick the box that says CSS Classes

Screen Shot 2016-06-08 at 12.57.50


7. Now, Go to your Menu Structure

You will see the the CSS Class option now available in the Structure

 

Screen Shot 2016-06-08 at 13.00.10


8. Place your COPIED CODE from the Animation Generator in to the CSS Classes box as in the diagram above.

9. Click Save Menu and then do the same for all the other Nav Labels you want to animate…

* NOTE 10. For the next Nav Label I used :

 – animated lightSpeedIn delay1 duration1 ( From the animation generator )

and then for the Third Nav Label:

animated lightSpeedIn delay2 duration1 (From the animation generator )

( By changing the delay that the animation comes in you can create the effect as I did on the LoveDivi site )

 

THATS IT!
A simple way to animate your Navigation Menu without having to know any fancy code!

* View DEMO

 

 

If you found this TUTORIAL useful, please SHARE at the top of this page so others can also enjoy! Thanks
LoveDivi

Divi WordPress Theme

Pin It on Pinterest