Welcome to the era of interactive website design, where you can unleash your creativity and build robust, interactive websites that captivate your audience. The key to creating awesome and fully developed websites is making the multipage experience flow seamlessly. To maximize these features for user engagement, we will need the basics of how to make a multipage Hatch website. This tutorial will show how to take advantage of these features to create immersive multipage experiences using our intuitive, no-code web builder.
How to make a multipage Hatch website with a home button
For portfolio websites, shops, and more
Imagine having a portfolio website with seamless navigation and a home button that instantly takes visitors back to the main page. Whether we’re showcasing artwork, products in an online shop, or a collection of articles, a multipage website design gives us ample flexibility. It allows us to organize our content into sections and easily guide users through our site.
With Hatch’s drag-and-drop interface and animation tools, we can effortlessly add hover effects, subtle animations, and floating elements, enhancing your portfolio’s visual appeal and providing a memorable user experience. There are tons of options for different interactive elements we can use— often one page isn’t enough to truly express ourselves. That’s where the multipage website comes in handy.
Take a walk through this portfolio website that user @skeir designed. Her site navigation utilizes a visual hallway to split up her pages. As we explore her interactive site, we’ll see how she filled it with her beautiful artwork and tons of exciting digital experiences. It’s on a multipage website, because she couldn’t possibly fit that all onto one page! And what would be the fun in that anyway?
Using a multipage website to craft an interactive narrative or game
With multipage website design, our websites can become immersive platforms for storytelling or even interactive games. Dividing our content across multiple pages allows us the ability to break stories down by page. We can gradually guide our visitors through a captivating narrative, unveiling information or game levels.
By strategically incorporating design animations, falling animations, and micro-interactions, we can transform a simple website into an interactive site that keeps your audience engaged and entertained. Interactivity on a portfolio website is cool. When we take digital interactivity even further, we’re adding gamification to our sites. We can go as far as we want to go in engaging our audience. Hatch has all the interactive elements and effects to allow for these digital mediums.
Take a look at how this interactive narrative breaks up pages to tie the experience together. Hit remix to explore how it works.
Dividing up content for improved user experience
A common pitfall in web design is overwhelming users with excessive information on a single page. Multipage website design solves this challenge by dividing content into separate pages, each focused on a specific topic. By employing page designs that are concise and well-structured, we can provide users with an easily digestible experience. With our no-code approach, we can effortlessly create landing pages that catch attention, optimize user interaction, and encourage exploration.
In the rapidly evolving landscape of online presence, interactive websites have become paramount in capturing and retaining visitors’ attention. With our no-code platform, you can bring your vision to life without the need for complex coding knowledge. Embrace the power of multipage website design, animated website design, and interactive features, and witness the transformation of your online presence. Let our web builder empower you to create immersive experiences that leave a lasting impression.
Let’s started in learning how to make multipage Hatch webpages. A lack of coding knowledge won’t stand in the way to our creativity anymore. We can unlock a world of possibilities, elevate user engagement, and position ourselves at the forefront of the interactive web design movement. Take the leap into the world of multipage website design and discover the true potential of your digital self expression.
How to make a multipage Hatch website
The step-by-step tutorial is below. Check out the video tutorial here.
1. Click “add a page”.
2. We will see this drop-down below. We then click “add a page” once more.
3. Now we have ‘page1’ and ‘page2’. We can change the names of these pages via the object tree. For how to access the object tree, check out this tutorial.
4. How do we allow viewers to navigate between pages now? Let’s add a link in ‘page1’ to send viewers to ‘page2’. To do this, we open the inspector to add a label so our viewers know how to navigate between our pages.
5. Click the “text” field to edit it. We will type “next page”.
6. To add the link so it sends viewers to the next page, we click the text and tap on the link icon. If this looks familiar– it is! It’s the same easy process as adding external links.
7. Instead of sending viewers to an external website, we’ll be using the “link to…” feature to send viewers to another page in this project. Let’s open the drop-down menu to access this.
8. Replace ‘a website’ with ‘a page in this project’. We then choose the intended page we want the button to link to.
9. To see our updated multipage project in action, let’s tap ‘preview’.
10. We’re the viewer now! Let’s click ‘next page’.
11. Woot! We made it to page 2! Congratulations on making a multipage website on Hatch.
How to make multipage Hatch websites with different page names
1. To change the page names, we must access the object tree. Learn more about the object tree here. This is how a multi-page Hatch website looks like in the object tree.
How to send viewers to specific pages in our websites
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.
In order to make a multipage website on Hatch, we need to understand the object tree. The object tree is vital in keeping our content organized. Without it, we’d be lost in the layers of beautiful content we’ve added.
What is the 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 our project by pages. This is especially helpful if we are working with a multipage 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 under here, regardless of which page they’re on.
