Guide for ProtoPie Community

General

How to add a new Ambassador card

  1. Go to
    Ambassadors
    page
  2. Create a new page
  3. Edit the page properties
    • Upload image under the ‘Cover image’ media property
    • To create a link:
      • Enter some text inside the ‘Link’ text property
      • Select the text
      • Paste a link to it
  4. To publish the card, select ‘Published’ under the Status select property

How to change text content of the navigation bar buttons

  1. Go to your Super dashboard, and click on the ‘gear’ icon on your site’s card
  2. Next, click on ‘Theme’
  3. Under ‘Custom Navbar’, select ‘Simple’
  4. Under Links, feel free to edit the text and link content for each button
    1. Note:

    2. The top most link is the hollow purple button
    3. The link below the top link is the full purple button

How to edit the ‘Join Now’ button link, so it scrolls to the ‘Community Channels’ section.

  1. Go to the ProtoPie community page.
  2. Head over to the ‘Join Now’ block:
image
  1. Change the https://protopie.super.site inside this link https://protopie.super.site/#block-8044822e0f694c3ca9fb0e688c0805d7 into your own custom domain.
  2. Copy the link and paste it to the ‘Join Now’ text.

Here’s an example:

Link:

https://protopie.super.site/#block-8044822e0f694c3ca9fb0e688c0805d7

Your custom domain link:

https://community.protopie.io

The newly changed link:

https://community.protopie.io/#block-8044822e0f694c3ca9fb0e688c0805d7

Copy the link and paste the new link to the ‘Join Now’ text.

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

Formatting page content

How to create a large size text

image
  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

image
  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 brown-colored gradient section

image
  • Create a callout block with a brown background
  • Add any content blocks within the callout block
  • Ignore the top left icon as it will not appear on the live site

Example:

👍
image

Join the ProtoPie Community

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.

What are you waiting for? Join the party.

Join Now

How to create a complementary brown-colored gradient section

image

Note:

  • Notice that the section from the Join Now button bleeds gradually into the Our community channels section

To get this:

  • Create a callout block with an orange background
  • Add any content blocks within the callout block
  • Ignore the top left icon as it will not appear on the live site

Example:

👍

Our community channels

How to create a purple-colored section

image
  • Create a callout block with a purple background
  • Add any content blocks within the callout block
  • Ignore the top left icon as it will not appear on the live site

Example:

👍

Want to become a ProtoPie Ambassador?

Click Apply Now to check the requirements and apply. We’ll be in touch shortly.

If you have any questions about our community or the ProtoPie Ambassadors program, reach out to us here.

Apply Now
image

Note:

  • To create a multi-column inside a callout block like the example above:
    • Create a new page within the callout block
    • Click the new page, and inside it, create and arrange blocks into columns
    • Head back to the page with the callout block
    • Select the new page block and turn it into text

How to create a center-aligned section

image

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

  • Large size text

Orange colored text

This is an orange colored text

  • Medium size text

Brown background callout block

👍
Brown background callout block
  • Colored section

Orange background callout block

👍
Orange background callout block
  • Colored section

Purple background callout block

👍
Purple background callout block
  • Colored section

Gray background callout block

👍
Gray background callout block
  • Centered section

Brown background toggle block

Brown background toggle block
  • Hidden block