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
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:
"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 👇👇)
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:
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
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
Disable "Sync URLs"
If the site has already sync'd, you'll need to manually delete the pages in Super, which will not affect your Notion database
Re-add the Notion page (the default link from the Notion share dialog) to Super with your desired pretty link
Voila!
Hopefully there will be a way to easily circumvent a database, but until that time this is the best option!
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
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
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!
Type: Portfolio
Type: Sometimes Feature is also a type which means it serves to the home page as a "Featured" project.
Display a featured project on the Home page
Status: Live - a project (or any entry) marked as Draft will not serve to a page.
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.
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
Latest Posts & Videos
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.
Status: Live - a post or video marked as Draft will not serve to this page or the home page.
All Posts or All Videos
Type: Post or Video
Status: Live
Note: Make sure to replace the text in the properties: Title, Excerpt, and Published Date so Post display correctly like this:
Media Recs Instructions
‣
Media Recs are served from the CONTENT DATABASE, based on a few properties:
Media Rec page
Type: Media
Status: Live
Title: Put the title of the piece of media
Excerpt: A 1-2 sentence summary of what it is and what you liked.
(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:
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:
Type: Download
Status: Live - a Download (or any entry) marked as Draft will not serve to a page.
Price: Make that money
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.
You can link to Gumroad or Flurly (or wherever) via the callout button below or through the super:link property field
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
Gallery images are from the Download content image NOT the Hero cover image
CRITICAL
YOU MUST CREATE THE FOLLOWING PRETTY LINKS IN SUPER. IF YOU WANT TO RENAME THE SLUGS, YOU NEED TO EDIT THE FULL CSS FILE:
