- Setting up the Site on Super
- Replacing the links in the Category boxes
- SEO-related
- How to set favicon image
- How to edit meta-tags of the page
- How Tos
- How to create a new Prototype Page
- How to create a new Category Page
- How to create a new Tag section on Home Page
- How to create a new filter dropdown section
- How to sort and filter Prototypes + extra tips
- Gallery Databases
- Small size Gallery
- Medium size Gallery
- Large size Gallery
- Formatting page content
- How to create a large size text
- How to create a medium size text
- How to create a center-aligned full purple button
- How to create a left-aligned full purple button
- How to create a hollow purple button
- How to create a hidden block
- List of modified Notion blocks
- Purple colored quote block
- Purple background quote block
- Brown background quote block
- Brown colored text
- Orange colored text
- Yellow background callout block
- Orange background callout block
- Purple background callout block
- Gray background callout block
- Brown background toggle block
Setting up the Site on Super
- Duplicate this page to your workspace
- Make the duplicated workspace public, and copy the workspace link.
- Create a new Super site using the link
- Head over to the ‘Options’ page of the Super site, and enable
- Search Engine Indexing
- Page Properties
- Database Views
- Site Search
- Click Save
- Next, head over to the Code section and add the CSS code
Replacing the links in the Category boxes
SEO-related
How to set favicon image
- Go to your Super dashboard, and click on the ‘gear’ icon on your site’s card
- Next, click on ‘Options’
- Under ‘Site Favicon’, upload an image
How to edit meta-tags of the page
- Go to your Super dashboard, and click on the ‘gear’ icon on your site’s card
- Next, click on ‘Pages’
- Then, click the global icon to Edit SEO
How Tos
How to create a new Prototype Page
How to create a new Category Page
How to create a new Tag section on Home Page
How to create a new filter dropdown section
How to sort and filter Prototypes + extra tips
Gallery Databases
Small size Gallery
Purpose:
- To create a small gallery database to create equal-gapped buttons like on the header section of the home page.
Medium size Gallery
Purpose:
- To create the ‘I want to browse’ box section.
Large size Gallery
Purpose:
- To create the showcase card for the Prototype’s page as seen on the homepage.
Formatting page content
How to create a large size text
- Write a text block
- Select the whole text block
- Change the color of the text to brown
Example:
Since its launch in 2019, the ProtoPie community has grown into a diverse and supportive network of passionate digital prototypers. They explore new ideas. Inspire each other. Level up their skills.
How to create a medium size text
- Write a text block
- Select the whole text block
- Change the color of the text to orange
Example:
The ProtoPie Community on Discord is a great place to level up your prototyping skills. Take part in our beginner-friendly prototyping challenges and become a Pie Master. Or join a local group and connect with ProtoPie fans from your country.
How to create a center-aligned full purple button
- Create a purple colored quote block
- Type in the text content e.g. Join Now
- Add a link to the text by selecting the text, and paste link
Example:
Join Now
How to create a left-aligned full purple button
- Create a purple background quote block
- Type in the text content e.g. Join Now
- Add a link to the text by selecting the text, and paste link
Example:
Join Now
How to create a hollow purple button
- Create a brown colored background quote block
- Type in the text content e.g. Join ProtoPioneers
- Add a link to the text by selecting the text, and paste link
Example:
Join ProtoPioneers →
How to create a hidden block
Note:
- A hidden block is useful to hide blocks on the live page
How to:
- Create a toggle block with a brown background
Example:
‣
List of modified Notion blocks
Purple colored quote block
Purple colored quote block
- Button
Purple background quote block
Purple background quote block
- Button
Brown background quote block
Brown background quote block
- Button
Brown colored text
This is a brown colored text
- To create a large size text
Orange colored text
This is an orange colored text
- To create a medium size text
Yellow background callout block
Yellow background callout block
- To create the colored section at the bottom of the home page
Orange background callout block
Orange background callout block
- To create the colored section at the top of the home page
Purple background callout block
Purple background callout block
- To create the colored section in the categories pages
Gray background callout block
Gray background callout block
- To create a centered section, e.g. ‘I want to browse…’
Brown background toggle block
‣
- To create a hidden block on the live site (useful for notes etc)