Setup

1. Start here

First off, thank you for purchasing my template You! If you have questions as you setup the site, please don't hesitate to email me or DM me on Twitter. Let's do this!

Single Database

What's super cool about the You template and unlike any other templates out there... You can control all of your content from a SINGLE DATABASE. There aren't databases buried on individual pages.

If you're familiar with Notion or other database software this should be a breeze. If you're newer to the Notion and Super family, don't worry, there are more instructions below!

Single Notion Content Database
Single Notion Content Database

2. Setup Instructions

  • Duplicate this template to your own Notion workspace
  • Create your site on Super and use your newly created main page as the Notion URL
  • Now let's add "You" in your site's Super dashboard:
  • Notion page & Super dashboard
    Notion page & Super dashboard

Code

Sites > Settings (Gear Icon) > Code

"I don't wont to really worry about custom code" approach:

Under the Head tab, add the following code if you'd like to use existing CSS stylesheet:
Under the Body tab, add the following code for the footer & replace href with your social handles. Use the Super Icons as needed:
Under the CSS tab, add the following below. (Note: There are CSS "Options" that enable and disable elements on the page. If you want to rename pages, see the note below 👇👇)
icon
NOTE: If you want to rename your top level pages, you'll need to replace the id of pages with [id*=”yourprettyurl”] so if you rename Recommendations to Recipes, your CSS should look like this: [id*=”recipes”]

Give me the "advanced approach"...

All CSS from stylesheet if you don't want to use the provided one.
Custom Script that scrubs links to your Content directory so the average person can't find it. It's currently in "Head" tab as a script file ct.js. If you don't care about this, feel free to delete the ct.js file:

3. Simple Navbar setup

Use the Simple Navbar in Super "Themes"
Use the Simple Navbar in Super "Themes"

Sites > Settings (Gear Icon) > Themes > Custom Navbar

Simple Navbar Setup

1. Links

  • Add your desired links. The You template has 6 primary pages and you can add all 6 of those, only a few, or some of your own!

2. Logo

  • You doesn't use a Logo so leave that set as default. The Logo hasn't been styled in CSS
  • Set Font size to 16px

3. Style

  • Leave all the defaults alone, but my default height is 61px, and I don't have Visible on scroll? enabled
  • Add a CTA if you'd like

4. Set up your pages in Super

icon
Create the following pretty links for the pages: Home, About, Portfolio, Posts, Recommendations, Downloads in Super

To Sync or not to Sync... URLs

The You template relies on one central database to power your pages called Content. Based on the Status & Type properties on a database entry, you can display it on the relevant page. i.e. Post type filters to the Post page and will only display if status is Live.

Because of the way You is structured, this Content database is really easy to use control your content. However, be aware that you can use Sync URLs but all of your pages will have the link "yoursite/content/page-name". If you change the database name from "Content" to something else, the new slug will be "yoursite/[new database name]/page-name".

I recommend avoid displaying the database in the page slug so you can have your content as yoursite/page-name:

Create pretty pages for your top level and sub level pages
Create pretty pages for your top level and sub level pages
  1. Disable "Sync URLs"
  2. If the site has already sync'd, you'll need to manually delete the pages in Super, which will not affect your Notion database
  3. Re-add the Notion page (the default link from the Notion share dialog) to Super with your desired pretty link
  4. Voila!

icon
Hopefully there will be a way to easily circumvent a database, but until that time this is the best option!

5. The t-minus 10 checklist:

Checklist
Change the Social Links & Newsletter in the Custom Footer (if you're using it)
Add the links in the footer in the Content database (even if you're using the custom footer)
Update your favicon in Super
Add all the custom code to the Global Site Code header, body, and css

Instructions per page:

Globals Page

Notion has a recent(ish) feature that let's you sync blocks across all pages. The Globals page is where all of the synced blocks are housed. It's an easy way to control content if you needed to update a link or add some new content to multiple pages.

Use it for global page elements like backlinks, footers, menus, etc.

Global blocks in action in Notion
Global blocks in action in Notion

The You template leverages the gray and yellow callouts for custom link animation. Feel free to add your own global blocks to this page if you'd like!

The Globals page in the You template
The Globals page in the You template

Template Page

You can use Super's code editor to style elements on the template page if you'd like to.
  • All callouts except for the yellow and gray look like this:
🔥
Super cool

Portfolio Instructions

Portfolio pieces are served from the CONTENT DATABASE, based on a few properties:
Make a portfolio post!
Make a portfolio post!
  1. Type: Portfolio
  2. Type: Sometimes Feature is also a type which means it serves to the home page as a "Featured" project.
  3. Display a featured project on the Home page
    Display a featured project on the Home page
  4. Status: Live - a project (or any entry) marked as Draft will not serve to a page.
  5. Order: 1 to whatever - this gallery is sorted by Order which means the project with Order 1 is served first, then 2, and so on.
  6. icon
    NOTE: Gallery images are from the hero cover photo in a post. Don't forget to replace the placeholder image.

Post & Video Instructions

Latest Posts & Videos, All Posts, and All Videos are served from the CONTENT DATABASE, based on a few properties:
Post setup. Don't forget to fill in all fields
Post setup. Don't forget to fill in all fields

Latest Posts & Videos

  1. Type: Post or Video plus Feature As a Feature post or video, it also serves to the home page as a Latest Post or Latest Video. Consider only having 1-3 Feature at a time to avoid cluttering the page.
  2. Status: Live - a post or video marked as Draft will not serve to this page or the home page.

All Posts or All Videos

  1. Type: Post or Video
  2. Status: Live

icon
Note: Make sure to replace the text in the properties: Title, Excerpt, and Published Date so Post display correctly like this:
image

Media Recs Instructions

Media Recs are served from the CONTENT DATABASE, based on a few properties:
Media Rec page
Media Rec page
  1. Type: Media
  2. Status: Live
  3. Title: Put the title of the piece of media
  4. Excerpt: A 1-2 sentence summary of what it is and what you liked.
  5. (Optional) super:Link URL property - use this Notion property to attach an affiliate link (or link) to the content. You can comment out "pointer events" in the CSS options in the CSS tab so it looks like the below:
  6. image

  1. If you enable pointer-events and DO NOT have a link in the super:so url field, Super/Notion will open a blank page for the Media Recommendation. You can use that to summarize or provide your thoughts on the content. Note the below Media Recommendation gallery's photo is from the Post Content NOT the Post Cover.

Downloads Instructions

Downloads are served from the CONTENT DATABASE, based on a few properties:
  1. Type: Download
  2. Status: Live - a Download (or any entry) marked as Draft will not serve to a page.
  3. Price: Make that money
  4. Super:link - TBD whether or not you want to use this, but it's easiest if you have a Super:link set for product purchase. If it's a Gumroad product, the gumroad.js is in the <head> tab so the user clicks generates a purchase modal.
  5. image
  • You can link to Gumroad or Flurly (or wherever) via the callout button below or through the super:link property field
  • image
  • Again - If the super:link is active, your product's page won't be viewable and instead the user will be sent directly to the purchasing site. If you don't want that and want to use you product page to really "sell" your product, you can! Just use the "Buy Me" callout to insert a link to your product
  • icon
    Gallery images are from the Download content image NOT the Hero cover image

CRITICAL

icon
YOU MUST CREATE THE FOLLOWING PRETTY LINKS IN SUPER. IF YOU WANT TO RENAME THE SLUGS, YOU NEED TO EDIT THE FULL CSS FILE:
  • Home
  • About
  • Portfolio
  • Posts
  • Recommendations
  • Downloads

Help & Support

For any questions please reach out! eric.michael.day@gmail.com & @ericday