Thank you for purchasing this template!
This feature-rich Notion template was built to offer a robust pre-built website using Notion as a Content Management System. This template will work for any service which renders Notion pages into web pages but it is optimized to work with Super. It can be used as a blog, sales, portfolio, consulting or personal website.
Before proceeding it would be best if you logged into your Notion account (or create an account) and then duplicate the 
Website Dashboard into your personal Notion pages. Once that is complete then continue on!
This template consists of two parts:
Notion Website Template Instructions - Part 1: ‣
Notion Website Template Instructions - Part 2: ‣
Part 1: Website
Getting started:
- Go to the Website and click on the top right SHARE button.
- Turn SHARE TO WEB on and turn DUPLICATE off (unless you want your entire site duplicated!) Make sure to COPY the SHARE TO WEB URL for the next step. Refer to the image below if you need help!
- To get your first website up and running please link Website to your Super app. Do that by logging into your Super App and clicking DETAILS on the top left hand side of your screen. Then give your site a name and put the SHARE TO WEB URL toin the box below NOTION PAGE URL. Refer to the images below if you need help!
- Once that is done Website will function as the root or home folder of your Super site.
- Finally rename the Website page to your website name or URL. It’s all yours now!
Image
Make sure to turn DUPLICATE off and SEARCH ENGINE INDEXING on. Setting DUPLICATE off will ensure no one can duplicate your entire website. Setting SEARCH ENGINE INDEXING on will help you get noticed on search engines like Google.
I recommend keeping ALLOW EDITING off to prevent any Notion user from editing your pages.
It is up to you whether or not to enable ALLOW COMMENTS.
Image
The Website databases
The and Databases
Categories are groups of items that share similar characteristics. For example, a sports team may be divided into categories such as offense and defense. Each of these categories has its own unique set of roles and responsibilities. By categorizing items, it allows us to more easily analyze, compare, and contrast different items in an organized manner.
Tags are labels that are assigned to content items. They are often used to help organize content and make it easier to find specific items. For example, a blog post may be tagged with keywords such as “sports”, “team”, and “strategy”, allowing readers to more easily find similar content. Tags can also be used to group related content, making them useful for categorizing items in lieu of categories.
The main difference between categories and tags is that categories are typically used to group content into broader categories, while tags are used to label content with more specific keywords. Categories can be thought of as being more general, and tags as more specific. Categories are usually used to organize content in an organized manner, while tags are used to make it easier to find specific content. Additionally, categories are usually used to group related content, while tags are used to label content with specific keywords.
How site content is organized.
An easy way to remember how categories and tags are used is this mnemonic tool.
If a topic Is A something then it goes into .
🔠 = Categories (Is-A)
If a topic Has A something then it goes into .
🏷️ = Tags (Has-A)
The linked pages contain examples to help clarify this.
The and Databases
What are the difference between Pages and Posts?
are static content that are meant to provide information about a website. They are usually linked from the website's navigation menu and are often used for Contact, About Us, and other informational pages. Pages are typically not updated frequently and can be used to provide core information that visitors may need to know about your website.
are content that are meant to be timely and engaging. They are typically used in a blog or news section of a website, and are often updated regularly. Posts are used to engage visitors and provide fresh content, and they can be used to create a community around a website.
The Database
As you can see below we have a cool way of viewing all of the pages on our website. This lets us do cool things like create navigation widgets and gallery views of our web pages! There is one drawback of this system however. It’s going to require linking your pages manually in Super.
Using a database to store your allows you to create widgets and gallery views of your pages that cannot be created otherwise. The biggest drawback to using a database to house your is the URL structure. The default URL structure for the page would be https://www.example.com/pages/about.
The solution to this would be to manually link your .
It is important to realize that should be timeless. They are not intended to be changed on a regular basis. Pages are intended to be more permanent additions to your site. The majority of your site pages should be done through your various Website databases.
Pages Overview
The Pages
What is an About Page?
An About Page is a page on a website that typically provides information about the site, its creators, and other relevant details. It is often the first page visitors see when they arrive on a website, and it can be used to provide information about the company, its mission, its values, and more.
What is a Blog?
A blog is a type of website or part of a website that is regularly updated with content written in an informal or conversational style. Blogs typically include a variety of topics and often contain links to other websites. They are often used to share opinions, stories, and other information with readers.
What is a Contact Page?
A contact page is a web page on a website that provides visitors with a way to contact the business or individual behind the website. It typically includes a form for visitors to fill out, as well as contact information such as an email address or phone number.
What is a Portfolio Page?
A portfolio page is a web page that showcases a collection of work or projects. It typically includes images, descriptions, and links to view the work in more detail. For example, a portfolio page for a web developer might include examples of websites they have built, along with descriptions and links to those sites. It is a great way to showcase your work and demonstrate your skills to potential clients or employers.
What is a Products Page?
A Products Page is a page on a website that showcases and highlights products and services offered by the business. It typically includes images and descriptions of the products, as well as a way for visitors to
What is a Services Page?
A Services Page is a web page that highlights and showcases services offered by the business. It typically includes descriptions and images of the services, as well as a way for visitors to inquire about or book the services.
Pages vs Landing Pages
Pages are intended to be part of your overall website navigation as well as integrated into your Super Navbar.
A landing page is a stand-alone web page designed for a specific purpose or goal. You can use landing pages in marketing, advertising, and lead generation campaigns.
You can read more about the difference between these pages below.
What's the Difference Between Landing page vs Website?
Do you want to learn the difference between landing page vs website? Many small businesses wonder whether they should use a landing page or a full-fledged website to create an online presence. In this article, we'll show you the difference between landing page vs website, so you can decide which one makes sense for your business.
www.wpbeginner.com
The Database
Website posts are articles, stories, or other content that is published on a website. They can be used to inform, educate, engage, and entertain visitors to a website. Website posts are usually associated with a blog, but they can also be used on other parts of a website, such as in a news section or on the homepage. Website posts can also be used as part of an SEO strategy, as they are optimized for search engines.
Using a database to store your allows you to create widgets and gallery views that cannot be created otherwise. Unlike the database there is no reason to manually link your . It will provide the following URL structure:
would be https://www.example.com/posts/media-post.
If you would prefer it read blog or something else then you just need to rename in the Super App. Open the toggle below to learn more about doing that.
Image
This is where you change the name of any page in Super!
, , &
A product database on a website is a collection of digital information about physical products such as their features, prices, and availability. It is used to store all the necessary information about products that are available on the website, and make it easier for users to find the products they are looking for. The product database can be used to store data about products, such as descriptions, images, categories, and prices. It can also be used to store data about customer orders and payment information. This allows customers to easily find the products they are looking for and make purchases without having to enter their payment information each time.
A portfolio database on a website is a collection of digital information about a person or company's portfolio. This can include information about the person or company's achievements, projects, experience, skills, and more. It is used to store all the necessary information about the portfolio and make it easier for users to find the information they are looking for. The portfolio database can be used to store data about the portfolio such as descriptions, images, categories, and information. It can also be used to store data about customer orders and payment information. This allows customers to easily find the information they need about the portfolio and make decisions without having to enter their payment information each time.
A services database on a website is a collection of digital information about services offered by a person or company. This can include information about the services offered, the cost, and any other relevant details. It is used to store all the necessary information about the services so that customers can easily find the services they are looking for and make decisions without having to search through the website. The services database can be used to store data about services such as descriptions, images, categories, and prices. It can also be used to store data about customer orders and payment information. This allows customers to easily find the services they need and make purchases without having to enter their payment information each time.
A links database on a website is a collection of digital information about links that point to other websites. It is used to store all the necessary information about links, such as the URL, the source website, and a description of the link. It can also be used to store data about customer orders and payment information. This allows customers to easily find the links they are looking for and make decisions without having to search through the website. The links database can be used to store data about links such as descriptions, images, categories, and prices. It can also be used to store data about customer orders and payment information. This allows customers to easily find the links they need and make purchases without having to enter their payment information each time.
Part 2: Website Dashboard
The Website Dashboard is an area to work on your from once you have the website set up to your needs. It is intended to provide a central location to prepare information / templates / services / etc for your Website. Since this page is one layer above your Website nothing created here will show up on your live site.
This is where task managers, projects, contacts, and calendars that are intended for the management of Website should be. If it deals with administrating or organizing your website or any aspect of it, it should be placed here.
FYI
Dashboards mean different things to different people. The proper term for this Website Dashboard would actually be called a ‘Terminal’ based on Josh Redd’s post about Notion Hierarchies. Josh is a Certified Notion Consultant and is skilled in organizing projects and his explanations and tutorials heavily inspired me to build this Notion template. However to prevent any confusion and to keep the process familiar we will call it a Dashboard from here on out.
Let’s go over the different parts of the Website Dashboard.
Website
This is your actual website as covered above. Make sure that while the Website’s share settings are turned ON that the Website Dashboard’s share settings are turned OFF. The Website Dashboard is a private area for you to develop your site from.
Sitemap
What is a sitemap?
A sitemap is a list of the pages on a website. It is typically organized in hierarchical fashion and provides a roadmap of how the website is organized. It can be used to show visitors the structure of the website, as well as help search engine crawlers understand how to index the website. A sitemap can also provide additional information about the website, such as when it was last updated, the frequency of changes, and the importance of various pages.
This is a sitemap of your Website. It is made up of List Views of all of the databases to give in one easy to skim and accessible
The sitemap is built here in the Website Dashboard so that these database views will not show up on the live site. They are a way to organize and structure your website data in a way that makes it more accessible to the user as well as provide a way to create views that may not be intended to be seen on a live site.
Legend
This legend gives a brief overview of some of the emojis used throughout the Website Dashboard and what their intended use is.
Notion Shortcuts
Notion is not a typical productivity app. It can be used as a word processing suite, a productivity app, a calendar, a relational database, a content management system for a website and just about anything else you can imagine it as.
The easiest way to understand Notion is to look at as if it were a Lego building set.
Every Lego is a block.
A page is a block. A toggle is a block. A database is a block. An individual entry in a database is a block. A heading is a block. A video embed is a block. A table of contents is a block. A line of text is a block. A paragraph written on a single line is a block.
Everything is a block.
Each individual block can be changed into any other block.
A toggle with data underneath it can be changed into a page. When you open that page all of the data underneath the toggle will be what makes up the data on that page.
The Notion Shortcuts page aims to help increase your ability to use Notion effectively through the use of shortcuts and time-saving tricks.
The FOCUS Board
What is a Focus Board?
A focus board is a tool used to help prioritize tasks and focus on the most important tasks first. It usually consists of a physical or digital board that has a list of tasks or items that need to be completed. The tasks/items are then organized in order of priority. This helps to focus on the most important tasks first, and then move down the list as each task is completed. It also helps to ensure that tasks are not forgotten or overlooked. Focus boards can be used for both personal and professional productivity.
Below is a synced version of your FOCUS Board. If you make changes here it makes the changes on your main Website Dashboard. This board will hopefully help keep track of contacts, to dos, notes, calendar events, etc, connected with the administration and organization of your website.
The Page Builder
Page Builder
One of the most underused Notion block is the Template Block. You can access this block by typing /template. This is an example Page Builder. You can change any of thede Template Blocks by click on the right hand corner three dots OR right clicking and choosing CONFIGURE.
Customize these template blocks for use on your own Website.
Website Pages
This toggle gives access to a database view of your database but has been filtered so that only pages created on the current day will show up. Use this area to add new pages and landing pages you might need.
You can find them under the toggle next to the NEW button in the top right hand corner of your database.
Blog Posts
This toggle gives access to a database view of your database but has been filtered so that only pages created on the current day will show up. Use this area to add new blog posts.
Additional Layouts
Free Figma Resources
This toggle has some useful resources from the graphic design tool Figma.
Site Admin
Technology /
What is a tech stack?
A tech stack is a combination of different technologies that support the application or website. It can include programming languages, frameworks, web servers, databases, and other tools that are used together to develop an application or website. Each technology in the stack can be used for different purposes, such as front-end development, back-end development, and database management. The selection of the technologies in the stack can depend on the type of application or website being developed.
The exists to make keeping track of site integrations easier. It is made up of three parts:
- These site integrations require additional code input into your Super site.
- These are a list of some of the most popular sites which sell Notion templates. If you are interested in selling Notion templates this would be a great place to start learning where to do that.
- This area of the is set up for services / apps which you’ve integrated into your workflows, such as time trackers, e-commerce sites, scheduling apps, etc. This section can also be expanded upon to include SOPs (Standard Operating Procedures) that formalize how certain activities should be done if you are building your site with a team of people.
Theme Development
The information within this page may help with future customization of your own Super site.
Theme Matrix
Template Starter Kit
- is the basic code needed to start a custom CSS stylesheet.
- Template Starter (Created by ⚡Super) is an overview of the different types of blocks.
- Template Starter with .class selectors highlights the CSS .class selectors for each of the page elements listed in the Template Starter (Created by ⚡Super)
CSS Resources
Page Demos
Dashboard Backlog
Dashboard Backlog InstructionsA backlog is a list of all data that has accumulated over time. In technical circles it is used to describe work which needs to be done. All databases in Notion -should- be kept in a backlog since they are intended to be added to. This provides a single repository for users to find all of the databases.
To gain access to them from the terminal or other Notion places outside of your website simply create database views.
/linked /linkdata or /linkeddatabase are all ways to do that.
How to Keep Track of Your Tasks Using a Backlog in Notion
Keeping a daily to-do list is an excellent way to stay on top of your tasks, but you'll never feel like you're making progress if you continue to add items as they come up. You can prevent this from happening by using a backlog.
www.makeuseof.com
THE DATABASES LISTED HERE WILL NOT APPEAR ON THE SITE!
Nothing here needs to be changed. Create /linked database views instead.
Dashboard & Website Databases
Website Dashboard’s Databases
The Website Dashboard databases include the following:
Site Resources
Rolodex
People
Organizations
Calendar
Tasks
Locations
Forms
Theme Development
Notion Shortcuts
Website‘s Databases
Taxonomy
Business
Content