老讀者可能有發現，前陣子我把作品集從 https://chris-chen.carrd.co/ 搬到 notion 了，沒有什麼特別的原因，也不是因為他不好用，只是我是個免費仔，隨著作品越來越多，Carrd 免費的版面設計比較不符合我的需求。
可能是我太久沒用 notion，沒有想到 notion 現在居然可以直接發佈成網站，這讓我想到之前在網路上看到的一句話
做產品最怕的就是，你的產品只是別人的功能
但為什麼我還是很推薦 Carrd 呢？首先他真的很便宜，最便宜的方案一年9美金，約260台幣，美金現在來到史上最低價，又更便宜了（?）
什麼樣的人不適合用 Carrd？
完全看不懂英文的人，看到英文會怕的人。因為 Carrd 目前沒有中文化。
但如果你有基本的前端工程背景，或者你本身是設計師，我想 Carrd 這種程度的前端語言是完全沒問題的。
為什麼選擇 Carrd？
Carrd 的最大特色是 no code building，而且相對好上手，Carrd 更專注於製作一頁式網站，尤其適合用於個人作品展示、線上履歷、簡單的產品介紹，或活動宣傳網頁。此外，Carrd 支援 no code）的方式快速打造精美的 Landing Page，讓不擅長程式的使用者也能輕鬆上手。
Carrd 付費方案比較
可以直接去網站看比較清楚，實際上 pro standard 就非常非常夠用了，剩下的功能不如去用其他的電商平台或者 WordPress。
Carrd 適合什麼樣的人？
Carrd 最適合設計師、藝術家、攝影師等人快速在不需要寫程式碼的情況下個人網頁。雖然 Carrd 的介面是英文的，但只要稍微記住幾個詞，其實操作上並不困難。
Carrd 介面中文對照
以下提供幾個 Carrd 常用介面的中文對照：
- Dashboard：控制面板
- New Site：新建網站
- Templates：模板
- Publish：發布
- Edit：編輯
- Section：區段（用於區分網站內的不同區域，例如首頁區域、關於我區域等，可以用區段模擬不同獨立網頁）
- Container：容器（用來組織和管理網站內不同元件的區塊，幫助版面排版）
- Text：文字
- Image：圖片
- Button：按鈕
- Gallery：相片集
- Form：表單
- Embed：嵌入
- Background：背景
- Animation：動畫
- Settings：設定
- Domain：網域
Carrd 核心功能
Carrd 提供幾個重要的核心功能：
- Section（區段）：用於劃分網站內不同的內容區域，例如首頁區域、作品展示區、關於我區等。每個區段可以有獨立的背景與布局。
- Container（容器）：容器可以包含並組織多個元素，例如文字、圖片或按鈕，協助你更有效地管理與排版網頁內容。
- Elements（元素）：Carrd 中所有可使用的單位，如文字區塊、圖片、按鈕、相片集、表單等，都稱為元素。你可以透過拖放方式輕鬆添加與調整。
Carrd 免費版有哪些限制
Carrd 免費版只能使用 50 的元件 (element)，聽起來很少，但其實除非網站內容不是非常大，有其他方法可以省下這些元件。
以我的作品集為例，這麼多字，通通放在 text 這個元件（綠色框框）裡面，也只算是一個元件喔
Carrd 使用介面簡易入門教學
選擇模版
首先進到 Dashboard ，點選右上角的 New Site
選一個喜歡的模版
調整 container
所有模版中間通常都會有一個 Container，Container 可以選擇不要分兩欄的簡易模式，這些元素就會像下圖一樣從上而下排列
如果選了 Column，可以設定欄位比例大小，下面是左 75％ 右50％
下面是 50％ 50％
也可以新增 column，這樣就會有三欄
調整標題與內文樣式
設定H1 H2 H3 的樣式，目前畫面中是Heading 1，如果不想要取叫 Heading 1，點選旁邊的鉛筆可以自訂 H1 H2 H3 的名稱
滑鼠滾輪往下滑，就可以看見一～堆～可以設定的東西，包含 大小、行距、字元間距、縮排、邊距、字體粗細、大小寫（appearance），甚至手機版可以另外設定
設定頁面背景
Carrd 提供三種主要的背景設定方式：
1. 純色背景
- 在「Style」下拉選單中選擇「Color」
- 使用顏色選擇器選取喜歡的背景顏色
- 完成後點擊「Done」關閉屬性面板
2. 漸層背景
- 點擊頁面元素以外的區域，顯示背景元素
- 在「Style」下拉選單中選擇「Gradient」
- 自訂漸層的兩種顏色、角度和樣式
可使用 uiGradient 等工具獲取漂亮的配色方案
3. 圖片背景
- 點擊頁面元素以外的區域，顯示背景元素
- 在「Style」下拉選單中選擇「Image」
- 點擊「Upload」或「Pick from library」上傳或選擇圖片
- 調整圖片大小和裁剪
- 設定「Position」，可以調整背景圖片的擺放位置
- 可選擇添加顏色或漸層的「Overlay」以提高元素的可見度
Overlay 非常重要，因為多數背景圖案都是有顏色的，背景上要壓字，通常字會與背景的顏色太相近或者不和諧，有 overlay 可以讓背景不會蓋過字，讓字更明顯
4. 影片背景 （付費功能）
- 點擊頁面元素以外的區域，顯示背景元素
- 在「Style」下拉選單中選擇「Video」
- 上傳 MP4 格式的影片（最大 2MB）
5. 幻燈片背景：
- 點擊頁面元素以外的區域，顯示背景元素面板
- 在「Style」下拉選單中選擇「Slideshow」
- 上傳多張圖片作為幻燈片的內容
- 調整幻燈片的切換效果和速度
- 設定幻燈片的顯示順序
設定 container 背景
設定 container 背景的方式一模一樣，就不贅述了。需要注意的是，一旦設定了背景，不論是頁面的背景，或者是 container 的背景都會換上一模一樣的樣式，每個 section 的樣式是不能獨立設計的。
進階功能：設定 scrollpoint
情境：假設我希望在第一頁設定一個按鈕，讓讀者點選按鈕後可以轉到我的攝影作品頁面，可以設定 scrollpoint
- 添加 Scroll Point
- 點擊「+」按鈕並選擇「Control」
- 在「Type」中選擇「Scroll Point」
- 為滾動點命名（使用小寫字母、數字和連字符），也可以不命名使用預設的 #scrollpoint06 (把這串複製下來，待會會用到）
2. 勾選「Invisible」選項可在網址中隱藏 #XXXX 這種滾動點
3. 將 scollpoint 拖逸到顯要顯示的畫面
2. 建立跳轉連結
- 選擇一個 element（如按鈕、圖片或文字），這裡示範的是按鈕
- 在「URL」欄位中輸入「#」加上滾動點名稱（這裡的範例是：#scrollpoint06）
Carrd 這裡提供的網址清單蠻混淆的，其實只要輸入 scollpoint 的名稱就好了，前面只需要加上 hashtag後直接輸入 scrollpoint 的名稱
假設你的 scrollpoint 叫做 gallary，在設定按鈕的地方加入 #gallary即可
- 發布網站後，點擊該元素將自動滾動到指定的頁面位置
(需要注意的是，使用 draft 是沒辦法看到跳轉結果的，一定要發佈才看得到）
Carrd 使用上有什麼缺點？
- 美感門檻高
所有的顏色都是用顏色選取器選擇，對於毫無設計背景的人來說，要設計出「最具獨特感的」網頁，是有難度的。建議搭配一些設計小工具，提前準備好色碼，比較不會手忙腳亂。
2. 需要適應 Markdown 語法
如果想調整文字內的樣式大小，需要會一點 markdown 語法，雖然這部分其實 Carrd 的頁面都有教學，但是實際要使用還是不直覺。建議一同搭配 hex 選色器，比較直覺。
舉例來說如果我要把字體顏色改成上圖那樣，就需要複製貼上色碼
總結
在我使用 Carrd 將近三年的時間，這個平台從來沒有漲價過，不僅提供免費功能很大方，費用也很便宜。如果你和我一樣想要好看的作品集，但不想要花太多錢在上面，Carrd 真的是難得少見不複雜就能生出好看網頁的平台。
點此可以試用 Carrd，七天免費，而且平台不會自動續約，不綁卡，真的是非常友善！
