操作教學|Notion & Super — 美化 Notion 頁面並轉變至網站呈現

更新於 發佈於 閱讀時間約 4 分鐘
© 窩DEMAA

© 窩DEMAA

嘿,大家好!你是不是也想知道,排除 Notion 內建的字體、顏色、大小、圖示,以及語法等功能,還有哪些方式可以讓 Notion 頁面更具美感?我想你也知道了!就是以「網站」頁面呈現。

在開始操作步驟之前,我們首先需要理解為何將美化過的 Notion 頁面轉變成網站逐漸變得極為重要。隨著數位時代的快速發展,我們越來越依賴於線上內容,其中包括知識分享、創意展示以及訊息傳遞等。因此,一個設計出色的 Notion 頁面能夠提升可用性和可讀性,使其他人更容易理解和參與你的內容。

總而言之,將 Notion 頁面轉化為網站能夠大幅提升其可訪問性,從而觸及更廣泛的受眾。這不僅可以讓你的內容曝光度更高,還能夠建立更緊密的用戶黏著度。本篇文章將介紹 Super,這個工具可以實現上述效果,讓我們繼續往下了解吧!

@digi.productivity|讓你的 Notion 頁面更像網站

@digi.productivity|讓你的 Notion 頁面更像網站

01 註冊 Super

首先,你需要前往 Super 的網站,並註冊一個帳號。這是免費的,只需提供基本的註冊資訊即可。此外,你也可以使用已經有的 Apple 和 Google 帳號註冊。
01 註冊 Super|#1

01 註冊 Super|#1

01 註冊 Super|#2

01 註冊 Super|#2

01 註冊 Super|#3

01 註冊 Super|#3


02 如何使用 Super

① 連結 Notion 帳號

註冊完成後,進入與 Notion 帳號連結的環節,並遵循以下幾個步驟,將頁面轉換為網站,就能幫助你快速輕鬆地創建專業外觀的網站。
02 如何使用 Super|① 連結 Notion 帳號|#1

02 如何使用 Super|① 連結 Notion 帳號|#1

02 如何使用 Super|① 連結 Notion 帳號|#2

02 如何使用 Super|① 連結 Notion 帳號|#2

02 如何使用 Super|① 連結 Notion 帳號|#3

02 如何使用 Super|① 連結 Notion 帳號|#3

② 選擇連結的頁面

你可以選擇要美化和轉變成網站的 Notion 頁面,或者自資料庫新增。

➜ 連結已經有的 Notion 頁面

02 如何使用 Super|② 選擇連結的頁面|連結已經有的 Notion 頁面|#1

02 如何使用 Super|② 選擇連結的頁面|連結已經有的 Notion 頁面|#1

02 如何使用 Super|② 選擇連結的頁面|連結已經有的 Notion 頁面|#2

02 如何使用 Super|② 選擇連結的頁面|連結已經有的 Notion 頁面|#2

➜ 自資料庫新增

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#1

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#1

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#2

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#2

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#3

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#3

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#4

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#4

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#5

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#5

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#6

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#6

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#7

02 如何使用 Super|② 選擇連結的頁面|自資料庫新增|#7


③ 設置頁面樣式

Super 頁面提供多種細部調整,包含網站名稱、重新連結 Notion 頁面、加入網站logo、設置網站語言、客製化連結名稱、調整網站顏色設置、導航欄調整、新增頁尾選單等。

02 如何使用 Super|③ 設置頁面樣式|#1

02 如何使用 Super|③ 設置頁面樣式|#1

02 如何使用 Super|③ 設置頁面樣式|#2

02 如何使用 Super|③ 設置頁面樣式|#2

02 如何使用 Super|③ 設置頁面樣式|#3

02 如何使用 Super|③ 設置頁面樣式|#3

02 如何使用 Super|③ 設置頁面樣式|#4

02 如何使用 Super|③ 設置頁面樣式|#4

02 如何使用 Super|③ 設置頁面樣式|#5

02 如何使用 Super|③ 設置頁面樣式|#5


03 網站完成囉

