Service
接下来呢
我们来做这个service的页面
还是来到page这里
这里我们之前已经创建好了这个service
打开之后呢
我们点击Edit with elemental来打开
我们依然还是沿用这个banner图的
这个风格
来去做
我们啊页面上标题的这个部分
我们直接复制
这个是之前做的FAQ页面
我复制然后在service这个页面
我们来粘贴一下
将这个标题改成service
好
然后呃再增加一个什么面包穴导航
把它复制粘贴过来
有没有发现
其实呃做到后面的页面
其实越做越快的
因为很多控件元素
我就直接复制粘贴这个呃既省时省力
又能让整个网站的很多页面它分隔
保持一致性
好然后service好了之后呢
我们接下来呢
呃我们来稍微做一些排版的东西
我在这边我增加一个容器
这个容器呢
我打算呃左边一个标题
右边是一个内容
然后下面是1234这样子
呃好我们先增加一个两列的容器
将这个容器宽度调整一下
然后我将它们的这个
呃里面两个小容器
这个宽度我不变了
就保持5050
然后我在左边容器里面
我增加一个标题
标题H2啊
没问题然后呢
我可以写
比如说what we can do
就是我们可以做
我们可以为你做什么
因为这是service statement嘛
那么我们当然是告诉别人啊
我们可以提供哪些服务对吧
然后右边呢是一段文字啊
我点击加号
然后加一个text edit过来
然后比如
说我嗯
we can provide the
tent oem and and odms
service with什么
twenty years EXPEINC
twenty years experience focusing
on呃
tent manufacturing呃
TXFTURUR就是一段文字
你就告诉就简短的回答一下
我们可以做什么
然后呢这里巴拉巴拉巴拉这样子
你可以有一段文字
然后呢文字稍微啊长一点
表这里可能放个呃80个
100个单词这样子
就是就是呃就是一段啊
你可能比较不会
我直接复制黏贴吧
啊复制黏贴到我觉得合适的长度
好啊
这样子可能差不多这样的一个长度
那就还比较合适一点
好然后呢
为了让我们what we can do
这个标题
能够跟我们这个面包血导航
这个home能够对齐呢
我选中左边这个容器之后嗯
调整什么还记得吗
嗯就是因为这个容器里面
它里面其实是默认有有有一个
那边距有一点点的
我只要选中容器在啊devanced padding这里
我全部改成0 好
那全部改成0之后呢
我们现在就发现
呃因为它上面编句也没有了
所以
其实这个标题整体除了往左边对齐
它也会往上移一点
对吧我们再来把它去掉看一下
这是默认状态下
我改成0之后呢
标题也往上去了一点
所以我是不是为了要样式统一
把这段文字的这个容器里面的拍点
是不是也改成0 啊
好改成0
然后呢啊
我要让这个容器稍微呃
就是让这一段我我先点击publish
然后我们在service这里点击刷新一下
好这里就what we
can do吧啦吧啦吧啦一段话
然后呢这里呢
你可以加一个CTA对吧
call to action
还号召用户行动起来
那么我们加一个空键
加一个你可以是引导他去啊
其实没必要再去引导别的页面了
你可以直接加个按钮嘛
那我们要的什么
我们要的是用户来询盘嘛
对吧那所以我我这里可以
就是之前我们加的按钮都是什么
get a quote对吧
那么我们是不是可以换换
换一下文字
换一下这个CTA的文本啊
我比如说
customize customize your
用用大写
然后手字母大写有ten
your tent
啊我们这里用design好了
因为我们面对的是可能是
如果是做帐篷的OEM供应商
那么我们客户
他可能是一些帐篷的一些品牌商
或者是一些零售商
那么我们可以这里写
比如说design对吧
de呃desi design your tent
tense right now
好那我们假设就比如说
我就
反正我就意思就是我换一个CTA的啊
那个名称不要全部都是get a quote
get a quote get a quote
get a quote因为可能会看多了
用户可能就是体验会稍微差一点点
但是我这里比如说我designer TENSE right now
那么其实也是引导寻盘嘛
那我就用不同的按钮去引导用户寻盘
其实我们也可以最后看啊
一些哪些按钮的数据
他可能最后用户点击的多
那么我们可能啊
之后也可以调整
网站上这些按钮的一些CTA号
召的一些话语
对吧好
那我就加这个按钮啊
加完之后呢
我调整一下他的这个啊
整体这个部分的一个高度
那这个
我希望它的高度能够稍微高一点好
比如说我调成300
好因为调高一点的话呢
我这样我往下增加内容的时候呢
它这里会有个空间在那边
在前端设备这里
我刷新一下啊
然后上面好像有点太挤了
太紧了嗯好
这样我们高度不调
我们直接调内外边距
选中这个大的容器之后呢
在advanced padding这里
我顶部我先增加一个50
然后底部我增加一个80
好啊我们再来前端刷新一下
OK what we can do
什么we provide ten
什么什么吧啦吧啦吧啦一段话
呃一个CTA的一个按钮
然后呢我们接下来再增加一个
啊可以增加一下你的
比如说你的交易流程啊
你可以因为service界面
那么你可以其实去介绍一下
你是怎么去交易的
对吧我们的用户是先询盘
然后再啊
什么先挑款式
然后询盘
询盘之后啊
可能是购买样品
然后呢再是支付一个定金对吧
然后啊他是什么选择
FOB还是怎么样
那么啊那个我们我们再继续往前走
往前推荐这个交易流程
那么你可以把这个交易流程
你可以写一下
那这里呢
你可以用啊
哪些什么控件呢
我先添加一个容器
容器然后我将宽度同样还是调整
然后我这里
这里呢我们呃
像这种流程的话呢
你可以加其实好几个控件你都可以用
呃
我们看看有没有这个贪婪好timeline
没有那没关系
我们用这个
可以用这个icon box
这个你也可以加
你这里你比如说你增加4个
然后呢选中大的容器
将这个排序方式改成横向排序
排横向的排序
然后呢这个四个
这个四个
呃之间呢
你可以让他们增加有有一个啊
他已经有20的一个间距了
那么你每一个这个icon box
你选中它之后呢
你可以加一个背景色
像iconbox像里面控件的话
你要加背景色的话呢
你要在advance这里下面有一个background
比如说你这里background
你加一个这个颜色的背景色
然后呢呃
你要让后面几个控件全部都按照
这样子嘛
那么你就复制它
然后粘贴样式
粘贴样式
好然后呢
这里面的内容其实就是比如说你这个
呃step one什么
然后呢再复制粘贴一下
step two
step 3哎
眼花了
step 4好点击publish
然后我们在前端service看一下
好然后呢
1234四个流程对吧
但四个星星呢
这个图标实在太丑了
你自己换一下啊
这个流程
当然可能你这个流程很长
那么你可以继续往下嘛
你可以这里比如说你继续呃呃
你你你直接duplicate一下
然后呢这里什么step 5
6
7
8 好
在前端刷新
啊what we can do
什么什么什么
赶快询盘
然后呢下面是介绍我们的交易流程
然后呢再往下是什么
既然是service界面
我们是不是也可以介绍一下
我们的after sales对吧
我们的售后的一些优势
那售后优势怎么来做呢
就是你可以啊
传统的笼统的
比如说一个标题一个文字
那么我们也可以做的
也是稍微特别一点
对吧那么我们继续沿用上面的
比如说我做售后的啊一些介绍
那么我可以先啊
我大致也沿用这个continue
把它复制一下然后呢
下下面这里我可以粘贴
粘贴这里呢我把标题这里首先改一下
改成after
sell service
呃然后这里呢
我不想完全一样
我想稍稍微做的有点变化
我先把这些控件删掉
然后加别的就是
呃我先先popage看一下啊
前端预览效果因为你完全一致
那可能会呃有一点点枯燥
那么我们比方说这样
我将左边这个容器的宽度呢
我调为60
哎不对调为40右边这个容器的宽度呢
我调为60%
好然后他们两者之间还要有一个
空隙
20的空隙
好在after sale的下面呢
我们可以加一段话
对啊然后就是意思就是啊our service is
best什么什么什么之类的啊就之类的
你反正多复制一些啊
就是让这个文字不要显得太空
稍微多一点点啊
弄个两行就够了好
然后呢我们publish看一下
好aftersale这里然后呢
我们接下来
在aftersale旁边再加点其他元素
对吧
呃也就也也不要加直接一整段话
因为这里语语言已经文字挺多了
那我们可以加一些别的空间
我们加一些什么呢
我们加加一些数字的东西
我们可以用这个
这个空间叫做counter
我们来看一下它具体是什么
哎这样子
那么你是不是可以加一些
呃你选中这空间这边
比如说这个starting number
就是它从几开始数
这个ending number就是到哪里结束
比方说啊我这里
24 对吧
我们是2424小时
呃
国内实在太卷了
大家都是24小时
呃全天候不休息对吧
呃 24小时啊
我哎
啊啊啊不对啊
这个title啊
on on duty的on duty就是随时带岗
stand by的这个意思
on duty就是上班的意思
那么我就2424 office
啊这个是number
prefix是前面的
我们要放在surfix这里
number surfix twenty four hours
还可以加空格的
twenty four hours
on duty
on duty然后呃
我们是24小时上班
那我们是不是还得加一个7天啊
好卷
实在太卷了
太累了好
我们加一个7天
好吧啊
duplicate一下
然后呃
他现在是上下排列的
那么我们选中这个容器
然后我们方向排布改为direction
改为横向
好
真太卷了
好然后ending number第一个改掉
改成7
啊 7 days
老外一看你们中国人真的是疯了
都不要休息
OK好啊 7天
啊嗯no rest
啊 24小时
on duty啊然后呢
我们把再把这个文字改一下
呃文字改成20
呃这这个
这个文字是这样的
我选中这个空间之后呢
在style这里
呃counter的这个counter这里呢
我是调呃
调整它的那个
它的位置
上下左右等等
对齐方式
还有包括它的一些空间
这个叫什么
number gap
就是你那个
对就是数字跟后面这个title
就标题之间的空间
然后我要改那个呃
number就是第一行number呃
数字跟标题的大小就是number
这里Typography字体
这里我改成40 看一下
好我们七七天
我们改成opening
好吧opening
open opening
就跟商店一样opening对吧
好啊然后24
呃这个格式差不多
然后我们的24小时on duty这个呢
也跟它格式一样
所以我们只要选中这个7天opening
复制然后呢
在24小时on duty上面粘贴样式
好然后呃
这个容器里面
嗯但现在其实这两个空间
它实际上占的空间还不大啊
还其实挺小的
那么我可以让他再再更大一点
我把number的这个文字改一下
改成50 看一下啊
用50
然后黏贴样式
然后呢我选中这个容器
我想让这两个空间呢
他们的互相之间能够分开来拍
那么这里其实有一个方式比较简单
我直接选中这个容器
就是包裹了这两个
呃counter控件的容器呢
这里在左边
layout布局下面有一个justify content
我们可以
你可一个个试一下嘛
这个是全部靠左
这是中间排列
这是靠右
对吧然后呢
这个是a啊
他是往两边排
这个呢是往稍微中间一点
哎中间一点可能还适合一点
好
呃然后我们再增加两个数字
我们在下面再增加两个数字
可能不能这样子呃
因为我刚刚我想直接duplicate
复制这个容器
但是因为我的整个大的容器
里面的内容的排序呢
是左右的
所以
我这里如果再复制这个空间的话
他只是会往往右边去排
可以看一下只会往右边排
所以我们现在这里呢要再包裹一层啊
容器进来
我们先将这个
我们先将这个控件删掉一下
好然后呢我们怎么来包裹容器
在这部分能够有上下两排呢
就是在这个容器里面
我们再增加一个容器
再增加两个容器
拖一个container过来
好然后呢我们
先选呃在我们打开structure
因为这里从适度上
已经有点分不清层次了
我们拖到这里我们来看
我们要选中这一层
上面那层的这个这个容器
然后呢啊
我们先让这个容器里面的这个容器
排列啊
选中这个从这里选啊
然后呢要让它呈上下排列
在左边这里item direction上下
然后呢
我们再选中里面的这个下层容器
点击duplicate再复制一个哎
这样的话呢
它就是上下两个了
好然后在里面这个容器里面呢
我们再增加刚刚两个counter对吧
增加两个counter
呃还还还记得那两个很卷的数字吗
对啊第一个是7
然后呢number suffix 7 day然后title这里opening
然后呢
我们在duplicate直接复制这个空键
但是我们现在下层里面
这个容器它是里面的内容
item direction它是默认是上下的
我们改成左右
好啊其实这个大小还正合适啊
那我们就不改这个大小了
然后我们就改一下这个数
字然后第二个数字是24小时
on duty
好然后我们选中这个容器
让这里面两个控件呢
它能够呈现一个这样的排列
OK呃第一个做好了
那么我们接下来其实再增加
就是直接copy就好了嘛
我将这个控件copy过来
将这个控件copy过来
呃然后呃下面这个容器
它依然是里面这个layout布局里面item
这里它依然是默认是上下的
我们改成横向排列
然后呢我们选中这个容器之后
让里面的两个空间对齐
方式选择这个space around这里好
呃那么你可以再改一些别的数字吗
嗯比如比方说这里你可以写1万个
1万个什么啊刘平
呃一万个
呃number
呃比呃比如说呃比如说ratings啊
对吧然后呢
下面title是five star
反正大概就这个意思吧
就是大家可以去组织你们的语言
就是你们这里可以用一些数字来去呃
让你的这个after SE after sell service呢
能够更有说服力一点
当然这里要注重注意格式啊
大家可以看
就是你们每一个控件的呃
他们的数字单词
尽量的呢就占那个
占的那个字符数占差不多
要不然他可能会导致不对齐
可以看就是7天24小时
这两个其实差的还不多
但是下面这个1万个ratings这里
其实明显就太大了
所以我可能这里比如说我改成
呃你可以改成比如说
five star
five star
5星然后呢
over 1,000 customer
对吧这样子就啊five STARS
这样子呢
就是他整个就能对齐对吧
超过1,000个客户的五星好评
就类似这样的
你可以有一些呃这个这个数字的一些
能够简洁明了
第一时间就突出你优质的售后服务
的一些
呃一些
一些数字
那么我们这里用的控件呢
是叫做我们点开这个structure右键
然后呢用的是这个counter的这个控件
我们点击publish前端
再看一下
service这个页面啊
叫what we can do什么什么什么吧
然后呢你的交易流程
然后after service什么什么什么什么
那当然这里面其实样式还得调整一下
你可以呃增加一些背景色啊等等
嗯对因为我这边样式就不调了
因为其实调样式还挺麻烦的
就是因为你要你要
你要设计你的样式嘛
当然
你可以先找一个UI设计师帮你做好
你也可以
你做完之后呢
然后你再慢慢的去微调
比方说我可能在what we can do
这里我可以啊
这里我就保持空白
那么这个地方
其实我可以是用完全是全全髋
啊不对
来看一下啊
看一下它的效果
OK你可以用这样的方式
啊what we can do什么
然后呢下面就是after service等等
就是你可以去调整你的样式
呃但是就是呃你
你其实关键还核心
还是
你要学会去使用这个elemental的这些呃
控件编辑
那么啊所以在service这里
比如说what we can do做完
然后呢你的交易流程做完
售后做完
然后这里
其实下面
你同样可以再加一些用户好评的
一些评论啊
什么的就
也是让你的内容
可以做得尽量丰富一点
呃当然你还可以在这里面最下面
你可以再加一些相应的一些呃
文章的链接
你可以加一些产品的一些链接等等
好那么我们这个service的这个页面
我们就做到这里
那样式我就不再继续设计了
对吧那样式设计
大家还是要根据你们自己网站的情况
去做一些设计
好关于service就讲到这里
