Do you want to add CSS animations in WordPress?
Animations are a great way to grab the visitor’s attention and highlight a page’s most important content. They can also encourage customers to click on your call-to-action buttons and links.
In this article, we will show you how you can easily add CSS animations in WordPress.
Why Add CSS Animations in WordPress?
You can use CSS animations to draw the visitor’s attention to different parts of a page. For example, if you have an online store then animations can highlight a product’s most important features or biggest selling points.
Animations will also make your CTAs stand out, which can help you reach a specific goal such as getting more people to subscribe to your email newsletter.
You can add CSS animations to your theme or child theme‘s stylesheet. However, this takes a lot of time and effort, and it can break your website’s design and even function if you make a mistake.
With that being said, let’s see how you can easily add CSS animations to your WordPress site. If you prefer to jump straight to a particular method, then you can use the links below.
Method 1. How to Easily Animate Any WordPress Block (Quick and Easy)
The easiest way to add a simple CSS animation is by using Blocks Animation.
This free plugin allows you to add an entrance animation to any block without having to write a single line of CSS. It also has a typing animation and a ticker-style effect that you can add to text and numbers.
First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Upon activation, open any page or post in the WordPress editor. Then, simply click on the block that you want to animate and select the ‘Block’ tab in the right-hand menu.
You’ll see this menu has a new ‘Animations’ section.
Simply click to expand the ‘Animations’ section, and you’ll see three different options: Animations, Count Animations, and Typing Animations.
‘Animations’ are short effects that play once when the page loads. To add this kind of entrance animation to your WordPress blog, just click on the dropdown next to ‘Animation.’
This opens a menu where you can choose the animation you want to use.
The WordPress editor will show a preview of the animation, so you can try different options to see what looks the best.
By default, the entrance animation will play as soon as the page loads, but you can add a delay if you prefer. If you use multiple animations on the same page, then you can even use delays to stagger your animations so they’re not overwhelming.
Simply open the ‘Delay’ dropdown and choose a time from the list.
You can also make the animation faster or slower using the ‘Speed’ dropdown.
As you’re trying different settings, you can preview the animation at any point by clicking on ‘Replay Animation.’
The plugin also has ‘Count Animations’ and ‘Typing Animations.’
Typing Animations allow you to animate text, while Count Animations add a ticker-style effect to numbers. These animations work with any block that supports text or numbers, so you can use them to animate buttons, image captions, headings, and more.
To add either of these effects, start by highlighting the text or numbers that you want to animate. Then, click on the downward arrow in the small toolbar.
You can now choose ‘Count Animations’ or ‘Typing Animations’ from the dropdown menu.
If these options are grayed out, then make sure you’ve highlighted the right content. For example, you won’t be able to select ‘Count Animation’ if you’ve only highlighted text.
After adding the animation, you can change the speed and add an optional delay using the dropdown menus in the small popup.
For example, in the following image, we’re using a delay of one second.
When you’re ready to make the CSS animation live, either click on the ‘Publish’ or ‘Update’ button. Now, if you visit your WordPress website you’ll see the animation live.
Method 2. How to Add CSS Animations to Custom Pages (Recommended)
If you want to add simple animations to the built-in WordPress blocks, then Blocks Animation is a good choice. However, if you want to really grab the visitor’s attention, keep people on your website, and get more conversions then we recommend using SeedProd.
SeedProd is the best page builder plugin that allows you to create beautiful landing pages, sales pages, and more using a simple drag-and-drop editor.
It also comes with an ‘Animated Headline’ block that you can use to create rotating and highlighted animated headlines.
Despite the name, you can use the Animated Headline block to animate any text including a call to action, subheading, or any other text that you want to emphasize.
SeedProd also comes with over 40 entrance animations that you can add to any block including images, text, buttons, videos, and more.
You can even animate entire sections and columns with just a few clicks. In this way, you can create engaging animated pages within minutes.
If you’re using animations to get more conversions and sales, then SeedProd integrates with WooCommerce and supports many of the top email marketing services you may already be using to promote your website.
How to Setup the SeedProd Page Builder
The first thing you need to do is install and activate SeedProd. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you need to enter your license key.
You can find this information under your account on the SeedProd website. After adding the license key, simply click on ‘Verify Key.’
Create a Custom Page Design
To get started, go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’
On the next screen, you’ll be asked to choose a template.
SeedProd comes with over 180 beautiful templates that are organized into different categories such as 404-page templates and custom WooCommerce ‘thank you’ pages.
For this guide, we’ll show you how to create a sales page with animated text and entrance animations, but the steps will be similar no matter what kind of page you create.
Simply click on any tab to see the different templates within that category.
When you find a template you want to use, just hover your mouse over it and then click on the checkmark icon.
We’re using the ‘Zen Sales Page’ template in all our images, but you can use any template.
Next, you need to give the page a title.
SeedProd will automatically create a URL based on the page title, but you can change this to anything you want. For example, adding relevant keywords to a URL can often improve your WordPress SEO and help the page appear in relevant search results.
To learn more, please see our guide on how to do keyword research for your WordPress blog.
When you’re happy with the title and URL, click on ‘Save and Start Editing the Page.’
This will load the SeedProd drag-and-drop page editor.
On the right, you’ll see a live preview of the page design, with some settings on the left.
SeedProd comes with lots of blocks that you can add to your design, including blocks that allow you to add social share buttons, videos, contact forms, and more.
For more information, please see our guide on how to create a custom page in WordPress.
How to Add Animated Text to WordPress
To add some animated text to the page, find the Animated Headline block and drag it onto your page design.
There are two ways to animate your headline. First, the ‘Highlighted’ style adds a shape animation to your text, such as a circle or an underlined zigzag.
You can use this animation to draw attention to a particular word or phrase inside the headline. This can make your headline easier to read and understand by highlighting the most important content. It’s also a great way to draw attention to a call to action.
The Highlighted style also has a few strikethrough shapes.
You can use strikethroughs to create interesting and eye-catching effects, or it can simply add some fun to your design.
To create a Highlighted animation, just open the ‘Style’ dropdown and select ‘Highlighted.’
Next, open the ‘Shape’ dropdown and choose a shape. When you click on a shape, SeedProd will show a preview of that animation, so you can try different shapes to see which one you like the most.
SeedProd also has a ‘Rotating’ animation style, which adds a transition effect to the text.
Often, animated text is the first thing visitors look at when a page loads, so it’s a great way to highlight the most important piece of text.
To create a transition animation, simply open the ‘Style’ dropdown and click on ‘Rotating.’
You can then open the ‘Animation’ dropdown and choose the type of transition you want to use, such as fade, zoom, or roll. Again, SeedProd will play the animation inside the page editor so you can try different effects to see which you prefer.
No matter whether you’re creating a ‘Highlighted’ or ‘Rotating’ animation, you can add text before and after the animated text.
Simply type into the ‘Before Headline’ and ‘After Headline’ fields. In the ‘Text’ field, add the word or phrase that you want to animate.
If you want to animate the whole headline, then simply leave the ‘Before Headline’ and ‘After Headline’ fields empty.
By default, SeedProd will play the animation on a loop, which some visitors may find annoying.
To only play the animation once, click to deactivate the ‘Infinite Loop’ switch.
By default, the animation will play for 1200 milliseconds after an 8000 milliseconds delay.
To use different values, type into the ‘Duration’ and ‘Delay’ fields. For example, you can make the animation faster by using a shorter duration.
You may also want to style the text. For example, you can change the font size and alignment.
When you’re happy with how the animated headline looks, go ahead and click on the ‘Save’ button to store your changes.
Add Entrance Animations in WordPress
Entrance animations play when the page first loads, so they’re a great way to catch the visitor’s attention.
You can also use them to highlight the content visitors should look at first. For example, if you have an online marketplace then you might animate the product’s hero image, or the banner advertising your Black Friday sale.
Inside the SeedProd editor, simply click on the content you want to animate, and then select the ‘Advanced’ tab in the left-hand menu.
You can then go ahead and click to expand the ‘Animation Effects’ section.
After that, simply choose an animation from the ‘Entrance Animation’ dropdown.
You can now add entrance animations to any block, section, or column simply by following the same process described above.
Publish Your CSS Animations in WordPress
When you’re happy with how the page is set up, click the dropdown menu on the ‘Save’ button and select ‘Publish.’
You can now visit this page to see the CSS animations live.
We hope this article helped you learn how to add CSS animations in WordPress. You may also go through our ultimate guide to boost speed and performance, or see our list of the most common WordPress errors and how to fix them.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Easily Add CSS Animations in WordPress first appeared on WPBeginner.
No comments:
Post a Comment