超過170種網(wǎng)頁風(fēng)格！幫你搭積木般完成建站過程的Tilda

本文要介紹的 Tilda 是剛上線的免費架站服務(wù)，為什么會想推薦它呢？因為 Tilda 預(yù)設(shè)提供了許多不同類型的網(wǎng)站模版，不僅僅是樣式上有所差異，而是真真實實可以建出不同形態(tài)的網(wǎng)站，無論是中小企業(yè)公司網(wǎng)站、多媒體、產(chǎn)品介紹或是個人網(wǎng)站，都能利用這些版型做到。

Tilda 另一項特色是：它將不同內(nèi)容型態(tài)切割成「blocks」，如果把網(wǎng)站想象成堆積木，內(nèi)容就好比一塊塊不同花色的積木，利用拖曳方式把它排列組合，產(chǎn)生的網(wǎng)站就更有獨特性，也能降低操作上的難度。

Tilda 使用模塊化系統(tǒng)，讓用戶在建構(gòu)頁面時，可以有更好的彈性與自由度。

除此之外，Tilda 產(chǎn)生的網(wǎng)頁具備「自適應(yīng)設(shè)計」特色，能在任何設(shè)備上正常瀏覽，這也是跟一般的架站服務(wù)不同之處。其他的功能就不用多說，Tilda 還可以自定義 Google Analytics 追蹤代碼或是加入窗體、密碼保護(hù)、白名單或搜索引擎索引等等，整體來說功能非常完整！

Tilda

STEP 1

開啟 Tilda 后，首先點選右上角的「Sign Up」來進(jìn)行注冊，或者你可以先看看「Templates」提供那些漂亮的網(wǎng)站模版。注冊時只需要填入姓名、Email 和密碼，按下送出就能完成注冊。

STEP 2

各種模版依照網(wǎng)站類型自由選擇

Tilda 提供各式各樣的網(wǎng)站模版，在挑選時可以點選「Preview」來預(yù)覽是不是你需要的，前面有提到 Tilda 把各種內(nèi)容類型設(shè)計成「blocks」，也就是使用者能自行調(diào)整變動，其實你只要選擇類似的模版即可，因為稍后可以調(diào)整內(nèi)容呈現(xiàn)方式。

STEP 3

任意挑選了一個 Tilda 提供的網(wǎng)站布景后，我們就可以開始來設(shè)定內(nèi)容。

STEP 4

點選內(nèi)容就能快速調(diào)整設(shè)定

將鼠標(biāo)光標(biāo)移動到網(wǎng)頁內(nèi)的任何一個區(qū)塊，左右兩側(cè)各會出現(xiàn)一些選項，左邊主要是在內(nèi)容調(diào)整和設(shè)定上，右邊則可以快速復(fù)制、刪除或隱藏區(qū)塊，以及調(diào)整要呈現(xiàn)順序。

試著自己操作一下，會發(fā)現(xiàn) Tilda 幾乎每個區(qū)域都能夠修改，只要在文字或按鈕上面點選，就能從網(wǎng)頁進(jìn)行編輯。

有些區(qū)塊會有多種選項可以選擇，舉例來說，當(dāng)我變更文字段落時，從最前面能選擇不同的文字排版方式，很棒的是 Tilda 會有預(yù)覽圖實時顯示，就不用從名稱去判斷它的功能，也無須一個一個選擇來進(jìn)行實測。

STEP 5

可自定義 Facebook 預(yù)覽圖文和搜索引擎選項

在編輯結(jié)束前，點選右上角的「Settings」開啟網(wǎng)站設(shè)定項目。從這里可以自定義網(wǎng)站標(biāo)題及網(wǎng)站描述，還有略縮圖、Facebook 及搜索引擎優(yōu)化（SEO）選項能夠調(diào)整。如果有架站經(jīng)驗的朋友一定知道標(biāo)題與描述的重要性，這對于網(wǎng)站在搜索引擎表現(xiàn)也有一定的影響力，若要經(jīng)營網(wǎng)站的話務(wù)必要小心設(shè)定。

STEP 6

最后，點選右上角的「Publish」即可發(fā)布網(wǎng)站，在這里會發(fā)現(xiàn) Tilda 產(chǎn)生的網(wǎng)頁鏈結(jié)很冗長，而且不是非常好記，沒關(guān)系，接下來我會再教你如何自定義網(wǎng)址。

Tilda 自定義網(wǎng)址及設(shè)定預(yù)設(shè)首頁教學(xué)

前面有提到，Tilda 允許我們自定義網(wǎng)址（格式為 YourName.tilda.ws），但如果你要綁定自己的域名就必須付費升級。這個設(shè)定選項有點難找，開啟 Projects 頁面：https://tilda.cc/projects/ ，點選「Edit Site」來進(jìn)行設(shè)定。

STEP 1

點選右上角的「Site Settings」。

STEP 2

從「Main Settings」里找到「Custom Subdomain on Tilda」就能自定義網(wǎng)址！設(shè)定后別忘記單擊右上角的保存設(shè)定。

最后，記得點選左邊選單的「Index」，選擇你要設(shè)定為此網(wǎng)站的預(yù)設(shè)主網(wǎng)頁，假如你只有一個頁面的話，選擇后儲存即可。

這么做的用意是因為 Tilda 允許使用者在一個項目內(nèi)設(shè)定多個不同的網(wǎng)頁，為了讓你的子域名稱（Sub-Domain Name）可直接對應(yīng)到主頁，記得要做此步驟，之后就能利用你設(shè)定的網(wǎng)址來開啟網(wǎng)站咯！

「有洞悉力的設(shè)計師才能解決問題，看案例就知道」

一點設(shè)計小技巧，讓天貓店鋪銷量大幅提升！
《超實用的設(shè)計心理學(xué)！怎么用隱喻設(shè)計引導(dǎo)用戶？》

一個能解決問題的設(shè)計師不怕客戶看效果圖！
《職場好經(jīng)驗！如何應(yīng)對客戶想看效果圖的要求》

讀懂甲方意思，讓溝通不再對牛彈琴！
《設(shè)計師必讀！如何從甲方抽象的概念里提煉LOGO創(chuàng)意》

原文地址：free.com

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com