Thank you so much for purchasing this template. It means a lot! I have put a lot of effort into making sure this page includes all the information you need.
Follow the ‘Getting started’ steps below to get up and running. If you have any issues please don’t hesitate to get in touch. I hope you enjoy creating a beautiful site.
Thanks, Josh 🎉 Check out the table of contents to the right for easy navigation →
- Getting Started
- Installing the template
- Setup and customization
- Optional settings
- Enabling light/dark toggle
- Enabling database views/filter
- Disable page properties
- Full-width content
- Further customizations
- Creating extra large text
- Outline database pills
- Adding a button
- Dark mode logo color change
- Creating a lightbox image page
- Managing Databases
- Adding Analytics
- Adding forms to your site
- Support and Help
Installing the template
- Sign up with Super and Notion if you haven't already
- Click the duplicate button in the downloadable PDF to open the Notion page and then duplicate it to your own Notion workspace.
- Create a new site in Super using the Notion share URL of newly duplicated Notion page (learn how here)
- Next, click here to duplicate the Horizon theme presets to your Super account.
- Go into your new site and click into the
Designpage on the left sidebar panel.
- At the bottom, choose the
Horizon themethat we just duplicated.
- Next, go into your new site and click into the
Codepage on the left sidebar panel.
- In the 'Head' tab, copy and paste the code below into the code box.
<link href="https://joshmillgate.github.io/horizon/style.min.css" rel="stylesheet" />
Setup and customization
- Next in your Super site click into the
navbarpage. From here enable the Super navbar and customize it to your needs.
- Then in your Super site go into the
Footerpage, enable it and choose the style
cornersthen customize it until you are happy.
- Once you’ve edited the contents of your site, you can come back to the Navbar and Footer pages to add your page links.
Enabling light/dark toggle
This option allows you to enable a button in the navbar of your site to toggle color themes
- In your Super site in the
Enabling database views/filter
This option allows you to use the filter buttons to change between database views
- In your Super site in the
Disable page properties
This option allows you to show database properties at the top of every database page
- In your Super site in the
This option gives you the ability to make your page take up the full-width of the browser
- On your Notion page, click the
3 dotsat the top right of the page
- Toggle the
- Refresh your site in Super
That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.
Check out an example of all the blocks on this page
Creating extra large text
- Create a Heading 1 block and write your text
- Make it bold by selecting the text and clicking the
Outline database pills
To get the outline style database pills on select properties, choose the
light gray color
Adding a button
Adding a button is easy, simply write some text, make it bold and add a Link. Please note: buttons only work with a single text block on a line of it’s own. Refer to the main home page for reference on how the button is used.
Dark mode logo color change
To make your logo change on dark mode, view this post here for instructions.
Creating a lightbox image page
If you want to create lightbox images (like on this page) where you click the image to view it in a large view, then follow these steps:
- Open your site in Super and go to the
Pagespage in the sidebar
- On the page you want to add the lightbox on and then click the
three dots menuand click
edit custom code
- Then, open the
Bodytab and paste one of the following snippets
<script src="https://sites.super.so/snippets/lightbox-gallery.js"></script> <div class="lightbox-wrapper"> <div class="close-lightbox">×</div> <img class="lightbox-image" src=""> </div>
<script src="https://sites.super.so/snippets/lightbox.js"></script> <div class="lightbox-wrapper"> <div class="close-lightbox">×</div> <img class="lightbox-image" src=""> </div>
This template is designed in a way that leaves it to you to choose how you want to manage databases. The two most common ways to manage databases are:
- Have one main database for each content type e.g. ‘Posts’, ‘Projects’, and so on and then use database views and filters to choose which content to show
- Have a ‘master’ content database and keep everything in one place, and show content throughout your site using filters and properties like ‘content types’.
Neither approach is best, just play around in Notion and use what works best for you. Just make sure to tidy up and organise your page URLs in Super > Pages afterwards.
Adding analytics to your site is an incredible way to get more insight about your users and your brand. Google analytics is often cited as being an unfriendly option and so I would recommend using Fathom instead, they are a great company that do not compromise privacy for data.
Adding forms to your site
If you want to add forms to your site, you can use a third-party form system, I recommend Tally forms. Tally is a great tool and allows you to embed forms on a Notion page and connect any submissions with a database. It’s super easy to use and I would highly recommend.
You will need to know basic CSS code to make more changes, check out Super’s docs page for a reference on the CSS classes that Super uses.
Sure, drop me an email at firstname.lastname@example.org
Sure, use this code at checkout on any of my templates: QZODA3NA
Support and Help
If you have any issues with this template please get in touch via Twitter or by email at email@example.com