設置完成後,點擊預覽按鈕,就能瀏覽完成的頁面樣式。你也可以 點此 看本篇連結的 Notion文章,或者 點此 看本篇使用 Super 轉變為網頁的呈現。

03 網站完成囉|#1

03 網站完成囉|#1

03 網站完成囉|#

03 網站完成囉|#


04 適用情境

① 閱讀書籍/觀看影片

將你的閱讀筆記或影片心得的筆記轉換成美麗的網站,更易於分享和回顧。

② 收聽 Podcast

將 Podcast 的內容轉換成網站,添加個人評論和筆記,讓聽眾更深入了解。

③ 英文學習

記錄英文學習筆記、單詞表,讓學習變得更有條理,並通過 Super 轉變成方邊複習和預習的英文學習資源。

個人部落格

將你的 Notion 部落格頁面變成一個具有獨特風格的個人網站,可以吸引更多讀者。

教育平台

將教學內容整理在 Notion 中,知識不再碎片化,並通過 Super 轉變成易於瀏覽的教育網站。

專業網站

將你的 Notion 頁面轉變成專業的作品集或介紹頁面,提升個人或品牌形象。


今天的分享就到這邊啦,期待下一篇的分享,祝福大家都有個美好的一天!喜歡窩DEMAA(OS: 就是取自”我的媽啊“的諧音)的朋友,歡迎按讚追蹤分享,也歡迎加入 數位生產力 IG 和 FB 社團,就能在第一時間收到最新的生產力工具介紹。最後,Super 是一款可以更好地展示你創意和內容的工具,提供你為使用者帶來更好的網頁使用體驗。快來嘗試 Super,讓你的 Notion 頁面變得更加多元和有趣。​期待大家分享使用後的感想,我們下次見!

☸ 窩DEMAA

FBIGTiktokMatterPopdaily

© 窩DEMAA|數位生產力

© 窩DEMAA|數位生產力

