首页教程做出你的第一个商家网站

从这里开始

做出你的第一个商家网站

选一个适合做生意的结构,把示例内容换成真的;离开编辑器时,就有一份能送审上线的网站。

做完能得到

一份完整的初稿:商家信息是真的、每页都有用途、按钮都有去处,手机版也检查过了。

开始之前

先把材料备齐,不用再多开标签页。

  • 店名、电话、电子邮箱、地址、所在城市、时区,以及营业时间。
  • 一批你有权公开的真实照片。初稿有六到十二张够好的图片就够了。
  • 一个最主要的客户动作:打电话、下订单、订座、预约、索取报价,或者直接到店。

你将学会

  • 从对的经营结构开始,而不是一张空白页。
  • 分清楚网站主题(Theme)和编辑器界面风格的区别。
  • 把上线指南(Launch guide)当成有据可查的完成清单。
  • 发布前,先用手机宽度检查店面网站。
01

用最接近的经营类型新建项目

模板决定了一开始的页面结构,也决定会用到哪些经营模块。挑跟你实际做生意方式最像的那一个,别只看缩略图颜色顺不顺眼。

  1. 点击“新建项目”(New project)。
  2. 挑一个运作方式最像你这门生意的类型。餐厅、预约制服务、内容媒体、房产网站,需要的页面和数据结构都不一样。
  3. 打开模板,看它自带哪些页面、客户会怎么一路走下去。除非你心里已经有完整的页面规划,否则别从空白项目开始。

达到这一步就算做完: 你说得出这个网站最主要的客户动作是什么,而且选中的模板本来就支持这条路。

02

先选设计风格(Design Style),再填真实的商家信息

设计风格改的是客户看到的布局和配色。设置旁边那个小小的界面风格切换器,只会改编辑器外壳。

  1. 在新建项目的对话框里比较各种设计风格;有“试穿”(Try on)就先套上去看看。
  2. 填入真实的店名、电话、电子邮箱、地址、城市、省份州别、邮政编码和时区。
  3. 确认联系信息已经不是示例数据,再点“创建项目”(Create project)。

达到这一步就算做完: 项目一打开,商家身份就是对的;选中的网站风格是在衬托内容,而不是抢走注意力。

03

先按上线指南一条条做完,再回头打磨单个板块

上线指南会实际读你的项目,告诉你到底还缺什么。每一行都能直接跳到对应的面板,所以就按它的顺序做。

  1. 在左侧工具栏打开上线指南。
  2. 到“站点”(Site)里把真实商家信息填完,并设置营业时间。
  3. 照片、商品条目、页面 SEO 信息都看实时计数,别靠记忆。
  4. 每做完一段就回上线指南一次,处理第一个还没完成的条目。

达到这一步就算做完: 指南上不再出现示例联系信息、没填营业时间,或必填内容还空着。

04

把示例内容换成一个讲得清楚的客户故事

模板只是脚手架。先把看得见的信任证明、优惠方案和行动按钮换成真的,再去调那些细微的视觉。

  1. 要加东西就开“组件”(Components);要精准选中已有板块就用“图层”(Layers)。
  2. 在画布上选一个板块,然后在检查器里改“内容”(Content)。外观用“样式”(Style),点击行为用“动作”(Actions)。
  3. 把审核过的照片放进媒体库,再摆到该摆的图片位置。每个断点都确认一次裁剪有没有跑偏。
  4. 每个按钮都只给它一个去处。按钮要么跳转、要么触发该做的经营动作,否则就删掉。

达到这一步就算做完: 第一次来的人不用把每段字读完,就知道你卖什么、为什么可信、下一步该做什么。

05

让“页面”和真正的导航栏一致

页面名称就是导航栏上的字,页面顺序就是导航栏的顺序。可见度会在“导航栏加页脚”“只在页脚”和“隐藏”之间轮流切换。

  1. 打开“页面”(Pages),把每一页改成客户听得懂的说法。
  2. 按第一次来的人需要的顺序排。法律或政策页不适合放主导航时,就留在页脚。
  3. 重复或没在用的页面就删掉。首页不能删。
  4. 页面检查器要你填 SEO 标题和描述时,每一页都填准确的内容。

达到这一步就算做完: 导航栏很短、顺序合理,每个能看到的页面都有明确用途和自己的搜索描述。

06

检查手机上的整段流程,不是只看一张截图

本地商家的访客大多从手机进来。真正要测的是:客户能不能不卡壳地把主要动作做完。

  1. 把编辑器工具栏切到 Mobile(手机版),在 390 像素的画布宽度下把整页扫一遍。
  2. 打开“预览”(Preview),选 Mobile,实际测导航栏、表单、按钮、菜单,还有订单或预约流程。
  3. 如果网站有后台(Backoffice),在预览里从店面切到后台,同样用 Mobile 检查一遍。
  4. 整条路都测过了,再回上线指南把“用手机尺寸预览”那一项打勾。

达到这一步就算做完: 主要动作从第一个屏幕一路做到完成状态,过程中没有左右滚动、文字被切掉,也没有按钮藏起来。

最后检查

这几条全部成立,才算真做完。

  • 商家名称、联系方式、营业时间和地址都是真的。
  • 每一张图和每一句对外的说法,都已经批准可以公开。
  • 每个能看到的按钮,都有刻意安排的去处或动作。
  • 导航顺序、页面可见度、SEO 标题和描述都设置好了。
  • 整个店面网站和主要转化路径,都在 Mobile 预览里测过。