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).
Given the surge in popularity, I deciced to pen this comprehensive guide and create some duplicable blocks, so you can create your own Notion website in no time — enjoy 🙌
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.
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.
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.
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.
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.
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.
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.
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:
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).
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).
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.
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.
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.
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.