
除了推薦大家使用 WordPress 架站,我也熱衷於研究網站建置服務,尤其近年有許多架站服務都能讓使用者快速製作出非常具有水準的網站,不僅降低架站技術門檻,就連後續維護更新也變得更輕鬆方便。本文要介紹的 Carrd 是近期上線的免費建站服務,只要幾個簡單步驟就能快速設計出很美觀、別具特色的網站。
Carrd 首頁一語道破它的特色:簡單、自由且完整支援響應式設計的單頁面網站!如果你想建置的網站內容不複雜,或許只需要一個頁面就能輕鬆帶過,Carrd 會非常適合你。至於什麼是響應式網頁設計(RWD)呢?透過這項網頁技術,讓你的網站可以被任何大小的裝置瀏覽,包括桌上型電腦、智慧型手機或平板電腦,已是現在的開發趨勢。
Carrd 內建功能包括讓你自訂網站背景、標題、描述以及內容鏈結等等,還能為網站加入圖片、影片、圖示、按鈕等等,Carrd 將這些元素模組化,只要利用拖曳方式就可以快速調整位置,並進行內容方面的進階編輯。
最令我驚艷的是為網站加入動態效果,使平淡無奇的頁面更吸睛、更有質感!

在開始前,我已經使用 Carrd 製作了一個簡單的範例頁面,或許你會有興趣,那麼可直接造訪範例網址,這是我用不到五分鐘時間做出的網頁。
網站名稱:Carrd
網站鏈結:https://carrd.co/
使用教學
STEP 1
開啟 Carrd 網站後,點選首頁的「Choose a Starting Point」開始吧!
第一步先選擇一個要使用的網站風格,這待會都能夠再做細部修改,因為要讓網站雛形先出來,所以必須從中挑選最適合你心目中理想的版型。

STEP 2
開始 Carrd 編輯畫面前,會有簡單的操作說明,方便使用者了解每個功能用途。簡單來說,內容都可以直接在看到的地方點選修改,右上角是主要工具列,可以加入元件、預覽動態效果、發佈網站或開啟更多功能。

STEP 3
我最喜歡 Carrd 的一點是它編輯功能非常直覺好用!只要點選內文,就能夠對文字內容或字型、顏色、寬度高度等項目進行編輯,拖曳外框來調整要顯示的位置,沒想到做網頁竟然如此簡單對吧?

STEP 4
點選右上角的「+」號,在網路加入更多元素,例如文字區塊、圖片、影片、圖示按鈕或鏈結,可惜表單部分需要付費升級 Pro 會員才能使用。

STEP 5
Carrd 也可快速變換背景,例如圖片、單一顏色或漸層色,還記得之前介紹過「Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器」嗎?在這裡也能選擇類似的效果,以及進行位置或尺寸等設定。記得前面提到的動態效果嗎?如果你喜歡,也能在「Animation」頁面進行編輯。

在 Carrd 提供的圖庫裡,大量使用來自 Unsplash 免費圖庫的素材,點選就能套用到網站,即時預覽網頁呈現的效果。 這些挑選過的圖片都非常好看,也很適合用於網頁做為背景。

STEP 6
當網頁完成後,別忘記點選右上角的「Publish」發佈按鈕來儲存內容,第一次使用時需填入 Email、密碼來註冊帳號,以便進行後續的管理維護。
將設定欄位往下拖曳,就會有設定網站標題、描述及網址部分,免費帳號可以自訂要使用的網址(使用 .carrd.co 免費網址),如果你要設定自己的網域名稱,那麼必須付費來升級 Pro 會員。

STEP 7
點選「Publish」發佈網頁後會回到 Carrd 控制台,第一次使用必須先去 Email 信箱收取驗證郵件,點選信中確認鏈結才算啟用帳號,啟用後就會取得該網址的使用權。

日後想要管理 Carrd 網站,或者付費升級、修改資料等等,只要開啟 Carrd 登入你的帳號,就能返回控制台。免費帳戶僅能建立一個網站,若你需要更多配額,必須升級才能進行操作(升級後最多可建置五個網站)。

如果你覺得 Carrd 非常好用,也可以考慮支付一年 $19 美元來升級 Pro 帳號,升級後可在同一帳號內建置最多五個網站、支援自訂網域名稱、表單功能、加入 Google 分析追蹤程式碼,亦能移除網站內的 Carrd 品牌鏈結。
值得一試的三個理由:
- 以瀏覽器免費建立網站,無須下載或安裝軟體
- 支援完整響應式網頁設計(RWD)技術
- 將文字、圖片、影片、圖示、按鈕等元件模組化,在編輯上更簡單