Add WordPress Animation to Gutenberg Blocks with Editor Plus Plugin

add wordpress animation using editor plus plugin

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. 

However, with the free plugin Editor Plus, you can add entrance animation to your WordPress content. By extending the capabilities of the Gutenberg editor, 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

Before continuing, make sure you’ve installed and activated 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
  • editor plus extension options
  • searching for additional blocks in editor plus
  • adding css to editor plus

Adding Animation to Post or Page

To add animation to your WordPress content, create or edit a page or post. 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

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
  • border options for editor plus plugin
  • css customization for editor plus plugin
  • 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 articles!

Stormy Scott
Stormy Scott Content Marketing Writer

Stormy is a Content Marketing Writer at InMotion Hosting. Her content focus is WordPress, web design, and help articles for small businesses.

More Articles by Stormy

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!