Shared @October 21, 2020
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 🙌
🔑 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.
- 🔑 An overview of the guide
- 🎯 Setting your landing page goals
- 🤔 Deciding on what to show on the landing page
- 🖋️ Adding some content
- 🎁 Ready-made landing page blocks
- 🌐 Publish your page to the web
- 🔢 Add analytics
- ✨Add styling
- 🍾 Add a pop-up Call-to-Action block
- 🚄 Check page speed and accessibility
- 📱Check mobile performance
- 🚀 Go beyond the landing page
- 🔨 Want to build your own Notion landing page?
- 💌 Liking this Notion #productivity content?
🎯 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.
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.
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.
🎁 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:
Mix and match the blocks and add your own section to make your own converting landing page in 10 minutes.
🌐 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:
- 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)
- 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.
- 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")
- 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)
- 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.
- 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:
✨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).
<style>
:root {
--color-text-default: #37352f;
--color-text-default-light: rgba(55,53,47,0.6);
--color-text-gray: #9b9a97;
--color-text-brown: #64473a;
--color-text-orange: #d9730d;
--color-text-yellow: #dfab01;
--color-text-green: #0f7b6c;
--color-text-blue: #0b6e99;
--color-text-purple: #6940a5;
--color-text-pink: #ad1a72;
--color-text-red: #e03e3e;
--color-bg-default: #fff;
--color-bg-gray: #ebeced;
--color-bg-brown: #e9e5e3;
--color-bg-orange: #faebdd;
--color-bg-yellow: #fbf3db;
--color-bg-green: #ddedea;
--color-bg-blue: #ddebf1;
--color-bg-purple: #eae4f2;
--color-bg-pink: #f4dfeb;
--color-bg-red: #fbe4e4;
--color-bg-gray-light: rgba(235,236,237,0.3);
--color-bg-brown-light: rgba(233,229,227,0.3);
--color-bg-orange-light: rgba(250,235,221,0.3);
--color-bg-yellow-light: rgba(251,243,219,0.3);
--color-bg-green-light: rgba(221,237,234,0.3);
--color-bg-blue-light: rgba(221,235,241,0.3);
--color-bg-purple-light: rgba(234,228,242,0.3);
--color-bg-pink-light: rgba(244,223,235,0.3);
--color-bg-red-light: rgba(251,228,228,0.3);
--color-pill-default: rgba(206,205,202,0.5);
--color-pill-gray: hsla(45,2%,60%,0.4);
--color-pill-brown: rgba(140,46,0,0.2);
--color-pill-orange: rgba(245,93,0,0.2);
--color-pill-yellow: rgba(233,168,0,0.2);
--color-pill-green: rgba(0,135,107,0.2);
--color-pill-blue: rgba(0,120,223,0.2);
--color-pill-purple: rgba(103,36,222,0.2);
--color-pill-pink: rgba(221,0,129,0.2);
--color-pill-red: rgba(255,0,26,0.2);
--color-ui-hover-bg: rgba(55,53,47,0.08);
}
</style>
🍾 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).
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.
🔨 Want to build your own Notion landing page?
💌 Liking this Notion #productivity content?
Optemize.
We write a blog called Digital Opsessions.
Every Tuesday, we send you a free email showcasing a modern productivity concept.
You’ll understand how to make use of it, why it matters, and how it can improve your work.