⚡
Community Showcase

Guide for ProtoPie Community Showcase site

Setting up the Site on Super

  1. Duplicate this page to your workspace
  2. Make the duplicated workspace public, and copy the workspace link.
  3. Create a new Super site using the link
  4. Head over to the ‘Options’ page of the Super site, and enable
    • Search Engine Indexing
    • Page Properties
    • Database Views
    • Site Search
      • image
      image
  5. Click Save
  6. 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

  1. Go to your Super dashboard, and click on the ‘gear’ icon on your site’s card
  2. Next, click on ‘Options’
  3. Under ‘Site Favicon’, upload an image

How to edit meta-tags of the page

  1. Go to your Super dashboard, and click on the ‘gear’ icon on your site’s card
  2. Next, click on ‘Pages’
  3. Then, click the global icon to Edit SEO
    4. image

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

  1. Write a text block
  2. Select the whole text block
  3. 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

  1. Write a text block
  2. Select the whole text block
  3. 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

image
  1. Create a purple colored quote block
  2. Type in the text content e.g. Join Now
  3. 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

image
  1. Create a purple background quote block
  2. Type in the text content e.g. Join Now
  3. Add a link to the text by selecting the text, and paste link

Example:

Join Now

How to create a hollow purple button

image
  1. Create a brown colored background quote block
  2. Type in the text content e.g. Join ProtoPioneers
  3. 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:

‣
This is a hidden block

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

‣
Brown background toggle block
  • To create a hidden block on the live site (useful for notes etc)