Post

Ultimate Guide to Notion Landing Pages

Hi everyone!
I'm new to Capiche, but Temirlan @optemization is a long-time enthusiast. We're working together on Optemization, helping teams boost productivity, structure knowledge and streamline workflows.

We just published a very detailed guide to Landing Pages made with Notion. You can read it below. Share any ideas, thoughts and comments here - will be glad to chat.

...We at Optemization know a thing or two about Notion landing pages. In fact, Tem published the first Notion website back in March 2020 (oh, how the world has changed).

Thanks in large to awesome projects like Super and Fruition, building websites on Notion became easier and faster.

Given the surge in popularity, I decided to pen this comprehensive guide and create some duplicable blocks, so you can create your own Notion website in no time β€” enjoy πŸ™Œ

https://twitter.com/optemization/status/1237576769571454976?s=20


πŸ”‘ An overview of the guide

Making a landing page with Notion is easy to the point of enjoyable β€” you don't need any coding skills at all. It's also flexible β€” you can mix, match, and style various blocks to get the look and feel needed to present your idea (or product) just the right way.

This guide will walk you through every step of setting up your landing with Notion, publishing it to the web, adding analytics and custom styling. As a cherry on top, we've also curated 10 ready-made components that you can use to get your Notion landing page out in no time.

🎯 Setting your landing page goals

Landing pages are the best way to "sell" something, to tell people about a specific product, service or a resource, and make them do a specific action.

When user does an action, this is called "conversion", and usually landing pages are fine-tuned to get as much conversions as possible. Conversions could be anything: from subscribing to a newsletter or joining a community, to buying a product or a service. Landing pages can be purely informational, too.

Think what's the purpose of your page, and what the user needs to do to contribute.

πŸ€” Deciding on what to show on the landing page

Defining your goal was the hard part β€” after you know what action you want the user to make, it's easy to define what to show on your landing.

If they're subscribing to a newsletter, tell what it's about. If the goal is to grow a community, tell about the people already there and show what's the purpose of this community. If you're selling a product, focus on the value it offers and on core functionality. Don't forget call-to-actions to let the user actually realize their interest when they're convinced.

Take a look at Demand Curve's landing page, for example.

32e404a1-908e-4e9d-a0ca-dcce9c1e5edf.webp

They're advertising their start-up program, focusing on what the program is about, how it's structured and why people learn valuable things during that program. It's all there β€” right on the first screen you can see the bullet points describing what the program is about (Growth Strategy, Ads, etc.).

Demand Curve's team also put a special emphasis on social proof β€” there's a ton of different testimonials and stories from people on the page.

Sometimes short landing pages that span 1-2 screens have higher conversion that longer ones, that span 3 and more screens. When you need your user to perform a simple action, like sharing their email, a short page works better. Short landings also make more sense for "warm" clients who already know what you are offering.

Longer landings with lots of information work better for "cold" clients, because they need more context. After you have an idea on what size is appropriate in your case, you can start experimenting with content.

πŸ–‹οΈ Adding some content

On a typical landing page, the information is arranged into standard "blocks" with valuable information: there's an eye-catching Hero image, simple text blocks describing your value proposition, a call-to-action that lets you collect interest, and a footer with terms.

Like on Refactoring Growth's landing page, you have an elaborate introduction, several sections with a value proposition (simple text) block and a picture or a graphic, a pricing block and a Call-to-Action.

381f703e-7f47-4032-8bcb-2105ba4ea2b0.webp

Optionally, you can add more useful stuff. It's a good idea to include social proof (which is very important for conversions and creates a sense of community around your value prop), juicy product shots or screenshots and a blog section linking to your posts somewhere else.

a9051f9d-917c-4013-bde2-6b219dbfaa5d.webp

🎁 Ready-made landing page blocks

We've assembled some common sections in Notion so you can borrow them for your website.

Just open the component you like below, click on the bookmark, then click "Duplicate" and drag your component's page into any page you like. Select "Turn into", then "text". You've got your landing page! Add some space between the blocks, change the content and delete the toggle. Then customize it as you like.

Here's a 53-second demo:

https://www.loom.com/share/6a59c9b94955421cb131822861356de8

Mix and match the blocks and add your own section to make your own converting landing page in 10 minutes.

