首页制作
好我们现在呢
正式的来开始做我们的页面
首先我们做我们的首页
在page这里呢
我之前已经创建了我们的多个页面
并且呢
我已经将名为home的这个页面呢
设置为我们的首页了
所以我们啊我们的用户
他们输入我们网址的时候呢
他会自动的跳转到这个home页面
作为我们的这个首页的
我们点击这个home打开
现在
因为我们要使用elemental来编辑页面
所以我们要点击这个add it with elemental
现在呢就是我们的首页的编辑界面了
可以看到我们右边呢
是我们实时预览的这个页面
而左边就是我们可以使用的
elemental给我们的所有的控件
这里面的控件可能有
我认为应该有近百个吧
是元素是非常非常丰富多样的
那么在我们做首页之前的话
首先我们得要先清楚
我们的首页应该包含哪些的内容
那这个其实也是很多人做网站之初
往往是没概念的
那么我这边呢
根据我们过往的一些经验
我们列出了一个流程图
呃它不能作为一个标准的公式
来给到大家
但是我觉得可以给大家一些参考
首先
这个是我们整理的be to be网站首页
我们认为嗯
比较通用的可以放的一些内容
一个是banner啊
那banner部分的话呢
就是你可以放轮播图
也可以放静态的这种banner
静态图啊
如果要问我的话呢
个人会偏向于使用静态图
因为这样可以让网站的加载速度
变得最快
然后是一些数据成就
那什么是数据成就呢
就是比如说你的工厂
或者是你们公司成立了多久
你们服务了多少个客户
你们工厂的呃
每年的这个产量的规模
你们工厂的呃
占地面积啊
工区的面积
你们的员工数量等等
各种各样的一些
能够突出你们企业优势的一些数据
因为相比长篇大论的文字
其实往往一些数据更能够啊
第一时间抓住用户的眼球
他们可以第一时间通过这些数据
几个关键的数据来了解
初步的了解你的企业或者是你的工厂
然后呢数据下面
再可以放3点或4点的优势总结
嗯比如说你可以说是你是工厂直销
或者说你是技术专利
或者说你是领制
怎么样之类的
就是你要总结一些呃
优势就是你就是我们的原则
就是说不要把优势总结的这些工作呢
去丢给我们的用户
而是应该我们主动的
把我们的优势整理出来
然后呢以标题
加可能一两句话的这个形式呢
来告诉我们的用户
那我们的企业
我们的工厂具有哪些优势
上面这些数据呢
是作为佐证
而下面这些呢
是我们对优势的一个总结
然后往下呢
是我们的产品分类
然后是产品应用场景
特色上面的是产品来介绍
下面就是你的产品
它是可能是应用在哪些呃
场景啊它具有哪些特色
再往下是可以放一个企业的简介图片
加上一小段文字
或者说你也可以放一个小小的视频
然后呢我们也可
以放一些客户的评价
我们过往成交过的客户
邀请他们留下他们的一些好评啊
如果客户觉得不介意
那么
也可以放上他的真实的名字跟头像
如果客户介意的
那么我们可以使用虚拟的
这个客户的头像跟名称也是可以的
然后呢是一个订阅表单
就是我们可以发起
我们可以设置一些营销活动
这个活动主要是用来吸引用户
在我们网站上
通过订阅的方式
留下他们的邮箱
留邮箱的目的是为了
我们可以通过邮件营销的方式呢
来去促进客户的啊
这个一个是促进新客户的成交
另外一个呢也是促进老客户的呃
长期的留存
老客户的重复的购买
除此之外呢
如果你还有一些其他的想法
你可以在网站的首页上
继续往里面添加
就是我们要其实一个大的原则
就是每一块的这个文字
尽量的不要很多
不要长篇大论
而是文字配上图片
配上图标
配上数字
这样子的方式呢来组合啊
让客户呢就是能够啊
特别简洁的看懂
我们的首页想要表达的一些点
同时呢啊避免用户
面对大量这种冗余的一些文字
因为这样子
其实会让浏览体验变得不是特别好
这个是关于比特币网站首页的
我们的过往经验的一些建议
然后呢
我们也整理了一个电商网站首页的
可以放的这个几个板块的建议
第一个呢依然是斑呢
你可以使用轮播图或者是静态斑呢
第二个呢
是你的产品的优势的一些介绍
你可以总结3-4个点
放在页面上
不用太多
然后再往下呢
是直接是产品分类了
就不像be to be网站会放一些数据
成就啊等等
电商网站啊
我们过往看到的大部分网站
是不太会去放这个数据的
一些成就的
嗯当然
如果你是一些可能高科技类的产品
你可能还蛮需要一些数据的佐证的
当然你可以放这个数据
但是我们碰到的大部分电商网站
比较少会去放数据
好产品分类下面呢
依然是产品
只是我们将产品可以划分一下
第一块区域呢
是新产品
第二块区域呢
是你热卖的产品
第三块区域呢
是你目前在做大的折扣
promotion的一些产品
然后呃
我们放在首页上的这些产品呢
也都应该有呃
有有这个标明他的评分啊
他的一些啊
客户评论的一些信息
如果有的话
可以去也放上去啊
然后是你的品牌的简介
你的品牌为什么叫这个名字等等
其实也是啊
为了要啊说一个故事嘛
因为对于电商的消费者来说
他们可能呃
这种品牌的显现呢
也比较能够容易引起他们的一些共鸣
那可能会让一些用户
因为情感上的加分
那么他可能认可了你的品牌的理念
他也会愿意来下单去进行尝试的
好再往下呢
同样是客户评价
那这个其实不管是对于电商网站
还是B2B的网站
客户评价现在其实变得是很重要的
因为呃谷歌SEO的呃算法当中呢
其实有
有专门针对于客户评价这方面的
一个呃评分的维度
所以如果你的网站上
有大量的一些客户评价
那么其实对于你的SEO来说呢
也是会有帮助的
当然对用户体验来说
其实也是会特别好
而且你的客户评价当中最好呃
对电商网站来说呢
最好是能够是有一些
测评类的一些评论啊
你甚至可以去邀请你的客户
去写一些这种测评类的一些博客
那么你可以放在你的网站上
当然你也可以自己写
然后呢你以客户的名义来去写
你的产品
跟其他产品的一些
客观的一些测评的对比
这样的一些博客呢
其实也是比较受搜索引擎
以及用户的欢迎的
而且往往这样的博客呢
对于电商网站来说
其实也是可以起到特别大的
一个加分的作用的
随后呢在同样是一个订阅表单
那对于电商网站来说呢
订订阅表单的作用其实就特别大
尤其是对于你老客户的留存这方面
首先呢因为电商网站
用户是直接在网站上下单的
所以如果你能够通过订阅表单
获取客户的邮箱
那么你可以通过自动化的邮件啊
去定制一些自动的邮件工作流
然后呢
你可以根据你的网站的促销活动
根据节日的一些促销活动等等
你可以自动的向客户发送一些
你的促销信息
设想一下
如果他是你的老客户
他已经在你网站上下单了
那么他对于你网站的一些促销信息
其实都会有一些啊兴趣
他都会留意的
就是我们换位思考
如果我自己比比方说我自己是某
一个品牌的消费者
那么我当然也会关注一下
这个品牌新出的一些促销活动啊
等等我可能会看一下
这个促销活动折扣力度大不大
大的话我可能会看一下哎
这个品牌里面有没有其他的
我正好需要的产品
所以其实呃
订阅表单对于电商网站的作用
我个人认为
其实要比对于p to p网站的作用
要大得多
尤其是在老客户的回购这方面
是变得是特别特别重要的
当然对于新用户来说呢
你同样可以通过
比如说发放优惠券的方式来去啊
号召用户订阅你的这个网站
你只要啊
你可以告诉他
订阅网站
可以获得一个多少折扣的
一个优惠码啊
哪怕是先
他不一定会呃
真的会下单
但他可能会嗯
只要在有一点点兴趣的情况下呢
他可能会愿意
先去把这个优惠码先拿到再说
所以他会留下他的邮箱
那你一旦拿到他的邮箱
并且把优惠码给给他之后呢
那你就可以去
同样使用自动邮件的这个工具
来去向他发送这些邮件
好订阅表单之后呢
然后如果你还有一些其他的
你觉得想在首页上加的
你同样可以继续加
那我们现在呢
就向大家来演示
我们来啊
使用ELEMENTAL
将这些首页的内容添加进去
我们来到这个编辑页面
首先我们要
添加一个banner啊
不管是B2B的网站还是b ToC的网站
我们都需要banner
我们呢从左边的elemental的这些elements
就它的控件里面呢
我们先拖
入一个container拖过来
拖过来之后呢
我们可以去设置一下
这个container的宽度
那么我们先选中这个container
我们要通过点击这个container最上方
它有一个6个小点选中
你也可以先在这个容器上面
就肯定的就容器嘛
你先在容器上面右键一下
然后呢你打开这个structure
然后呢通过这里它有一个呃
你网页上所有所有元素的这个结构
然后你通过这个来去选中它
好我们选中这个container容器之后呢
我们先设置一下宽度
啊那啊我们一般banner的话
我们一般使用全宽
尺寸会比较多一点
所以我们这里呢将这个concontant with
这里我们调整为full with
full with就是全宽的意思
好全宽
然后我们现在就是要再来调整一下
我们这个容器的高度
这个容器的高度呢
它同样其实也代表了
我整个banner的这个高度
那么一般来说呢
我们认为600的高度是合理的
所以我选中这个container之后呢
在这里container下方
这里有一个minimum height
就最小高度我这里先调整为600
600的高度
那600有多高呢
啊我们我们把这个加一个背景色
大家就知道了
OK它就是有这么高
有这么高的band
那可能对于宽屏的
就电脑屏幕来说
就可能还高度还没有那么的高了
但是我觉得600差不多了
就可能不管是在笔记本还是在桌面上
都会显得还比较合适一点
高度设置好之后
接下来我们就是往里面添加内容我
们第一首先呢
我们教大家添加轮播轮播图
我们点击这个加号
在左边elemental的这个空间里面
我们输入slide
slides
选中他身后来将他拖过来
好我们把这个structure先关掉
因为它有点碍眼
那么这个slides拖过来之后呢
我们先预览一下效果
好预览效果的话
可以通过点击呃可视化区域的左侧
这里有一个往左的就是这个hide panel
就是我们可以隐藏这个面板
然后可以来预览预览
我们这里看到有一个小小问题
就是它周边是有空的
两侧以及上面它都有空
我们先要把这个空给去掉
怎么去呢
我们还是先选中这个大的容器
选中它之后呢
在advanced这里
这里有一个padding
padding指的就是这个容器内侧的编剧啊
它上右下左我们都统一设置为0
设置为0之后呢
我们再来预览一下
我们看到他周围的间隙就没有了
好现在呢
我们再来编辑这个里面的slides
我们选中这个slice
那我们怎么选
你可以直接点在这个slice上面啊
也可以点击右边这个加号
或者你通过右键打开这个structure
然后呢这里你可以直接选中这个slice
好slice这里呢
我们首先将宽呃将高度设置一下
它默认的高度是400
我们因为我们已经将容器
设置为600的高度了嘛
所以我们也可以将这个slice的高度呢
设置为600
好
然后我们呃这里它默认有三张slides
就三张幻灯片
那么你可以再加啊
你觉得不够
的话你可以再加
但是一般建议啊
不要超过三张了
因为用户也看不过来
好我们第一张
我们添加一下啊
我们选中第一张之后呢
我们添加一下
添加一个图片
比方说这张图好这张图
然后呢这个上面的文字是在中间
这个选项
content内容
这里你可以加
commercial啊这标题
grade
ten
然后下面是这段描述的这个文本
好我可以写
比方说wedding
dance这里还要提醒一个呃细节
就是标题
我们的标题一定要选
使用首字母大写
甚至是全部大写
然后呢
内容我们可以就正常的英文格式好
wedding tents
然后exhibition tents
party tents
好就这样
然后呢
下面这个按钮我们可以选择啊
我们可以改成explore
more
然后呢这个按钮上面
我们还可以加一个链接的
这个链接到哪里
就是链接到呃
我的这个slide
这个幻灯片
因为我是在推荐这个commercial grade tense嘛
那么我们刚刚设置
是不是有一个产品的类目category
这里看一下
产品类目我们
啊我们的产品类目里面
并没有去设置commercial
就是这个commercial grade tense
因为我们希望我们网址的这个结构
层次不要太多
但是呢我们在这个呃
page这里
我们可以单独创建一个
这个commercial grade TENSE
为什么因为呃
这个commercial grade TENSE对我来说呢
它依然是一个呃需要的页面
我需要这个页面
相当于是我的呃
这是一个这个这类产品的一个分类页
那么我可以
用户只要点击这个commercial great TENSE这里
它自动就会显示呃
我这个下面的一些二级类目的产品
所以我们呢可以在
比如说我可能在会在page这里
我会加我会创建一个页面
这个页面的名称呢就叫做
commercial greetings li
我们点击一下publish
好发布成功了之后呢
我们在配置这里我再刷新一下
那我就看到已经有这个页面了
commercial green TENSE
然后我只要将它的这个路径复制一下
然后呢我在这个link这里
我怎么去添加路径还记得吗
先加一个小斜杠
然后呢将刚刚这个路径添加过来好
然后我这样的话呢
我对这个按钮上的链接就添加好了啊
我可以先点击一下啊的这个保存草稿
然后我们来预览一下好
然后我们看一下
他能不能点击这个explore more
能不能跳转到
我们刚刚那个创建的那个
commercial grade tense的
这个页面
是可以的
好但是我们现在
发现个奇怪的小问题
就是在我们的标题跟
文本上面呢有一个有条横线
我们要去掉它
不过我们在编辑页面的预览模式下
其实并没有看到这个横线的
所以我们可以啊
猜想
可能是不是因为是还没有正式发布
他预览模式下会有
我点击发布看一下
然后呢再预览他依然还是在的
好有点奇怪
我们来看一下怎么样去掉
来看一下左边
这里有一个apply link on hold slide
以及apply link on button only
呃应该是在
这个地方应该是在这个地方
呃第一个选项apply link on whole slide呢
就代表说呃
我们的鼠标
放在整个这张的slide幻灯片上呢
我都可以打开这个link
就是那个commercial green TENSE这个页面
所以呢那因为我们这个主题
它默认的就是链接link
它是带一个下划线的
所以说它这里
可能就是会自动的
给它带上一个下划线
那我们现在
我将它这个apply link on button only
然后我们来呃再重新发布
刷新一下看一下OK
那看到呢
就是这个commercial green ten这里都没有了
并且我点这个幻灯片是没用了
他只能我只能按住他
之后呢左右移动
但是我点击explore more这个按钮
它是可以让我去跳转到
我添加的这个页面的
然后呃第一个幻灯片我设置完之后呢
如果你对他的样式不满意
你可以这它的样式在进行进行设置
的第一个呢
就是比如说你的这个第一张患难片
它下面本身就有个style
你点开这个custom
它默认是no
那你点开这个custom呢
你可以调整它的这个文字的
首先这个文字的呃横向的位置
比方说我点击最左
它是在最左边
点击最右
那它就是在最右边
那我们还是让他居中吧
看起来舒服点
然后呢
上下的高度你也可以调整上中下
然后呢还是让他中间或者我不调
然后呢文字的对齐方式
你可以靠左对齐
中间对齐
靠右对齐
然后我们还是不设置任何
然后呃这个是Ctrl
看了文字的颜色
你可以在这里调
比方说绿色看一下
啊好奇怪
那么我们还是不调了
让他恢复默认
你可以你你点击这个啊
这个圈的小箭头
圆的箭头
他就是恢复到默认状态下
好
另外呢这里就是text shadow
就是文字要不要加阴影效果
我选择不加
然后呢
下面这里有一个slide options这里
这里呢
我们可以把三张幻灯片全部设置好
之后再来再来去设置
呃如果对于第一张的这个style
这里就是这个costume呢
你可以单独的去控制
这一张幻灯片上的
这些文字的显示方式
但是实际上
如果你想要两张或者3张幻灯片
他们的这些文本内容
是统用一种统一的格式
颜色对齐方式来调来去显示的话呢
其实你是可以直接在这个style这里
style这里可以看到
这一个是针对slides
这里也可以去调整
然后呢呃
这里我们点击这个horizon horizontal position
看一下
它会把三张幻灯片的这个文字
统一的都调整好
我把它关掉吧
还是让它在中间看着舒服点
然后呢
title对应的就是个文文字的标题
description就是中间这段文字
然后按钮就是这个
这个按钮你都可以去调整
它的样式都在这个style这里调整好
第一个幻灯片我们加好了
我们接下来我们再加第二个幻灯片
啊我这里呢
我把这个background有一个蓝色
我先把它关掉了
哎因为我要加背景色
而且我也不希望用
户点开的时候呢
会先出现这个带颜色的这个背景
会有点奇怪
所以我在我把这个background这里的开了
先关掉了
然后image里我再上传一个图片
比方说我上传第二张
这个是
户外帐篷的好
然后呢我加好了之后呢我们来
添加一下内容
内容can
然后内容
呃我们camping
tense
mounting
mountaineering tense好
然后一样的button按钮
这里我改成explore
more
呃链接呢
同样的我这里创建一个页面
Alt door tense点击发布好
然后刷新一下这个paste
然后
这个altor TENSE应该是已经出来了啊
在这里好
将这个slack这个路径复制一下
然后呢斜杠路径过来
好了第二张幻灯片就这么添加好了
那第三张我们不要了
我们就把它关掉
就两张好
我们点击啊publish
呃对
我们还要再设计一个
这个slider option简单介绍一下
呃一个是这个navigation就是
呃就是嗯
我们就选了
大家看吧
第一个是Arrows and dots
对你看啊
两边有箭头这个地方
还有下面呢
有这个小点
你可以通过点击它来去选择导航啊
我们一般就可能就用箭头
或者说就用这个dots了
然后呢
Autoplay就是幻灯片要不要自动播放
yes开启pause on hover
就是
当你鼠标放到这张幻灯片的时候呢
要不要呃
就是
就是它一直保留在这个这张幻灯片了
就它就不再放到另外一张了
yes然后pause on interaction yes
Autoplay speed
这个呢是你自动播放的速
度你数字开的越小
它自动播放的速度就越快
我们这里开2,000
一会看一下
我们跟5,000对比一下啊
INFINITE Loop就是它
循环的播放就是它
不是说啊
如果你三张123到了3之后就结束了
然后呢
你开启的这个infinite loop就是123123123
然后transition这里呢
你可以显示这个呢是幻灯片
滑动的第二个呢是fade
就是呃引去对看一下这个效果对
然后同样如果你选择啊
就是你这里还可以选择transition speed的
它的就是这个效果的
这个速度
一般我们这些其实都就选择默认了
然后大家可以看到了
我autoplay speed改成2,000之后
它转的好快
搞得眼的眼花缭乱的
我们还是改成5,000吧
好我们点击publish
当然你还要调整样式的话
你可以在这里调整
然后呢呃
devanced这里你可以一些布局
嗯可以研究一下
但是基本上我们用slides这个控件的话
呃在advance这里设置的比较少
好我们发布好之后呢
我们来预览一下看一下
好这个这就是我们的这个幻灯片
这个幻灯片呢
我们使用的是elemental自带的这个slides
那呃
我之前碰到过一些客户呢
可能因为对于elemental不是很熟悉
然后又单独去安装了其他的一些slides
那么呃我个人
其实也用过其他slides的一些插件
会觉得有一些问题
其实最大的问题就在于说呢
它会导致我们网页首页的加载速度
会变得很慢
呃虽然用其他的
一些slides你可以做的很让那个slides呢
设计的更加的丰富多彩一点
它的呃比如说文字的位置
然后图片的一些效果
你可能啊可以做的更加多样化一点
因为呃但是呢
它会导致我们的就是还是代码的问题
代码会变得特别的呃
有很多冗余的代码
会导致呢我们首页加载就会变得很慢
就甚至会产生一种情况
就是可能我打开一个首页
下面的内容都已经加载出来了
结果这个slide还一直在加载
一直在加载
一直在加载
过了3秒钟之后
这个slide才总算姗姗而驰
那这个时候
其实对于用户的体验来说呢
其实是很糟糕的
所以我个人其实就会嗯
还是化繁为简
原先会使用其他的一些slides插件
因为觉得那些插件做出来的slides
会效果更好一点
可以更加的多元化一点
但是最终呢
还是放弃了那些选择了
啊就是elemental自带的这个slice
甚至呢我现在都不太喜欢用slice呢
我就喜欢用静态图
静态的这个band
因为它可以确保我的这个首页
打开速度特别快啊
如果你们要尝试其他的
这个slice的插件
那么我这里推荐一款
大家可以自己去尝试一下
这款呢也是我之前用的啊
还不算少数吧
叫HT slides
就是这个ST slider
HT slider for elemental
那我我呢就不再掩饰了
大家有兴趣的
可以这里面再去寻找一些
其他的一些slide的插件
可以多找几个试验一下
那但是我
个人觉得啊
肯定是没有使用elemental自带的
甚至是不用slides来得好的
好那我们slides的这个band做完了
那我们现在把它删掉
我们现在就是选择做一个静态的
这个slides就是一张图片配上文字
好把它关掉
重新添加一个容器
啊容器你可以在这里拖Ctrl过来
也可以直接就像我刚刚这样点加号
然后呢flexbox点第一个
因为我只是一张图
好然后呢
我将这个容器选中
宽度设置为全宽
然后我把高度也还是设置为600
好现在我往里面加一个图片
直接加图片啊
刚刚我们加的什么
加的是这个slides对吧
那我们这次就不加slides
我们就加一个这个image
啊搞错了
不好意思
我们不是往里面加image
而是我直接将这个容器的背景
用一张图片来代替
所以我们选中这个容器呢
我们是在这个background这里
background type呃
有两种normal跟Hover
呃normal
Hover呢我们可以做出一种效果呢
啊给大家看一下
我先加一个normal的background type
然后呢就选第一个classic
就是最简单的全
呃经典的
就是加个背景图嘛
好加了
加好之后呢
这里我要选择一下图片
首先图片的像素我就选择复我好了
然后position这里啊
我们选选择center center
当然这个你可以自由选择
那我就选择上下左右都是中间的
好然后呢
attachment这里我们就默认呃
这里有一个scroll跟fixed
两个区别就
是它默认的状态其实就是scroll
但是如果你选了这个fixed呢
就是当你鼠标往下滑的时候看一下吧
图标往下滑哎
你发现发现没有
就是你的这个图片背景不变呢
啊这个时候有时候还挺好看的
但是这个放在Bander的位置呢
其实不太合适
你可以放在呃
首页上其他的下面的一些部分
好我们就选择啊
我们选scroll看一下
那就是跟着一起滚动嘛
那我们就不要选它了
选就保持这个Devo就可以了
然后repeat
这里我们给有看到
左右两边是有重复的图片对吧
也就是说这个图片的宽度的像素不够
不够的情况下呢
啊那么它可能会给你自动重复
那我选择不要重复
no repeat
no refit呢
我们现在就发现
这个图片对于我目前这个屏幕来说呢
是不够的
所以它两边会留空
那怎么办呢
下面有一个display size
这里你可以选择这个cover
cover之后呢
就是自动的帮你把图片放大一点
就是往两边顶上
而且是等比例的
好现在背景图设置好之后呢
我们要在上面增加一个文字啊我们
就用一个
我们先往里面加加一个容器
好加完这个容器之后呢
我们现在来看一下
我这个页面的这个structure是怎么样的
啊好
让大家理解一下
这两个容器的层次关系
首先这个第一层的大的容器
就是我整个这个banner背景的大的容器
然后它往下一层有
里面还有一个container
就是我刚刚添加的
这个小的容器好
我打算添加的文字就是标题
文本跟按钮呢
我们就打算放在这个小的容器里面
并且我打算是让它呈现居中的
好
那么我现在呢先选中这个大的容器
为什么呢
我要让大容器里面的所有的元素
都是呈现居中的显示
我选中大容器之后呢
在layout布局这里我们选择justify content
这里我们点击这个center
好
然后我们现在就往这个小容器里面加
加内容加空间
我们点击这个小的容器里面
这个小的加号
点击这个小加号
然后呢我们先加一个heading
heading下面呢我们再加一个text text edit
再加一个button按钮
我们现在呢就看到elemental的空键里面
我们拖拽过来的heading跟button
这些颜色呢有点怪
尤其是个heading
因为啊button的话
我可能每一个button
我可能颜色都会要经常要去调整
那么它这里我拖拽过来
颜色怪一点也没关系
反正我要调
但是heading基本上我不会去调颜色
但是他现在默认的这个颜色呢
是这个蓝色的
如果我每次都要把这个heading
单独去通过style这里调个颜色的话呢
就很奇怪就呃
不是很奇怪
是比较麻烦
因为我要添加的heading
整个网站上会很多很多的
所以其实我们要去设置它
整个heading全局的一个设置
呃我们有去呃
按照常规的
我们去设置这个全局的heading
颜色去哪里
应该是在customize的这个颜色这里对吧
在appearance外观customize这里
然后呢这个global global这里有一个colors
这里
我们应该是调整这个heading这个颜色
但是我们现在看到这个heading
它其实颜色是对的
它就是黑色
但是我们elemental这里呢
我不管我在哪里
我反正只要轻拖拽heading这个颜色
它都是这个蓝颜色的
所以有点奇怪
那么最后我们找到了在哪里设置
这个默认的设置啊
其实是在elemental的设置
就是我们后台elemental settings这里
有一个disable default colors
就是你勾选之后
就是将elemental默认这个颜色呢
就关掉了
但是呢
就是沿用我们主题的这个设置的颜色
那我们主题设置的颜色
就是这个customize这里的
我这个主题设置的颜色
所以我其实是要把这个给关掉啊
就勾选一下
然后另外
我还可以把这个呃default phones也关掉
就是我勾选它
是关掉了ELEMENTOR默认的这个字体
而是沿用我主题设置的这个字体
所以把这两个都关掉它
然后我们点击保存一下
再来这个编辑页面
我们刷新一下看一下
好那么现在呢
他已经沿用了我的主题的这个字体了
OK好
我们现在那在这个背景上
其实我的呃
因为我的背景颜色比较深
所以我要修改一下
我的这个字体的颜色
我要把它改成白色
我选中了这个heading之后呢
在左边style这里
我们将这个text color改成白色
然后呢下面文本内容也改成白色
然后是这个按钮
按钮呢我们这样子来改
我们改成一个嗯
带有悬浮效果的呃白框的一个按钮
我们选中按钮之后呢在style这里
首先我们在下面这里有一个呃
text color我不改了
但是background type这里我修改一下
我先改成
看一下啊白色啊白色
但是我给他
OK这个背景设置里我不改
但是我改改一下这个边框啊
我想做一个白色的边框
比如说啊
那边框就是这个是board type
它默认的是就是默认是没有的
没有边框的
那么我比如说我想增加一个白色的框
所以我在这个board type这里我选择solid
就是实体
就是实线
实线的意思
然后呢这里增加一个bored with
就是你这个
这个框的宽度我就设置为一好
然后呢这里有一个bored car
就是你边框的颜色我设置为白色好
设置为白色之后呢
我们我把这个按钮的背景颜色好
先来预览一下这个效果吧
看起来怪怪的对吧
啊我尝试把这个按钮的蓝色
我给他调成透明度为100的呢
来看一下
这个可能看起来还行对
OK好
我就这样吧
然后
我在按钮的这个里面的文本改一下
选中按钮
在content内容这里这里有一个text啊
还有这个type
这里就是有很多种你可以选
比如说啊啊啊这个type
因为我其实已经把按钮的这个样式
颜色都改掉了
所以其实你这里你选其他的
他都不会变了
因为我已经把它的颜色都改掉
这里其实你选择不同的态
他
无非就是显示出来的颜色样式不一样
好那我就不用管了
然后呢text这里我改成discover
接下来我修改里面文本的内容啊
这个首先标题我改成
Manu manufacture of various tents
然后呢文本我改成a
文本我改成
wedding
然后直接从别处复制粘贴一段过来吧
好
那么现在我要让它都处在居中
所以我先选中heading
然后呢heading的style这里
在这个alignment这里对齐
这里我选择center
然后这个文本同样选中它
之后呢
呃我们在style这里center按钮一样
center
好了那我们来预览一下
整体还行
但是呢似乎这个字
还是显得有一点点的不清晰
那么我们怎么样让它清晰一点呢
我们再来做个调整
我们就是在这个容器上方呢
我们来加一个背景色
我们也就说
呃
我们就需要为这个文字跟按钮这些呢
我们加个背景色
我们所以我们需要选中这个容器
其实就跟我们之前为这个大的呃
有这个静态图片的容器加背景一样的
只是呢我们这次呢
是背景
加在这个第二层的这个容器上面
选中这个容器之后呢
在style这里
background type这里我们增加一个颜色
我挑这个黑色
但是呢不能实体黑
我们要加一个透明度
好加一个透明度
这样的话
可以让他有一点点淡淡的黑色的
呃可以让我们的这个文字
看的更加清晰一点
但现在呢
他的这个容器有点太宽
因为他等于说往两边延伸了
所以我希望呢是嗯
我就直接给他
把这个容器的宽度给降低一点
我们选中容器
在这个four waste这里呢
我们选择four waste
之之后呢
我们在waste这里我们可以填写百分比
我百分比调整为60
好 60的这个宽度其实差不多的
只是呢它现在是这个容器就是在呃
就是我的这个第二层容器
它没有呈现在整个容器的中间位置
所以我要让整个容器里面的内容呢
都是也是呈现居中的
所以我选中这个大的容器
然后呢在layout这里有一个align item
这里我点击这个center
好这样子呢
我中间的这部分的容器
它就到中间来了
那么
我现在可能觉得他的背景还不够深
我要把透明度给调的稍微再低一点点
好也就是再加深一点
好这样子呢嗯
他看起来就会稍微舒服点了
那么我们能不能将这个按钮的样式
要再调一下呢
比如说我增加一个悬浮效果啊
我悬浮状态下呢
这个按钮呈现
白色背景
黑色字体
看一下
所以我要设置按钮的悬浮效果
应该是选中按钮
选中按钮之后呢
我们在左边style这里有一个Hover悬浮
然后呢首先调整text color
我们就设置为这个黑色
然后background type这里color我改成白色
看一下好
那它就呈现这种悬浮效果
鼠标放到这个button上面
它就会显示这个白底黑字啊
看起来就会稍微舒服点了
OK所以如果是我个人的话呢
我就倾向于选择这样的静态图片
作为banner
因为这样可以确保我的网页
我的首页的加载速度会特别快
而且呢图片一定要压缩
尽量的压缩到就是最多不要超过200KB
如果可以的话压缩到100KB
但是可能对一般的图
你想压到100KB以下
可能就会比较的困难一点
但是反正就是100多KB
那就都没问题
好那么我们的banner图就制作完毕了
所以两种方式
第一种呢是轮播图
左右滑动的就是那个幻灯片一样的
第二种呢
就像这样的静态图
我个人呢比较偏向于选择静态图片
好那我们再来继续讲解下一个部分
那接下来
我们来做我们首页的第二个section
来看一下
我们可以去增加一些数据
成就优势总结等等
那么我们就放在轮播图的下方
我们首先添加一个容器
点击这个ad new container
增加一个容器
我就选择第一个
然后呢
我将这个容器的宽度我先设置为1,200
因为这是我们整个网站的内容的标准
宽度我设置为1,200啊
然后呢我往里面呃
开始增加内容
那我其实已经构思好了
呃那个我来大家看一下
我会怎么去做这块优势
总结的一些介绍
那我会再往这个容器里面呢
我再增加一个容器
然后我在这个容器里面呢
我会再套两个小的容器
好
我们来将这个structure的这个导航打开
大家看一下这个结构怎么样的
第一层这个
是我的增加的这个大的容器
然后呢我往里面套了一个容器啊
之所以往里面套容器
是因为
我要在里面再增加两个小的容器
啊
因为我想要放一张图以及一段文字
所以我又往里面增加了两个容器
它们它们的层次是呃逐步逐步的
这个往下层
呃它们的层次是一层一层往下的
但现在我呃看到两个里面的小容器呢
它们是呈上下的排列
而我要的是左右排列
所以
我首先要选中这个第二层的这个容器
也就是呃对
就是这个第二层的容器
然后呢我们来到左边
在lay out这里
lay out这里大家看到有一个items
这里就是里面的项目
它们的方向是怎么样的啊
目前它默认是没有选
所以我只要选一下这个row
就成一行的方式来排列
那这样呢
它们就会呈现左右两边了
随后呢呃我希望左边是图片
右边是文字
并且呢
我左边的图片这个整体的宽度呢
稍微呃不要那么的宽
就我想左边稍微窄一点
右边文字多一呃宽一点
所以我呢
我选中左边的这个容器之后呢
我将在左边这个宽度这里我改为40%
然后我将右边的这个容器的宽度呢
改为60%
并且呢我希望这两个容器之间
他们是能够留有一定的空间的啊
选中这个第二层的容器
因为第二层容器里面
包裹了里面两个小容器
就是我放图片跟文字的
所以我选中这个小的容器之后呢
我需要将呃小选中小的容器之后呢
大家看到左边这里有一个gaps
这里这里呢
就是去调整
我里面两个小的容器之间的这个空间
啊我把它调大一点
我把它调成60
这样哈
可以看到
呃大家可以看到
两个容器之间的间隔
就会比较稍微宽一点
这样其实也会让页面显得稍微舒服点
好
我然后我们接下来往里面添加内容
第一个呢是首先添加一张图片
添加完图片之后
呃然后呢
我们在右边
我们先呃
增加一个heading
一个标题
然后呢我们再增加一个
呃文本
啊我还要再增加一个标题
因为我有两个
一个小标题
一个大标题
所以呢我选中这个标题之后啊
我右键右键
这里有一个duplicate
就是直接在当前位置再复制一个
好然后呢
呃上面这个是一个小标题
它目前的格式呢是默认是H2的
现在我把它调整为H4
这样它会小一点
呃
尽量通过
就是像这种情况下的话
你就是最好是把那个html tag改一下
你可以改成H3或者是H4都可以
但是尽量不要h
呃都是H2
因为呃
你在一个容器里面有两个H2标题
是可能但是我只有一段文字
所以会以呃其实会有点怪的
所以呢
可能比较好的方式呢是我有一个HR
同时呢可能我有一个夏季的
就层次往下一层的
或者两层的标题
没关系呃
这个是为了Su的考虑吧
就是如果你的页面上
呃就是你的这个html tag
这里就是你的标题
如果他们的层次
相对丰富一点
那么其实对Su来来说呢
会更加有利一点
因为他会认为你的逻辑是清晰的
而不是都是大量的H2或者是大量的H3
好然后呢
我们增文字也增加
好了我们再增加一个按钮
这个按钮当然是用来引导用户点击的
对吧
好然后我们现在增加添加图片
首先我们选中这个图片
在左边这里choose image这里我选择一个
这个图片我已经上传好了
这个是一个图片的
就是呃户外呃
使用帐篷各种场景的一个九宫格
好然后呢
右边的文字我给它改一下
小标题我写u
exclusive
那因为我做帐篷的
OEM的贴牌定制嘛OEM ODM Manu
factor
好下面这个文字呃
大家可以根据情况写
那我就不填了
就嗯好
当然填一下吧
我从我用界面呢已经生成了一段
我们给它复制粘贴过来
好然后按钮click here
我改一下
改成all products
好然后呢
我们点击这个隐藏面板
预览一下
有没有发现太窄了对吧
太整体太拘促了
所以我们要调整一下
而且样式呢可能还在调一下啊
我现在把这个图片呢
我给它调成一个稍微特别点的样式
我选中这个图片在左边style这里
下面这里有一个border radius
就是你这个图片边框的弧度啊
我给它设置一下
我先将这个同步的按钮关掉
关掉之后呢
top这里我选择我填入300
bottom这里我也填入300
哎这样子看起来就会特别一点
就不是都是方方正正
的
因为上面那个banner不是也是方的嘛
所以我下面我想下面有点变化
让整个版面看起来呢啊不要太单一
然后呢我们嗯
再把
右边这些就是嗯副标题大标题
文字呢把它内容往下拉一点
就让它呈现居中的位置
所以我们要选中的
是这个右边这个小的容器
选中这个容器就continue
之后呢在左啊在左边布局lay out
下面有一个justify content
这里它有一个上中下这样的一个选项
我选择这个中
好然后我们现在再就是希望
是他整个这个板块
离上面band的空间稍微要大一点
所以我们是选中这个大的容器
选中大的容器之后呢
我们呃就是这个容器
我们在advance这里有一个padding
padding指的是你内部的这个编剧
我先把这个同步的给关掉
然后呢我顶部我留100
底部里我也留100吧
因为底部我也要增加别的内容
那如果太拘束的话其实会不好看
所以如果是这样的话呢
啊那这个版面看起来就会舒服多了
那我现在可能觉得
啊大家看就是
其实我的图片本身它有一点点编剧
然后呢呃我我我的这个容器里面
它因为我容器里面套了容器
所以它其实还有一些呃边
呃旁边的一些间隙
所以我希望
所以我可能要再调整一下
整个这个第二层容器的宽度
就是这个第二层
就包裹了这两个图片跟文字的
这个这个这个容器
我想把宽度再啊调整一下
但是我看到这个容器目前它宽
度是100%
所以我要调整的是上面这个大的容器
因为我上面大的容器里面
啊我在layout布局这里
其实我设置了内容宽度的是1,200
所以
其实我只要在上层这个大的容器里面
我把1,200再调高一点
我调成1250好了
好 1250调完之后呢
大家可以看
就是我这个第二层的第二级的容器
它因为本身就是全宽100%嘛
所以它就是100%的呃
占到我们这个上层容器1250内容宽度的
这个宽度
就是下层容器
我们不用调整了
因为它已经是100%了
好呃
我们将上层容器的这个宽度调为1250
之后呢我们再来看一下
好
那因为大家现在看到我两边比较宽
是因为我录屏用的这个屏幕
是一个比较宽的一个桌面的屏幕
但是如果你们把这个屏幕
放到笔记本电脑上来看的话呢
其实这个页面就看起来还蛮舒服的
两边的空间啊会有一点点
但是正好是合适的空间
现在宽是因为我这个屏幕太宽了
当然你也可以去呃
设置不同的这个显示端去调整
那么我们在整个首页做完之后
我们会再带大家来去设置呃
其他几个显示端的
目前我们在elemental默认情况下
我们看到有呃桌面
然后Pad跟手机
但实际上我们呃在首页做完之后呢
我们会再再增加两个呃
再增加一个显示端
一个是呃
增加一个laptop
就是笔记本电脑的
然后呢再是Pad
然后再是手机
那现在这个页面是Desktop
所以其实啊
如果你考虑Desktop的话
其实你可以将这个这个上面的宽度
比如说你调整为1,300
我们来看一下1,300的宽度
那它看起来会更加的宽一点点啊
但是这样的话就是你要确保呃
你需要在呃这个Desktop桌面
以及之后我们会加的laptop
就你要单独去调调整这些宽度
呃那么我Desktop我就设置为1250好了
因为我认为1250其实看的也还比较和谐
还可以
好然后这个加完之后呢
那么我现在希望说嗯
再往下再增加一个
呃接下来就是啊
我们想增加几个啊
我们呃这个在elemental里面呢叫做icon box
就是它是一个小图标
一个标题
一段文本
那么我们可以去里面放上我们啊
这家B2B企业的一些优势
或者说是一些数据
或者是其他的一些
你觉得可以拿来作为销售卖点的啊
一些点好
我们接下来呢来去添加一下
我们首先
还是要先在下面增加一个容器
那么啊所以这是我们
这是我们第一层大的这个容器
就整个section
我打算把它放在一块
所以呢我们要在呃
等于说是第二层的容器下方
我们再增加一层跟它同样级别的容器
那么你可以直接
从左边这个elements这里
你拖拽这个容器的空间过来或者
你可以拖拽一个过来那
或者呢
你可以直接选中这个大的容器
之后呢
你点击右键
这里有一个duplicate
就在同样位置复制一个
复制一个之后呢
那么这里他已经包裹了两个小
容器了对吧
我只要把内容都删掉
或者
我就直接把里面的小容器直接删掉
我们接下来就可以直接增加
那个我们想要的
这个叫做icon box的这个控件了
我们来看一下icon box到底长什么样子
啊
就是这个icon box
它是长长这样子的
那么我们现在要在这个容器里面
我们要增加三个
所以我就是直接右键
就点击这个icon box
之后呢我右键选择duplicate就可以了
然后大家看到啊
它啊我复制完之后
它是会自动的横向排列的
而不是往下排列的
是因为我们之我们上面
我们是直接复制的这个容器
而这个容器
我们之前已经在这个项目的方向
这里就是我
其实我们已经调整为横向排列了
所以我这里再点击一个duplicate
它同样是横向排列
但是现在它们互相之间的间距
可能会有点大
因为我上层这个容器呢
我之前已经设置了这个gaps为60
所以呢
我可以将这个容器的gaps我把它删掉
删掉它默认就是20了
好然后我们来看一下啊
嗯你可以这三点你增加
比如说high quality啊
或者说是啊custom print之类的啊
你可以增加一些卖点
你也可以放一些数据的一些东西
那怎么编辑呢
就是你选中这个容器
首先这个图标也是可以换的
图标有两种
一种呢它呃elemental
它控件里面它自带了一些图标
你直接点击它
这里有很多的图标可以供你选择
可以供你去选
择的那么如果你觉得这里面图标啊
没有找到你合适的
就是你可以通过通过搜索一些关键词
来去找图标
比如说啊
我搜索一个关键词啊
Facebook啊
它这里有Facebook
然后呢你比如说你搜quality啊
quality没有
但是你可以找找
就是他有一些图标你可能也可以用
像我们比如说如果你quality
这个钻石的
你可以拿来用
或者说是啊
这种笑脸你都可以拿来用
这个是代表high quality
呃然后
如果你觉得这些图标
不能满足你的需求
那么你可以呃
大家看这里
右边有一个upload SVG
就你可以自己上传SVG的图标
那么怎么去找SVG图标呢
啊
推荐大家一个网站
这个网站呢是叫做
阿里巴巴矢量图标库
叫做icon font啊
这个呃
是阿里巴巴的
应该是阿里巴巴的吧
因为它写的是阿里巴巴矢量图标库嘛
啊但是因为它中文网站啊
所以如果你开VPN的情况下
你这个网站你打开速度会比较慢一点
你可以切换回国内的网络
然后你再呃去找图标
那这里就很方便
我比如说我这里啊
我可以搜索的啊
quality啊当然你也可以输入中文啊
因为这是毕竟是一个中国的网路
我们国内的网站嘛
呃你比如说高质量
我看一下有没有
有没有合适的看一下啊
高品质啊
这个等等
那那就是你
比如说你选中一个图标之后呢
你点击这个download啊对
而且这个网站是免费的
就当然他这里会有一些付费的
素材但是其实免费素材也很多
基本上我
如果我觉得这里的图标
不能满足我的需求
我是几乎就是在这个icon phone上面找的
然后呢你点击这个下载
下载之后呢
这里它会有允许你选择格式啊
有SVG就是因为像这里的图标
都是要使用SVG的格式
那么你只要在这里选择这个SVG下载
而且你还可以调色哎
你看红色
黄色绿色
灰色等等
然后这个像素的话
最大我们只能选择256了
那那因为图标其实确实不用那么大
因为就这么大嘛
你的确是不需要那么大的啊
你只要啊
比如说我选择一个红色
然后我SBG下载一下
好下载成功之后呢
然后我再左边这里
我点击upload SVG好
那么
它会让我们上传到我们的媒体文件库
我去点击选择文件
然后再下载这里
提高质量
好看到这个已经过来了
然后我点击insert media
插入这个媒体文件
哎看到它
这里就是已经有这个图标出现了
而且啊应该也是可以调大小的
看一下
对它
同样也是可以
允许我们去调这个大小的
所以就很方便
所以就是素材啊
呃图标的素材
你如果能从这里的呃
如果能直接在elemental的空间里面找到
那就最好
如果找不到
你就单独在阿里巴巴
鼠标图标库上面找
尽量不要去呃安装插件
因为也有一些插件
它会有大量的这种图标库
你可能呃
它会直接跟elemental集成
你只要比如说你选择这个图标库的
时候呢
它这里会自动的跳出来其他的一些
你安装了额外插件的一些图标库
你当然可以去选
但是那些插件就还是一样的问题
因为我们要确保网站的加载性能高
所以我没有必要
仅仅只是为了增加几个图标
而去安装一个插件
那个插件
可能可以给我们带来几万个图标库
但是我对我们来说
其实它反而增加了网站的负担啊
让我们的这个加载速度
可能会有些影响
所以就
如果只是像只是这些找几个图标
那就我们就稍微麻烦一点
手动的去阿里巴巴矢量图标库
或者说其他的一些矢量图标库你找
找好之后呢
你上传按照他所要求的SVG格式下载
上传之后呢
你再放进去
这样的话呢
其实就呃
我们不用去安装插件
也不会因此而去影响了性能
好那么我这里图标我就呃
我就还是随便增加一个吧
呃
对
随便增加几个
然后呢我们选中这个图标之后呢
在左边content内容这里呢
title跟文字你都可以去改的
那我就不改了啊
然后呢我们再看style这里
你可以去调整它的一些样式
icon space icon space
就是图标跟下面标题之间的空间啊
你可以去自由调整
大或者小都行啊
我们默认就我就不调了
而content spacing啊
应该是下面这一块看一下
啊对
他指的是下面标题
跟下面文本描述的距离啊
我也不调了
然后icon这里你可以调大小
大大小大一点小一点都可以
然后
呢content这里你可以修改标题的颜色
字体字号
字号在这里
size这里包括它的粗细啊
包括它啊
是不是使用首字母大写
比如说uppercase就全部大写啊
比如说你如果只是首字母大写
那么你就选择这个圈啊
capitalize这这个
这样子一般来说呃
再提醒一下
标题这里尽量全部使用首字
首字母大写设置是uppercase
因为这是为了突出重点
好那我这里还是恢复默认
不管它
那么然后
description就指的是下面这一段描述
你同样可以改颜色
改字体
包括你文字要不要加阴影等等
那我就不讲
因为会有点怪的
好然后还有就我们还可以调整一下
就这个icon box的样式
它这里有
就是icon
position就是你的图标的位置
你可以有3个选项
靠左左
靠上靠右
那我全部靠左好了
好我全部靠左
因为我觉得可能看得会舒服点
那啊我是不是需要选中每一个
去这样点击呢
啊其实有比较简便的方式
因为如果你图标很多
你可能你有三行一共9个图标
那你一个个选中它
点击这个会麻烦
所以你只要啊
这里是教大家一个小技巧
就是你这一个图标库
你比如说你的文字
你的标题
你的文字样式什么
全部调整好之后呢
呃你可以直接右键点击这个copy
复制copy啊
不是duplicate
duplicate是直接在原来地方
复制一个新的出来
而是点击copy
copy然后呢
在你想要更改样式的这个图标之上
你右键之后呢
这里有一
个paste style
就是将你第一个icon box的这个样式
把它给复制一下哎
它就自动会复制了
所以在这种情况下
就是如果你一个图标啊
一个icon box
你修改了图标
文本文字等等
你修改了好多项
那么你就没有必要再去每一项上面
再去做同样的
一步一步的操作
很麻烦你就其实你直接就是复制
然后粘贴它的样式过来
paste start过来就可以了
当然你也可以复
呃这个定制完设置完一个之后呢
你就直接duplicate
你只要duplicate出来的
它都是跟它样式一样的
好呃那么这里呢
我内容就不换了
我就保持这样子
好大家可以看到就是目前嗯
这个整体的样式看着还行
看着还行啊好
所以啊
我们的第二怕就是优势总结啊
数据成就啊
就是我们可以通过这样的方式来做
往下从从banner开始往下看一下啊
这部分看着还行
那如果你觉得这可能如果有点拘束
那么你可以让他上下的
就里面这两个容器之间的上下
可以稍微宽一点点
比如说你调整为 50看一下啊
好调整为50之后呢
可能看的会稍微好一点
他上面这个部分
跟上下面这个部分会有点距离
好我们这个设置好了
然后我们点击publish呃这个发布一下
然后呢我们点击这个小眼睛预览一下
OK这样看的还可以
好那我们第二个section
就是你的数据成就
优势总结
你可以通过这样的方式来做啊
当然你不一定要完全跟
我一样啊
就是你可以有你自己的一些设计
那么啊我反正就是做成这样子
那么你
你完全可以自定义一些其他的样式
接下来呢我们来增加产品的类目
那么啊我首先增加一个标题
那么我还是添加一个容器
然后容器里面呢
我拖拽一个heading过来
宽度设置为我们标准的1,200
然后呢这个
标题这里我选中这个标题
点击它之后呢
在style这里我点击这个居中
让它居中显示Ctrl
这里内容改掉改成categories
然后我们再往下增加一个容器
因为接下来就是类目的导航
我首先我想放两张大图啊
把我两个大的分类先放上去
点增加一个容器
我增加一个这个左右两栏的容器
宽度设置一下
好然后呢我往呃这两个容器之间啊
我想留一点空间
所以我选中这个大的容器
之后呢将gaps这里我调整为20
好然后我们
往这两个容器之上呢我先加两个背景
因为我这个是两个大类目
一个是commercial grade tense
还有个auto tense
所以我想就是用一张背景图
上面再用一个阴影
放一个标题的方式来去体现
所以我首先在这个容器之上呢
我加一个背景
在左边style这里加一个background
选个图片
用这张图
然后呢将呃图片的
啊
首先我要将这个容器的高度调整一下
因为这个大的容器
目前它的高度很很矮
所以我的图片会有点显示不全
我选中这个大的容器
之后呢将高度这里minimum
height这里我调整为350
好
然后我再选中里面这个左侧的小容器
调整背景图片的位置
那目前position这里我调整为中间
attachment就不动了
repeat no repeat display size选择看一下cover啊
cover选container啊
container它就会显示有点点不全
那我们就用cover好了覆盖
然后在左边的容器啊
我们同样增加一个背景图
选中它中的background这里
选择一张图片
然后呃
户外的这个帐篷
呃调整图片样式呢
怎么调
其实就是把刚刚那个图片复制一下啊
刚刚那个容器复制一下
然后呢我们呃
调整样式嘛
对吧那这样哎
它自动换了我那个图片
那没关系
我只要把图片换了就可以可以了
可以看到
就是我他的样式已经都调好了
图片显示的位置啊
attachment repeat都已经调整好了
呃那么因为我刚刚是复制的
整个就左边这个容器复制了样式过来
所以
他一并把这个图片背景也调整过来
呃也复制过来
那么我只要换一下背景就好了
但是
图片的这个设置都已经是一样的了
好接下来呢
我再往这两张图片上呢
嗯我来加标题
加两个标题
点击这个加号
heading
啊heading
这里呢我
先让它呈现上下左右的居中显示啊
我选中左边这个容器
然后呢将里面的内容呢
就呈现上下的居中
然后呢左右的居中好
然后我点击选中这个标题
那我把文字改下commercial
grade ten
然后现在文字不是黑色的吗
对吧那么
我就是要调整style这里样式这里
text color改成白色
好改成白色之后呢
那么我现在依然觉得
这个背景有点太亮了啊
让白色不太明显
那么我可以在这层
这个容器的背景上呢
我们可以增加一层
覆盖一层阴影
我们点选中这个容器之后呢
在左边style这里
background下方这里有个background overlay
我们增加一层啊
黑色的
并且呢我们将透明度稍微啊
要增加点透明度
让它稍微透明一点点嘿
啊这个是透明度啊
可以看到我一边透过它
右边会同步显示
我们将透明调到嘿
调到这个位置
看着会啊
来预览一下
好这样看的还可以
好的那么我们现在就是要怎么做
就是呃因为这个已经设置好了
那么我们可以在右边这个上面
也增加同样的元素嘛
那我们要点击这个加号拖拽heading吗
呃这样太麻烦了
我就直接将这个已经做好的这个heading
复制一下
到左到右边这里粘贴过来好
粘贴过来之后呢
那呃可以
首先可以看字体都已经颜色一致了
那我只要在这个容器的选中
右边这个容器
将这个样式
就是布局上下左右的这个
居中调整一下
然后呢我们再增加一层图层对吧
呃background overlay增加一层阴影
说错了不是图层
是阴影
background overlay那么这里
那这里面涉及到具体的字号
其实我要我应该是选中左边这个容器
在background overlay这里这个color这里
它下面这个字号给它复制一下
然后呢到
右边这里
然后来到这个background overlay
在这个颜色的色号这里给它粘贴一下
好就可以了
然后我们只要再把这个文字改掉
改成alt door tents好了
那这那这样的话呢
我们就两个大的类目就添加好了
但是
我现在觉得它跟categories这个有点距离
有点多那么所以我们就调整一下
调整什么呢
就是我选中这个大容器
然后他这样
我将他的内
呃内边距
内边距我们调整一下
我内边距设置为30好了
好调整内边距可能会不太合适
因为我整个容器
我增加了一个最minimum height
那么没关系
我可以直接在
上面这个标题上方
我直接可以去加的
我选中上面标题这个容器
然后呢我我只要增加一个呃
下面的编辑嘛
啊当然
其实编剧你可以呃
这个是marching
代表的是外编剧
这个呢是padding
是内编剧
那么我们使用内编剧啊
这个我们下面先增设置为500
太高了啊
在bottom下部这里增加啊
我调整为30看一下
好那这个可能就看的还差不多
当然了就调整这两个之间的距离
其实有好多种方式啊
就如果你不用这个padding
我比如说我选中这个标题的大容器
我不用这个heading
我调我调整这个外边距也是可以的
呃然后呢
我调调整为30
外边距就是我这个容器值之外的边距
大家可以看
那我这两个上下这个两个大容器
它就不在一起了
我也可以通过这个方式来调整
这个都都可以有
方式是比较呃
这个灵活的啊
啊不一定非要按照我这个方式
好我们预览一下
我感觉category跟下方这个距离
可能现在呢又有点宽了
我给它调整一下
调整为20
看一下呢
啊 15啊
现在这样可能看的还差不多
好的那么我们啊两个大的分类
就是两个一级类目的分类已经做好了
那我现在要做的是什么
就是在啊这个标题上面
在左左侧
大家可以看到有一个link
我只要将我的那个类目的
这个页面的链接
那个路径添加上去就可以了
好两个大的类目添加完之后呢
接下来我们再来增加呃
下集的二级的类目
就是我呃这两个大类目
下面几个二级的商品的类目呢
也给他加上去
那么我们用呃一个呃我
我们用这个image box来去增加
因为可以做一些动态的效果
让整个页面呢不要完全就是静态的
好我们接下来来去做
这个二级类目的增加
好我们现在来来增加
二级类目的这些设置
首先添加一个容器
然后呢我们就增加这个容器
然后将它的宽度设置一下
然后我在里面增加一个
我们这次使用这个grade这个网格
网格呢比较方便
就是我可以在里面添加项目
它自动会帮我把它的宽度等等
都调整为一致的
并且呢我这里直接可以设置是啊
这个columns就是几几列
然后呢rose就是几行啊
我因为有一共有10个产品类目
所以我设置为5列
然后两行啊
我这里面呢我添加一个空
间叫做image box
这个image box okay好
image box呢
这里我可以增加的是图片标题跟描述
那描述我不用了啊
因为我这是一个产品类目的一个呃
一个导航
所以我要要的是图片跟名称
好我图片这里呢
我先增加个图片
增加一个这个
好那么现在图片呢
它首先有点小
我要调整一下啊
我要把这个图片的这个大小呢
从它默认的应该是30吧
默认30 调整拉大一点
拉到55看一下好 55
然后呢我要将这个图片呢
我不想用方的
我想要有一个圆形
调整一下看一下调到100啊
实际上调到好像到了60
它就已经是圆形的了
OK我就设置为这个60好了
然后我把标题改一下
改成比如说wedding teen wedding tent
呃然后我可以在这个image box上面
我可以在下面直接可以这里加个link
link加哪里
就是我这个类目对应的呃
那个产品分类的那一页
呃然后呢
我那我这边就不加了
我设置好了一个
我接下来另外的9个怎么做
就是右键duplicate
右键duplicate
右键duplicate
可以看到我通过这样的方式做出来
它样式都是一模一样的
第一行已经满了
我再duplicate它就到第二行去了
duplicate duplicate
那么5个啊
那么一共10个
二级类目的导航都做好之后呢
我接下来要做的是什么
就是换图片换标题嘛
对吧我这里图片比如说换成啊这个
换成这个party tent
然后呢把标题改成party tent
这样就可以了
然后我就我只要一个一个的
然后我只要一个一个的
把剩下的8个全部换掉就可以了
好那我就不继续换了
那么我们现在来看一下整体预览效果
啊
categories然后两个大的类目
下面再是10个二级类目
那么10个二级类目跟上面的空间呃
有点有点靠得太近了
我调整一下
选中这个大的容器
然后呢我把外边距调整一下
上面这个外边距调整为20
看一下好
这样看着还差不多
嗯其实最好可以保持跟cadigrase
它的下边距是15
那我们这里也设置为嗯
看一下15
好那这样的话
就是这个空间跟这个
跟这个空间是一致的
但是啊我们现在好像觉得啊
因为我们看到这个二级类目的
他两边啊
他其实是有空间的
而我们上面大的一级类目
他其实两边是没有空间的
所以我们可能需要将下面这部分
二级类目的
这个看
宽度呢在
所以
我们可能需要将下面二级类目的
这个宽度呢
要调宽一点
确保它两边呢
能够差不多
跟上面的这个一级类目
是能够保持在一条线上面
所以我这里
我选中这个二级类目的这个宽度
我们将这个with
这里我慢慢的调啊
直接输入1250看一下
预览一下
一250 可能还不够
我可能要调为1300 好
1300之后呢
感觉看的就差不多了
而且就会比刚才看的更加的嗯
大气一点
舒服一点
好
那么我们再从上到下预览一下班的啊
这个是我一些优势介
绍然后产品类目
两个大类目下面分别是此类目
好的好我们就保持这样
我们点击publish
前端的效果呢
就已经自动都调整过来了
然后我们只要在这些类目上
分别都添加相应的链接就可以了
好
那么我们也就是在产品分类这一趴
我们就添加完毕了
那我们现在再给这几个产品分类呢
加一个动画效果
呃因为我希望鼠标放上去的时候呢
它能够有一些动态效果
这样的话
可以让首页的用户
交互的这个体验好一点
下一个什么效果呢
啊我点击选中这个Flipbox
然后再image这里有一个Hover
Hover这里最下面有一个Hover animation
就是悬浮的动态
我选择Shrink
啊Shrink可以Shrink
或者是啊就选择Shrink好了
他会收缩
那么我设置好一个呢
我只要复制样式就可以了
然后我刚刚也另外把这个image的
这个border radius
全部都调整为100了
因为100的话可以确保它是完全圆形的
好那这一个调整完之后呢
我就复制copy复制
然后粘贴样式
粘贴样式粘贴样式
全部的把样式粘贴一下就好
这样的话呢
可以我的鼠标放上去的时候呢
他会有动态
这样其实也是提示客户啊
原来这个鼠标放上去
他其实是有链接的
可以点的
所以那么关于这部分我们就设置好了
所以关于这个子类目的设置呢
我们就全部都设置好了
我们publish
前端再看一下效果
好鼠标放上去它是有动态
效果的其实就会让这个腰呃
就会其实就会让这个交互的感觉呢
会体验好一点
那我们现在呢
在这个产品分类下方
我们打算再增加一个元素呢
去号召用户呢过去寻盘啊
我们来增加一个叫做animated headline
并且呢再增加一个按钮
好我们还是先添加一个容器
将这个容器的宽度呢
调整一下1200
我们先增加一个空键叫做any
大家可以看
这个控件的特点
就是它可以在一些重要的文字上
比如说我加一加一个文字
然后呢文字的某一些单词上
我可以重点突出一下
那么我加一句什么话呢
比如说PU our TENSE啊
然后呢下面重点的部分
那我编辑在左边这里啊
就是before text
表示的是这段黑色的文字
highlighted text就是要highlight的部分
那么我们highlight什么custom
printing AVAILAB
就是表示都是可以定制的
然后我可以呃这个highlight的方式呢
它这个是circle
就是把它圈出来
那我就圈出来好了
或者你可以选其他的对吧
都可以呃
然后我现在要把这个highlight的文字呢
给它标注一下
要给它用别的颜色
突出一下highlight的文字
给他用
啊sorry
这个headline text color
这个是是前面的段文字
我们要的是呃
要设置的是这一段animated text
啊绿色我觉得还不够醒目
我使用一个其他的颜色啊
好我就用这个紫色
深紫色让他看的更明显一点
那么这句话呢
是告诉我们用户
我们是可定制的
那么告诉完用户这句话之后
那我是不是下面要加一个按钮啊
所以我这边在呃
空键这里我再增加一个button
选中这个按钮
然后我们要在呃
style这里将按钮的位置呢
居中
然后呢我们编辑一下按钮的文本
get a free quote
并且按钮的颜色是不是也调整一下
哎奇怪
为什么上面的文字颜色变成白色了
啊
并且我们将这个按钮的颜色也改掉
也要醒目一点
啊其实这样子
好像也可以
因为我整个网站
我都是默认使用这个蓝色的按钮
好那我们不变了啊
但是呢我们要将这整个一块section
就这这整个一块板块
我们要增加一个背景色
好让它醒目一点
而且这个
呃
这段文本这个字体可能有点太小了
我们可以把字体调整一下
好调整为30
就是选中这段animated headline之后呢
在style这里
你在headline这里
字体你可以调整
就headline Typography字体你可以调整啊
我这里设置30
我觉得差不多
然后我再啊
我将整个这一整块我增加一个背景色
好让它醒目一点
选中这个大的容器
之后呢我增加一个背景色啊
比如说我用这个绿色
但是呢
我想我给他加一个透明的效果
看起来稍微不要那么的重
淡淡的绿色
好看一下效果啊
这样看得还可以
没有显得很突兀
嗯只是呢
上下留的空间不够
我要把上下留加点空间
那这个时候我们就需要用到那边去
了
嗯那边距
那边距的话呢
就是只是内部他两边拉宽
所以我整个的占背
有背景色的空间会更大一点
我比如说我top部分我设置50
bottom也50
好看一下
OK这样子的话呢
就看的还行吧
啊看还行
这个颜色如果大家觉得不满意
你们可以自己去调
那么这个都没关系
好那如果我比如说我
呃正好给大家区别看一下
margin跟padding这两个区别
如果我不用这个padding
我把padding全部都去掉
但如果我用Mar marging
我我选择top
它只是在上面外部增加空间
所以这种情况下
因为我们要是让整个这一块
都是呈现绿绿色的这个背景
所以我们其实是需要调整的是padding
就是内编辑TOP5
十button 50
OK呃所以然后
呃那这部分我们就这么设置好了
我我只要在这个按钮上增加一个链接
那这个链接就是我们稍后
呃之后我们会做一个弹窗
呃用户只要一点这个get a free code
立马就出现一个弹窗
弹窗上会让客户填写一些信息
这样
他就可以发送一个循环来给我们了
好我点击publish
再来看一下前端预览效果
看着还行
OK那我们就保持这样子
然后再往下呢
我们
我们接下来是增加呃一个next section
增加产品应用场景特色
或者说是企业简介
那么我们先加一个企业简介吧
啊也可以加一个应用场景
因为我们这里正好产品类目嘛
产品类目我们下面
加应用场景那可能其实也还比较合适
好我们要加一个标题
那标题
呃既然跟这个category一样的层级的
我直接复制category复制
然后我在这里粘贴
然后我只要将这个category改一下
application
applications对吧
然后嗯看一下
需要留点空间出来
然后跟上方
这个上方这个部分
会会会有一点点太挤了
我加一个上编句
TOP15可以看到啊
因为我刚刚是复制的这个category
这这个容器过来
所以这个category上面
它本来设置了一个15的下边距啊
下面的外边距
那么对应的这个上面也有
那我只要在这个上面
我再加一个上面TOP15 的
一个编辑就可以了
好applications这里好然后我们接下来呢
嗯我们要使用的是
我们使用另外一个控件
就是我们多用几个控件来给大家演示
大家也可以多去熟悉熟悉
首先还是增加一个容器
宽度
好我们这个容器呢
我们添加一个叫做flipboxed
这个flipbox呢特点就是你鼠标放上去
它会有悬浮的效果
然后呢我们先把这个图标去掉
把背景色改掉
增加一个图片
我们背景里面用一个背景图
呃这里面没有
我要重新上传
选择这张图片那现在呃这个是front
就是我们选中这个flip box之后呢
我们看到有front跟back back
这里呢我决定什么都不想要了
所以我把它全部都删掉
包括按钮也删掉
然后呢
删掉之后呢我要先加一个文字
这个是for yard
那我希
望做的这个效果呢是这样子的
就是呃
用户首先看到它这个前端的这个图片
它这个图片呢呃
这上面是
首先from这里
我是不要任何的文字的
就是这个是一张图
呃然后
用户当鼠标放到这张图上面的时候呢
它自动的会出现一层阴影
并且呢会出现这个呃
four yard的这个
这个应用的这个场景的标题
并且呢
还会有一个按钮来引导用户去点击
我们这个产品
就是for yard的
呃这个应用的一些产品
所以我要这么设置
首先from这里
那我就设置了这个背景色不变了
接下来呢
我要在back这里我要给他啊
首先我加了一个yard
然后呢
背景我还是使用跟front一样的背景
只是呢我要在这个上面我要再呃
增加一个叫background overlay
增加一层黑色的
然后呢我要呃给他加一些阴影
加完阴影之后呢
大家可以看到这里有一个four ear
但是它是有点黑色的
所以我要将这个four ear的文字呢
去调整一下
这个文字呢是在这里调整
在style这里选中这个flip box
之后呢在style这里有一个back back
这里可以看到这里有一个title
title就是我的这个标题
text color我改成白色
好那它目前就是白色
但是呢现在文字有点太小了
所以我要将它尺寸改成30
看一下30可能还是有点感觉小
那么我再大一点
改成40 好
40我觉得差不多
然后我们要在这个呃
foreign下方我要再增加个按钮
所以我选中这个
选中这个flipbox呢
在在back这里有一个button text
我点击explore啊
我输入explore more
好那么按钮就添加好了
那我其实在按钮上我只要加上啊
我想要引导客户for Ya的
这类产品的询盘呃
那个对应的产品类目就可以了
那我现在啊
还要再设置一下
这个高度不够这个Flipbox的高度啊
他目前只能显示呃
一半的图
对吧
啊可以看我整个图
其实是这么高的
然后呃
当然图片位置还在调整一下啊
position这里我选择中间
呃那么其实这样子也可以呃
然后attachment不变
repeat no repeat display size选择cover
好那其实这样子也还可以
那只是呢
我要在效果再改一下
然后我把back背后的图片跟呃
front前端的前面的图片改成同样的
设置position中间
repeat no repeat display size cover好
但现在就是还有什么问题啊
就是我鼠标放上去
它是翻转的
我要把这个翻转的效果改掉
所以我要改成在setting这里flip effect flip
改成应该是用fade看一下好
这样子呢
就会看得舒服很多
然后呢back这里
我感觉好像这个背景的黑色的
这个覆盖层
还有点透明度
有点太高了
我把透明度稍微降低一点
好
再来看一下效果
鼠标放上去
好这样子看起来还可以
那么如果你觉得这个高度不够
你想要高度高一点
那么一样你选中这个flip box
在setting这里有一个height哎
你可以高一点啊你也可以低一点
那我觉得刚刚好
像这个高度看着也挺舒服的啊
我们来看一下预览一下applications
鼠标放上去
four year的好像也还可以啊
哎因为这个图片就这么看其实也
嗯也还可以
因为而且他帐篷部分也出来了
并且呢
主要突出的这个场景是在一个院子里
对吧那看起来也挺优雅的好
那么我鼠标放上去for yard啊
这个用于院子的好
我们这个就不变了
就保持这样
那么我们接下来再增加几个application
就是做出来效果跟这个是一样的
就好了那么我们只要再增加
再增加这个容器
但是我接下来的容器
我要全部跟这个一样吗
就是我我要全部跟这个一样一排
一排一排吗
我我我打算不要这样
我想有点变化所以呢
我增加一个左右两边的容器
然后啊一样的
我先把这个宽度调整一下
然后并且因为我想做5个application
我一共想做5个application
所以呢我在呃duplicate就这个容器
我在原地复制一个
所以这样的话就是123455个
好然后每一个里面呢
我增加一个flipbox
那么为了确保样式一致
其实我可以怎么做
我直接将这个flip box copy
然后到这里粘贴然后copy
再粘贴就粘贴我全部粘贴一下
屏幕
粘贴完之后这里这样子可以确保什么
我们我们来看一下预览哎
鼠标放上去他其实效果是一样的
我不需要
在每一个单独编辑了对吧
所以这样子其实也会会比较方便一点
那我们现在呢
会看到还有一点一个小小的问题
就在于说什么
就是他好像是不是呃
这个容器
跟下面这个宽度有点不太一样
它两边有点间距对吧
间距这个问题怎么解决呢
就是其实我们来看一下容器结构
你就明白这个是怎么导致的了
呃因为我们这个Flip box
这里呢
我是就是我直接是添加了一个容器
容器里面我是直接直接加了这个元素
Flip box的
而下面这个容器里面
其实我是先里面套了小容器
小容器里面我再增加这个Flip box
所以呢
就是这个小容器跟内部的这个Flip box
空间之间
它周围一圈它会有个间隙的
那解决这个问题的方式呢
就是呃其实最简单的办法
你就是直接我再增加一个啊
这样子我在这个容器
将这个容器我复制一个出来
duplicate出来
好然后呢
我先将里面这个flipbox
先将里面这个空间先删掉
删掉之后我应该做什么
我应该直接再拖一个
再套一个容器进来
套完一个容器之后呢
我再将这个flipbox复制粘贴过来
好这样子的
我们其实就可以看到
他的宽度就一样了
那么我们现在只要把这个多余的
这个容器
这个给删掉好
然后我们再将下面这些呃
application的这个flipbox都去把呃
背景改下
这个改成
这个
for啊然后在back这里也改一下
然后呢标题改成
for camping对
这个是个餐厅
然后这个改成for camping户外啊呃
露营下面两个也一并改掉就可以了
好
那么我们就关于呃这一趴就是application
呃
产品应用特色我们已经就添加好了
所以然后我们从上到下预览下a banner
然后特色介绍类目
然后这里是引导客户询盘的一个section
应用啊
几个不同的应用
好那么这部分就好了
那我们接下来呢
再增加一个关于企业介绍的
一个简短的一个介绍的啊
我们接下来再见
我们接下来呢
再增加一个企业介绍的一个呃
section就可以了
我们接下来呢
再增加一个企业简介的一个部分
接下来呢
我们再来增加一个
企业简介的一个部分
那我希望这个部分呢
不想用传统的很传统的方式
就是一张图片pick文字
我想要做的稍微特别一点
点击添加一个容器
添加一个两列的容器
宽度设置一下
好然后呢
我将左边这个容器呢宽度调整为40
右边容器宽度调整为60
我这里呢放两张图
啊一张是我们的产品的一些场景图
另外一张呢就是一个工厂的图啊
我们先放一个产品的场景图
sorry其实我要
我是直接增加在他的背景里面
去增加因为我要
因为这两个容器目前是拼在一起的
所以我只是要做图片的拼接在一起
所以我就直接加个背景就好了
选中容器
然后呢
style这里background这里添加一个图片
图片我拖过来这个是一张竖的图
片并且呢
现在这个容器的高度太矮了
我要把高度调整一下
调成 700好了
跟我的banner一样的高度
那我选中这张
呃左边这个容器
我背景的图片呢
我把样式格式调整一下
调中间然后no repeat
cover好这个是一张竖的图片
然后在右边这里呢
我放一个
也是放一个背景
选中容器style这里背景image
然后这是怎么设置的
我的工厂对吧
虽然这个照片不是我的
但是用AI做一个图片
那反正也不存在侵权的问题
OK好
然后呃
no repeat display size cover啊
这个是所以这个section呢
是这样的
就是它是一个
左边呢它是一个呃
叫什么一个
那个产品的场景
右边呢是我们啊
是这个工厂
那我在上面我要再加一段文字
对吧文字
那我加在哪里呢
上面或下面都不合适
我想直接贴在这两张拼图的中间好
我在呃
左边这个容器也行
右边这个容器也行
我在这个容器里面呢
我再增加一个容器
好然后呢
我先给这个容器呢
呃加一个背景色
白色的背景色
选中这个里面的小容器background这里
颜色
白色
然后呢白色
我要增加一些透明
好
增加一点透明
好在这个白色里面呢
我接下来我要增加一个heading
一个标题
标题是什么
标题就是about us
然后呢我要再在这个容器里面呢
增加一个介绍
就是一个文本
一段文本在about下方啊
这个文本我这里呢
好我这里随便摘取一段文字吧
好那
么现在我要先来看预览效果啊
现在我要做的什么
是要把这个about的这个部分
放到中间位置
我们选中这个about us所在的这个容器
之后呢点击右边advanced下边啊
点击右边advanced下边有一个position
position这里呢啊
原本它是默认default状态
然后呢我们要点击一个absolute
absolute这里呢
我们要开始就是一个是
这个是左右的距离
调一下左边那我可能要调一点点啊
也不用完全居中
我就调到差不多这个位置就可以了好
然后呢
下面是这个上下的这个距离调一下OK
往下一点点好调到200好了
好然后这样子之后呢
我们来预览一下效果
其实这样子整体还行
但是
可能我希望它这个白色的透明效果
再稍微的低一点点
不要太透明
在选中这个容器在style这里
background这里这个透明度呢
我这里再调一下透明度再调一点点好
并且呢我希望文字它里面的文字呢
离整个容器周边呢有一个时
呃有一个空间
因为这样会有点拘束
所以我选中这个容器
选中这个容器在advanced这里
padding padding这里就是那边距这里
我先把同步调整的关掉
顶部我调整为30
底部调整为30
然后左右看看是不是也调30啊
其实就全部调整为30也可以
就直接用同步的调整就可以了
那么另外就是呃
如果呃
你觉得有必要把这个容器周边
它的边框做一个圆角
那么我们就设置为圆角
目前它是一
个方的那么如果你想要圆角也可以
那么我们就选中这个容器之后
在style这里这里有一个board board
这里有一个board radius
就是这个边框的弧度
我们调调调一下调成为20看一下好
那么它呈现是这样的
呃
另外就是你看about us要不要这个标题
要不要居中
如果你标题要居中
那么你就选中这个标题之后
在style这里居中就可以了
好那么这样子之后呢
其实看起来就呃也还行吧
对也还行啊
但我们现在看到就是啊
因为我们上面这个application这里呢
其实我们这里因为我们是容器
里面就套着容器
所以它会导致
它会两边有这个空空隙
而我们下面这里是没有空隙的
那么这个如果你觉得这个不太介意
那么其实你就不调也没关系
因为我可以把这个about us
这个所在的容器啊
跟上面这个application这里
我给它调的空间大一点点
选中这个整个大的容器
有拼图跟about us
这个大的容器就是在啊
我们结构导航这里
就是最上层那个容器
我们把这个上面的外边距
顶部的外边距给它调整为比如说40
好
我觉得可以把about us的标题
放到这个上方来
可能会更加协调一点
我们尝试看一下啊
我们直接将这个标题
复制过来copy然后粘贴文字改掉
改成about好
这个标题就去掉来看一下
然后呢我们再将这个呃阴影
呃这个这个容器所在的他的这
个白色的背景
我们再给他透明度调的低一点点
这样可以让文字更加清晰一点
啊我们点击一下publish看下效果
about us
这里离下面这个容器的空间有点大
我们调整一下啊
将这个about us它这里选中容器之后呢
它应该有下边距15
把它给去掉
然后顶部的
我们下面这个容器
刚刚其实也设置了一个上边区
40的上边区也去掉
好我们点击publish
再来看一下
呃about us
我们刚刚去掉的这个15的
下面的外边句还是要加上
好再来publish
applications这里about us好
这样子可能看起来会呃
还可以稍微协调一点
然后呢我们可以嗯
在about us这里啊
不变了就这样子吧
好about us就设置好了
那么我们接下来呢
再看一下还需要什么section啊
接下来我们要增加一个客户评价
订阅表单以及其他的
如果你觉得有需要的你就加
那么我们就视频课程里面
我们就再加两个section
一个是客户评价
一个是订阅的表单
现在我们来加一个客户的review
就是我们
客户评价这个section
我们还是添加一个容器
然后我们就直接加一个网格好了
将green
因为我想下面放1233个客户的流品
加一个3列的网格
然后呢
选中容器之后将这个宽度先调整一下
好然后我们现在用到一个控件呢
叫做什么呢
就是叫做reveal
在呃elemental里面它有一个专门
的控件就是reveal的
那么只是他这个review呢
就是大家可以看到我加进来之后啊
他这里显示
其实我可以放三个slides
就三个幻灯片
他可以左右滑动的
但是我不需要他滑动嘛
我只需要1233个呃
这个review就可以了
所以我可以把这个第一个里面的
这个item 2和3
这两个都去掉
我就留下一个review就好了
然后我就copy一下啊
粘贴粘贴
然后我怎么编辑内容呢
就是我选择好一个review之后呢
在左边content slides这里
我选中这个item e
这里呢我可以加图片
这个图片呢
就是是客户的头像啊
我的媒体库里面是没有客户头像的啊
那我比如说我加这个好
你加一个客户头像
然后呢呃
这个下面再可以加名字
name这里叫name
它这里显示John对吧
那我比如说啊name Danny
然后这个title这里呢
呃你可以给它去掉
你也可以加别的
比如说啊
呃你可以写他是某某公司的呃
CEO对吧CEO
哦
啊BD
Web attack对
OK啊
然后呢呃
rating这里
你可以这里加rating对吧
这里有也可以加那个评分
比如说我现在就5
就是5分啊
rating特别高
OK然后这个icon呢
你可以
其实你可以加这个社交媒体的图标的
那它这里加了个Twitter
就是啊如果你呃有些客户
他可能是真实的流品
那么他是会呃
如果客户愿意的情况下
客户留下了真实评论
并且也可以留下他的社交媒体账号
那么这种情况下
其实会更加的具有幸福力一点
那比如说
你这边可以再给这个社交媒体账号
加一个链接
比如说Twitter
COM
那么其实啊别人
点击这个流屏的时候呢
人家其实就可以打开他的社交链接的
啊我这边就点击publish
然后我们前端再预览一下效果
好看到下面呢
这里是有客户留评的
并且我打开点击的话呢
是呃
就我刚刚写了个推推的这个官网
那么啊所以我点击它会跳到推的这里
呃还有就是在链接这里
link这里网站上
link如果是外部的链接
我给大家一个建议
在这个link options就链接的设置里
你点击一下啊外部链接
首先一定推荐大家将这个open new window
点击一下
这样的话呢
就是当别人点击这个链接的时候呢
他不是直接在原来的页面上跳转
而是打开一个新的标签
这样好处就在于说
他不会关掉你的这个网页
因为我外部链接本身对我来说是一个
呃不是主要的就是
所以我希望用户是打开新的标签
来去打开一个外部链接
而不是在我的这个网页上
去跳转到外部链接
另外一个呢将这个add nofollow给加上
对外部链接建议大家add nofollow啊
因为呃就是就是外链的话
它分do follow跟no follow
那么啊
我们希望别人外链链接我们网站
那么
我们肯定是希望人家是使用do follow的
这个链接
但是如果我们链接出去的
除非对方他是有特意要求
或者说你跟他有一些呃利益的互换
或者说是可能大家是资源的一些互换
那你可以去添加dofollow
但是正常情况下建议大家就是
但大部分如果没有这种情况的话
建议大家把外部链接勾选这个at nofollow
因为nofollow
它是不会影响你的这个页面的
这个权重的
但是如果你呃不勾选
他默认是do follow的情况下呢
它是会自动的将你的这个页面的权重
去分一部分
给到你添加的这个外部链接的
所以像社交媒体这种外部链接
我们就一
律全部加啊
no follow add the no follow
一律去加这个东西啊
这个是为了你的SEO
就为了防止你的页面的权重被啊
这个分到你的这个外部链接上面
这个是一个小技巧
好然后啊
我们另外的三个也给它加上好了啊
我分别都加一个图标啊
然后我们分别再把这个rating都加上
这里有个rating就是啊
大家可以看到
比如说我4.5
它这个星星啊
它这个颜色填充
它也会自动的按比例去填充的
那我们最高是5嘛
我们就填五个哎
试一下能不能填6啊
啊好像不行
他最高就是5
好啊然后我们将这个
评论的部分
我们嗯给他调整一下
跟上面的这个间距
我增加一个外边距好了
外边距增加一个20看一下
然后我点击publish
然后前端预览一下
它下面呢会自动跳出来这个啊
就已经我们设置好了这个review啊
你当然也可以去设置review的
其他的一些调整
我们这里可以看一下啊
它有哪些调整啊
slice per view啊
这个就是如果你的这个slice里
你可能你有好多个
比如说我再添加一个
再添加一个
那么slice per view
就是你每一次显示多少张
比如说我显示两张啊
它就会这样子显示的
那么我们就不用了
就是这个slice per view就一个
然后slice to screw
就是你每一次点击翻转的时候
它翻转几页
那这个我们这里因为都使用123
每一个每一栏里面我们都
用一个review
所以就不需要addition additional options
这里就是呃
跟我们做搬了一样
就是哎
你你你的这个箭头要不要显示
还有翻页的方式是呃
dots啊或者是其他的等等
就是啊还包括是不是要自动的播放
自动播放的速度等等
就是如果你这里有多个换灯片
多页的话呢
你可以设置一下
然后style这里就可以调样式比如说
呃比如说我想调整一下这个背景
那背景我这里可以加
比如说加个黑色
这里就不加了
然后呢这里等等
这些大家可以都去试一下
这个都是分别是调哪些
然后呃你的图片你也可以调对吧
他的size你都可以去调
然后你的这个icon
就是这个社交媒体的图标啊
rating这里你可以去嗯调整
就是这个
这个星星星
呃呃
评评级的呃
这个星星的这个样式
它的大小啊
空间啊你都可以调
然后颜色你也可以调啊
你比如说如果你想要绿色
那么可以调绿色
那我还是恢复默认
因为这种评级的rating
大部分就是只使用这个金黄色的
那我们就其他的就呃
这个就不演示了
我们嗯
来将这个publish一下
好在前端看一下
OK那下面呢就有
3个流平了
那我如果希望说它的宽度再宽一点
那么我就这个容器里面
我再调整一下
选中这个容器
lay out我设置为1250 看一下
选择1240看一下
1230吧
1230看一下publish
好然后我们看一下下面
这个啊宽度差不多了
那我就保持这个宽度了
最后呢我们来增加一个订阅的表单
好我们来首先添加一个容器
将容器的宽度呢调整为1,200
然后呢呃
这个容器目前默认的高度太矮了
我把高度调整一下
调整为300
然后我在这个容器上呢
我先增加一个背景
在background这里加一个
我加一个
这个背景吧
好把图片的这些
position等等这些设置一下
cover看一下contain啊
还是cover吧
好然后呢
我们在这个容器上方呢
我增加一层覆盖层
因为我想在这个以图片为背景
直接来去增加这个表单了
我们稍后会用到elemental的form
这个表单
但在那之前
我们先再增加一层背景的覆盖层
还是使用黑色吧
并且呢将透明色调整一下
调整为稍微有点透明
好了啊我们
也可以通过这里再调整一下
这个保持默认0.5
他默认的
OK就保持这样
现在我们往里面啊
首先啊
我们还是要再拖拽一个容器进来
因为我要控制整个容器的内容宽度
然后呢让这个容器处
让里面这个容器处于这整个大容器的
呃上下的中间
我们选中这个大的容器
之后呢
在左边layout布局这里justify content居中
好然后在这个里面的容器里面
我增加两个空间
一个是heading
将它拖上来
然后呢在下方我再增加一个
我们叫做是一个呃空间
叫做form表单
这是elemental自带的啊啊
我碰到过
有一些朋友见证的
他可能对elemental真的不太了解
所以他安装了很多插件
什么表单插件啊
各种各样的啊
什么信息提交插件
但是就像elemental的空间里面都有你
如果你不需要做很复杂的表单
就是简单的表单
建议就使用elemental
少装插件
那如果你要做一些复杂的
没办法那你就用插件
好那么现在看到默认的
他的这个表单是有一个姓名
Email跟message
那我只要Email
把姓名跟message去掉
然后呢我在Email这里点开了之后呢
看到这里有一个label
label就是在这里
实际上它有一个
实际上它有一个黑色的Email的字体
我这个label标签我不需要了
好然后我们现在设置样式就是
首先我要让
整个的就是这个Email跟按钮
它处在一行上面
所以我调整一下
我在选中这个form空间之后呢
在Email这里有一个column with
就是这一列的宽度
我调整为80%
好然后将form fields这个关掉
然后呢我们点开下面这个按钮
button button这里有一个column with
我们调整为20%
现在它们是在一行了
但是它们现在显得就太长了嘛对吧
那么我们这里我们有两种
一种就直接选中这个大的容器
将它的内容宽度从1,200这调整为
比如说调整为600好了
那它的内容宽度自然而然就它就窄了
那我们这里
其实这样子也就比较简单一点
当然另外一种方式就是你你
你想这个容器的内容宽度依然是1,200
那你就调里面这个小容器
小的容器
你选中它之后
左边lay out布局
这里它有一个waste 100%
你可以调的
那我可能
我觉得还是调上面上一层的
这个大容积的宽度
来比较方便一点
我调整为600好了
好
然后现在呢
我们再将这个标题改一下
标题呢
嗯也可以
比如说我写subscribe
好
并且将这个标题的字体颜色改一下
改成白色
在style这里text color改成白色
那这样呢
我们啊这个标题做好了
现在我们就看到这个按钮的样式
还有点奇怪
对吧我把按钮的这个颜色改一下
现在它是默认是灰色
鼠标放上去它是悬浮变成蓝色
所以我选中这个form的控件之后呢
在左边style这里有一个button按钮
那么这里它有一个颜色
呃next或者是submit button
就是提交的
那我是这个背景色我改为
就这个蓝色好了
好然后hover就是鼠标悬浮状态下
你可以根据情况看你要不要改
那我就不改了
呃再做个调整
就是我想缩短这个按钮
跟这个填入Email邮箱的之间的距离
我想当中不要有距离了
那我就在style这里
form这里有一个column SCAP
就是 2和column这一列嘛列之间的间距
我把它改成0
rosecap rosecap不用动了
因为你这里只有一行
你没有更多的
就这个空间里面
你没有别的行数
好然后我们来预览一下
那这个呢
就是subscribe
呃可能
这个
背景容器的背景覆盖层的透明度还
啊有点太低了
我要把就是呃
这个透明度还要再调整一下
我把透明度再调的稍微低一点
不要那么透明
可以让它实验室深一点
这样的话呢
我的这个表单它会对比度会更高一点
好来看一下
okay我们点击publish
然后呢前端
呃来看一下
好这个subscribe它这个已经做好了
那这里其实要要调整啊
就是呃这个表单跟循盘表单
这个是不一样的概念
这个表达呢
是让用户来去呃
类似于就是用户可能follow你
对你有点像用户关注你
他点击subscribe之后呢
他留下了他的邮箱
那么你可以通过呃
自动化的一些邮件的工具
来给他定期的发送你的一些啊
有对他来说有价值的信息
所以这里面
如果你要号召用户subscribe你
其实你也要给出一个理由的
像如果是一般电商网站
那么可能是号召他subscribe
他可以得到一个优惠码
或者说是一个折扣券
对吧那如果你是B2B的企业
那你为什么要别人subscribe你呢
你可以是给
你可以给别人提供什么呢
比方说你可以给别人说啊
你有提供一个丰富的产品的catalog
或者说是啊
提供一个呃呃
价值特别优惠的样品
就是你可以让别人用呃下一个样品单
同时呢你这个下样品单呢
你可以有一个优惠价格去下样品
等等就是你这里呃
你需要给
你需要把这个文字重新再组织一下
就是你要让别人啊
你要给别人一个去订阅你的理由
他为什么要留下邮箱给你
这个是这个是marketing
就是你怎么样去做营销的
根据你的网站的情况
你可以去来撰写这个文字
那么就像比如说如果是B2B的网站
那可能别人如果要下样品单
那么有可能人家样品有呃
也许他会需要呃
要付这个邮费啊等等
那么你核算下成本
你可以说啊
这个subscribe之后呢
可以用特别优惠的价格
去购买一个样品
等等类似这样的
你要想一个号召的一个啊
一个口号
那么设置完这个邮件订阅之后怎么用
这个才是核心
就是啊首先我们点击这个form空间啊
我们在左边content这里
其实这里有一个actions after submit
就是别人提交之后的行为
就是我们网站应该要有哪些举措
他默认状态下呢
一个是搜集这个信息
另外一个呢
是会自动的给用户发一个邮件嘛
那么这个邮件的内容是
在这里
就是to谁谁谁
这个邮件是发给你的啊
是发给管理员的
就是用来通知管理员啊
是谁谁谁
他留下了这个订阅的信息
而这个订阅的信息里面呢
是包含用
包含了用户的这个邮箱信息
那么你可以把这个主题改一下
比如说这个这个主题改成呃subscribe
message from homepage
就是来自首页的订阅信息
那message这里
就是它这个表单留下的信息
然后呃
这是一个你可以设置的
另外一个呢
你同样也可以设置
就是呃
额外的就是你用户订阅成功之后
他比如说你希望显示一些
啊不要用他默认的消息
他默认消息是这样的
他提交成功之后呢
就是他显示你的提交已经成功了
啊如果是失败的话呢
你的提交失败了
因为什么什么什么理由
那么这里你可以设置
但是实际上对于订阅邮件来说呢
光这些是不够的
因为如果你只是搜集用户的邮件
那么嗯你后续如果要给他发邮件
你可能只能手动
那这样的话其实效率是很低的
而聪明的网站
都会使用自动化的邮件营销系统
来去做我们来看一下啊
这里有一个actions after submit
你点击一个加号
这里呢
我们还有一些必做的一些设置
一个是呢
这里其实建议大家设置一个重定项
就是redirect
重定项这是做什么的
就是你点击这个redirect之后呢
你可以在你的页面page这里
可以再做一个页面
比如说这个页面叫做thank you thank you page
啊接下来讲的全是跟marketing有关的啊
就是大家可以呃
仔细的关注一下
比如说我这个
我做一个thank you
thank you然后呢
呃内容我就不做了
我就点点发布
那内容无非就是啊
谢谢你订阅我们
我们啊
什么我们会马上联系你
或者吧啦吧啦之类
就是你只要有一个thank you page
你们你可以看一下成熟的网站
他们都会有这样类似的页面
上面那些文字内容
你可以组织编辑一下
但是最关键是说
你做完这个thank you page之后呢
那么我们在这个表单的redirect就是我
们刚刚在actions after submit这里
我加了一个redirect
然后呢redirect下面我加了之后
下面就会有个选项
我可以将这个thank you page的路径加上去
我们将整个直接这个thank you
这个链接复制过来
好public
那这里呢
我们就看到
他会自动跳转到这个thank you page
那么做这个
第一个对用户来说体验会好一点
第二个呢
就是我们可以用来统计
我们网站的转化试件
如果你将首页的这个提交订阅表单
作为一个成功转化的事件的话呢
那么你只要设置了
这个重定向的这个功能
那么
你就可以通过这个重定向事件的次数
你来统计你的网站首页
有多少人来提交了你的这个信息
以此呢你可以去衡量你投放广告
或者说是你一段时间之后SEO的效果
如果你没有这个redirect
这个事件的话呢
你可能呃
很难去定一个明确的衡量事件
去衡量你首页上
这个用户订阅事件的这个多少
所以我们做重定项
一方面是用为了用户的体验
另外一方面
其实也是为了
我们在做数据统计的时候
作为事件去能够把它计算进去
好做完重定项之后
接下来我们再多讲一点点
就是在actions up to submit这里你点击加号
大家可以看到这里有很多的
这些都是呃
这里有两个邮箱工具
一个mail chimp
一个指一个是Mailer light
那么我们比较呃用的可能用Mailchimp
我感觉还蛮方便的
你可以用
Mailchimp mailchim呢
它它就是一个自动化的邮箱工具
你选择这里你设置了Mailchimp之后呢
它这里会让你输入一个呃
API的一个key
那么这个Apik呢
就是你注册mailchink之后呢
它会自动生成的
然后你将这个Apik输入连接进去啊
输入进去之后
连接之后呢
它自动的就可以去触发
我们在mailchink里面
去制作的邮件营销的这个流程
比如说你如果你触发条件注册为订阅
客户只要一订阅
立马呢他会收到一个你提前预先
预先创建好的一个自动化的邮件
而自动化的邮件里面的内容
你就可以去放上你的
比如说你的优惠码
或者是你的呃
想要用来促销的一些信息
并且呢
那个流程你还可以去呃去设置
第二步第三步第四步
比如说用户这个第一封邮件打开了
那么你去发送第二封邮件
如果用户没有打开这个邮件
那么你可以再去发送第二个邮件
这两个邮件可以是不一样的
针对
针对那些打开你的这份邮件的用户呢
你发送a邮件
针对于未打开你的这个邮件的用户呢
你发送b邮件
可以去创建完全自定义的
这个自动化的邮件营销的流程
这个要远比你去搜集用户的信息
然后手动的去给别人发邮件
来的要高效率的多
那如果大家有需要去呃创建来
呃如果大家这个不太明白
怎么样去创建这些邮箱的话呢
呃我们之后也会有相应的一些呃
视频教程来去教大家的
好那么呃
来看一下section
呃订阅表单做完
这里还有一个其他
那其他我不做了
那我们其实这样的话呢
这个首页啊
基本上就还算比较完整了
我们从头到尾来看一下啊
首先header
这里我已经把那个啊
超级菜单的两个图片
都换成了正方形的
就看着舒服一点
commercial green TENSE auto TENSE然后呢
这个姓态的find
然后我们啊
这里是一个我们顾客一些特色
优势的介绍
然后呢类目
两个大类目
下面是子类目
这里呢是一个号召的一个啊
一个部分
就是告诉用户
所有的账本是可以啊私人订制的
并且这里可以点击一个呃
那个寻盘的按钮
然后呃帐篷的应用啊
这里有就有5个大类的
后院餐厅
露营婚礼
展览然后呢
about啊就是关于我们的一些简介啊
这个下面其实还可以再加一个呃
explore more加一个按钮就是呃
引导用户跳转到about us
我们那个页面
可以在这里加一下
加一个按钮
discover more啊
ex explore more好了
好
publish
啊在这里
这里explore more也有了啊
你可以把它按钮放在中间
然后呢下面是呃
这里呢是客户的一些评论对吧
我们可以多放几个啊
多放几个
让它轮播展示
然后呢
最下面是一个订阅的一个section
然后是我们的页尾
那这样的话呢
就是我们这个首页就制作完毕了啊
这里
其实我们用到了很多的elemental的控件
大家也可以看到
就是我通过
做静态页面
其实我的这个网页的打开速度
还是很快的啊啊
我们可以用一个无痕浏览器
我们来打开看一下
ad Webtech点ICU打开看一下好
它的打开速度是很快的
可以看到对
因为我们网页上其实没有用太多的
一些动态的东西
就是那么
会让我们的网站的加载速度
会特别的好
如果你去拿这个首页
去给谷歌评分的话呢
这个首页的评分应该不会差
当然还没有优化呢
如果网站做完之后再做一步优化
其实是可以做的很好很好的
但是一般像这种以静态的呃
图文为主的页面呢
它的打开速度都会比较快
就评分都会比较好一点
好那这个首页呢
做完了我们接下来呢
会来教大家去做其他的一些页面
