Add links to Hatch pages
We can make anything a link. Photos, buttons, text, videos, gifs–you name it… they’re all linkable! Any of these assets can act as buttons. Using the links feature, we can transfer our viewers to other sites or even other pages of our project. In this tutorial, we’ll learn how to add links to Hatch pages and tap into advanced features.
Linked content on the web is ubiquitous. Imagine if the internet didn’t have buttons that sent us to different spots on the web or even different spots on the site. Surfing the web would be so difficult.
That’s why we have buttons! They’re the most obvious examples of how to use links. On Hatch, there are tons of pre-designed buttons. From interactive buttons to animated buttons, Hatch has endless possibilities for button customization. Many of them are available under a kit called “Button Styles”. Learn how to access kits in this tutorial.
In addition to buttons, we can also make any piece of content act like a button by making it a link. Want the photos above buttons to also send people to other pages? Easy. Want GIFs to act like little surprise easter eggs around a page? All that is possible with this one convenient feature.
We can also use the “Button Styles” kit as a source of inspiration for making our own buttons! If we’re looking to design from scratch– feel free to take a pre-configured button and change its settings in the inspector. For help on how to use the inspector, check out the inspector tour.
Different types of links
A link can be internal to our site, where it sends viewers to another page in our project. We probably see internal links on daily. Navigation bars are just a list of internally linked content, used to help people navigate the website they’re on.
A link can also be external to our site, where it sends our viewers another website on the internet. Different uses for this could be social media icons that link to our profiles on those websites. Alternatively, they could be sending our viewers to videos on youtube. Though if we’re sending a link to a YouTube or SoundCloud, feel free to use the embed feature.
Most creatives know the importance of a link-in-bio or links page. There are so many social media platforms and creator web spaces. With profiles and spaces scattered throughout the web, a links page is like a miniature homepage that links out to our profiles and work existing in the digital world. It usually is a precursor to a portfolio website or exists in addition to it. Many creatives, musicians, brands, and others use links pages for the bios of their social media accounts.
Below left is an example of a Hatch template anyone can use to create an elevated links page. These templates are already much more fun links page than the boring ones we’re all so tired of seeing. Conventional links pages will never be as cool as the ones we get to personalize. A template can be a convenient way to use our creative tool. It can also be a great starting point for our creative ideas to flourish. Check out more templates here.
Cool ways to use links to make unique web experiences
Another way we can utilize links is to link different Hatch projects together. In other words, using the link feature we can add a link to another project we’ve made on Hatch. That way all our Hatch work could be accessible through one Hatch project. This would be like making a Hatch project our very own corner of the web. It’d be like making a homepage or portal for the rest of our projects: our very own corner of the internet.
We could also use links to make a branching narrative. Below is a fun example of a digital branching narrative. To create this ourselves, we just add buttons with text that send to different pages of a project or even to different Hatch projects. Enter the first scene of this branching narrative here.
Buttons are a cool and expected way to send people to our intended links. 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. We can also make easter eggs where images lead to different pages in a project’s journey. Explore the scavenger hunt scene here, to see how this narrative unfurls using easter eggs.
What else can links do?
In the advanced section, we learn how to toggle multiple ways our link behaves. Below is the step-by-step guide, but we can also view the video tutorial below.
One of the most common ways to adjust a link is whether or not it opens a new window. Here we can toggle between opening a new tab or window or making it replace the current tab. Check out the advanced link tutorial here.
How to add links to Hatch pages
(the super easy way!)
1. First we click on the button or asset we’re looking to make a link.
2. Three functions pop up above the button. The first one is the 🔗 icon. That’s our super easy and convenient way to make a link!
3. Type our URL here and then click “add link”.
4. We can also add links to our Hatch pages via the inspector panel. This method allows us much more control over the advanced settings. For how to add links and toggle their advanced settings–check this part of the tutorial out.
Add and customize links
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.