shopify网站首页设计(shopify模版页面设计)

　　想要架设一个自己的网站吗？Wordpress因为平台的易用性和很多可扩充的Plugins功能，是很多商家和网站主架设网站的首选（当然也有很多知名的平台象是Shopify、91App、Shopline、meepShop可以架设电商网站）。根据调查资料显示，全世界有25%以上的网站都是使用Wordpress架站，包含纽约时报、TechCrunch、Mercedes-Benz等知名网站也都是使用Wordpress平台架网站。这篇文章就要教你如何快速从无到有架设好自己的Wordpress网站。

　　而在开始之前，你需要思考以下几件事：

　　网站名称、网址、虚拟主机

　　网站内容

　　网站结构与设计

　　品牌风格

　　挑选网址

　　一般来说品牌或是公司都会有英文名称，为了让消费者能够直接透过品牌名称在搜索引擎上搜索，基本上都会将其英文放在网址中，并在头尾分别加上www和.com，再依照若有地域性的话，加上不同国家的缩写，例如.tw、.us、.hk、.jp（不过现在有比较多的网站已经不再使用www作为前缀，象是transbiz的网站就是transbiz.com.tw）。

　　比较热门的字词若被使用了之后，你可能就会需要在网域的名称加上不同的词汇，依据品牌调性与风格区隔。以部落格的网域命名来说，要不就是想一个让人很好记得的新名称，要不就是加上姓氏，或是最简单的方法就是加上生日日期或是数字，有点象是申请账号但跟别人重复的时候，网站会自动建议你在后面加上数字是类似的道理。

　　不过若作为一个公司或是品牌，你可能加上的字可能就是跟商品有关，或象是「my」这类型比较具有品牌调性风格的文字。

　　检查网域名是否有被注册的小工具：GoDaddy和Launchaco

　　这个网页会根据你的网站性质不同给予不同网域名称的建议，比方说在Startup的网域名称建议，会在品牌名称加上get、try、use、hey等字；商务发展上的建议则是加上后缀的studio、agency、company、center等；另外还有有趣的网域名称、科技类、教育类等等的字词参考，当然，你会希望网址越简单、越容易让人记得越好！

　　有鉴于现在非常多网域申请都和虚拟主机绑在一起，因此当你买了网址之后，就不必再烦恼主机的问题，只需要在购买时，考虑需要的功能即可。以下方的GoDaddy为例，根据网站数量和储存空间的不同，每个月有不同的资费方案。

　　其他常见的虚拟主机公司，则是以虚拟主机购买赠送免费自订网域Domain，和WordPress有合作的公司如Bluehost和HostGator，以下是Bluehost和HostGator的收费方式参考：

　　Bluehost

　　HostGator

　　购买虚拟主机，绑定WordPress

　　以在HostGator购买虚拟主机为例，当你买好了虚拟主机之后，就会进入到这个页面，你可以一键安装WordPress

　　当你按下了一键安装之后，它会自动帮你把虚拟主机跟WordPress串接起来。安装好后，你会看到上方的Banner出现「Installation Complete」，接着要注意下方它会给你一个新的密码（要存起来）。

　　点选View My Installs你可以看到下面这个画面，确认HostGator和WordPress绑定成功，然后到Admin Login输入上面提供的账号跟密码开始进入你的WordPress后台。

　　或者你直接点选Login画面也能直接看到下面这个页面，输入账号密码进去WordPress的后台。

　　在你输入前面设定的账号以及网站生成给你的密码之后，就可以进入到WorPress的后台页面了！

　　因为一般初始设定是在英文，所以如果你想要使用中文界面的话，可以到「Setting」里面的Site Language将语言设定转换成简单中文或者繁体中文。

　　再来就可以到外观（Appearance）设定你的布景主题了。鼠标移动到想要的布景主题，下方就会出现「安装」字样，即可选择安装。

　　或是可以点选「上传布景主题」，使用你已经找好的布景主题。

　　有很多专门做Wordpress布景主题的网站，可以让大家下载更多元的布景主题，不同性质的网站可以采用不同的模板，通常都是要付费的，但是好处是可以直接使用他们订制模板打包内建的功能：

　　Mojo Themes

　　ThemeForest

　　WooThemes

　　StudioPress

　　Elegant Themes

　　Creative Market

　　要创建「关于我们」、「联络我们」、「产品介绍」等上排的在页面中新增页面。

　　然后到「外观」的「选单」里面设定。

　　要指定某个页面为首页，可以在「设定」->「首页显示」里面找到

　　若要设定主要页面的呈现方式，则可以到「外观」->「小工具」，包括内容的安排、页尾的设置，都可以用拖曳的方法自订内容，而一般比较常被使用的是「文字」。

　　至于要怎么快速建好网页，可以运用Wordpress强大的外挂，把后台可以直接拖曳排版的「Page Builder by SiteOrigin」www.seo8.org 以及网页主要的Slider「Responsive WordPress Slider – Soliloquy Lite」先装好。

　　可以先到「外挂」->「安装外挂」，在搜索Bar上找到和安装这两个外挂工具（记得点选「启用」）。

　　安装好之后，进入到页面画面就会看到这两个外挂工具了！

　　你可以到「外挂」->「已安装外挂」检查你的外挂程序之「启用」和「停用」状态。

　　在页面编辑时，点选「Page Builder」之后你会看到如下的页面。

　　先设定一个Row之后就可以开始你的网页设计。

　　如需要其他的辅助小工具可以到「Add Widget」

　　Soliloquy则必须在侧栏找到它，做好基础设定之后才可以在页面中插入内容。

　　在WordPress Plugin 推荐！21个架网站你不能错过的实用外挂这篇文章里，还有许多推荐的小工具能帮助你在SEO、内容生产或是CTA上事半功倍。

