There’s no question that WordPress is one of the most popular blog publishing platforms. A passionate community has built around the platform, enriching platform capabilities with powerful plugins. However, sometimes you want to add something creative to a WordPress blog post without adding a plugin to your whole website. In this tutorial, we’ll show you how to add text effects to your WordPress pages with a simple embed.
Text effects make your text stand out through animation or interactive elements triggered by user behavior. Typically, you’d add these text effects using the custom HTML functionality available in WordPress. However, with Hatch, you can create functional mini-pages that you can embed into your WordPress blog.
The example above uses a ‘3d perspective effect’, together with an interaction that makes it spin like that. If you like how it looks, you can find the template for it here! Feel free to check it out in the editor by clicking the ‘use this template’ button at the top right.
For this tutorial, we’ll assemble a very simple appear effect to create a cool headline.
How to create a ‘text appear’ effect
Adding an ‘appear’ effect to your text object will play a small animation when it comes into view. For instance you can set it so that the text fades into the page from any direction, like shown above.
First we’ll need a text object to place the effect on. For this example we used a simple headline found on the left sidebar.
Once the text is on the page you can move it or resize however you like. You can also change the font, size, color and other properties. Now let’s see how to add an appear effect to it!
Click on the text to select it, and look at ‘effects’ on the right sidebar, then click on ‘appear’ at the very top.
We configured the effect by changing the trigger to ‘when page loads’ and setting the animation to ‘scale in’, as shown above.
That’s all you need to do, now click on ‘preview’ at the top of the editor to check out the page in action!
This is a very simple example of what you can do in Hatch with its many no-code tools. To learn how to craft more complex behaviors, you can browse our tutorials in the Hatch blog.
Now let’s see how to embed this standalone headline into your WordPress blog.
Embed your text effects into a WordPress post
When you’re done editing your project, press ‘publish’ on the top right. Choose a URL for your Hatch project and confirm the publication. Then you’ll find the ‘copy embed’ button right under the QR code. The embed code will be copied into your clipboard.
Now let’s switch over to the WordPress side of things. Open up your blog post and find the ‘custom HTML’ box shown below. Clicking on it will open up an input box, like the one shown below.
Now all you need to do is paste the embed you got from the Hatch site into the HTML input field, like so:
For the Hatch project to appear in your blog post, you’ll need to preview or publish your WordPress page. You can also move or resize your Hatch project within the blog post using columns, rows, and spacers.
Don’t struggle with complex plugin configurations or installing individual plugins for effect. Embed a Hatch project and make your WordPress post interactive!
There’s a lot you can accomplish in the Hatch editor with just a few clicks, so we invite you to get started here!