notion tips for beginners

notion tips for beginners

tiny notion tips

 
if you're new to notion, CSS or websites, i hope this helps! i am not a developer, so this guide is focused on people who know a tiny bit of code and a tiny bit about notion.

notion setup

 
first, make a new page! just create a new, basic page in notion. the workspace will say "private," but you're going to make it public. if you don't know what kind of page to make yet, there's a lot of templates you can copy and duplicate to your notion to get started.

create your pages

 
next, create the pages you want linked on the homepage and nest them under the homepage. you can create them on the page by typing / to pull up the menu, or click the + on the left menu to add a new page inside your main site.
 
if you aren't ready for a page to be linked yet, create the page outside of your website homepage. when you want to add it, just drag the page under your homepage in the left menu. the page link is placed at the very bottom of the page, so you will most likely need to click and drag the page link to reposition it.
 
a word of caution!
if you move pages around in notion, your block ids will change, and your site will break, and it won't be fun. see the notion block section below.

add your content

 
in notion, you write in markdown. you can also use the mouse to select text and style it.

inspect the page

 
you're going to inspect the page to find the elements and their class to apply styles to them. if you haven't done this before it may feel a little intimidating, but it also helps you understand the structure of your site and learn a bit of CSS!

hide your titles

 
since this is a website and not a notion page, you'll most likely want to hide the notion page titles, and add custom page titles instead. you can do that with:
.notion-title {
    display: none;

decide on your header

 
the header is the title of your main page everything else is nested under. you can hide it, or show it as i have here, cause i like the breadcrumb navigation. your header can be sticky (fixed as the page scrolls) or fixed, and it can have a unique background color.
}
.notion-header {
    background: #ffffff;
    position: sticky;
}
the potion roadmap includes an updated menu builder, so stay tuned for that!

fonts and typography

 
you can set the global default font in potion under the live editor. but you can also use custom fonts with @import and google fonts:
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:
wght@300;400&family=Inconsolata:wght@200&display=swap');

get additional heading styles with colors

 
beyond h1, h2 and h3, you can extend the ability to style text in notion by taking advantage of their built-in colors. then, apply the notion color you styled to the text you want changed.
}
.notion-yellow,
.notion-yellow_co {
    color: #FF7E47;
    font-size: .8em;
    text-transform: uppercase;
}

speaking of colors...

 
this one took me forever! to change the highlight over page links (not links to URLs), modify the background color "0" under :root to the color you want: -bg-color-0: #F4FAFF;
(if you don't want the color to span across the page width, drag a blank block next to it by hovering over a blank row, grabbing it, and moving it to the far right of the previous block.)

using .notion-block

 
you can specify changes to one particular page using notion block. cool! but... how?
 
here's a guide, but i hope some additional info will be helpful, too.
 
since notion is made in markdown, with blocks everywhere, every element on the page has its own block id.
 
they are a string of numbers that look like this: 29892df576da460d867777cd2fd3d7b5
with the selector, it looks like: .notion-block-29892df576da460d867777cd2fd3d7b5
 
start off with .notion-block and .notion-block-id. on the same line, list the element you want to style:
 
let's say you have a global setting to not display images, like this:
} 
.notion-asset-wrapper  {
    display: none;
}
but you want images displayed on one particular page, it would look like this:
}
.notion-block-id .notion-asset-wrapper {
    display: flex !important;
}
conversely, if you want to hide a specific image only, use the figure selector:
}
figure.notion-asset-wrapper.notion-asset-wrapper-image.notion-block-id {
    display: none !important; 
}
 
 

cursor

 
a fun modification is your cursor