Notion Website 製作小技巧

閱讀時間約 5 分鐘

為什麼我要單獨做一篇 Notion Site 的分享呢?

如果你已經閱讀了〈Notion 2024新功能 § 我覺得好用的五個功能〉,你會注意到我並沒有將 Notion Site 列入其中。那麼,為什麼要專門寫一篇分享呢?

首先,我認為這個「個人網站」與以往的分享頁面功能差異不大,具體細節後面會說明。

其次,從使用體驗來看,其他更新的功能對我的幫助更大。

最後,我更新了自己的小站頁面😁✨~~~現在只要點擊圖片按鈕,就能輕鬆跳轉到指定頁面啦 ✨~

raw-image

Notion Site 簡介

Notion 2.42 更新的核心內容之一是網站功能,透過「notion.site」,用戶可以:

  • 發布無限數量的網頁頁面。
  • 使用「notion.site」作為預設網域(當然也可自定義域名)。
  • 開啟「Search engine indexing」的設置,以便在搜尋引擎中被查詢到。
  • 若擁有 Plus 或更高級別帳號,還可享受個人化功能,如 GA 數據分析、圖標調整、頁面導航調整等進階選項。

我的觀察與反思

Notion Site 與 Share Page 差異

如前所述,Notion Site 確實新增了一些功能,但如果這些功能對你來說並不必要,那它基本上可以視為「分享頁面」。對於使用免費帳號的體驗來說,兩者並沒有太大的區別。因此,在學習製作個人頁面時,不需要給自己過多壓力。

響應式網頁 Responsive Web Design(RWD)

如果你不熟悉 RWD,可以參考 Google 的詳細教學:Learn Responsive Design。簡單來說,RWD 讓網站在不同設備上都有良好的瀏覽體驗。 那麼,Notion Site 是否具備這樣的設計?我的答案是:「有,而且相比過去已有顯著進步。」 在我們瀏覽他人的小站時,可能會發現有些提供了「電腦版」與「手機版」的模式,甚至會提醒使用者最好用電腦來操作,大螢幕的瀏覽效果通常會優於小螢幕。

許多人在設計模板時容易忽視螢幕尺寸差異的影響。例如,我日常使用 27 吋螢幕,因此設計時會將一個 Block 分成多個欄位,這樣在大螢幕上顯得緊湊且美觀,但在小螢幕上,可能會導致過多行文字或過小的圖片,從而影響體驗。這也是為什麼許多人覺得 Notion 的 RWD 做得不夠完善。特別是在 Column 設置方面,是否會有進一步更新目前尚不確定,但我認為解決這個問題的難度不小 😆。

那有什麼解決方案呢?以下是我個人的建議,如果有其他想法,歡迎與我分享!

  1. 雖然 Notion 支持多欄設置,但請謹慎使用,一般狀況建議不要超過三個欄位。
  2. 製作網站頁面時,盡量避免使用「Full width」。預設寬度的頁面在大部份的電腦上,通常閱讀體驗效果更好。
  3. 若一定要使用 Full width,建議將瀏覽器視窗縮小,這樣可以模擬不同設備閱覽的效果🤣。
  4. 如果你希望像 Pinterest 那樣呈現多欄圖牆,建議使用 Database 管理。資料庫會根據設備寬度調整顯示效果,雖然仍可能有些裁切問題,但整體效果會更好🥹。
紅框的部分特別明顯,在閱讀體驗上沒有很好。此外,當我們查看資料庫中的圖片時,可以發現它們能根據網頁寬度自動調整顯示效果。

紅框的部分特別明顯,在閱讀體驗上沒有很好。此外,當我們查看資料庫中的圖片時,可以發現它們能根據網頁寬度自動調整顯示效果。

終究是要研究 SEO

為了讓自己更容易被搜尋引擎找到,設計首頁時要特別注意「標題」。記得剛啟用這功能時,我的小站是能出現在 Google 搜尋結果中,但現在似乎又消失了🥹。這說明 SEO 是個需要持續研究和優化的領域,只有不斷跟進才能獲得良好效果。

如果你打算將 Notion 頁面作為個人網站,建議購買個人網域,這樣在測試更名時,就不會頻繁更改網址。

頁面路徑 Breadcrumbs

不知道大家有沒有注意到,在頁面的左上方會有「頁面路徑」。對於喜歡用資料庫管理的朋友來說,若在每個頁面有不同的權限開放時,記得特別要檢視上層頁面的開放狀態。

但這裡不是特別要講權限,而是想要強調,有些人會透過頁面路徑返回上一頁。因此如果你的資料庫頁面不在個人網頁內(例如個人網頁用的是 View 模式),建議在資料庫頁面的「描述」中添加返回首頁或上層頁面的連結,這會提升使用者體驗❤️~

