超过170种网页风格!帮你搭积木般完成建站过程的Tilda - 优设-UISDC

超过170种网页风格!帮你搭积木般完成建站过程的Tilda

2016/04/21 10434评论区

tilda-website-design-tool-1

本文要介绍的 Tilda 是刚上线的免费架站服务,为什么会想推荐它呢?因为 Tilda 预设提供了许多不同类型的网站模版,不仅仅是样式上有所差异,而是真真实实可以建出不同形态的网站,无论是中小企业公司网站、多媒体、产品介绍或是个人网站,都能利用这些版型做到。

Tilda 另一项特色是:它将不同内容型态切割成「blocks」,如果把网站想象成堆积木,内容就好比一块块不同花色的积木,利用拖曳方式把它排列组合,产生的网站就更有独特性,也能降低操作上的难度。

2016 02 03 2344

Tilda 使用模块化系统,让用户在建构页面时,可以有更好的弹性与自由度。

除此之外,Tilda 产生的网页具备「自适应设计」特色,能在任何设备上正常浏览,这也是跟一般的架站服务不同之处。其他的功能就不用多说,Tilda 还可以自定义 Google Analytics 追踪代码或是加入窗体、密码保护、白名单或搜索引擎索引等等,整体来说功能非常完整!

Tilda

STEP 1

开启 Tilda 后,首先点选右上角的「Sign Up」来进行注册,或者你可以先看看「Templates」提供那些漂亮的网站模版。注册时只需要填入姓名、Email 和密码,按下送出就能完成注册。

Tilda

STEP 2

各种模版依照网站类型自由选择

Tilda 提供各式各样的网站模版,在挑选时可以点选「Preview」来预览是不是你需要的,前面有提到 Tilda 把各种内容类型设计成「blocks」,也就是使用者能自行调整变动,其实你只要选择类似的模版即可,因为稍后可以调整内容呈现方式。

2016 02 03 1721

STEP 3

任意挑选了一个 Tilda 提供的网站布景后,我们就可以开始来设定内容。

Tilda

STEP 4

点选内容就能快速调整设定

将鼠标光标移动到网页内的任何一个区块,左右两侧各会出现一些选项,左边主要是在内容调整和设定上,右边则可以快速复制、删除或隐藏区块,以及调整要呈现顺序。

试着自己操作一下,会发现 Tilda 几乎每个区域都能够修改,只要在文字或按钮上面点选,就能从网页进行编辑。

2016 02 03 1730

有些区块会有多种选项可以选择,举例来说,当我变更文字段落时,从最前面能选择不同的文字排版方式,很棒的是 Tilda 会有预览图实时显示,就不用从名称去判断它的功能,也无须一个一个选择来进行实测。

Tilda

STEP 5

可自定义 Facebook 预览图文和搜索引擎选项

在编辑结束前,点选右上角的「Settings」开启网站设定项目。从这里可以自定义网站标题及网站描述,还有略缩图、Facebook 及搜索引擎优化(SEO)选项能够调整。如果有架站经验的朋友一定知道标题与描述的重要性,这对于网站在搜索引擎表现也有一定的影响力,若要经营网站的话务必要小心设定。

Tilda

STEP 6

最后,点选右上角的「Publish」即可发布网站,在这里会发现 Tilda 产生的网页链结很冗长,而且不是非常好记,没关系,接下来我会再教你如何自定义网址。

2016 02 03 1738

Tilda 自定义网址及设定预设首页教学

前面有提到,Tilda 允许我们自定义网址(格式为 YourName.tilda.ws),但如果你要绑定自己的域名就必须付费升级。这个设定选项有点难找,开启 Projects 页面:https://tilda.cc/projects/ ,点选「Edit Site」来进行设定。

STEP 1

点选右上角的「Site Settings」。

2016 02 03 1737

STEP 2

从「Main Settings」里找到「Custom Subdomain on Tilda」就能自定义网址!设定后别忘记单击右上角的保存设定。

2016 02 03 1736

最后,记得点选左边选单的「Index」,选择你要设定为此网站的预设主网页,假如你只有一个页面的话,选择后储存即可。

这么做的用意是因为 Tilda 允许使用者在一个项目内设定多个不同的网页,为了让你的子域名称(Sub-Domain Name)可直接对应到主页,记得要做此步骤,之后就能利用你设定的网址来开启网站咯!

Tilda

「有洞悉力的设计师才能解决问题,看案例就知道」

一点设计小技巧,让天猫店铺销量大幅提升!
《超实用的设计心理学!怎么用隐喻设计引导用户?》

一个能解决问题的设计师不怕客户看效果图!
《职场好经验!如何应对客户想看效果图的要求》

读懂甲方意思,让沟通不再对牛弹琴!
《设计师必读!如何从甲方抽象的概念里提炼LOGO创意》

原文地址:free.com

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/tilda-website-design-tool

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 设计师专访 视觉设计 素材下载 web前端开发 设计流程 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里