Learn Step by Step How to Add Aesthetic UI Design to your Notion Website using Super.so

Author

Ali Asif

Date

August 8, 2024

The whole process will take you from……

Part 1: Setting up the Site in Notion:

First, we started by designing our page directly in Notion. We aimed to create a complete layout, including all the pages, databases, and elements we envisioned for our site. This meant carefully planning and adding each piece of content, from the main pages to the detailed databases that would display the information we wanted. We didn’t stop there— we also took the time to design the footer section, ensuring it looked exactly how we wanted. By the end of this process, we had a fully fleshed-out Notion-pages ready for the next steps in our transformation journey.

💡Tips for setting up in Notion

Footer Section : For greater customizability in our site’s footer, we started by designing it in Notion. To ensure consistency across all pages, we used a sync block. This approach allowed us to keep the footer uniform throughout the site while making it easier to manage and update.
Hiding Unnessecary Pages and DB from site : The initial pages and databases were displaying on the site, and they didn't look as polished as we wanted. To address this, we came up with a solution: we placed all these pages in a toggle at the end of the home page. By using custom CSS in Super.so, we were able to hide this toggle, which allowed us to keep the site looking clean and organized. (We’ll dive deeper into this process later in the blog.)

footer section

hide toggle

Part 2: Hosting it to Super.so:

Next, we hosted our site on Super.so. The process was straightforward: we added our Notion page share link and opted for the $16 plan. After setting up our custom domain, our site went live. But that’s when the real work began—enhancing and refining the UI to make it truly stand out.

Part 3: UI Customization

For UI customization, we leveraged Super.so’s Custom Code feature. With this feature, we could only add additional CSS or JavaScript, as HTML wasn't directly editable.

To efficiently target CSS and JavaScript for specific elements and blocks, we followed a streamlined workflow:

Load and Sync: Load your site on Super.so and save your changes.
Inspect the Code: Open your website in a browser and inspect the code.

Plus Tip 💡: Use the "Inspect Element" button or press Ctrl+Shift+Z in Chrome to activate this feature.

Identify Elements: Once the inspection tool is active, click on your element to view its block ID and class, which helps in targeting specific elements.

Our main goal was to make the site feel like a conventional website, despite being built on Notion. We focused on adding interactivity through animations and hover effects to create a dynamic user experience. We also aimed for a minimalist design, incorporating our color palette to maintain consistency and visual cohesion.

In Super.so, you have two options for adding custom code:

Global Code Section: Add code here to apply changes across every page on your site.
Page-Specific Code: Add code to target a specific page only.

Part 4 : Instresting Parts of our Site with thier Short Stories 🙂

1. Interactive Top Bar Element

the top bar element

The story behind our top bar is quite interesting. After launching our Notion-based E-Commerce OS, we entered a phase of reaching out to as many people as possible to share our free template. During this time, we noticed that many websites were using prominent bars at the top of their pages for promotions.

We thought, "Why not use this space to promote our own offering?" Inspired by this idea, we set out to create our own top bar.

We implemented it using the Custom Code Section by adding a bit of HTML and CSS. With this addition, our top bar was ready to go live, effectively capturing attention and promoting our template.

‣

The Code we added was:

2. Revamping the Footer Design with CSS

We wanted our footer to be both custom and conventional, so we started by designing it in Notion using images, links, and columns. While this setup looked good, it was missing a key element: social media icons. Instead of text links, we wanted visually engaging icons.

To solve this, we came up with a creative CSS solution:

Finding Icons: We used Icons8 to easily find and customize social media icons to match our theme colors.
Customizing Icons: Icons8 allowed us to adjust the icon colors to fit our theme, so we downloaded the PNG files.
Hosting Images: Since we couldn’t directly edit HTML in Super.so to add these images, we hosted the images online and obtained their direct links.
CSS Integration: We then used CSS (see the toggle below) to target the links with specific domain names and replace the text with our newly acquired icons.

This approach not only enhanced the footer's appearance but also ensured it was functional and aligned with our design vision.

footer element

‣

CSS Used

3. Transforming FAQ Appearance with CSS

We aimed to provide users with clear, concise FAQs in a visually appealing format. After experimenting with various designs, we settled on a grey-background toggle style. While this design looked good initially in Super.so, it didn’t fully meet our experience goals, so we decided to enhance it further with CSS.

Here’s what we did to refine the FAQ section:

Center Alignment: We centered all elements to create a balanced and symmetrical look.
Color Customization: We adjusted the colors to match our theme, ensuring a cohesive and connected design.
Toggle Positioning: We moved the toggle opener to the right to improve the overall design balance.
Button Transformation: We redesigned the toggle button with CSS, changing it from a triangle (‣) to a plus (+) icon for a cleaner look.
Sub-Toggle Animation: For sub-toggles, we transformed the plus (+) icon into a multiplication (×) icon upon expansion, enhancing the visual feedback.

These adjustments helped us achieve a more polished and user-friendly FAQ section.

‣

CSS Used

4. Creating a Stunning Template Gallery Page

At Prodify, our goal was to offer top-quality templates and make it easy for users to find the perfect one. We also wanted to ensure a smooth and enjoyable browsing experience. To achieve this, we implemented the following enhancements:

Enhanced Card Design: We improved the appearance of the template cards using CSS to make them visually appealing.
Direct Access: To simplify navigation, we added a "Get the Template" button over the link property, while hiding the link to streamline the user experience.
Interactive Animations: We added hover animations to make the browsing experience more interactive and engaging.

These updates were designed to help users easily find and enjoy our templates, enhancing their overall experience.

‣

CSS Used

5. Converting Notion Callouts into Stylish Buttons

We needed buttons in several places on our site. Initially, we used callouts in Notion with linked text to serve as buttons, but they didn’t look or function as buttons on the site.

To address this, we applied CSS to transform them into true buttons. We adjusted colors, font decorations, and borders to give them a more button-like appearance. Additionally, we made sure this button style remained consistent throughout the site for a cohesive user experience.