Getting Started

1. Getting Started

Follow the steps listed below to create your website using this template.

1.1 Installation

To get started you need to duplicate the template into your own Notion workspace.

CLICK HERE to open the Notion page and then click Duplicate in the top right corner of the screen to add the page to your own workspace.

1.2 Create a Potion account

Head over to the Potion website to create your account.

Please note: you’ll need to upgrade to one of the paid plans to be able to apply this custom template.

1.3 Create your site

Click on the “Add New Site” button in the top right corner and fill in the fields to create your website:

Give your website a name.

Paste the link of the page you’ve duplicated in Step 1. Click on the Share button in the top right hand corner and copy the link from there.

Pick a subdomain (you can then change this to your custom domain later).

1.4 Apply the custom template

Click on the “Edit Page HTML” button and paste the code below in the text box.

Click on the “Update Preview” button and the “Save” button to save your changes.


<style>

/*--- RESET ---*/

.notion-title, 
.notion-header,
.notion-page-icon-inline,
.notion-hash-link,
.potion-header .button,
.notion-toggle {
  display: none!important;
}

/*--- THEME ---*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

:root {
    --bg-color: #F9FCFC;
    --fg-color: #212121;
}

.notion-page {
    width: 480px;
    min-height: 90vh;
    margin: 0!important;
    padding: 0 1rem!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Inter', sans-serif!important;
    font-weight: 700!important;
}

.notion {
    font-size: 16px;
}

/*--- AVATAR ---*/

.notion-asset-wrapper-image img {
    width: 150px!important;
    height: auto!important;
    border: .375rem solid #777777!important;
    border-radius: 50%!important;
    animation: card 2s ease-out;
}

/*--- TEXT ---*/

.notion-h, .notion-h-title {
    animation: card 2s ease-out;
}

.notion-h-title, .notion-h2 {
    margin: 0!important;
    font-size: 2rem!important;
}

.notion-h-title {
    font-family: 'Inter', sans-serif!important;
    font-weight: 700!important;
}

/*--- SOCIAL LINKS ---*/

.notion-callout {
    background-color: transparent;
    border-color: transparent!important;
    padding: 0!important;
    margin-top: 1rem!important;
    animation: socials 3s ease-out;
}

.notion-callout-text {
    margin: 0!important;
}

/*--- ANIMATIONS ---*/

@keyframes card {
    0% {
        opacity: 0;
        transform: translateY(-.5rem);
    }
    20% {
        opacity: 0;
        transform: translateY(-.5rem);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes socials {
    0% {
        opacity: 0;
        transform: translateY(-.5rem);
    }
    40% {
        opacity: 0;
        transform: translateY(-.5rem);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
}

</style>

1.5 Edit the content of your website

Go back to the page you’ve duplicated in your Notion workspace and update the text/links from there. All the changes you make on this page will automatically be visible on your website after refreshing.

2. Customisation

You can check out Potion’s guides to find out more how to customise your site further.

If you want to link your website to your own domain you can visit this guide here.

3. FAQ & Support

If you have any questions or need any help with updating your page please reach out to us

If you'd like to customise your page further or need a special custom template service please contact us!