avatar-img
271會員
104內容數
在多工處理已是日常的世代,具備提升效率的能力變得非常重要。我們相信只要瞭解如何使用數位工具,就能夠優化工作型態及學習模式,讓生活逐步精緻化。基於此信念,窩 World 包含的 Notion 的 Small Talk 以及數位生產力,將重點說明 Notion 的使用及數位工具的分享,讓大家能視個人需求建立專屬的知識地圖。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
窩 World 的其他內容
現今,知道如何學習並有效地紀錄和整理重要資訊,是每位新生代必備的技能。先前已經介紹了 Notion Web Clipper 和 Save to Notion 兩個工具,而在這篇文章中,我們將介紹 Klippper 網站,一款能夠幫助我們更精確地紀錄關鍵資訊,並將其整合進 Notion 的工具。
隨著生活和工作複雜度的提高,我們面臨著在多個平台和網站上收集資訊的挑戰。因此,掌握整理資訊的技巧,以更有序的方式進行管理和追蹤,是值得思考的議題。本篇文章,我們將分享 Save to Notion,讓你輕鬆將網頁內容分門別類地儲存進 Notion 頁面,有助於你建立一個高效且有組織性的資訊管理系統。
現今數位世代,資訊匯流如潮水般湧入,如何有效地整理、保存網頁上有用內容成為許多人的挑戰。如果你像我喜歡使用 Notion 來管理你的工作和生活,那麼 Notion Web Clipper 將會是你無法或缺的強大工具。它能夠將任何網頁內容輕鬆儲存至 Notion,讓你能更便捷地閱讀、註記、保存和分享。
資訊豐富的時代,資料呈現的方式變得愈發重要。先前我們已經分享了如何在 Notion 上使用 Mermaid 語法創建圓餅圖、時間軸、甘特圖、心智圖、流程圖和旅程圖。而在今天的文章中,我將帶你瞭解如何讓這些視覺圖表變得豐富多彩,讓你的資料不再是單調的黑白兩色。顏色主題共五種,讓我們繼續看下去!
在數位時代,表單製作對於工作來說至關重要。Google 表單、TypeForm 和 SurveyCake 都是廣泛使用的工具。然而,如果你需要簡單、高自由度且能與 Notion 整合的表單,那就該看看 Tally 。這是一款兼具美觀與實用的工具,提供多種類型模板,方便你即時產出表單,讓我們一起探索!
Notion 是一個功能強大且多功能的協作工具。透過在 Notion 上使用 Mermaid 語法繪製旅程圖,我們能夠以直觀且視覺化的方式呈現使用者的旅程和體驗。旅程圖是一種圖形表示方式,它能夠幫助我們更有效地瞭解使用者在整個旅程中的體驗和感受,從而有助於我們優化未來的任務和計劃。
現今,知道如何學習並有效地紀錄和整理重要資訊,是每位新生代必備的技能。先前已經介紹了 Notion Web Clipper 和 Save to Notion 兩個工具,而在這篇文章中,我們將介紹 Klippper 網站,一款能夠幫助我們更精確地紀錄關鍵資訊,並將其整合進 Notion 的工具。
隨著生活和工作複雜度的提高,我們面臨著在多個平台和網站上收集資訊的挑戰。因此,掌握整理資訊的技巧,以更有序的方式進行管理和追蹤,是值得思考的議題。本篇文章,我們將分享 Save to Notion,讓你輕鬆將網頁內容分門別類地儲存進 Notion 頁面,有助於你建立一個高效且有組織性的資訊管理系統。
現今數位世代,資訊匯流如潮水般湧入,如何有效地整理、保存網頁上有用內容成為許多人的挑戰。如果你像我喜歡使用 Notion 來管理你的工作和生活,那麼 Notion Web Clipper 將會是你無法或缺的強大工具。它能夠將任何網頁內容輕鬆儲存至 Notion,讓你能更便捷地閱讀、註記、保存和分享。
資訊豐富的時代,資料呈現的方式變得愈發重要。先前我們已經分享了如何在 Notion 上使用 Mermaid 語法創建圓餅圖、時間軸、甘特圖、心智圖、流程圖和旅程圖。而在今天的文章中,我將帶你瞭解如何讓這些視覺圖表變得豐富多彩,讓你的資料不再是單調的黑白兩色。顏色主題共五種,讓我們繼續看下去!
在數位時代,表單製作對於工作來說至關重要。Google 表單、TypeForm 和 SurveyCake 都是廣泛使用的工具。然而,如果你需要簡單、高自由度且能與 Notion 整合的表單,那就該看看 Tally 。這是一款兼具美觀與實用的工具,提供多種類型模板,方便你即時產出表單,讓我們一起探索!
Notion 是一個功能強大且多功能的協作工具。透過在 Notion 上使用 Mermaid 語法繪製旅程圖,我們能夠以直觀且視覺化的方式呈現使用者的旅程和體驗。旅程圖是一種圖形表示方式,它能夠幫助我們更有效地瞭解使用者在整個旅程中的體驗和感受,從而有助於我們優化未來的任務和計劃。
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
我發現很多人在使用 Notion 的一個煩惱跟痛點是因為自由度太高, 所以很容易找不到建立的頁面隨著新增功能側邊欄越來越長 其實 Notion 根本可以不用手動整理他呀! 你只需要在每個頁面新增一個快速跨頁面自動目錄
Thumbnail
Notion 的 icon 功能提供了豐富的顏文字跟icon圖示可以使用, 但在正式文件或網頁發布時用顏文字有點不恰當, icon的顏色的選擇又只有十種,這時候可能會想要用自己上傳的logo檔案 要如何簡單的讓頁面更加豐富呢? 除了頁面 Page 以外, 還有
Thumbnail
Notion 最近釋出了 Home(主頁)的功能,讓使用者可以依照自身需求「自定義」自己的首頁,這個主頁的概念也符合人生系統中的入口,今天就來介紹 Notion Home 的相關概念吧!
Thumbnail
經過前兩篇文章(Notion 是什麼?你適合使用 Notion 嗎、Notion 介面一覽及必備設定)的介紹,相信大家對 Notion 的功能及介面有了大致的瞭解,這次想要與大家分享的是我認為 Notion 中最具代表性的功能,Database。
Thumbnail
近日有些夥伴在詢問我要如何使用 Notion 的多工畫面以及分享頁面的相關設置等等,因此今天就來導覽一下 Notion 介面以及我認為有哪些必做的設定調整,當然免不了還有滿滿的快捷鍵教學,請大家一定要看到最後,才不會錯過!
Thumbnail
身為學生的你可能還在觀望要不要學 Notion,聽說很難但是好像功能又非常強大。今天就讓我用 5 分鐘告訴你你適不適合用 Notion,以及它的強大之處。
Thumbnail
身為數位工作者,我們常會使用多種生產力工具來輔助工作,Notion 和其中許多工具合作推出整合服務,讓你可以輕鬆把他們的檔案或功能嵌入 Notion,為你的 Notion 工作區增添一對翅膀。
Thumbnail
Notion 是個可以高度客製化的筆記、專案管理軟體,設計時,只要掌握幾個訣竅,就能助你事半功倍。歷經 8+ 個月專職製作 Notion 模板,加上長年使用 Notion 來輔助工作的經驗,/我發現幾個設計模板主頁(Dashboard)時,能夠有效提升效率的小技巧。
Thumbnail
Notion目前還沒有中文版,加上自由度高,一開始真的不知道要怎麼使用,也很難感受到他到底好用在哪?所以我整理了輕鬆開始的簡單的三步驟,照著這個順序開始,就能少走歪路,順利將Notion應用在工作生活上,變成你的得力助手!
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
我發現很多人在使用 Notion 的一個煩惱跟痛點是因為自由度太高, 所以很容易找不到建立的頁面隨著新增功能側邊欄越來越長 其實 Notion 根本可以不用手動整理他呀! 你只需要在每個頁面新增一個快速跨頁面自動目錄
Thumbnail
Notion 的 icon 功能提供了豐富的顏文字跟icon圖示可以使用, 但在正式文件或網頁發布時用顏文字有點不恰當, icon的顏色的選擇又只有十種,這時候可能會想要用自己上傳的logo檔案 要如何簡單的讓頁面更加豐富呢? 除了頁面 Page 以外, 還有
Thumbnail
Notion 最近釋出了 Home(主頁)的功能,讓使用者可以依照自身需求「自定義」自己的首頁,這個主頁的概念也符合人生系統中的入口,今天就來介紹 Notion Home 的相關概念吧!
Thumbnail
經過前兩篇文章(Notion 是什麼?你適合使用 Notion 嗎、Notion 介面一覽及必備設定)的介紹,相信大家對 Notion 的功能及介面有了大致的瞭解,這次想要與大家分享的是我認為 Notion 中最具代表性的功能,Database。
Thumbnail
近日有些夥伴在詢問我要如何使用 Notion 的多工畫面以及分享頁面的相關設置等等,因此今天就來導覽一下 Notion 介面以及我認為有哪些必做的設定調整,當然免不了還有滿滿的快捷鍵教學,請大家一定要看到最後,才不會錯過!
Thumbnail
身為學生的你可能還在觀望要不要學 Notion,聽說很難但是好像功能又非常強大。今天就讓我用 5 分鐘告訴你你適不適合用 Notion,以及它的強大之處。
Thumbnail
身為數位工作者,我們常會使用多種生產力工具來輔助工作,Notion 和其中許多工具合作推出整合服務,讓你可以輕鬆把他們的檔案或功能嵌入 Notion,為你的 Notion 工作區增添一對翅膀。
Thumbnail
Notion 是個可以高度客製化的筆記、專案管理軟體,設計時,只要掌握幾個訣竅,就能助你事半功倍。歷經 8+ 個月專職製作 Notion 模板,加上長年使用 Notion 來輔助工作的經驗,/我發現幾個設計模板主頁(Dashboard)時,能夠有效提升效率的小技巧。
Thumbnail
Notion目前還沒有中文版,加上自由度高,一開始真的不知道要怎麼使用,也很難感受到他到底好用在哪?所以我整理了輕鬆開始的簡單的三步驟,照著這個順序開始,就能少走歪路,順利將Notion應用在工作生活上,變成你的得力助手!