{"id":22095,"date":"2022-08-04T08:00:00","date_gmt":"2022-08-04T12:00:00","guid":{"rendered":"https:\/\/www.seedprod.com\/?p=22095"},"modified":"2023-12-22T05:23:42","modified_gmt":"2023-12-22T10:23:42","slug":"text-animations-wordpress","status":"publish","type":"post","link":"https:\/\/www.seedprod.com\/text-animations-wordpress\/","title":{"rendered":"How to Create Text Animations in WordPress (Easy Steps)"},"content":{"rendered":"\n<p>Do you want to add animations in WordPress?<\/p>\n\n\n\n<p>Animations are an excellent way to grab your audience’s attention, directing them to helpful content and essential elements, like call-to-action buttons, testimonials, and sign-up forms.<\/p>\n\n\n\n<p>In this article, we’ll show you how to create text animations on your WordPress website step-by-step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-video-tutorial\">Video Tutorial<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe loading=\"lazy\" class=\"embed-responsive-item\" title=\"How to Create Text Animations in WordPress (Easy Steps)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/i3aVeDjn-5A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<div data-schema-only=\"false\" class=\"wp-block-aioseo-faq\" id=\"aioseo-what-are-animated-text-effects-and-why-use-them\"><h3 class=\"aioseo-faq-block-question\">What Are Animated Text Effects and Why Use Them?<\/h3><div class=\"aioseo-faq-block-answer\">\n<p>Animated text effects are CSS animations for your website’s headlines and other text-based content. They let you add transition effects and <a href=\"https:\/\/www.seedprod.com\/add-section-divider-to-wordpress\/\">animation styles<\/a>, such as bouncing, scrolling, and sliding, drawing attention to essential information on your site.<\/p>\n<\/div><\/div>\n\n\n\n<p>You can use text animations in WordPress to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Highlight offers on your <a href=\"https:\/\/www.seedprod.com\/vertical-pricing-table-wordpress\/\" title=\"How to Create a Vertical Pricing Table in WordPress (2 Methods)\">pricing table<\/a><\/li>\n\n\n\n<li>Animate product features<\/li>\n\n\n\n<li>Create attention-grabbing headlines<\/li>\n\n\n\n<li>Draw attention to <a href=\"https:\/\/www.seedprod.com\/call-to-action-examples\/\" title=\"11 Call to Action Examples You Can\u2019t Help Clicking\">call-to-action<\/a> buttons (CTA)<\/li>\n\n\n\n<li>And more.<\/li>\n<\/ul>\n\n\n\n<p>Many websites use page animations and transitions for page scrolls. For example, you can animate text widgets to “pop” as users scroll down the page.<\/p>\n\n\n\n<p>Because CSS3 animations are faster than flash or videos, they load quickly and are supported by most modern web browsers. They’re also much easier to add to your site with a <a href=\"https:\/\/www.seedprod.com\/best-animation-plugins-for-wordpress\/\" title=\"\">WordPress animation plugin<\/a>.<\/p>\n\n\n\n<p>With that in mind, let’s explore how to create animated text effects in WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-how-to-add-animated-text-effects-in-wordpress-2-ways\">How to Add Animated Text Effects in WordPress: 2 Ways<\/h2>\n\n\n\n<p>There are several ways to add animations to WordPress. You can use a <a href=\"https:\/\/www.seedprod.com\/best-wordpress-plugins\/\" title=\"45+ Best WordPress Plugins That You Need in 2022 (FREE and Paid)\">WordPress plugin<\/a> or manually add CSS effects.<\/p>\n\n\n\n<p>Because manually creating text effects is challenging for beginners, we’ll show you how to create text animations with a <a href=\"https:\/\/www.seedprod.com\/best-wordpress-page-builder\/\" title=\"12 Best Drag and Drop WordPress Page Builders (for 2022)\">WordPress page builder<\/a> and a free WordPress animation plugin.<\/p>\n\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a href=\"#aioseo-method-1-create-animated-headlines-with-seedprod\">Method 1. Create Animated Headlines with SeedProd<\/a><ul><\/ul><\/li><li><a href=\"#aioseo-method-2-add-text-animations-with-animate-it-css-plugin\">Method 2. Add Text Animations with Animate It! CSS Plugin<\/a><\/li><\/ul><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-method-1-create-animated-headlines-with-seedprod\">Method 1. Create Animated Headlines with SeedProd<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.seedprod.com\/\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"360\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/01\/seedprodwebsitebuilder.png\" alt=\"SeedProd WordPress website builder\" class=\"wp-image-18654\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/01\/seedprodwebsitebuilder.png 680w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/01\/seedprodwebsitebuilder-400x212.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/01\/seedprodwebsitebuilder-50x26.png 50w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><\/figure>\n\n\n\n<p>For the first method, we’ll use <a href=\"https:\/\/www.seedprod.com\/\">SeedProd<\/a>, the <a href=\"https:\/\/www.seedprod.com\/best-website-builders\/\" title=\"12+ Best Website Builders 2022 Compared (+ How to Pick One)\">best website builder<\/a> for WordPress. With its visual drag-and-drop page builder and Animated Headline block, you can add exciting transition effects with a few clicks.<\/p>\n\n\n\n<p>SeedProd lets you <a href=\"https:\/\/www.seedprod.com\/how-to-create-custom-wordpress-theme-without-code\/\" title=\"How to Create a Custom WordPress Theme in 5 Code-Free Steps\">create custom WordPress themes<\/a> and responsive layouts without writing code or hiring a developer. It includes powerful content blocks for customizing pages, WooCommerce support for eCommerce stores, and integrates seamlessly with popular WordPress plugins.<\/p>\n\n\n\n<p>Moreover, this plugin is lightweight and bloat-free, ensuring your page load times are fast and user-friendly.<\/p>\n\n\n\n<p>Follow the steps below to create text animations in WordPress with SeedProd.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-step-1-install-and-activate-seedprod-plugin\">Step 1. Install and Activate SeedProd Plugin<\/h4>\n\n\n\n<p>First, head to the <a href=\"https:\/\/www.seedprod.com\/pricing\/\">SeedProd pricing page<\/a> and choose a license. We recommend <strong>SeedProd Pro<\/strong> for its advanced features.<\/p>\n\n\n\n<p>After that, log into your SeedProd account area and download the plugin. You can copy your license key under the “Downloads” tab at the same time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"269\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/copy-seedprod-license-key.png\" alt=\"Find your SeedProd license key\" class=\"wp-image-12195\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/copy-seedprod-license-key.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/copy-seedprod-license-key-400x163.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/copy-seedprod-license-key-50x20.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Next, install the plugin and activate it on your WordPress site. If you need help, you can follow these <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners\/\" target=\"_blank\" rel=\"noopener\">steps to install a WordPress plugin<\/a>.<\/p>\n\n\n\n<p>After activating SeedProd, navigate to <strong>SeedProd \u00bb Settings<\/strong>, enter your license key, and click the <strong>Verify Key <\/strong>button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"338\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/01\/seedprod-theme-builder-license-key.png\" alt=\"enter your license key\" class=\"wp-image-17823\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/01\/seedprod-theme-builder-license-key.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/01\/seedprod-theme-builder-license-key-400x204.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/01\/seedprod-theme-builder-license-key-50x26.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>You’re now ready to start building a page with animation effects.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-step-2-choose-a-landing-page-template\">Step 2. Choose a Landing Page Template<\/h4>\n\n\n\n<p>You can use SeedProd to create a <a href=\"https:\/\/www.seedprod.com\/password-protect-page-wordpress\/\" title=\"How to Password Protect Single Pages in WordPress (Step by Step)\">single WordPress page<\/a>, a WordPress theme, or a landing page with its visual editor. For this guide, we’ll add text animations to a sales landing page.<\/p>\n\n\n\n<p>First, you’ll need to go to <strong>SeedProd \u00bb Landing Pages<\/strong> and click the <strong>Add New Landing Page<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"308\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/10\/create-new-landing-page.png\" alt=\"Add a new landing page in WordPress\" class=\"wp-image-9613\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/10\/create-new-landing-page.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/10\/create-new-landing-page-400x186.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/10\/create-new-landing-page-50x23.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Here you can choose from over 180+ mobile-responsive <a href=\"https:\/\/www.seedprod.com\/templates\/\">landing page templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"424\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/responsive-landing-page-templates.png\" alt=\"SeedProd landing page templates\" class=\"wp-image-12200\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/responsive-landing-page-templates.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/responsive-landing-page-templates-400x256.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/responsive-landing-page-templates-50x32.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Since we’re <a href=\"https:\/\/www.seedprod.com\/how-to-make-a-sales-page-with-wordpress\/\" title=\"How to Make a Sales Page With WordPress (Step-by-Step)\">making a sales page<\/a>, click the <strong>Sales<\/strong> tab to view the different sales page templates. When you find a template you like, move your cursor until you see the image hover effect and click the orange checkmark icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"548\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/choose-landing-page-template.png\" alt=\"choose a landing page template to animate\" class=\"wp-image-22098\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/choose-landing-page-template.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/choose-landing-page-template-400x331.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/choose-landing-page-template-50x41.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Next, you will see a popup window where you can add your landing page name and URL information. After that, click the <strong>Save and Start Editing the Page<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"412\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/landing-page-details.png\" alt=\"enter your landing page details\" class=\"wp-image-22099\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/landing-page-details.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/landing-page-details-400x249.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/landing-page-details-50x31.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-step-3-customize-your-landing-page-content\">Step 3. Customize Your Landing Page Content<\/h4>\n\n\n\n<p>Your landing page template will now open in SeedProd’s drag-and-drop visual editor. This is where you can customize its content and styling and add more page elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"537\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/drag-and-drop-page-builder.png\" alt=\"SeedProd drag-and-drop-page builder WordPress\" class=\"wp-image-22100\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/drag-and-drop-page-builder.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/drag-and-drop-page-builder-400x324.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/drag-and-drop-page-builder-50x41.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>For instance, you can add your custom logo by clicking the current image block and uploading a file from your WordPress media library or computer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"531\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/change-logo.png\" alt=\"Change landing page logo\" class=\"wp-image-22101\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/change-logo.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/change-logo-400x321.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/change-logo-50x40.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>You can also edit your CTA buttons with different colors, text, and styling by clicking it and visiting the Advanced settings panel on the left.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"399\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/customize-cta.png\" alt=\"Customize landing page call to action button seedprod\" class=\"wp-image-22102\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/customize-cta.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/customize-cta-400x241.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/customize-cta-50x30.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Adding new elements is just as easy. You can drag a block from the blocks panel on the left and drop it onto your design. A <a href=\"https:\/\/www.seedprod.com\/landing-page-with-countdown-timer\/\" title=\"How to Create a Landing Page with Countdown Timer (5 Steps)\">countdown timer<\/a>, for example, can add urgency to your page, encouraging users to act for fear of missing out.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"356\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/add-countdown-timer.png\" alt=\"Add a countdown timer in seedprod\" class=\"wp-image-22103\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/add-countdown-timer.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/add-countdown-timer-400x215.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/add-countdown-timer-50x27.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>With your customizations in place, let’s look at how to animate your headline text next.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-step-4-add-the-animated-headlines-block\">Step 4. Add the Animated Headlines Block<\/h4>\n\n\n\n<p>Let’s say you want to animate the main headline on your landing page. To do that, you’ll need to find the <strong>Animated Headline<\/strong> block and drag it onto your page design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"345\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animated-headline-block.png\" alt=\"SeedProd animated headline block\" class=\"wp-image-22104\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animated-headline-block.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animated-headline-block-400x208.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animated-headline-block-50x26.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>When you click the block to view its settings, you’ll see 2 ways to animate your headline:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Highlighted<\/li>\n\n\n\n<li>Rotating<\/li>\n<\/ol>\n\n\n\n<p>The <strong>Highlighted<\/strong> style adds a shape animation to your text, with shapes including:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"344\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/highlighted-text-animation-wordpress.png\" alt=\"Highlighted text animation WordPress\" class=\"wp-image-22107\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/highlighted-text-animation-wordpress.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/highlighted-text-animation-wordpress-400x208.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/highlighted-text-animation-wordpress-50x26.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Circle<\/li>\n\n\n\n<li>Curly<\/li>\n\n\n\n<li>Underline<\/li>\n\n\n\n<li>Double<\/li>\n\n\n\n<li>Double Underline<\/li>\n\n\n\n<li>Underline ZipZag<\/li>\n\n\n\n<li>Diagonal<\/li>\n\n\n\n<li>Strikethrough<\/li>\n\n\n\n<li>X<\/li>\n<\/ul>\n\n\n\n<p>In contrast, the <strong>Rotating<\/strong> style adds transition effects to your headline, which include:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"395\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/rotating-text-animation-wordpress.png\" alt=\"Rotating text animation WordPress\" class=\"wp-image-22106\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/rotating-text-animation-wordpress.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/rotating-text-animation-wordpress-400x239.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/rotating-text-animation-wordpress-50x30.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typing<\/li>\n\n\n\n<li>Clip<\/li>\n\n\n\n<li>Flip<\/li>\n\n\n\n<li>Bounce<\/li>\n\n\n\n<li>Roll<\/li>\n\n\n\n<li>Zoom<\/li>\n\n\n\n<li>Fade<\/li>\n\n\n\n<li>Light Speed<\/li>\n\n\n\n<li>Slide Down<\/li>\n<\/ul>\n\n\n\n<p>Additionally, you can add text before and after your animated text, enable infinite looping, change the animation duration, and adjust the alignment, fonts, and heading level.<\/p>\n\n\n\n<p>In our example, we use the “Underline” shape from the highlighted drop-down menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"409\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/seedprod-text-animation-wordpress.png\" alt=\"SeedProd text animation WordPress underline\" class=\"wp-image-22108\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/seedprod-text-animation-wordpress.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/seedprod-text-animation-wordpress-400x247.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/seedprod-text-animation-wordpress-50x31.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>When you’re happy with your animated text effects, click the <strong>Save<\/strong> button in the top-right corner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"326\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/save-landing-page.png\" alt=\"Save your landing page changes\" class=\"wp-image-22109\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/save-landing-page.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/save-landing-page-400x197.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/save-landing-page-50x25.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-step-5-configure-your-settings\">Step 5. Configure Your Settings<\/h4>\n\n\n\n<p>The next step is to connect your <a href=\"https:\/\/www.seedprod.com\/best-email-newsletter-services\/\" title=\"10 Best Email Newsletter Services in 2022 (Compared)\">email marketing service<\/a> and configure your landing page settings.<\/p>\n\n\n\n<p>SeedProd offers direct integrations with many popular email providers, including Constant Contact, Mailchimp, and more. You can choose one by clicking the <strong>Connect<\/strong> tab at the top of your screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"334\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/12\/Optin-Form-Connect-800x334.png\" alt=\"Email marketing Integrations\" class=\"wp-image-21616\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/12\/Optin-Form-Connect-800x334.png 800w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/12\/Optin-Form-Connect-400x167.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/12\/Optin-Form-Connect-768x321.png 768w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/12\/Optin-Form-Connect-50x21.png 50w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/12\/Optin-Form-Connect-1536x642.png 1536w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/12\/Optin-Form-Connect.png 1901w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Check out the <a href=\"https:\/\/www.seedprod.com\/docs-categories\/email-integration\/\">email integration documentation<\/a> for help connecting to your specific provider.<\/p>\n\n\n\n<p>Next, click the <strong>Page Settings<\/strong> tab, where you can edit settings like your page name, URL, and <a href=\"https:\/\/www.seedprod.com\/best-on-page-seo-tools\/\" title=\"10 Best On-Page SEO Tools for WordPress Tested for 2024\">on-page SEO<\/a>, and connect to a Google Analytics plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"392\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/landing-page-settings.png\" alt=\"landing page settings\" class=\"wp-image-12221\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/landing-page-settings.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/landing-page-settings-400x237.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2021\/03\/landing-page-settings-50x30.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>You can also use SeedProd’s <strong>Domain Mapping <\/strong>feature to <a href=\"https:\/\/www.seedprod.com\/how-to-point-a-wordpress-landing-page-to-a-different-domain\/\" title=\"How to Point a WordPress Landing Page to a Different Domain\">give your landing page a custom domain<\/a> name. This is an excellent way to have multiple landing pages with unique domains on a single WordPress installation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"353\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/11\/seedprod-custom-domain-mapping-800x353.png\" alt=\"seedprod domain mapping\" class=\"wp-image-18737\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/11\/seedprod-custom-domain-mapping-800x353.png 800w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/11\/seedprod-custom-domain-mapping-400x176.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/11\/seedprod-custom-domain-mapping-768x339.png 768w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/11\/seedprod-custom-domain-mapping-50x22.png 50w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2020\/11\/seedprod-custom-domain-mapping.png 1200w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Don’t forget to click <strong>Save<\/strong> before moving to the next step.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-step-6-publish-your-landing-page\">Step 6. Publish Your Landing Page<\/h4>\n\n\n\n<p>When you’re satisfied with your design, click the drop-down menu on the<strong> Save<\/strong> button and select <strong>Publish<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"354\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/publish-landing-page.png\" alt=\"publish landing page with text animation\" class=\"wp-image-22112\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/publish-landing-page.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/publish-landing-page-400x214.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/publish-landing-page-50x27.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>You can now view your page and see your text animations in action.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"425\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/text-animation-WordPress-final.gif\" alt=\"text animation WordPress example\" class=\"wp-image-22111\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-method-2-add-text-animations-with-animate-it-css-plugin\">Method 2. Add Text Animations with Animate It! CSS Plugin<\/h3>\n\n\n\n<p>For the following method, we’ll use a free WordPress animation plugin to add animated text effects to your website. This is a good solution if you use the classic WordPress WYSIWYG editor instead of a <a href=\"https:\/\/www.seedprod.com\/wordpress-block-editor-vs-page-builders\/\" title=\"WordPress Block Editor vs Page Builders: Which Is Best?\">page builder or the WordPress block editor<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"213\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animate-it-free-WordPress-plugin.png\" alt=\"Animate It! Free WordPress animation plugin\" class=\"wp-image-22113\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animate-it-free-WordPress-plugin.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animate-it-free-WordPress-plugin-400x129.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animate-it-free-WordPress-plugin-50x16.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>First, install and activate the <a href=\"https:\/\/wordpress.org\/plugins\/animate-it\/\" target=\"_blank\" rel=\"noopener nofollow\">Animate It!<\/a> plugin on your WordPress website. It should work out of the box with no settings for you to configure.<\/p>\n\n\n\n<p>Next, create a new page, and you’ll see a new button inside the WordPress editor: Animate It!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"368\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animate-it-button.png\" alt=\"Animate It! button WordPress editor\" class=\"wp-image-22114\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animate-it-button.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animate-it-button-400x222.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animate-it-button-50x28.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Clicking the button opens a popup window where you can choose an animation style. There are many animation styles to choose, so find one you like in the drop-down menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"499\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animation-options.png\" alt=\"Animation styles WordPress \" class=\"wp-image-22115\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animation-options.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animation-options-400x302.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animation-options-50x38.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>After that, you can choose the delay and duration time and when you want the animation to appear. You can also run the animation on load, click, hover, or scroll offset.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"305\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animation-settings.png\" alt=\"animation option WordPress animation plugin\" class=\"wp-image-22116\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animation-settings.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animation-settings-400x184.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/animation-settings-50x23.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>When you’re happy with the settings, click the <strong>Animate It<\/strong> button to see a preview of the animation.<\/p>\n\n\n\n<p>Next, click the <strong>Insert<\/strong> button to add the animation to your post or page. The plugin will add a shortcode with some dummy content into the post editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"438\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/text-animation-shortcode.png\" alt=\"text animation WordPress shortcode\" class=\"wp-image-22117\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/text-animation-shortcode.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/text-animation-shortcode-400x265.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/text-animation-shortcode-50x33.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>You can customize and replace that content with your headlines, images, and custom text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"575\" src=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/custom-animation-content.png\" alt=\"customize the animation shortcode\" class=\"wp-image-22118\" srcset=\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/custom-animation-content.png 662w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/custom-animation-content-400x347.png 400w, https:\/\/www.seedprod.com\/wp-content\/uploads\/2022\/07\/custom-animation-content-50x43.png 50w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Now you can publish your changes and preview your animated text live on your WordPress site.<\/p>\n\n\n\n<p>That’s all for now.<\/p>\n\n\n\n<p>We hope you found this tutorial on creating text animations in WordPress helpful. You might also like this guide on <a href=\"https:\/\/www.seedprod.com\/how-to-create-dynamic-landing-pages\/\">creating a dynamic landing page in WordPress<\/a>.<\/p>\n\n\n\n<p>Thanks for reading! We’d love to hear your thoughts, so please feel free to leave a comment with any questions and feedback.<\/p>\n\n\n\n<p>You can also follow us on\u00a0<a href=\"https:\/\/www.youtube.com\/channel\/UCWk1FoqaC33HPw0xJQLmluA\" target=\"_blank\" rel=\"noopener nofollow\" title=\"SeedProd YouTube Channel\">YouTube<\/a>,\u00a0<a href=\"https:\/\/twitter.com\/seedprod\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">X (formerly Twitter)<\/a>, and\u00a0<a href=\"https:\/\/www.facebook.com\/seedprodwp\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"SeedProd Facebook Page\">Facebook<\/a>\u00a0for more helpful content to grow your business.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article will show you how to create animated text effects in WordPress. You can use a WordPress page builder or a free CSS plugin to create text effects.<\/p>\n","protected":false},"author":14,"featured_media":22120,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"limit_modified_date":"1","last_modified_date":"2023-12-22T05:23:42","inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1,26],"tags":[3619,3641,3835],"class_list":["post-22095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-how-to","tag-animated-headlines","tag-dynamic-text","tag-text-animation-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/posts\/22095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/comments?post=22095"}],"version-history":[{"count":0,"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/posts\/22095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/media\/22120"}],"wp:attachment":[{"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/media?parent=22095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/categories?post=22095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.seedprod.com\/wp-json\/wp\/v2\/tags?post=22095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}