　　把上述的动作完成之后，基本上你的网站就完成了…只是还没有内容。一般来说，网站会有的信息不外乎：关于我们、我们的商品/服务、常见疑问、联络方式。但你的网站结构要如何安排，网站的配色、品牌的名称、风格等，这些都会是在建立网站的时候需要考量的，不然你申请好了网址但是网站内容一片空白…

　　几个比较知名的网站使用WordPress建站，可以作为参考：

　　Best Buy

　　Sony Playstation

　　Bloomberg Professional

　　The New York Times

　　Mercedes-Benz

　　或者最简单的方式，就是参考你的竞争对手，看看它的网站素材有哪些、如何配置与安排，你就可以针对他们的网站内容，想一想自己的网站要怎么设计，它们的网站有哪些需要优化的地方，而你自己的网站要如何设计。

　　网站内容设计：

　　想一下你打造这个网站主要目的是什么？希望人们购买你的产品？填写联络表单？留下email订阅你的部落格文章？打电话询问你相关的服务内容？

　　1. SEO

　　在想好了网站的主要目的之后，会建议你使用Google关键字规划工具，针对你的潜在消费者在找资料时会使用什么样的关键字来规划你的网站内容。

　　透过关键字规划师，你可以找到哪些关键字的搜索量比较大，就可以避免你在内容设计上使用到冷僻的字眼。记得在使用关键字规划工具时，要筛选你所在的国家、区域或是位置，因为在不同国家的人，使用的搜索习惯也不一样。而在使用Google关键字规划工具前，你必须先申办Google AdWords的账户跟资料，然后记得手动关闭广告功能，始可开始使用这个工具。

　　一般来说，关键字词的搜索量越大，你被消费者看见的机会也越大，不过相对来说竞争难度也高。比方说你贩售的产品品类是化妆品，但化妆品可能有口红、睫毛膏、眼影等，消费者在查找资料的时候可能会输入产品类别加上「推荐」，亦或是「好用推荐」，那么你可能就需要抢下相关的「长尾关键字」，而不是最主要的关键字。

　　在这个阶段，你可以透过关键字规划工具来帮助你完成以下3件事：

　　所有和你提供的服务或商品相关的关键字，以及其搜索量

　　将这些关键字有逻辑的分组，来设置你的网页内容

　　储存你所调查的资料，以便未来做查看和比较

　　2. 网站素材

　　在关键字规划师的协助之下，你大概对于主要目标客群在找相对应的资料时会使用的关键字有了基本的了解，那么就可以针对这些关键字来设计网站的内容。试着使用足够的关键字在你的首页内容和Meta描述中，让这些关键字与你的品牌或服务有所连结。若有太多组关键字，那么则可以分批来进行关键字的优化与排名。

　　当然，你的网站不会只有一堆字而已。你还必须要有图片、影片、使用者见证等内容来为你的网站背书。

　　3. 网站结构与设计

　　如果考虑到网站的结构，你会希望网站最重要的页面权重比重较高。举例来说，说你是一个电子商务的网站，但是其中某一个热销的产品是你的网站流量的主要来源，可是它在网站的结构底下是主页>分类>子分类>主打商品，在这样的情况下你可能需要重新调整网页的结构，让潜在消费者可以一进入你的网站就知道最重要的讯息是什么。

　　贩售饰品和配件的Vacanza则是将产品分类放在网站的最上方。你可以看到最左边的是「到货新品」，最右边的则是「特价」，中间还有Vacanza精选（Collection）、925纯银、男饰等，或许他们希望使用者可以关注在最新的商品以及Vacanza为他们的精选商品，而稍微淡化「特价」的商品。

　　因为人们的阅读顺序是由左到右、上到下，分别呈现Z型和F型，因此在最右侧的分类可能相较之下就没有在左侧的分类来得醒目。

　　另外再看到Bonny & Read另一间贩售饰品的电商网站，它的分类看起来应该是使用比较热门的商品在上方排列，最右侧的则是近期举办的活动（和励馨基金会有合作），这样也可以让潜在消费者在一进到网站的时候看出来目前热门搜索的商品，最上面的Banner则是提醒消费者现在全馆的运费半价优惠。

　　网站设计参考

　　你可以在UXPin这个权威性的网站找到许多跟使用者界面设计相关的文章做网站设计的参考，

　　ui-patterns.com，是一个在线数据库，介绍特定的网页设计元素和内容。网站本身可以分为两大区块，一个是用户界面设计（User Interface Design），一个是设计模式（Design pattern），你可以根据界面设计的方式去找到你所使用的设计该如何运用，象是别人都怎么样做，在什么样的情况下使用该设计是比较好的方式。而设计模式则是偏向在设计网站的时候希望运用使用者的什么状态达到什么样子的效果，同样给予实例参考和成效。

　　以下方的Carousel设计来说，有41%（270使用者）指出他们喜欢这样的设计。在网页中，它会指出这个设计会广泛被运用在哪里，使用方式的展现，以及优化的方式。

　　小编喜欢的WordPress外挂工具包括：Yoast SEO（搜索引擎优化）、Google Analytics Dashboard for WordPress（流量、点击资料统计与分析）、W3 total Cache（优化网站速度） 、OnePress Image Elevator（截图直接复制贴上）、Akismet（管理留言）、Visual Composer（轻松拖拉排版设计网页），供大家参考。

　　若你的网站需要简易的电商功能，则可以安装WooCommerce外挂工具。

　　最后，在发布你的网站之后，记得做好资料备份，以及定期的资料备份！

　　要拥有一个网站就是这么简单！重要的是你的网站要有哪些内容来喂养你的潜在消费者，快着手去设计你的网站内容跟页面架构吧！

　　作者：海瑶SEO培训