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!
SO, WHAT CAN THIS PLUGIN DO?
YOU WILL NEED TO UPLOAD THE PLUGIN TO YOUR WORDPRESS SITE:
- Upload animate it to the /wp-content/plugins/ directory.
- Activate the plugin through the Plugins menu in WordPress.
- Set your options from the Settings -> Animate It! admin area.
- Login to your WordPress admin area
- Search for Animate It!
- Click install Animate It!
- Activate through the Plugins menu in WordPress or when asked during installation
- Set your options from the Settings -> Animate It! admin area
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 )
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
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
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
7. Now, Go to your Menu Structure
You will see the the CSS Class option now available in the Structure
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 )
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