Working with templates is a great way to start learning how everything works in the Hatch editor. In this intro tutorial, we’ll walk through how to customize a Hatch template. We’ve chosen this template below from the Hatch gallery. The link will open in another tab, right in the Hatch editor, if you want to work side by side.
Choosing a background
First let’s decide what color or image to feature in the background. Go to the right sidebar and take a look at the ‘style’ section. Right now the background is completely black. Let’s change things up!
For this page we are trying out the photo library available in Hatch. Select photo or video under background type, then open the photo library. We chose a top-down beach background, which felt like a good fit for the template. You can choose royalty-free images from Unsplash, Pexels, and Pixabay. Of course, you’re also free to upload any image you want and use that instead!
Customizing your background image
Under fit type, select fit, to adjust the background to the page format. Now press preview at the top to check if the background fits properly. If you want more control over the placement of the background image, here’s a tip. Go back to using a solid color background, and drag the photo you want to use as a background into the Hatch editor. Click the arrows at the top of the image, and select ‘send to back.’ This will position your image under the rest of your elements. Now you can move and resize the background however you like! Get rid of any elements that don’t fit the new background by selecting them and pressing delete.
Replacing Justina
Next, let’s personalize it! Quick reminder: you can move any element at will by just selecting it and dragging it around. You can also resize it by clicking on the dots at the border of the image and dragging them inward or outward.
Double click on ‘Justina’ to start editing the text. Type in your own name (unless you happen to be named Justina, naturally). Then we can pick a different text color to compliment our beach background. There are several ways to set the text color.
- Manually browse the color spectrum and the color map above it, as we’ve done below.
- If you already know what color you need, set the hex code
- Use the RGB color system
- Use the HSL color system
- Use the eyedropper tool to lift the color code from anywhere on our screen!
See the full color tutorial here.
Directly under the color section, you can choose a font for your text. The font names are displayed in the style of the font so you don’t need to know the name. Just scroll through until you find one you like. If you do know the name of the font, type the first few letters and the list will jump alphabetically.
Changing the featured image
Now let’s change the image. Click on the image to select it, then look at the right sidebar. Pick ‘choose a replacement image’ from the drop down list, then upload your own! Here’s what I ended up with.
However, there’s a bit of a problem there, can you spot it? It seems like ‘John’ is displaying under the image, when it should show up above it. To fix this, let’s go back to the position arrows we used before on the background.
Select the name and pick ‘bring forward’, until the text is properly displaying over the image. Once that’s solved, you can edit the rest of the text prompts in a similar manner. Let people know what you’re all about!
How to customize template buttons and links
Now we want to change the buttons so that they lead to your own sites. And why not customize them a bit while we’re at it. Select the button you want to modify, then review at the right sidebar. Change the text to describe your site instead.
Next you’ll want to ‘add a link’ by clicking the link option above the button. A small field will appear, so just paste your link in there and you’re good to go! Make sure you do this for each of the buttons.
If you need more buttons, you can add more via the left sidebar. Clicking on ‘elements’ and then ‘button’ will create a button element that you’re free to edit like before.
How to customize a Hatch template by adding some flair
You’ve modified the background, text and buttons and now it’s time to add some flair! You can experiment with each element’s properties on the right sidebar to get some cool results. And don’t forget to check out the effects! You can add an effect to any element by clicking on the Effects tab to the upper right.
If you want to add small animations or other visual details, check out Hatch’s comprehensive library of stickers. You can drag and drop the stickers wherever you want into your page to make it shine even more. Access them via the left sidebar as shown below.
You can see our little work in progress below. From here, you can add slideshows, embeds, animations, and so much more! For more on how to customize a Hatch template, check out the full walkthrough of Hatch features and capabilities here.
