--- title: "Add WordPress Animation to Gutenberg Blocks with Editor Plus Plugin" description: "You already know your content must be engaging to attract and retain users. But as more and more businesses jump online, creating unique, engaging content may feel like a neverending challenge. ..." url: https://www.inmotionhosting.com/support/edu/wordpress/gutenberg/add-wordpress-animation-editor-plus/ date: 2020-11-05 modified: 2026-03-11 author: "InMotion Hosting Contributor" categories: ["Gutenberg"] type: post lang: en --- # Add WordPress Animation to Gutenberg Blocks with Editor Plus Plugin ![add wordpress animation using editor plus plugin](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/WPAnimations-1024x538.png) You already know your content must be engaging to attract and retain users. But as more and more businesses jump online, [creating *unique, *engaging content](https://www.inmotionhosting.com/support/edu/wordpress/create-content-canva/) may feel like a neverending challenge.  However, with the [free plugin Editor Plus](https://wordpress.org/plugins/editorplus/), you can add entrance animation to your WordPress content. By extending the capabilities of the [Gutenberg editor](https://www.inmotionhosting.com/support/edu/wordpress/gutenberg/what-is-gutenberg/), the plugin lets you bounce, slide, flip, and fade the content blocks on your posts and pages – giving your content a little extra oomph. (Though, be careful not to add too many animations as that may distract and annoy your users.) In addition to WordPress animation, the Editor Plus plugin also adds typography, icons, shape dividers, and more capabilities to Gutenberg. You can even use the plugin to edit the blocks accessible in the editor, improving your workflow by only showing you the blocks you use.  Continue reading to learn more about: - [Adding WordPress Animation to Gutenberg](#Adding-WordPress-Animation-to-Gutenberg) - [Getting Started](#Getting-Started) - [Adding Animation to Post or Page](#Adding-Animation-to-Post-or-Page) - [Additional Gutenberg Editor Plus Capabilities ](#Additional-Gutenberg-Editor-Plus-Capabilities-) ## Adding WordPress Animation to Gutenberg Before continuing, make sure you’ve [installed and activated](https://www.inmotionhosting.com/support/edu/wordpress/plugins/install-wordpress-plugins/) the Editor Plus plugin in your WordPress dashboard. At the time of this review, this plugin, version 2.0.0, was tested up to WordPress 5.5.3 and is updated every 1-3 months. ### Getting Started Once installed, you can find the settings for EditorPlus by navigating to **Settings > Editor Plus**. The interface for the plugin settings is clean, allowing you to easily review and update settings if needed.  The first tab, *General*, lists all of the Gutenberg extensions available per the plugin. You can simply toggle them on or off to enable or disable the extension functionality. The *Blocks* tab gives you the ability to search for and add blocks via the Gutenberg Hub Block Library, and the *Advanced* tab allows you to add custom CSS.  For adding entrance animation to your Gutenberg content, make sure** Animation** is enabled on the *General* tab. ![installing the editor plus plugin](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/Installeditorplus-1024x755.png)*Installing the Editor Plus plugin* ![editor plus extension options](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/generaltab-798x1024.png)*General options for the Editor Plus plugin* ![searching for additional blocks in editor plus](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/blockstab-1024x927.png)*Block library search for Editor Plus plugin* ![adding css to editor plus](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/advancedtab-916x1024.png)*Custom CSS screen for Editor Plus plugin* ### Adding Animation to Post or Page To add animation to your WordPress content,[ create or edit a page or post](https://www.inmotionhosting.com/support/edu/wordpress/create-edit-pages-posts-wordpress/). While in the editor, add a content block or select a block to edit. In the right-hand sidebar, you’ll notice a full list of new options. These are the options Editor Plus has added to the Gutenberg blocks.  For available animations, while a block is selected, click on** Animations.** You will then be presented with seven options: *Fade, Slide, Bounce, Zoom, Flip, Fold, *and* Roll*. Once you choose an option, you’ll be presented with a few configurations settings for the specific animation you choose. These may include *animation duration*, *animation delay*, *animation repeat*, etc.   When you’ve completed your changes, click **Publish **or **Update** to save the animation! ![Adding animation to gutenberg block](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/addanimation-1024x487.png) ## Additional Gutenberg Editor Plus Capabilities  While adding your animation, you probably noticed the additional options in the right-hand sidebar. Though many are self-explanatory, some have additional functionality you wouldn’t expect.  For example, **Typography** allows you to customize your text per screen size and/or hover functionality. You can also select the font-weight, font kerning, and font leading. When you’re done, you can mark the settings as **Important **to save the style or simply click **Copy Styling** to apply the settings to another block.  Each option allows you to complete additional configurations to your Gutenberg blocks. Your options are *Typography, Background, Box Shadow, Border, Border Radius, Margin, Padding, Sizing, Extras, *and *Custom CSS*. Remember, all options are available for each Gutenberg block. ![background options for editor plus plugin](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/background-1024x648.png)*Snippet showing background options for Editor Plus plugin* ![border options for editor plus plugin](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/broder.png)*Snippet showing border options for Editor Plus plugin* ![css customization for editor plus plugin](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/customcss.png)*Custom CSS option for Editor Plus plugin* ![typography options for editor plus plugin](https://www.inmotionhosting.com/support/wp-content/uploads/2020/11/Typography-1024x639.png)*Typography options for Editor Plus plugin* Learn more about the new WordPress editor, Gutenberg, and the capabilities of the separate Gutenberg plugin with our helpful [Gutenberg tutorials](https://www.inmotionhosting.com/support/edu/wordpress/gutenberg/).