Landing Page Components (alternatives inside!)

🌐 Publish your page to the web

It's easy to publish your page and make it accessible from a custom domain.
We like two services: Fruition is free and open-source, while Super offers more functionality and better performance.

Fruition has a very elaborate guide right on their home page, and a video tutorial, and Super gives a good onboarding when you sign up, leading you through all the necessary steps.

Here's a step-by-step to get you going on Super:

  1. Sign up, select a plan (essentially boils down to how many sites you need, keep in mind that one site can have many subpages, like any website on the Web)

  2. Select whether you want to make a static website out of your page, or go with a default Notion-based method.

First option offers great performance, but doesn't allow for filtered views and calendars on your page.

Default Notion page is relatively poor in terms of performance and SEO, but all Notion functionality will work and it's still enough for simple personal websites or pages where you don't need fast loading.

  1. Select your site name used in Super, a custom domain from a domain provider, and the URL to your original Notion page with the page set to public via the "Share" menu at the top ("Share" β†’ "Share to the Web")

  2. Add one or more pretty URLs if you need them. By default, all the sub-pages you add inside your home page will have ugly Notion URLs. You can change that by providing links to sub-pages you want to add slugs to and specifying the slug (e.g. optemization.com/preconceived)

  3. Add A and CNAME records to point Super to your domain name (Super provides these and you need to enter them in your domain provider's control panel). You can also provide an API Key if it's GoDaddy.

  4. Enter your site's description, attach an image and an icon for social sharing. You can also select a custom font for your page's contents at this point.

Voila! The site should now be public. You're awesome.

πŸ”’ Add analytics

With both Super and Fruition, you can inject your own Javascript into your page. This means you can use most of analytics solutions available.

For example, you can get your Fathom Analytics script to inject by going to Settings β†’ Site β†’ Site ID. Here's their own Fathom's instruction. Google Analytics also has a global site tag you can inject.

Both look like this (from Super's landing):

<script src="https://cdn.analytics.com"></script>

After you copy and paste the script into the right field in Super or with Fruition, it should should auto-magically start collecting your stats and you'll be able to see them in your analytics dashboard. These are statistics we measure for optemization.com:

https://app.usefathom.com/share/qcmwibef/optemization.com

✨Add styling

In theory, with Super or Fruition you can style practically any part of your page. One of the simple things to do is to change default Notion colors. To change any color on your page just add a script (the same way you add an analytics script) that replaces Notion's CSS values.

Super has a great mini-guide on doing that, below is the script with every default Notion color. Just replace the color you want to change with a HEX value (#000 for black, #fff for white) and delete the rest to change colors for a site hosted with Super (Fruition works the same way).

🍾 Add a pop-up Call-to-Action block

We've made an opinionated CTA block you can use to ask your user to sign up at some point when they engage with the page. This one is shown 3 seconds after the page is opened (change the "3000" value inside the window.onload to adjust the duration).

4ec1e65e-e001-4fb2-84f0-b9446ec5b07f.gif

Simply include the following script in your Super or Fruition "Inject scripts" section, similar to how you included analytics:

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
// Thanks Sweetalert for the alert! 
<script>
window.onload = () => {
  setTimeout(() => swal({
  title: "Subscribe to get spam in your inbox",
  button: false, 
  content: {
    element: "iframe",
    attributes: {
      id: "PromptForm",
      title: "ChiliPepper Form",
      frameBorder: 0,
      height: 200,
      scrolling: "no",
      src: "Insert your forms' URL here"
    },
  },
}), 3000);
}
</script>
<style>
  @font-face {
      font-family: "San Francisco";
      src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff");
    }</style>
<style>
.swal-title {
  color: #37352f;
  font-family: "San Francisco";
  font-weight: 600;
  padding: 25px 25px 25px 25px;
}
</style>

Don't forget to replace the "Insert your forms' URL here" with your ChiliPepper form URL (or any other embeddable form). Try experimenting with styling: you can change "frameborder", "height", "scrolling" and "color", "font-family", "font-weight", "padding" properties to change the way your form looks.

πŸš„ Check page speed and accessibility

There are tools out there like Google Lighthouse that you can use to generate reports about your page's load speed and possible accessibility issues. Just open up Chrome (or download it, if you don't have it yet), go to your website, open up Developer Tools by pressing Command+Option+C on Mac or Control+Shift+C on Windows and select the "Audits" tab. Check out metrics you want to measure and click "Generate report".

Lighthouse will measure several metrics for your website and show a score. In general, if all the metrics are green, you're good. If they are yellow or red, you might want to optimize. Lighthouse shows exact tips on how to do that.

When making a landing page with Super's default option, or with Fruition, expect comparatively low performance. These options are better suited for personal websites or websites that don't need fast pages speeds.

You'll get a huge performance boost if you use Super Static or other solutions that turn Notion content into static pages. This is a game-changer for landing pages, since they rely on fast page load for conversions.

πŸ“±Check mobile performance

The web is mobile-first these days, and lots of people will access your page from mobile devices. So you'd want to check how your landing page looks on mobile. You can just open up a version you published to the web from your smartphone.

Alternatively, use Developer Tools in a browser like Chrome or Firefox (see instruction below), to view a mobile version from your desktop device.

Make sure that everything is readable, that you can reach all the interactive elements on the page, and that general experience is smooth and you don't bump into any obstacles while going through the page. Watch out for multi-column layouts and calendar views β€” these are the things most likely to look bad on mobile.

Lighthouse also has some statistics specifically for mobile devices you can check by generating a Mobile report.

πŸš€ Go beyond the landing page

Unlike other tools used for landing pages, Notion doesn't doom your page to a standalone existence, and this is it's main advantage. A Notion landing page can display or lead to any data from your workspace via linked database views and backlinks.

That means you can work with the data and store it in a Notion workspace, and then quickly make landing pages demonstrating that data to the public.

You can even set up the landing to update automatically when you make changes (e.g. add more details or introduce new features) in other parts of your Notion space.


Originally published at
https://optemization.com/notion-landing-page-guide

Share
maguay's avatar
2 years ago

Hey @ValentineErokh1, this is super awesomeβ€”thanks for sharing and welcome to the community!

What's the most detailed, complicated landing page you've built in Notion so far?

And what do you find the main advantage of hacking Notion into a landing page tool, versus say using something like Webflow?

3 points
ValentineErokh1's avatar
@ValentineErokh1 (replying to @maguay )
2 years ago

Hi @maguay , my pleasure!

Latest baby that I'm proud of is https://optemization.com/websites-on-notion -- shipped it about the same time as the guide. It was actually a teamwork with @optemization , and is almost perfect. The thing I plan to enhance is accessibility -- currently pricing pictures, I'm researching how Notion works with screen readers, potentially we'll need an alt text describing that pricing. But it's great.

About the advantages, I've really bought into using Notion for websites because Notion is like an operating system -- and why would you need to leave your OS to set up a website? Besides, when you make something with a Webflow or with code, if it doesn't have a good CMS it's almost certain, in most cases, to get abandoned and not have regular content updates -- since you need to update the content on a dedicated platform, e.g. Webflow. I mean, it's still easy to abandon a page in Notion, but since it's in your workspace the chances you eventually discover it are higher.

3 points
maguay's avatar
@maguay (replying to @ValentineErokh1 )
2 years ago

That's a fascinating way to think about Notionβ€”and it feels directionally correct. I'm working on an essay about software lock-in, and in researching it's hit me how nearly impossibly it would be to fully migrate one's data away from Notion especially since it covers in one app what so many other tools do. Once we get that Notion API, the sky's the limit.

Great point on maintenance; keeping your website in Notion would absolutely simplify that!

2 points
What's the best video conferencing app for internal discussions?

Three major considerations I have been using to evaluate the plethora of options available: 1. Effortless/non-intrusive: It shouldn't feel like a video call 2. Price: As this app would be complime...

Confluence alternatives for wiki/knowledge bases?

I've been looking to try something new for knowledge/documentation storage for a little while now. Confluence has always been there, but I find it to be relativly limited for the cost and additiona...

How do you manage your chat inbox?

Hey guys, first post here. As part of my work, I have to deal with and respond to a lot of incoming messages from different chats: Linkedin/WhatsApp/Signal/IG. I try to use Unreads/Archive features...

The community for power users.