To customize the appearance of your Notion site, you can use a no-code style editor.

You can create your custom styles or use our presets (style templates).

Using style presets (style templates):

  1. Navigate to the site that you want to style up and click the «Edit» icon (pencil) on the right.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3744abfd-bd0f-4b8e-aa6d-77c82728d51e/Screen_Shot_2021-05-05_at_14.35.47.png

  2. Click the «Templates» and choose a template with styles you like.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6aa13a8f-6272-40cb-8ed6-c3cfbae44aa4/Screen_Shot_2021-05-05_at_14.39.08.png

  3. Click on the «Style Editor» and you will see all the styles applied to your website. You can edit it as you want.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/32d9e539-9b1a-48cc-a219-782aaea53ba0/Screen_Shot_2021-05-05_at_14.45.35.png

Creating your custom styles:

  1. Navigate to the site that you want to style up and click the «Edit» icon (pencil) on the right.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3744abfd-bd0f-4b8e-aa6d-77c82728d51e/Screen_Shot_2021-05-05_at_14.35.47.png

  2. Click on the «Style Editor» and then click on the «+ Add Style»

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e2ad0e4b-b4b7-4e6c-80a4-8b552cb7816f/Screen_Shot_2021-05-05_at_14.50.27.png

  3. Choose the Element you want to style and setup it.

    You can change font to the entire page:

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a4cddc4f-2bb0-411d-894a-95b1a46760d1/Screen_Shot_2021-05-05_at_14.56.33.png

    You can change the font, font size, and alignment for text with a colored background (ex. purple):

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5d07c3de-853f-47df-b856-07f297465fce/Screen_Shot_2021-05-05_at_15.00.40.png

    You can turn callout with a colored background (e. green) into a colored button with custom font, font size, and alignment:

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/40249532-b1b6-497b-b978-0cad8a2a9450/Screen_Shot_2021-05-05_at_15.03.43.png

    To change the background of text and callouts (in Notion), click on the dotted button on the left:

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/97440c81-c0ca-4f6e-9f72-c3af2fe011d5/Screen_Shot_2021-05-05_at_15.06.01.png

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4110d10c-3272-479c-b543-ade86d268660/Screen_Shot_2021-05-05_at_15.05.46.png

    Click on the «Color» menu item and choose a color for the background of the element:

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b26582ef-8741-4e22-9488-054634b3a8ff/Screen_Shot_2021-05-05_at_15.06.12.png

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6bd158bf-5b09-472e-b7df-82b10a35e8db/Screen_Shot_2021-05-05_at_15.06.33.png

That's it!

Powered by Fruition