New to Hatch? We’ve got your questions covered with this comprehensive getting started guide for beginners. It’s also for people looking for a refresher! This ultimate Hatch tour includes a step-by-step walkthrough of Hatch, as well as an index of all the basics.
Welcome to the grand primer of the entire Hatch editor. Learn how to share content, add links or uploads… and so much more. Learn some exciting things like creating a multi-page project! Feel free to save this page to use as a reference or check out the getting started Hatch tour below.
Table of Contents
How to make a multi-page Hatch project
Getting started: a step-by-step walkthrough of Hatch’s homepage
1. Navigate to https://hatch.one/
2. Under the “create links pages, event invites, and more” section on the homepage there’s a wide variety of templates to choose from.
3. Below templates, browse through the section entitled “Add interactivity, animation, and special effects”. This is a section showcasing projects featuring cool effects.
TIP: This is an easy way to explore more complex effects. Just open the project to look at how it works. We can deconstruct it, change images to make them our own, or just play around with the project and remix it.
4. Scrolling down the homepage shows the “community showcase”. These projects are featured Hatch webpages that we can look at for inspiration. Some projects are even remixable! Really like this section? For even more inspiration, tap on “community” in the navigation bar on top of the homepage.
5. In the Hatch homepage navigation bar, all of our projects live under “My Projects”.
5. Click “New Project” to get started on a new Hatch page.
6. A window with templates will pop up. Feel free to use one of these featured templates or click “blank page” to start from scratch.
Welcome to the editor: the step-by-step walkthrough of Hatch’s editor
Content panel
The content panel is on the left. There are libraries of content including photos, gifs, vectors, videos, and audio. This is also where we can upload content.
Kits
1. On the top of the content panel, we can find Kits.
2. Kits are filled with curated content that makes our creative process smoother.
3. This is an example of a kit. The getting started kit has easy-to-use features like buttons, basic animation, cool shape cutouts, and more.
Elements
Elements are prepackaged content for making our pages interactive and fun to play with.
Effects
Effects also exist under the content panel. These effects help make our content interactive. We can add them to an asset that’s selected via the content panel here. This left-hand panel is where Hatch’s list of effects exists. To change the properties of these effects, we need to go to the inspector.
TIP: If we’re hungry for some special effects that blow our viewers out of the water, check out these advanced tutorials on how to use falling effects like gravity and the camera pan.
Step-by-step walkthrough of uploading content to Hatch
Upload
1. Click “uploads” to begin uploading content.
TIP: On Hatch, we can upload more than just a photo. Try uploading a video, GIF, or audio file. Just make sure the file is under 30 MB.
2. Click “upload”.
3. Want to add the upload to our Hatch project? Under our library of uploads, simply click the asset to add it to our project. We can also drag and drop it to adjust its placement on our page.
Object tree
The object tree is a list of all the assets our project is using. Not only is it a great space to recount all the names of the files we’re using but it also separates the project by pages. This is especially helpful if we are working with a multipage project or website.
1. Click “objects” under the content panel to access the object tree. The tree will show up to the right of the content panel.
2. All of our assets will show up here, regardless of which page they’re on.
Multi-page Hatch site
1. To add a new page to our Hatch project, we click “page 1” at the top left-hand corner of our canvas. On desktop, it’s always to the right of the content panel.
2. This is where we can jump between different pages in our project. If “page1” is selected– then that’s the page that will be on the canvas for us to edit.
8. If we’re looking to add another page to our Hatch site, click “New Page”.
TIP: Duplicating pages is a great way to edit a multi-page project but still have images and backgrounds that are consistent throughout our site. This makes for a seamless user experience.
9. This is what a multi-page Hatch website looks like in the object tree.
TIP: If we want to direct people to a specific page in our project via URL, this is the format we will use. We will just add a #nameofthepage to the end of our link. To find out how to make a unique link to a Hatch project, check out this tutorial.
Step-by-step walkthrough of Hatch’s Inspector
The panel on the right is called the inspector. This is where we can change the properties for the individual asset that’s currently selected. This is the key part of what the inspector can do for us. It allows us to look deep into a specific asset’s properties and adjust them. Think of the content panel as where we go to find individual assets to add to our page, and the inspector as where the properties for each individual asset live.
We currently have the page itself selected. We can choose the background type and color, among other properties. This is where we can change the properties of the effects we add.
Tip: If we need to change colors, there are many ways to do this on Hatch. Our favorite color feature is the eyedropper tool. Check out how to use the eyedropper tool here. It’s especially helpful in matching colors in a project to keep them consistent.
Style
Change color
On Hatch, we have numerous ways to pick out colors and make awesome color combinations. These are the four ways to change the color of a background, text, or the background of a vector file.
We can manually browse the color spectrum and the color map above it. If we already know what color we need, we can use HEX codes. We can also use the HSL and RGB color systems. Lastly, one of our favorite ways to choose color is to use the eyedropper tool. This allows us to lift color from anywhere on our screen! Rad, right?
1. To change the background color, open up the “adjust” section in the inspector.
2. Under “style”–click the “background” to choose a color.
4. Following our intuition? Choose the hue in the spectrum of the color band.
5. Once the hue is chosen, the detailed color options pop up above. Choose the saturation and lightness on the color map.
TIP: Looking to use this color in future designs? Save the HEX code below!
6. If we already know our HEX code, we can enter it below.
7. If we already have content on our page or somewhere on our computer screens that we want to pull from– no need to fret! Eyedropper can pull any color from anywhere on our screen.
8. We also have the option to change color based on RGB: red, green, and blue. The last value is also alpha and it affects the opacity of the chosen color, just as it does in the HSL color system.
9. We have the option to change the color based on HSL: hue, saturation, and lightness. The fourth value is called the alpha and it affects the opacity of the chosen color.
Change opacity
To change the opacity of the asset selected, we can type in the percentage we want or choose a point on the slider. 100% refers to being fully opaque and 0% is fully transparent or invisible.
Step-by-step walkthrough of Hatch links
How to add links
We can make anything a link. That means photos, buttons, text, videos, gifs–you name it… they’re all linkable! Any of these assets can act as buttons to transfer our viewers to other sites or other parts of our project!
TIP: Buttons are a cool and expected way to send people to other sites and other pages in our Hatch projects. With the ability to make any photo, video, button, or image a link– we can add easter eggs to a page. Another unique way to use links is to make scavenger hunts across our Hatch pages.
1. To make any asset a link, let’s make sure to have our intended asset selected. We then go to the inspector panel on the right. Under “adjust”, click “add a link”.
2. Afterwards, just type in the website address!
3. Choose whether we want the link to go to an external site or another page within our project here.
Advanced link settings
The default behavior for links on Hatch is for it to open a new tab when clicked. If we want the link to replace the original tab, we need advanced link settings. The original tab refers to the tab on the browser where someone is currently viewing our project on.
1. To change how someone is redirected once clicking a link, we go into the advanced component of the “add a link” section. Simply click “advanced” to open these settings.
2. Click the dropdown list under “target” to toggle where someone is redirected. Opening the link in a new window or tab is the default setting. We can also change it so the link replaces the tab we’re already in.
Step-by-step walkthrough of Hatch’s effects
Add effects
1. To access effect properties, we go to the right-hand panel called the inspector. We click “Effects”.
2. To add an effect to this star asset, we click on “Effects” under the inspector panel.
3. Next, click “Add an effect”.
4. After clicking “add an effect”, the effects tab will open in the content panel. This makes it easier to browse special effects and discover new options to add to the asset we have selected.
Here we chose the “hover grow” effect. This means that on our live site, the asset will grow in size when someone’s cursor hovers over it.
5. Most effects only do their magic on a live site. This means we need to leave the editor by clicking the “preview” button.
Share a Hatch
We’ve made something awesome! Here’s the step-by-step guide to sharing our Hatch.
1. Once we’re ready to share our Hatch site with the world– or even a friend– we click “share”. This is in the top right-hand corner of the editor.
2. Click “copy link” and a unique link to this Hatch project will be added to our computer’s clipboard, ready to be sent!
3. To change the slug line of a URL, we click “settings”. What’s a slug line? It’s part of a URL after the .com, .org, or in this case– .one! The link will look something like hatch.one/@username/project-name
4. Click the “project URL” field to change the project name. This is what will end up at the end of our link.
5. To share our site with the Hatch community, just toggle “share on Hatch” like this. This will mean our project will show up in the gallery for other Hatch creators to check out!
6. If we want to be a source of inspiration for other Hatch creators and want to make our project remixable, toggle “allow remixing” to on.
7. Lastly, adding our custom thumbnail allows our preview links to come with customized images. Click “Drag or upload an image” to choose content from our desktop or mobile library. This image will also show up as the thumbnail in our profile and the Hatch gallery if we chose to share it there.
8. Once we’ve updated all these permissions and created a custom domain, we can get the link easily again by clicking “share”.
Getting started video tutorial
The getting started video series is also available here.