In the past few weeks at Prodify, we had a clear goal: to show that Notion-based sites can be just as stylish and attractive as any other site out there. We wanted to prove that with the right tools and design choices, you can make a Notion site look amazing and stand out.
In this whole blog, we will discuss how we transformed and ordinary looking Notion Page into a high quality website. We will follow through the process of building it in Notion, then adding it to Super.so and then taking it to next level 🚀
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.)
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 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.
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.
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.
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.
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.
💡 Quick Tip in Css: Always add Comments so that it is easy to correct and understand code
We’re Prodify.
If you have any questions, feel free to email us at [email protected]. We would love to connect with you ❤️