In this tutorial we’ll remix a Hatch webpage to get a quick start on webpage functionality. We can use the remix function to check out how an existing Hatch webpage works. Then we can change the elements that make up the page to create our own unique site.
This is the site we’ll be remixing. It’s a template for an interactive page that features physics elements. The girl falls down the page, bumping into the several objects in her path. The user can also click and drag her around.
To enter the editor, just click on the *remix this* button at the top right of the page.
The goal for today is to change up the look of the website, while keeping the core functionality intact. First off, let’s change the background.
Changing the background of a Hatch template
On the left of your screen, you’ll see a sidebar featuring a number of icons. To quickly select any element on a Hatch page, we can bring up the object tree. Click on “objects” at the bottom of the sidebar.
The original site is a multi-page project, but we’ll only focus on the first page, labeled “Story Start.” Click on it to access the page properties on the right toolbar.
First we want to replace the swirling video playing in the background. Click on “replace video” and pick another video to take its place from the public library. You can use the search prompt at the top to get quick, relevant results.
After the background video loads in, you can also edit its properties in the right sidebar. For example, you might want to adjust the color opacity slider to show a clearer image.
Changing the objects in a Hatch template
For this project, we’re going for a space theme. So let’s swap out the rest of the objects accordingly, including our main character, the falling girl. Go back to the object list and select the girl object (“child__girl__kid”). Check the right-hand tab to replace the image.
If you want a transparent background, you can include “transparent” in your library search query. SVGs and stickers will often have transparent backgrounds as well. If you can’t find something from inside the library, use your favorite search engine or upload your own asset.
Find the replacement image you want for that main falling object then repeat the replacement process for any other objects on the canvas. Delete any background objects you might not need and drag objects around as you like.
You can create duplicates of an item by right-clicking, copying and pasting them. You can use the “duplicate” button on the quick access toolbar. Or you can use Ctrl+C/Ctrl+V, whatever works for you. Duplicating is useful when creating objects with similar properties, because the property will remain even as you change the image.
Changing text in a Hatch template
To edit the text, you’ll find the text boxes right there in the object list. We’ll want to modify Headings 1 through 6. Apart from changing up the story a bit, let’s make sure the text is readable. Since we picked a dark background, we’ll need to change the color of the text.
We changed the text color to white, but more importantly, we made the background of the text transparent to see what’s behind the text. You can do this by clicking on the text, then on “background” and dragging the transparency slider all the way to the left, as shown in the image above.
Remix a Hatch webpage from storybook to outer space!
Now that we’ve laid out the elements, let’s see if the page works! Click on the “preview” button at the top right of the project. If your object doesn’t drop all the way down to the bottom, move the elements around a bit to create a better path. If you want to start over, just go back to the original project and edit from there.
And that’s it- we’ve successfully remixed a Hatch webpage from storybook template to a space alien adventure! Check out the finished product here!
