页尾
我们同样要去appearance
这里的customize进行设置
来到customize之后呢
我们点击这个footer build
它同样有三层
我们可以去设置页尾
页尾一个是above footer
一个是primary footer
一个是below
那below最后一层呢
我们往往是会放呃
我们的这个版权声明等等
那这里面比如说我的版权声明啊
这个是我公司品牌
然后呢把后面这个去掉
POWERED by extra WordPress这个去掉
好
那么我们现在主要设置的是primary foot
这里我们选中这一行之后呢
首先我们可以在左边
这里有个叫做column
这里我们可以选择是三栏啊
一栏两栏三栏四栏
我们可以选择不同的栏数啊
这里我选择4栏
好了我选择4栏
然后呢我们的页位我打算这样设置
第一栏我放一个logo
以及放上啊社交媒体的图标
第二栏呢放上公司的一些介绍
第三栏我放上产品
第四栏呢我就放上一些政策
例如说退款政策啊
或者是服务政策等等
那么
我们要往里面添加这四种元素的话呢
我们首先就是点击第一栏的这个加号
这里
其实我们主要要用到的是这个widget
这里widget 1-6就是小工具
我们的逻辑是这样的
我们先往这四栏里面分别添加4个widget
然后呢我们再好后台这里
我们再将Widget这里的元素添加进去
好
我现在先将这个Widget一个个加进去
一
二
三四
好添加好4个widget之后呢
你可以选中这一个widget
然后直接在左边这里编辑
但我个人可能比较倾向于
回到后台的专门的Widget那里
我去编辑
因为那里可能会更加灵活一点
那么我添加好这4个widget之后呢
我首先点击publish把它发布一下
好可以看到我们前端呢
啊页页面上已经显示了4个widget
好接下来我再往每一个widget里面呢
我增加内容
来到后台
同样是appearance这里
下方有一个widget词
在widgets这里呢
我们看到有四个foot build的widget
1234就是对应的我们添加的这个1234
就这四个
如果我们没有加在这里
那么我们在appearance the Witches这里
是不会看到这个1234的
因为我们加了1234到我们的页尾
所以当我们去到Witches这里
它会显示出来
我现在要做的
就是往每一个foot build的which这里
我添加相应的元素就好了
首先第一个呃
我点击这个下拉箭头
然后呢我点击加号
加号我加一个
我看看能不能直接有site logo
啊没有logo icon呢
啊没有
那没事我就加一个图片
这个image就是这个图片
然后呢
图片我选择在媒体文件库里面
呃我因为logo已经上传了嘛
点击它然后我选择这个logo
好现在这个logo呢
太大了我要给它缩小一下啊
我可以直接这样用鼠标拖拽也可以呢
在这里有一个
在右边右侧这里啊
有一个width跟height
这里我可以去设置
比如说我设置100
设置好100之后
我可以先update一下
点击更新一下
然后呢我们前端看一下
那我们现在看到前端呃
没有显示出我们刚刚设置的这个logo
那应该是缓存的问题
那么我们只要啊
我看一下
打开一个无痕浏览器
然后呢
重新浏览一下好
出现了啊
已经出现了这个页尾的这个logo
那么我觉得还不够大
我想再调大一点
好那我就依然回到这个后台的位置
这里我把它的这个WIS调整为150
好点击update
然后呢
我们刚刚那个无痕模式的浏览下
看一下啊
他还没有更新过来
这种一般都是缓存的问题
呃解决方式呢
要么你换个浏览器
要么就是你清理一下这个
它的缓存就好了
我们来到后台
这里有一个Lightspeed cache
这里啊
我们点击一下这个cache就缓存啊
它默认状态下的话它是开启的
那我刚刚已经把它关掉了
就是你只要把这个enable cache
你关闭一下
然后呢你保存一下
然后你在前端再刷新一下呢
你就可以看到啊
他的logo会随着我们后台的变更
他就会刷新过来了
那缓存是因为
其实这是因为为了网页的加速啊
缓存可以帮助用户的浏览器
他可以啊那个保存他的浏览记录
这样的话呢
他可能如果短时间之内
他再一次打开我们的网站
他的速度会很快
但是也正因为这样
所以我们可能在后台
我们做的一些变更的话呢
他可能不能立马就在前端反
应过来因为用户啊
的浏览器保存了他的浏览记录嘛
所以一般像我们在我们后台
比如说页面上做了些变更
如果你发现你的浏览器啊
前端你刷新完之后呢
他们依然是老那个版本
那么往往是缓存的问题
所以像我们
因为我们用hosting的呃
做搭建的这个WordPress的网站
那么hosting它自带的
使用Lightspeed的这个啊
网络服务器
那么它有一个Lightspeed配套的这个
let’s be cache
这个它可以
这是一个加速的插件
让我们网站速度变得很快
但同时因为它开启了缓存
所以我们要在网站修改的阶段的话
我们可以先把这个缓存先关掉好
关掉之后呢
我们再来试验一下啊
我们再一次进入appearance witches这里
然后呢我们尝试一下
比如说我put build一这里好
我现在150
我再调成200
看一下它
是不是前端就会实时反应过来了
前端再刷新一下好
可以看到他变大好
那没问题啊 150
呃 200太大了
150我觉得正好
好前端再刷新一下好 150
然后呢我在下面再增加一个social icon
社交媒体的图标增加一下
好然后呢
点击这个加号Twitter
再选中它
点击这个加号Facebook
Pinterest
Instagram
你还可以搜索
比如说TikTok
啊你也可以加一个YouTube
然后呢我们呃
在右边这里
你可以选择调整这个
这些社交媒体图标的样式
比如说你希望是显示有文本的
那么可以看到这里有一个show text
那你点开之后呢它
就显示有文本了
我刷新一下看一下前端的变化
看到前端还没有变化啊
我们应该是没有加链接
我们来加个链接啊
比如说我在这个推
推特上面我加一个链接啊我就
推特.com
然后呢我点击这个回车
好
更新一下前端
再刷新一下好
看到Twitter已经出来了
所以啊就是
我们必须要在每一个社交媒体图标上
加上链接
之后我们前端他就会反应出来了啊
不过现在加了图标啊
不加了这个文本之后好难看对吧
啊还是图标看着舒服一点
另外呢嗯
你同样这里的这个对齐的方式
他目前是靠左靠最左对齐呃
他你也可以选择靠居中
好
这样我们把每一个图标的链接都加上
我就全加他们官网的
TikTok YouTube好
刷新一下啊
更新一下
然后我们刷新前端页面
好它现在呢
显示这6个图标都已经出来了
那么我们来看一下样式的变化
比如说我选择啊
居中对齐
我更新一下看一下前端
啊
不好看好
我们还是靠左
然后呢嗯
我们发现它
呃图标可能太大了啊
或者是太多了
它变成了两行
所以我们要调整一下
我们在这个
右边style这里我们可以选择啊
比如说我觉得这个图标
显得有点太眼花缭乱了
我想简单一点
那我就点击这个logos公美
这样他就会变得稍微简洁一点
然后我前端再刷新看一下效果
好它变小了
也看的更简洁更舒服了
但是它依然显示排在两行
好那我们现在来调
整一下它的间距
因为他这边前端还是显示了两行
我们选中这个空间之后呢
在右边前面我们把logo已经调整过来
然后呢
颜色这里可以根据情况选择是否要
那我就不改了
那我这里主要调整的是啊
可以看到这里有一个dimensions
这里margin这里指的是上下的空间
那我不调
我要调的是它们相互之间的这个距离
啊这个我们选中它之后
我在这个block spacing这里
我选择一个non non spacing
把它调到最小
就是啊你可以调到这
这里你你可以相应的填呃去选择
那你选择不同的
它们互相之间的间距就不一样
我这里选择就是最小的NON block spacing
然后我更新一下
看一下前端
好现在看到前端他就正常的显示了
那么我们第一个位置小工具里面呢
我们已经都设置好了
接下来我们设置呃后面三个
在
第二个
第二个里面我要加上我的公司的信息
那我这里啊另外再加一个菜单
我这里呢我首先要加一个heading
比如说我是company
然后呢我再加一个menu
加一个菜单啊
选择这个navigation menu
那么menu呢
它现在就是让我们选择
我要放哪一个菜单
那么现在我们只创建了一个菜单
也就是我们网站就上面这个菜单
那么啊我们要针对这一个Widge
这里我要单独再创建一个菜单
怎么做呢
啊也很简单
那么现在他既然提示我们要选择菜单
好我这里我先不选
然后呢我先
点击更新一下
然后我们来到appearance这里的menu这里
menu这里我们选择这个create a new menu
点击
好然后menu的名字就是company嘛
这样好区分一点创建一下
然后我添加项目在company这里呢
我放about contact service
FAQ好放进去
然后我把about放在最上面
contact第二设备跟FAQ放在其次
然后我点击保存
好现在我们再回到Widget这里
我先刷新一下Widget 2这里
然后我们再点选择select menu
在选择menu的时候呢
看到哎这里已经出现一个company了好
我们选择一下
然后我们点击update更新一下前端呢
我们再来看一下效果好
这里看到出现了一个company然后呢
about contact service FAQ这么做的好处就是
你这里不需要再给它加链接了
因为我们的这个menu
本身就是
从我们已经创建的这个页面里面
给它添加过去了
所以它每一个其实它就是自带连接的
我们只要设置好
相应的这个menu是哪一个
然后呢给它添加进去就可以了
但现在这个company是不是也有点大啊
调整一下company的字体
字体在这里右边small media large x large啊
设置media看一下
好
刷新一下好
他目前这个字体是合适的
但其实嗯
你你不加这个
在这个VG2里面
你不加hiding也没关系的
你可以使用这个
因为我们添加navigation menu的时候呢
我们这里有个title我同
样可以给它命名
因为啊我这个menu名称叫company
那我这个title我也叫company
我更新一下
然后呢大家看一下效果
啊可以看到
其实它上面啊
也会出现我这个菜单的名称
所以我可以把这个上面
这个单独的heading给删掉
它删
怎么删呢
我选中这个company时候呢
点击最右边3个小点option
这里我点开来
最下方有一个delete
好然后再刷新一下
前端刷新一下看一下好
那么现在加第三第四个位置
是不是一样的方法
呃我现在创在第三个which 3这里
我来去添加添加
这个直接加一个菜单
然后呢navigations
呃menu
呃同样呃
因为我要加产品的
所以这里还没有
那么我先回呃
去到menus这里
我又点击create a new menu
这个menu呢
我我名字命名为category啊
或者叫products
点击创建great menu
然后项目呢
从哪里来
就是我的product categories这里
产品类目
我把它全放到页尾的
第三栏的这个products menu下面
view all把它们全勾上
这个不要on categorized
这个不要勾
会怪怪的
好点击say
那我v g 4这里
第四栏的那个
我还要加一个呃
政策的那我再创建一个新的菜单哦
这个菜单
比如说
policy好啦
呃policy
我
目前页面里面还没有做任何的policy的
这个
呃页面里面目前还没有做任何的policy
所以我就先用一个custom links好了啊
比如说呃我
这边井号
然后呃written
policy
然后payment
method
就等等类似这样的呃
就我我先创建两个
给大家演示一下
好点击已保存
然后呢我们再来到Wechat这里
好现在我们先刷新一下
然后在Wechat 3这里添加一个menu
menu的呃
指定是products
这里开头就是products
然后WEDGET4这里也添加一下
增加一个menu
选择的是policy这个menu
然后title
为policy好了啊
然后我们都给它更新一下
然后我们前端刷新
为什么这个VG3没有
来看一下VG3这里啊
这里显示是空白的啊
他可能没有刷新过来
没事我们再添加一下
products
好我们再更新一下
好了我们再来前端刷新一下
好了已经有了
那么现在啊
我们的这个页尾logo
社交媒体图标
然后呢我要赠
我要放的内容都已经添加好了
然后下面的这个版权声明也已经有了
呃然后
如果我想要调整页尾
这两行的对应的颜色
样式呢呃
那这个时候我就应该还是回到呃
外观的就是那个appearance的customize这里
调整在这里
我点击新打开一个
在footer builder这里
啊首先我调整啊
如果我要调整
这个primary footer的这个颜色
那么我选中它之后呢
在design这里我就可以去添加啊
这个board color是你的边框的颜色啊
background就是背景色
然后呢你啊
去进行相应的调整
比如说top board size啊
我想要粗一点啊
细一点呢
一般就是用一就
好了然后啊
board color啊
background color它就目前默认的是白色
比如说我想要黑色啊
也可以对吧
那还是维持白色吧
后呃下面这个copyright版权声明这里呢
它颜色跟上面不一样
我想要给它调成跟上面一样的
那么我就选中这个below filter
之后呢在design这里啊
我在background这里调整一下啊
给它调整为
这个颜色或者是白色
然后呢啊
我来调整一下下面这个below foot
就是copyright这里啊
版权声明这里
我想要把这个背景色
调成跟上面一样的
那么首先我要知道一下
上面这个primary footer
它的背景色色号
我选中这个primary footer之后呢
然后在design这里来看一下它的颜色
这是background
这是它的颜色
点击一下它的色号是这个F9 F9 F9
然后把它复制一下
然后呢我选中这个below foot
在design这里
有一个同样有个background
它目前这个是白色的
然后我给它改一下
改成F9 F9 F9 好
然后它的颜色就一样了
那么现在我觉得
这个最下方的版权声明
有点太高了啊
那么也是可以调整
是在这个spacing这里的padding
padding他调整的是内部的边距
我设置个0
大家看一下
其实我设置个0他就调到啊最小了
那么如果不设置
他就是比较宽的
我就给他设置个啊设置0
好了就设置0
那么让他调到
这样最相对我能调到最矮的这个高度
可能我觉得会比较合理一点啊
其实我要调的
是上下的
所以我先
把这个小的链条同步调整的关掉
然后呢top 0
bottom 0啊它还是个高度
OK那这样其实也OK了
好我们点击一下发布publish
然后前端我们再显示呃
刷新一下
好现在可以看到舒服多了
对吧
那么这样子呢
我们的页尾就设置好了
当然
你同样可以再更进一步的去研究一下
它主题自带的页尾的设置方式啊
还有呢就是同我们设置页媒一样
你同样可以使用elemental的theme builder
主题的编辑的功能
你可以去创建一个
完全自定义的一个页尾
那么在哪里呢
啊我告诉大家怎么在哪里做
但是我不在具体演示的
同样是在这个templates这里
theme builder
打开之后呢
看到刚刚我们做了个header
对吧现在呢
我们做一个footer
目前它显示no templates
font就没有
所以我们创建一个新的
点击右边add new
然后它首先会出现一些
可供我们选择的模板
如果你觉得这些模板挺不错的
你可以选了他
之后呢在模板上面再改
或者你觉得这个模板
这些模板里面没有什么你喜欢的
你也可以关掉重零创建啊
这里我比方说我选择一个模板哎
我觉得这个还挺特别的
下面是啊
有一个图片
再加一个
那那个
呃号召大家订阅的一个表单
我选择一下
然后点击这个啊
就是这样的一个样式
如果你觉得这个挺不错的
那么你可以给它添加进去啊
这个就是我们已经有的这个
页尾然后呢
或者你可以自定义创建一个嘛
就是根据你自己的喜好创建
然后你创建完之后
关键是在这个地方publish
右边有一个向下的箭头
你点击一下
这里有一个display conditions
这里同样你添加一个显示的条件
你可以直接这个include或者是EX exclude
就是include
就是呃包含的意思
你可以让它包含在整个网站上
也可以让它包含在部分单个的页面
页面或者是博客上面都是可以的
所以就是你创建好之后
你只要设定好它显示的条件
那么
你就可以将这个使用elemental来编辑的
自定义的一个页位去放上去了
但是我个人
还是不太喜欢使用elemental的这个scene
build来去做页媒
以及页尾
因为
我认为它会影响我的网页的加载速度
所以我还是会选择传统的
啊sorry
又说错了
不是传统的
选择主题自带的这个页尾
呃因为它其实已经挺好看了
因为对我来说
页尾我认为就是
只要能够清晰的
让别人知道你的网站结构
就可以了
这可能是对用户体验会更加好一点
好那关于页尾制作的部分呢
就到这里
那我们最后呢
再来浏览一下这个页尾
那么呃
我发现
它的这个链接的文字都是蓝色的
但是我但是我希望它是呈现黑色的
所以我们最后调整一下这个颜色
来到
后台的这个appearance customize这里
在这个foot builder这里
大家可以看到在这个widgets
呃在呃右边有一个design的一个标
志你鼠标放上去悬浮效果下
它显示design的这个文字
那我们点击一下
那么我们就可以设置一下这里
其实这里可以设置很多地方啊
你可以设置heading标题的颜色
content那种颜色
然后还有就是link
那因为我们这是link的
所以我调整一下
我把link啊
第一个which 2这里我link的颜色
常规状态下我调成黑色
然后呢呃
link我鼠标放上去的状态下变成蓝色
那么它是显示这样子的一个效果
好
然后我把所有的widges都这样调整一下
which 3 design normal hover呃
sorry hover
蓝色which 4
normal hover好了啊
当然你还可以调整其他的部分啊
比如说它的对齐方式啊
啊靠右靠左等等
那这些或者你把heading你可以调成啊
蓝色那么这个大家可以自由去发挥
那我只想调整一下
这个链接的这些颜色
OK我点击publish
然后我再预览一下
好了那我的页尾呢
我就是正式的完成了
