In this tutorial, we’ll create a simple landing page using Shaper – complete with a header, hero section, feature highlights, a call-to-action, and a footer. We’ll use Shaper’s visual editor (and even a bit of AI assistance) to get it done. By the end, you’ll have a multi-section page designed in Shaper, and all of it will be in production-ready code.

(This guide assumes you’re already familiar with the basics of the Shaper interface.)

​
1. Start a New Project (with AI Assist)

Create a new project in Shaper and name it something like “Landing Page Example.” This time, let’s use Shaper’s AI Prompt feature to scaffold the page. When creating the project, you’ll see an option to describe what you want to build. Enter a prompt such as: “A landing page with a top navigation header, a hero section with a signup button, three feature blocks, a call-to-action section, and a footer.” Confirm, and Shaper’s AI will generate an initial layout for you.

[Insert image of the generated landing page layout on the canvas, with sections for header, hero, features, CTA, and footer]

After a few moments, your canvas will populate with a basic landing page structure. You might see placeholder text like “Logo” in the header, “Hero Title” in the hero, and generic content in the features. We’ll refine each section in the next steps.

​
2. Customize the Header

The header (top navigation bar) likely contains a site name/logo and some menu links. Click on the header area to select it. In the Properties Panel, you can adjust its styling (for example, give it a solid background color that spans the top). Replace the placeholder logo text with your own brand name, or insert an image logo if you have one. Update the nav menu items by double-clicking each placeholder text (“Home”, “About”, etc.) and typing in the actual page names you want.

Make sure the header layout looks correct – it should probably stretch across the top of the page and have its items aligned (you can use the alignment and spacing controls in the Properties Panel to tweak this).

Pro Tip: If your header will be reused on multiple pages, consider converting it into a Component so you can drop the same header on other pages consistently. (See the Core Concepts & Glossary for more about components.)

​
3. Design the Hero Section

Next is the hero section (the large banner area under the header). It typically has a prominent title, some descriptive text, and a call-to-action button. Click on the hero title text and type in a catchy headline for your product or service. Do the same for any subheading text – keep it brief and engaging. If an image was included (like a background or illustration), you can replace it: select the image placeholder and use the image picker in the Properties Panel to upload or choose an image. If the AI didn’t include an image and you want one, you can drag an Image shape onto the hero section and add your desired image.

Now, style the hero section. Perhaps center the text and button, adjust the padding for some breathing room, and choose an appealing background color or image. Edit the call-to-action Button text (e.g. change “Button” to “Get Started” or “Sign Up”) by double-clicking it, and then style the button in the Properties Panel (set its fill color, corner radius, etc.). For consistency, you might want this button to use your brand’s primary color – consider defining that color as a design Token and applying it to the button’s color propertyfile-fspyg3vwn4rr9iysbzzdfp. This way, the same token can be reused for other elements (like other buttons or accent elements) to ensure a consistent color scheme.

​
4. Build the Features Section

Scroll down to the features section. The AI may have created several feature blocks (e.g. 3 columns, each with an icon and some text). These are great for highlighting key benefits or features of your product.

If Shaper’s AI created three feature blocks for you, edit each feature title and description by clicking into the text and typing your content. For any placeholder icons or images, replace them with appropriate visuals (you can upload small SVG icons or use emoji as a quick stand-in). Ensure each feature block has a consistent style – you can use the first one as a reference and style it (text size, font, icon size, etc.) using the Properties Panel, then apply the same styles to the others.

To keep things consistent and maintainable, you have a couple of options:

  • Duplicate and Edit: Style the first feature card, then duplicate it twice to create the second and third cards. Update the text/images in those duplicates. This ensures all feature cards have identical layout and styling.
  • Use Components: For an even more robust approach, turn the feature card into a Component (if you plan to reuse this pattern elsewhere). Create a component from the first card, then insert instances of that component for the other features. Edit the text in each instance (components can have interchangeable content slots). With this method, if you later adjust the component’s design (say, tweak spacing or color), all instances update together.

