![]() But kind of cool weird, depending on the animation. You’d have to try it to see the effect, but as I said, it’s weird. So if you animate, say, the “Recent posts” area in your footer or sidebar, the whole section of the page, the widget area, moves about. It’s pretty easy to implement once you know how to configure animation for a post or page.Īnimating a widget is a weird effect since the entire widget area is animated. Since you have to go to their site anyway to generate the class, I’ll just point you to their documentation for adding animation to a widget. You have to use a CSS class generator on the plugin website to do it. Using the plugin you can also add animations to widgets. Go to the “Options” tab, and in the “Animate on” section, click the “Hover” button.Choose the animation type from the “Animation” drop-down menu.Upload an image or add an existing image from your Media Library to the page or post.The only difference is instead of selecting the text in the editor, select the image. Use the same method to do hover animation on an image. Go to your page and mouse over the text and you’ll see the effect. In the “Animate on” section, click the “Hover” button.įinally, click the “Insert” button to add the code to your page or post. In order to make the animation activate on hover, we go to the “Options” tab. ![]() I can’t show you the effect in a static image, but if you’re playing along at home, you can see it. The icon at the top of the popup window will run the animation. Select the animation type from the drop-down and click the orange “Animate It!” button. Luckily the plugin will demonstrate the animations for you. The only way to see what they all do is to try them. The first step is to choose what kind of animation you’d like from the “Animation” drop-down menu.Īs you can see, there are dozens of options. Whereas choosing “Exit” would make the effect begin when the hover leaves. Since we’re doing hover animation, we’ll use “Entry.” That means the effect begins when the hover begins. There are three tabs or sections, “Entry,” “Exit,” and “Options.” The “Select your Animation Style” popup window will open. Select the header text and click the Animate It! icon. Animating Textįirst, we’ll animate the text in an tag. That’s where you configure the hover animation. In the editor, you’ll see a new Animate It! icon. It’s available on all of your existing posts and pages, but I’m going to create a page from scratch. You access the animation features in the page and post editor. Once the plugin is installed it’s working and ready to use. Now the plugin is installed, but it has to be activated before you can use it. When you find the plugin, click the “Install Now” button. In the “Search plugins…” box, enter, “Animate It!” In the left column navigation, mouse over the “Plugins” link and click the “Add New” link. If you’re a Gutenberg user and don’t want to switch between editors, this plugin isn’t going to work for you. Note: normally I use the Gutenberg editor for tutorials, but the plugin only works in the “classic” WordPress editor. Okay, are you ready to see it in action? The first stop is plugin installation. But it’s alive and well on the desktop, so if you have a place for it, use it! So if the bulk of your traffic is mobile devices, it may not make sense to spend time on hover animation. It’s also worth remembering that hover effects are lost on mobile users. It can seem a bit frivolous in a more serious context. I don’t necessarily want to see hover animation on a news site or my bank site. A little animation usually goes a long way, and it’s not appropriate for every site. When an effect is easy to achieve it’s easy to overuse it. Whatever the Question, Animation Is Not Always the Answer And free hover effects in WordPress are also a win. It does just about everything we could ask, and none of the features are hidden behind a paywall. We’re going to use the Animate It! plugin for hover animation. Any time I can do the best thing easily and score a win/win, I’m on board. Not only is it the best way, but it’s also the easiest. Like most WordPress enhancements, the best way to add hover animation is with a plugin. The Best Way to Achieve Hover Animation on a WordPress Site ![]() And using fewer resources is the key to maintaining good site loading speed. It also typically uses the least amount of bandwidth and browser resources. There are a number of ways to achieve hover animation, but the most widely-compatible method is via CSS. You don’t want to animate everything a visitor can hover their pointer over, but used sparingly, it’s a nice effect. ![]() Most often used for navigation and menus, it can also increase click-through rates for images or call to action buttons. Hover animation can be not only a cool effect but also a visual indicator that a page element is clickable. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |