How I created my landing page with Notion

Notion is great for creating websites!

You can do a lot in Notion. You can do the things you'd expect such as write notes, organize a project, or create tables with data. Notion is so flexible that you can create really interesting layouts that are great for sites.

The drag and drop ability of Notion and all the different block types make it great for creating website content. And since you're probably like me and you already write everything in Notion, you might as well use it for your website too!

More is possible than you think

See this site below?👇 This is my landing page. Doesn't look like it was created with Notion but it was!

You have to use some special tools such as Potion (the tool that I created the landing page for). With this kind of tool you can add extra magic to your Notion pages that make it great for creating a website.

So without further ado, here is how I created my landing page with Notion.

Writing the copy

I believe it's best to write your copy first before designing a website. It's much better to fit your website design and layout to your copy rather than trying to fit your copy to a design. This is because the copy is what really does the selling.

I started out by making an outline of the value propositions. I really like Julian's landing page guide on how to do this. Then I slowly created these into actual copy.

Building the layout

With Notion you can drag and drop blocks to columns and place them how you'd like. It's really cool! Basically like a website builder 😅. I started to create the layout that I wanted, with an image and header above the fold.

A couple of interesting blocks to call out to show how they were created. This is the footer. 👇

It was created with three columns. H2 blocks at the top and then text links. One thing that is a little tedious currently is I had to copy these blocks for every page that I wanted to have the same footer. Maybe Potion will make footers better in the future. 😉

See this block of example sites? 👇

This is just an inline gallery view block. Makes for a really nice display of images. To make an image be the preview of a gallery, you have to add an image as one of the first blocks in that page or set it to preview the cover image.

Use all of the blocks available in Notion

There are many different kinds of blocks that Notion makes available. I used a good variety of these to make a unique and interesting website. Here are some of the important blocks that you will probably want to use.

Images

Text

Headers

Quotes

Callouts

Adding a sign up form

You can even use custom embeds! Notion includes multiple of these by default such as Google Maps, Typeforms, or tweets. Embeds make just about any custom html possible. I used this upscribe embed form below to handle early access sign ups for the service.

Adding a blog/guides

The blog portion is pretty simple. I used another inline gallery block to show each blog post.

Each blog post is then just a Notion page. I added content like normal. The title and emoji of each post becomes the title of the block in the gallery view.

Using underline and colors for a POP!

Sometimes you will want to bring visitors attention to certain phrases or words in your copy. Notion underlines and colors are a great way to do this.

Just highlight some text and a toolbar will appear with the options to bold, underline or add colors to the text.

Adding Custom Styles

Now this is the fun part. This is how I styled my website to look like it wasn't created with Notion at all! Potion has a cool feature where you can inject code snippets. You can add styles or even javascript! 🤯

I added styles to change the default background colors and make the width of the content wider than default Notion.

I created a button by first creating a callout block in Notion with some text and a link. Then I added custom css to make it look more like a button. Here is the before and after. 👇

Here is the code to create this call to action button. 👇

/* call to action button */
.notion-block-0863415b77f447859a3c562ce90b9383 {
    border-radius: 25px !important;
    background-color: #822BDD !important;
    color: white !important;
    width: 70% !important;
    justify-content: center !important;
    box-shadow: 0 10px 20px -10px #516Bbef !important;
}
.notion-block-0863415b77f447859a3c562ce90b9383 .notion-link {
    opacity: 1 !important;
    font-size: 20px !important;
}

Another thing I did with custom css was reposition images so they interacted with the text in cool ways.

To do this I had to make the image position absolute and then change its margin to move it away from its original block position.

Potion has a cool feature where each block has a unique class id. This allows you to select and style a specific block.

Adding live chat and analytics

I used Potion's snippet injection to add crisp for live chat and google analytics. All you have to do is copy the code and paste it in.

Adding a custom font

Last but not least, I added a custom font by choosing Lato from Potions font options. All the text in the website will then use that font.

Adding the Header

I added a site header with buttons and a call to action. This is quite different than the default breadcrumbs header that Notion has by default. This actually uses a Potion feature that is not available to everyone yet. It uses some custom code to create the header and link to subpages.

And thats it!

In the end I think the site ended up looking pretty good. It is probably the best website I have ever created. There is so much you can do with Notion! I don't think anyone would have guessed that it was created with Notion when taking a look at it. You can see the Notion version of the website here and you can see the end result here.