Make sure the feature section’s layout is correct. Commonly, feature cards are arranged in a row (if on desktop) or a column (on mobile). Shaper likely used a flexbox or grid layout for this section. You can select the container holding the feature cards and check its layout settings in the Properties Panel (e.g. a horizontal flex with space-between for three columns). Adjust responsive behavior if needed (such as stacking the columns on a narrower screen).

​
5. Add a Call-To-Action Section

After showcasing features, it’s good to have a call-to-action section to encourage the user’s next step. The AI prompt included a CTA section, but if it’s missing, you can create one. Add a new Section (which could be just a full-width frame) below the features section.

In this CTA section, write a short, motivating text. For example, “Ready to get started?” or “Interested in learning more?”. Then add a Button next to or below that text (depending on your design). Edit the button label to something like “Sign Up Free” or “Request a Demo”.

Design-wise, you might want the CTA section to stand out from the rest of the page. You can give it a different background color (e.g. a contrasting color or a subtle gradient) in the Properties Panel. Align the text and button in an appealing way (centered is a safe bet for a standalone CTA). As before, apply your primary color token to the CTA button for consistency with the hero button (if it’s a different style of button, that’s fine – just ensure it matches your overall theme).

If your CTA button should link somewhere, you can set an actual link or action. For now, since this is a static example, you might not have a destination URL; it’s okay to leave it as is. Just know that in Shaper, you can select the button and find an option to set its link or onClick behavior (which, being real code, could hook into a route or function).

Finally, customize the footer at the bottom of the page. The footer usually contains smaller text and links – for example, copyright info, social media icons, or additional navigation links.

Edit the placeholder text in the footer. If it says “© 2025 Your Company”, change it to your own company name and the current year. If there are placeholder links like “Privacy” or “Terms”, you can update those or remove them depending on what you want in your footer.

Footers often have a darker or subdued background. If that suits your design, give the footer a background color (and make sure the text color contrasts for readability). Align and space the elements nicely – for instance, you might center everything, or have a left-aligned logo with right-aligned links, depending on the style you want. Use the Properties Panel to adjust font sizes (footers text is usually small) and spacing.

Do a final pass: scroll through your entire landing page and check that each section flows into the next nicely. Tweak any spacing issues (you can select sections and adjust margin/padding) and ensure consistency (e.g., if all section headers should be the same size, make sure they are).

​
7. Preview and Publish

Your landing page is now complete – let’s see it in action. Click the Preview mode toggle to view the entire page as a user would see it. Scroll through and interact with any buttons or links. This is exactly how your page would behave if it were live.

Take a moment to appreciate that this isn’t just a mockup – it’s running real HTML/CSS/React code. You can even open the Code Panel to inspect the code for your page; you’ll see that Shaper has created clean components for each section.

Now, if you want to share this page or move it to production, you have a couple of options:

  • Two-Way Sync via GitHub: If you connected a Git repo earlier, simply commit and push your changes. Your landing page’s code (components, styles, assets) will be pushed to your repository. From there, your development team (or CI/CD pipeline) can deploy it like any other code project. Developers could also pull the repo, make code tweaks, and those changes would sync back into Shaper.
  • One-Click Deploy: Shaper also supports deploying directly to hosting (for example, instantly on Vercel) without leaving the app. Using the top bar, find the deploy option, choose a target (like Vercel or Netlify), and Shaper will build and publish your site for you. In a few seconds, you’ll get a live URL for your new landing page – no additional setup needed.

[Insert image of the completed landing page in preview mode, showing the header, hero, features, CTA, and footer sections]

Congratulations – you built a full landing page in Shaper! You’ve seen how to combine AI generation with manual design edits to quickly produce a real product interface. From here, you can continue refining the page, add more pages to your project, or integrate your own backend/data. Every design change you make is immediately reflected in code, so you’re always working on the real app.

Next: To deepen your understanding, head over to the Core Concepts & Glossary for definitions of key terms (like Shapes, Tokens, Components, and two-way sync) and more insights into how Shaper works behind the scenes.