長期使用心得

很早之前,我就建立了屬於自己的 Notion 小站。那時候我大量練習這個工具,覺得這個工具真的超級棒❤️,也特別想和大家分享我的成果 — 各式各樣的模板✨。既然這些模板都是透過 Notion 製作的,那就架設一個分享頁面來展示吧!

隨著時間推移,許多延伸的建站工具也陸續出現,例如 Super、Potion、Popsy…(其他架站工具請參考Notion 工具與資源),甚至透過 GitHub 串接 API 來建立部落格。我嘗試過幾個,但只有認真使用一段時間,後來就轉到了方格子,因為我實在懶得研究 SEO 規則……而且不得不承認,想要在各大搜尋引擎中獲得好的曝光度,「鈔能力」確實會有更顯著的效果。

目前,我的小站主要用來與 Notion 社群中的同好互動。如果你對我的小站有任何寶貴建議,歡迎通過各種方式與我聯繫,我看到後會盡快回覆。

個人網站頁面模板資源

說了這麼多,還是要來點乾貨的~如果你想要建立自己的 Notion 小站,但沒有靈感或不知道怎麼建立,該怎麼辦呢?當然是從模仿別人的模板開始呀!這裡提供一些資源的渠道,讓大家品香~當然,如果你想要參考我的小站也可以的😳~

raw-image

參考資料

