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
- Getting Started
- Adding Animation to Post or Page
- Additional Gutenberg Editor Plus Capabilities
Enjoy fast, secure hosting optimized for your WordPress site with our WordPress Hosting plans.
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 -
General options for the Editor Plus plugin -
Block library search for Editor Plus plugin -
Custom CSS screen for Editor Plus plugin
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!
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.
-
Snippet showing background options for Editor Plus plugin -
Snippet showing border options for Editor Plus plugin -
Custom CSS option for Editor Plus plugin -
Typography options for Editor Plus plugin
helpful Gutenberg articles!