In this tutorial we’ll walk through how to modify our infographic template. Using our remix function we can make some edits and create a new landing page for a cafe. We’ll also cover how to use multiple pages in one Hatch site. Remix a Hatch template for all sorts of projects, from menus to maps and everything in between. The only limit is your creativity!
This infographic template will be our starting point. To start editing, just hit the “remix this” button at the top right of the page.
Replacing template images to fit a new theme
Before we start editing, we want to understand what elements we’re working with, so we’ll bring up the objects list. Click on the objects button at the bottom of the left sidebar.
You’ll notice that the objects are grouped within multiple pages. Let’s focus on the page at the top called “Infographic,” which is the main page. To replace an image, click the desired object on the list. In the right sidebar, you’ll see the object settings where you can swap images with other ones on the canvas, or pull up new images from Unsplash, Pixabay, or Pexels.
We’ll then do this replacement process for every picture on the page, including the background. All of the images we are using in this process we’ve pulled from Hatch’s library, which is a great tool to quickly find pictures that fit your theme.
To change the background, select the page object at the top (called ‘Infographic’) and replace the background in the same way as the other images. You can also replace the existing background video with another video. For text objects, you can click on them and type in your text changes.
Keep in mind, you don’t have to follow the exact layout of the template. For example, we can cut off a couple elements at the bottom to shorten the page. After deleting the unwanted elements, we can resize the main vertical line (line1 in the list) through the right-hand menu. We’ll then write over its Height value, like the image below.
Remix a Hatch template by customizing colors
Up next, we’ll change the colors of structural elements such as the lines and the buttons so they fit our new cafe theme better. After selecting an object, we’ll look over to the “style” section in the right sidebar. By clicking on “background,” we can change the color of the button.
See what we did there at the end? We copied the little color code (called hex code) at the bottom of the palette. We then paste this code into the same box for other buttons and lines, and we’ll get the exact same background color for the elements. Get more tips and tricks for color here.
Note that buttons also have a “border color,” which you can also change or set to transparent to remove entirely. After finishing up with the buttons, we repeat the same process for the lines.
We’re just about finished with the front page. We’ve remixed a Hatch template of an infographic and now we’ve got a great landing page for a cafe!
Linking to other pages
Now that the core of the homepage is built, we need to make use of the button links. Click into the button to select it, and from the right sidebar you can set a destination for that button. Use links to an existing site and your social media pages or build your own pages in Hatch. You have two main options for creating your pages from here.
- Use the existing pages in the template. Check which button goes to which page and modify each individual page according to your needs.
- Delete all other pages other than the front one, and create new pages for each button from scratch.
If you want to use the existing template pages, start from the homepage and find which button goes to which page in the right sidebar style tab (shown below).
Then just pick that page in the drop down list and change it however you want! You can check other tutorials in the hatch blog for inspiration. If you instead want to add a page from scratch, you need to tap the “add a page” button at from the top left menu of the editor (shown below).
The new page will appear at the bottom of the objects list, and you can click on it to start editing.
When you’re done, remember to link your new page to whichever button you’ve chosen. Just as we did above, you can change the “link to” in the style tab. For more on multi-page Hatch sites, check out another blog post here.
If you’d like to start from this cafe page and remix it as you would a template, you can remix it from here. We can’t wait to see what you create!