Instructions

Setting-up Process

To set up this template you will need to have an account on Notion and a paid account with Super.so

On Notion

  • Duplicate Visu Notion page HERE
  • Then, at the top right of the Notion page click Duplicate
  • If prompted, log in to Notion and choose a workspace
  • Then you should see it appear in your Notion Sidebar
image

Once you’ve got the template in your own Notion workspace you need to get the Notion Share URL so Super can transform it into a website.

  • Open the page you just duplicated in Notion
  • On the top right corner press Share > Toggle the Publish button > Copy web link

On Super

  • Create a new site and name it
  • Paste the link on the Notion Page URL section then press Continue.

you will find the design doesn't look the same as the template - don’t freak out, you haven't done anything wrong. Paste the code snippet underneath in the Site Settings > Code > Head Then press ‘Save’

<link href="https://evenbloom.github.io/Visu/public/css/main.css" rel="stylesheet"/>

Refresh the page and you’ll see your brand-new site!

If you do get stuck, there is a YouTube video on how to setup templates over HERE

Setting up your website the same way I have you’ll have to toggle a few things on/off in Super in the Options tab on Super’s toolbar on the left hand side.

Disable Page properties

By default, sites now have ‘page properties’ enabled by default for database pages. To disable find Options on Super’s toolbar on the left hand side > under Page properties make sure it's 'Disabled'.

Theme Toggle

Enable it if you want it shown on the Navbar.

To customize a template on Super.so to align with your brand's colors, fonts, layout, database, navigation, and footer, follow these step-by-step instructions:

Go to the Design tab on Super’s toolbar on the left hand side.

Typography

In the "Design" page of the site editor you can choose a font from a list of Google fonts to be used on your site. Here is mine.

image

Colors

A list of color themes can also be accessed from the "Design" page. The options include Notion's default and dark mode themes. You can choose and edit the colours of your website easily.

Layout

My Layout settings for you to copy.

image
image

With these steps, you can easily and effectively customize your Super.so template to match your brand identity and requirements. This will help you maintain a cohesive and professional online presence that aligns with your branding goals.

Full Width

You have the option of making the template Full width.

All you need to do is go on the top right corner on Notion > select the (…) > and toggle Full width

image

Database

If you are a Blogger, Designer, or Artist. You can easily categorize your posts or projects using Visu.

To start off you can see on the Notion page that I have categories (All, Exhibition, Collaborations, and Collectibles) you can easily set up your own database & categories by following these steps:

Press on the tab “All” to rename it to the category of your choice and easily add another category by pressing the + sign beside it (as shown below) > I added “Exhibitions” & “Collaborations”.

image

The way to filter the posts is by being Filtered by Category.

Each page shown in the Gallery has a Category and you can easily rename them as demonstrated below I changed ‘Exhibition’ to ‘Blog’ or you can just add a new category.

How to edit or add a Category

How you Filter by Category

If you want the images to be displayed like on the home page then make sure Fit Image is toggled on in the Layout section of the database, that the card size is Medium, and disable the Show database title

image

Callouts

In Notion
In Notion
In Super
In Super

Callouts are used for full-width sections as demonstrated above. To make your own, do as following:

Type “/” and scroll down the popup menu and select “Callout” > select the icon/emoji you want and add your content to it.

Another example demonstrates the different ways you can use callouts:

image

Super:Link

Super:Link in properties is to make the page an external link.

Add a URL property > Name it super:Link > Add your link.

image

make sure to make the super:link is shown by going to Properties > Find Super:link > select the 👁️ icon.

image

Have any questions?

Send your feedback or queries to hello@evenbloom.com

Testimonial:

Your feedback is greatly appreciated. Here→