Create a landing page on High Level Part 1

Today, I’m excited to show you how to rebuild a website using Manus and the high-level builder. I’ll walk you through the process so you can recreate a website quickly and efficiently.

Getting Started with Manus

First things first, we need to access the high-level account and set up a new funnel. For this demo, I'll name it "Manus" to keep things organized and easy to find later.

1. Creating the Homepage

We'll start by designing the homepage. I’m calling it 'Home' and setting a path as 'slash home.' I opt to create from a blank page and craft a full section, duplicating until I have three sections. Using my stored brand colors, I differentiate each section with a dark color to easily identify them during the build process.

2. Building Global Sections

The first section is designated as the global header, which will be a sticky header—a section that stays fixed at the top of the page. Creating global sections like headers and footers is vital because they update across the entire website with a single change. Even though we only have one page now, this setup makes it easier to add pages in the future.

3. Structuring Content

Now, let’s dive into the content. For the header, I create columns, add a navigation menu, and adjust to ensure clarity against the dark background. Instead of a navigation menu, I use buttons to direct visitors to different sections on the same page.

4. Designing the Skeleton

I focus first on laying down the skeleton of the website: headers, sub-headlines, and paragraph text. We add images or video placeholders too. This step is about getting everything organized so I can tweak the design later.

5. Mobile Optimization

Before replicating, I always check the mobile view. Ensuring our site looks good on mobile devices is crucial, so I make necessary adjustments, like resizing text and aligning elements.

6. Adding Details and Animations

The next phase involves adding more detailed elements, like text, buttons, or images. We also use animations and effects to enhance user experience, but those come after the skeleton is complete.

7. Utilizing Sections for FAQs

FAQs are a versatile way to add information, so I create an FAQ section using duplicates of the primary template. This consistency helps in maintaining a uniform look and makes future adjustments easier.

The Finishing Touches

This tutorial shows you how to quickly get a site looking like our Manus example. We’ve covered the major sections, including FAQs and buttons leading to sections rather than pages.

By following these steps, not only can you speedily recreate a website, but you can also ensure it’s optimized for all devices. I hope you’ve enjoyed this training. Tomorrow, we'll finalize everything and focus on mobile adjustments, CSS effects, and more.

Join our community for open office hours or sign up on our website if you're interested in learning more. Thank you all so much for tuning in, and I’ll see you in our next session. Go make your vision a reality! Bye.