Below is an interactive blog post demo that truly showcases how embedding Hatch projects can make your content more delicious! For step-by-step instructions to add this kind of interactive or animated content to your blog, check out this post here. How to make Vegetables Alla Contadina The Mediterranean region is a treasure trove of culinary…
Category: Tutorial
![](https://i0.wp.com/hatch.one/wp-content/uploads/2024/07/hover-effects.png?fit=640%2C334&ssl=1)
How to add hover effects to a WordPress post (without plugins)
Without a doubt, WordPress is the major player in blog publishing platforms. Over the years, WordPress developers have produced a vast quantity of resources, which let users craft all kinds of unique blogs. In fact, there’s so much information on how to use WordPress, a user can get lost trying to set up customized effects…
![How to add interactivity to a wordpress page or post without plugins](https://i0.wp.com/hatch.one/wp-content/uploads/2024/06/wpembed.png?fit=640%2C334&ssl=1)
How to add interactive elements to a WordPress blog post
WordPress recently celebrated the 21st anniversary of their popular publishing platform which is used by 43% of all websites on the world wide web. With thousands of themes and plugins, bloggers can tailor their site’s appearance and functionality to suit their needs and preferences, whether they want a simple personal blog or a more complex,…
![How to animate with text effects banner](https://i0.wp.com/hatch.one/wp-content/uploads/2024/05/text-effects-banner.png?fit=640%2C334&ssl=1)
How to animate with text effects
In this tutorial we’ll explore animating with text effects and outlines. With a simple setting you can add the outline effect to any text object on your page without code. This effect can be used to make your headlines stand out, or to make any text section more visible. Let’s see how to set these…
![How make web elements to appear on scroll banner image](https://i0.wp.com/hatch.one/wp-content/uploads/2024/05/on-scroll-banner.png?fit=640%2C334&ssl=1)
How to make web elements appear on scroll
In this tutorial, we’ll walk you through our no-code appear effects, which make it possible for an object to appear or be revealed. These effects trigger when the object comes into view, either on scroll or when the page loads. You can easily set something to appear on scroll by adding a little animation on…
![banner art for adding a floating animation to a webpage](https://i0.wp.com/hatch.one/wp-content/uploads/2024/04/floating-banner.png?fit=640%2C334&ssl=1)
How to make floating animations on a webpage
This Hatch tutorial walks through the process of putting floating animations on a webpage. We’ll make our objects float up and down in the page as if they were suspended in the air. And we’ll do it with an easy, no-code approach! Just follow these instructions and watch your page come to life! To begin…
![](https://i0.wp.com/hatch.one/wp-content/uploads/2024/03/page-click.png?fit=640%2C334&ssl=1)
Use a page click to change an object’s behavior
In this walkthrough, we’ll explore how to change any object on your Hatch page, triggered by a click. By adding interactions to a page element, we can assign all kinds of behaviors to it. Click to change a color or size, make an object appear or disappear. The best part? You can set up a…
![widgets banner](https://i0.wp.com/hatch.one/wp-content/uploads/2024/03/widgets.png?fit=640%2C334&ssl=1)
10 free web widgets to embed in your Hatch page
There are heaps of pre-built HTML and iFrame widgets you can add to your webpage or personal apps to enhance the design and functionality. Many of these widgets even have style customizations. Consider the interactivity you could add to your app with customizable widgets like weather, world clocks, countdown timers, calendars, 3D models, maps, calculators, social feeds, product catalogs, customer…
![](https://i0.wp.com/hatch.one/wp-content/uploads/2024/01/hand-drawn-banner.png?fit=640%2C334&ssl=1)
Make a hand-drawn webpage
With our new Draw feature available in the Hatch editor, you can create hand-drawn stickers and gifs, or make illustrated games and interactive stories. In this walkthrough, we’ll use Draw to make a hand-drawn webpage and get you started with this new tool. Drawing on the Hatch canvas Our landing page features a street down…
![](https://i0.wp.com/hatch.one/wp-content/uploads/2023/11/personal_app_banner.png?fit=640%2C334&ssl=1)
How to make a personal app with custom widgets
We love web apps here at Hatch because they are fun and fast to get up and running. It’s easy to make a personal app in Hatch and have it “installable,” appearing like other apps on your device, including a one-tap icon that launches the experience. Anyone using your web app will always already be…