103會員
72內容數
小小的細縫裡,夢想的小苗也會萌芽。 我想在餘生中,體會生命的感動和奧秘。 透過仔細觀察,將發現世界不同的美好。 歡迎你來到 ~ ♡ Chloe 的小世界 ♡
留言0
查看全部
發表第一個留言支持創作者!
Chloe小窩 的其他內容
回顧 2024 年至今 Notion 的重要更新,包括日曆整合、資料庫圖表視圖、其他功能和版面調整等。分享自己使用經驗和功能的實用性,幫助你更好地利用 Notion 的工具,提高工作效率。
分享如何使用 Notion 模板來管理和規劃旅行。 使用 Notion 模板 - 我的旅行手札,不僅可以整理旅行資料,還能迅速提取餐廳與景點的資訊,讓我們隨時能回憶美好的旅程!
分享今年夏天想要完成的小任務,包括參加夏日祭、季節限定賞花...,並提供數位工具管理專案任務,將任務完成率UP💪。
如何使用 Notion 模板來管理自己的保養、化妝記錄,並紀錄商品的使用體驗,建立自己的商品資料庫。
2024.04.03 在不斷的感受地脈的搖動,讓我想起以前曾經寫過一篇關於「準備防災包」的筆記,因此我就再次把這篇筆記的翻出來了,稍做點整理後,想說在方格子這裡也發布一下,我如何使用 Notion 整理自己的防災包清單。
回顧 2024 年至今 Notion 的重要更新,包括日曆整合、資料庫圖表視圖、其他功能和版面調整等。分享自己使用經驗和功能的實用性,幫助你更好地利用 Notion 的工具,提高工作效率。
分享如何使用 Notion 模板來管理和規劃旅行。 使用 Notion 模板 - 我的旅行手札,不僅可以整理旅行資料,還能迅速提取餐廳與景點的資訊,讓我們隨時能回憶美好的旅程!
分享今年夏天想要完成的小任務,包括參加夏日祭、季節限定賞花...,並提供數位工具管理專案任務,將任務完成率UP💪。
如何使用 Notion 模板來管理自己的保養、化妝記錄,並紀錄商品的使用體驗,建立自己的商品資料庫。
2024.04.03 在不斷的感受地脈的搖動,讓我想起以前曾經寫過一篇關於「準備防災包」的筆記,因此我就再次把這篇筆記的翻出來了,稍做點整理後,想說在方格子這裡也發布一下,我如何使用 Notion 整理自己的防災包清單。
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
前言與本文適合對象 本篇電子書是在幫目前已經有在經營的自媒體在更往上提升,所以不會教如何架設網站、主機操作與設定等。 如果真的想要自己架設網站的可以參考:網站帶路姬 想要找部落格主機代管的可以找:金城事務所 我自己的建議是架站跟主機選擇都不是創作者需要學習的,可以交給專業的服務商幫你
Thumbnail
在今日數位世界中,良好設計的網站已經成為必需品。 瞭解網站設計的重要性,特別是對於第一印象和信任度。 這篇文章提供了選擇網站設計服務的實用指南,包括網站設計的重要性,基礎知識和選擇服務提供者的提示。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
在當今的IG時代,多媒體內容已成為網頁設計不可或缺的一部分,它不僅豐富了用戶的互動體驗,還能顯著提升網站的吸引力和溝通效率。本文將探討多媒體內容對用戶體驗(UX)的影響、SEO最佳實踐與多媒體的整合方法,並提供成功整合多媒體的網站案例。
圖片大小 漂亮的圖片讓人賞心悅目,對網站美化也是一大加分項,但若是為了呈現自家商品或吸引人的圖片搭配文字,而塞進過量的圖片,導致網站本身太重跑得太慢,容易使客人失去耐性。|SEO工具 隨著時代的進步網路速度也與時俱進,但若網站本身太重,就算網路狀況再良好也無法馬上將網站載好,根據統計,大多數人的
Thumbnail
網站設計怎麼做?你會嗎?直接教你把握關鍵重點!從基礎網站設計方法開始,4 步學規劃網站佈局、網站設計必備要素、做好互動與動畫效果,直接用工具來打造精美又吸引人的網站設計,留住客戶其實很簡單!快跟我們一起掌握網站設計技巧,提升顧客轉化率!
個人網站架設怎麼做?用什麼工具才能簡單又便捷?為你整理好了全套攻略!詳細對比分析免費網站架設工具,讓你更快更好地選擇適合架站工具!跟著我們的自架網站教程,幾步就能學會網頁設計,自己製作個人網站也很簡單!還有多種個人網站模版範例!
Thumbnail
在現代社會中,網站已成為了一個不可或缺的工具。無論是個人、企業還是組織,都可以通過擁有一個網站來展示自己、宣傳產品或服務,甚至進行電子商務交易。然而,對於許多人來說,製作一個網站可能聽起來很複雜且困難。在本文中,我將向您介紹如何製作一個網站,並提供一些有用的技巧和工具,讓您可以輕鬆地開始建立自己的網
Thumbnail
建立一個優秀網站需要適當選擇並使用各種網頁素材。這些素材可包括圖片、圖示、音頻、視頻、字體和設計元素等。本篇文章詳細介紹了這些素材的重要性以及選擇和優化的建議。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
前言與本文適合對象 本篇電子書是在幫目前已經有在經營的自媒體在更往上提升,所以不會教如何架設網站、主機操作與設定等。 如果真的想要自己架設網站的可以參考:網站帶路姬 想要找部落格主機代管的可以找:金城事務所 我自己的建議是架站跟主機選擇都不是創作者需要學習的,可以交給專業的服務商幫你
Thumbnail
在今日數位世界中,良好設計的網站已經成為必需品。 瞭解網站設計的重要性,特別是對於第一印象和信任度。 這篇文章提供了選擇網站設計服務的實用指南,包括網站設計的重要性,基礎知識和選擇服務提供者的提示。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
在當今的IG時代,多媒體內容已成為網頁設計不可或缺的一部分,它不僅豐富了用戶的互動體驗,還能顯著提升網站的吸引力和溝通效率。本文將探討多媒體內容對用戶體驗(UX)的影響、SEO最佳實踐與多媒體的整合方法,並提供成功整合多媒體的網站案例。
圖片大小 漂亮的圖片讓人賞心悅目,對網站美化也是一大加分項,但若是為了呈現自家商品或吸引人的圖片搭配文字,而塞進過量的圖片,導致網站本身太重跑得太慢,容易使客人失去耐性。|SEO工具 隨著時代的進步網路速度也與時俱進,但若網站本身太重,就算網路狀況再良好也無法馬上將網站載好,根據統計,大多數人的
Thumbnail
網站設計怎麼做?你會嗎?直接教你把握關鍵重點!從基礎網站設計方法開始,4 步學規劃網站佈局、網站設計必備要素、做好互動與動畫效果,直接用工具來打造精美又吸引人的網站設計,留住客戶其實很簡單!快跟我們一起掌握網站設計技巧,提升顧客轉化率!
個人網站架設怎麼做?用什麼工具才能簡單又便捷?為你整理好了全套攻略!詳細對比分析免費網站架設工具,讓你更快更好地選擇適合架站工具!跟著我們的自架網站教程,幾步就能學會網頁設計,自己製作個人網站也很簡單!還有多種個人網站模版範例!
Thumbnail
在現代社會中,網站已成為了一個不可或缺的工具。無論是個人、企業還是組織,都可以通過擁有一個網站來展示自己、宣傳產品或服務,甚至進行電子商務交易。然而,對於許多人來說,製作一個網站可能聽起來很複雜且困難。在本文中,我將向您介紹如何製作一個網站,並提供一些有用的技巧和工具,讓您可以輕鬆地開始建立自己的網
Thumbnail
建立一個優秀網站需要適當選擇並使用各種網頁素材。這些素材可包括圖片、圖示、音頻、視頻、字體和設計元素等。本篇文章詳細介紹了這些素材的重要性以及選擇和優化的建議。