(免費資源網路社群) Carrd 完整支援響應式設計免費架站平台

近年有許多架站服務都能讓使用者快速製作出非常具有水準的網站,不僅降低架站技術門檻,就連後續維護更新也變得更輕鬆方便。本文要介紹的 Carrd 是近期上線的免費建站服務,只要幾個簡單步驟就能快速設計出很美觀、別具特色的網站。

 

carrd_01.png

 

Carrd 首頁一語道破它的特色:簡單、自由且完整支援響應式設計的單頁面網站!如果你想建置的網站內容不複雜,或許只需要一個頁面就能輕鬆帶過,Carrd 會非常適合你。至於什麼是響應式網頁設計(RWD)呢?透過這項網頁技術,讓你的網站可以被任何大小的裝置瀏覽,包括桌上型電腦、智慧型手機或平板電腦,已是現在的開發趨勢。

Carrd 內建功能包括讓你自訂網站背景、標題、描述以及內容鏈結等等,還能為網站加入圖片、影片、圖示、按鈕等等,Carrd 將這些元素模組化,只要利用拖曳方式就可以快速調整位置,並進行內容方面的進階編輯。

最令我驚艷的是為網站加入動態效果,使平淡無奇的頁面更吸睛、更有質感!

carrd_02.png

在開始前,我已經使用 Carrd 製作了一個簡單的範例頁面,或許你會有興趣,那麼可直接造訪範例網址,這是我用不到五分鐘時間做出的網頁。

 

網站名稱:Carrd
網站鏈結:https://carrd.co/

 

使用教學

STEP 1

開啟 Carrd 網站後,點選首頁的「Choose a Starting Point」開始吧!

第一步先選擇一個要使用的網站風格,這待會都能夠再做細部修改,因為要讓網站雛形先出來,所以必須從中挑選最適合你心目中理想的版型。

carrd_03.png

STEP 2

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

carrd_04.png

STEP 3

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

carrd_05.png

STEP 4

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

carrd_06.png

STEP 5

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

carrd_07.png

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

carrd_08.png

STEP 6

當網頁完成後,別忘記點選右上角的「Publish」發佈按鈕來儲存內容,第一次使用時需填入 Email、密碼來註冊帳號,以便進行後續的管理維護。

將設定欄位往下拖曳,就會有設定網站標題、描述及網址部分,免費帳號可以自訂要使用的網址(使用 .carrd.co 免費網址),如果你要設定自己的網域名稱,那麼必須付費來升級 Pro 會員。

carrd_09.png

STEP 7

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

carrd_10.png

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

carrd_11.png

如果你覺得 Carrd 非常好用,也可以考慮支付一年 $19 美元來升級 Pro 帳號,升級後可在同一帳號內建置最多五個網站、支援自訂網域名稱、表單功能、加入 Google 分析追蹤程式碼,亦能移除網站內的 Carrd 品牌鏈結。

值得一試的三個理由:

  1. 以瀏覽器免費建立網站,無須下載或安裝軟體
  2. 支援完整響應式網頁設計(RWD)技術
  3. 將文字、圖片、影片、圖示、按鈕等元件模組化,在編輯上更簡單

 

原文 https://free.com.tw/carrd/?utm_content=buffercad3b&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer