菜单设置：传统菜单、超级菜单
在进行全局设置完毕之后呢
我们接下来教大家去设置我们的菜单
我们这里呢
会使用两种方式来制作我们的菜单
第一种呢
使用我们Astra主题自带的这个菜单
第二种我们会使用elementor
来单独编辑一个自定义的菜单
在astral主题自带的菜单当中呢
我们也会演示两种菜单
第一种
就是之前我们已经做好的这个菜单
大家可以看到
我们这几个菜单的项目
是从home到contact的
一共是7个项目
然后
我们在前端演示的效果是这样子的
好这就是前端演示的一个效果
那么现在呢
我们就呃发现在product下面
目前还没有一个项目
没有任何一个项目
所以我们要在product下面
我们来增加项目
在product下面
我们增加的是我们的产品分类
那么这里我们为了提高效率
所以我直接将我的产品的类目呢
全部都添加进去
我不再用custom links
我不再使用占位服了
增加产品呢
我们首先需要为我们的网站
安装一个插件
叫做Woocommerce
这个插件呢其实是适合电商网站的
但是它对于be to be的网站
同样是很有必要的
因为它有一个产品管理的功能
如果你不用Worcommerce呢
你可以直接在这个页面里面
在这个off page这里
你可以在页面里面问你的所有产品
去创建一个一个的页面
但是这个啊
可能会对你的管理造成啊比较的麻烦
因为如果你的产品特别多的话
你可能你发现你的这个page
这里就是页面
这里他会显示特别多
但是呢没有一个清晰的分类
所以即使你不是做电商
但是呃
只要你的外贸网站是有产品的
尤其是你的产品比较多的
那么
还是建议大家使用Woocommers的这个插件
我们首先来到插件里面
我们点击这个add new plugin
增加新的插件
我们搜索一下Woocommerce
w o o c o m m e r c e就是这个WOOCOMMERCE
我们点击安装
然后将它激活一下
点击这个activate
可以看到呢
在我们已经安装的插件里面
Woocommerce已经安装成功了
并且在你后台的左边侧边栏
大家可以看到
这里出现了一个Woocommerce
以及一个products
这里
我们现在来为产品先增加几个类目
我这里就一一的加上去
我们点击这个product
下面有一个categories分类
人家第一个产品分类
我们只要把名字输入进去
这个slug你不用管它
这个slug其实就是你的网址
那么
假如说我这个名字是commercial grade tense
那你最终出来的这个slug呢
它是这样子的
最终出来的它是这样子的
跟你的这个分类的名称是一样的
只是它是以网址的形式来出现
那么大家不用填
当然如果你希望它显示不一样的
那么你可能出于SEO的考虑
你觉得这个词这个分类的词呢
它的关键词不好
那么你如果想要使用不同的这个网址
那么你可以单独去编辑
但是一般来说
我们不太建议这么做
我们会建议你
直接就是你的产品分类名称是什么
那么你的这个呃
URL啊网址就是显示什么
所以这个select这里呢
我们就不建议改了
就你如果要进行SEO
你要做关键词的布局
你应该是直接将你的词
首先就布局在
你的这个产品分类的名称里面
然后呢
在让系统自动的生成你的这个stock
也就是你的这个网址
这样的话
你的产品分类的名称
以及你的网址里面都会包含了这个
你的Su的关键词
这里呢
parent category就是你有没有上级的分类
那么这个是我们第一层的分类
所以我这里选择没有
description这里你可以去进行一个描述
你描述一下
这个类目里面包含了哪一些产品
那这里面呢
其实也是我们进行SEO的一个机会
我们可以将一些关键词
布局在这个description描述里面
当然你这里可以先空着
因为我们创建好分类之后呢
我们稍后还可以进行一个呃
详细的一个描述的一个编辑
那么我们先这些就留空
然后呢这个thumbnail
就是你的这个类目的小图标
那你可以上传一个类目的图
我们这里也先空着
我先将这个类目加进去
这是第一个
然后呢我再依次增加我其他的类目
第二个第三个
在这里还给大家一个建议
就是你的产品类目名称啊
建议使用单词首字母大写
这样呢也比较符合搭建网站的
一个文字的文字输入的习惯
你的标题应该呃
要么是单词首字母大写
要么就是全部大写
那我这里选择单词首字母大写
然后这个a frame tense呢
我这里我是
它是其实是属于
这个commercial grade TENSE
下面的一个2指类目
所以我在这个parent category这里
我应该要选择一下
选择这个commercial grade TENSE
就是我前面已经创建的这个类目
然后我再添加
添加之后
大家可以看到这个a frame tense呢
它显示是在commercial grade TENSE下方
它有个横杠表示呢
它是属于这个commercial grade TENSE的
一个二级类目
然后呢啊我我点击这个view预览一下
我们来看一下它的这个网址结构
可以看到它的这个网址结构呢
是呃我的域名
然后呢我的这个
产品类目的这个结构
然后呢是我的这个上集类目的名称
然后是我的这个a frame TENSE的名称
但实际上呃如果我们考虑SEO的话呢
其实这个链接层次会有点过多的
正常来说呢
我们比较推荐大家这个
我们产我们网页面的链接层次呢
不要超过3层
不要超过3层
那这里因为我们没有去单独去设置它
但实际上如果我们使用一些呃
这个link编辑的一些插件
我们是可以将这个link呃
将这个网址的URL控制在3层以内的
当然我们也可以另外一种方式
就是其实我的类目
如果不是特别多的情况下
我是可以选择
就不要这个commercial grade TENSE的
因为实际上我这个commercial grade TENSE
我可能打开它
里面依然是显示其他的几个类目
那么我如果
如果类目其实没有很多的话呢
其实层次可以不要分太多
就好像说我这里
其实我可以删掉
我这个commercial green TENSE的
我可以不用它
我直接就是将我的呃网站的这个
因为我网站两个大的类目
就是户外帐篷
以及商业
商业用的帐篷
那么然后这两个类目下面
分别还有几个二级类目
但实际上
我是可以完全把这个户外帐篷
跟这个商业的帐篷都两个类目都去掉
我直接将下面的呃
这个二级类目把它变成我的一级类目
这样的话其实我的网站层次呢
就会显得没有那么的多了
那我这里呢就选择把它删掉吧
我先我把这个户外跟商业的
这两个类目
我全部都删掉
删掉之后呢
我们看到a frame TENSE
它就没有上级类目了
然后如果我们再点击这个view
我们就可以看到我的整个的网址的
URL呢就就三层域名
然后呢
product category表示这是一个产品类目
然后呢是aphron TENSE
好那为了让我们的网网站的链接呢
层次变得更加的呃
短一点清晰一点
所以我们选择两个大类目就不要了
显得比较累赘
好
那我现在依次的把我其他的这些类目
全加上去
好了那现在我的所有的二级类目呢
我都已经加上去了
但是因为我去掉了我的一级类目
所以其实现在我只有一个
我只有一共1234
90一共只有10个类目
并且它们都是
我的一级类目
然后我打开任何一个类目呢
我们来查看一下它的网址的结构
它都是只有三层域名
产品类目的这个标
呃
产品类目以及我的这个类目的名称
好我们现在呢
再回到parents外观
这里的menus
这里我们来进行设置
可以看到呢
在我的这个左侧add menu items这里
左侧已经出现了一个products
那之前是没有的
那之前的那个menu的页面
我正好还没有关
可以给大家看一下
这是我原先我安装Woocommerce之前的
这个add new menu items这里的显示的类目
并且我即使想要在里面增加项目
我点开这个
右上方有一个screen option
这里大家可以看到
这里依然是没有产品的
它只
它供我选择的项目只有这几个页面
博客按钮custom links categories
这categories指的应该是博客的这个类目
不是产品的
然后标签还有这个formats这里
然后呢
但是我们现在这个menu设置的页面呢
是我们已经安装了woocommers的
所以可以看到这里呢
出现了products
并且还有products categories
products text这里
那我们如果觉得这些类目不够
我们想要增加其他的可供选择类目呢
我们同样点击右上方这个screen OPTIONS
这里大家可以看到这里呢啊
增加了其他的许多新的一些项目
我们可以去选择
这个是装
这个是安装Woocommerce之前的
这个是安装无commus之后的
所以它的差别还是蛮大的
好我们在这个里面进行设
置
我们现在要加的是产品的类目
我们点击这个products categories
然后呢我们点击view or
就是我之前增加的所有的类目
都在里面呢
那我们现在看到
这里有一个项目叫on categorized啊
这个呢是系统默认的
也就是我们啊
我假如说我们在上传产品的时候
我们漏选了他的对应的产品类目
那他就会自动归类到on categorized这里的
我们呢现在呢
就这所以这个我们不用管他
我们只要将其他的项目都增加进去
好我们一一的把我们要增加的项目
全勾上
点击这个add to menu
好然后呢
我们要把这些menu的项目
我们全部都拖到products
而且是拖到它的下层
但是
如果我把这些类目全部全部拖过去呢
我可能会觉得还是啊
有点不够清晰
所以我依然是希望在这些类目上面
我们还是增加一个上级类目
但是我们并不是
在我们并不是在产品的类目这里面
去添加了我的products
这里
category我保持不变了
我不想再为他增加上呃
上层的一级类目了
因为我希望就让这些类目变成一级的
这样可以让网址的这个结构
变得更加清晰一点
但是我可以在menu里面
我可以去增加一个层次
怎么增加呢
其实也很简单
就是我增加一个custom links这里
我比如说这个
我增加一个上层联盟是commercial
然后呢UIL网址链接这里
我输入一个新号
输入新号的目的是
让客户在浏览我们
首页的时候呢
他即使点击了这个commercial grade tense这里
他依然是点不点不出来的
他必须要点击的
是在他的这个层级下面的
这些啊
我的这些子lame才可以
好我们添加一下
我们再增加一个Alto
tens
我们先将这个刚刚增加的
commercial跟auto TENSE
两个类目
先往上拖
怎么拖的大家还记得吗
鼠标按住
然后呢可以往上拖
好现在呢
呃
这两个commercial跟auto TENSE都已经出来了
那么我们再将我的其他的类目呢
再往上拖
并且呢我拖到这个啊
这个两个类目的下方的层级
比如说我这个
我这里我一共有8个类目
是在commercial grade TENSE这里的
所以我将这个8个类目呢
一一都拖过来
大家可以通过这个项目的位置
就判断它是属于哪一个层次
哪一个层级的
我进行一下调整
将我所有的属于commercial下面的类目
全拖过来
好然后呢
是户外帐篷的两个类目
camping跟这个mountaineering
好了都已经设置完毕了
我们点击一下save
然后我们看一下前端的显示的效果
绕线一下
好
现在可以看到在在这个products旁边呢
有一个向下的箭头
然后呢并且我们看到
它是用超级菜单的方式显示的啊
这个我们稍后来演示
我们先来看一下传统的菜单啊
我把这个products这里
有一个extra Mega settings
这里我先把它关掉
这个我们稍后来演示
再来前端刷新看一下传统的菜单
是这样子的
传统菜单它
应该是这样子的
他应该还是显示
有一点s Mega menu的效果
我再给他调整一下
好不管
先不管它啊
传统的菜单
就是你会看到它下面有两项
并且呢呃
这两个这个commercial grade跟outdoor
这个是我单独添加的
我使用的是
custom link并且呢
在link里面我是没有加URL
我只是用了一个井号作为站位符
所以如果我点击这个commercial grade tense
这里我点击它
我是点不出来了
我点不出来
但是如果我点击aphron TENSE
这就是它下方的层级
我可以看到它是有网址链接的
它这边是有网址链接的啊
所以这就是传统的方式
那么传统的菜单
它的样式在哪里调整呢
大家可以看到我的这个菜单上面
我是增加了一个上边框的
那这个调整呢
是在我给大家看一下
在这里在appearance里customize
然后呢我们点击这个header builder
在head的编辑下方
我们点击这个primary menu
这个地方
我们点击它
在design这里
大家就可以看到子类目的一些设置
这里显示SUB menu
container submenu animation啊啊
board with等等这些
大家可以看我这里有一个上边框的
是因为我在SUB menu下方这里
board with这里
我在top上方
这里我在我写填写了一个2
而其他的右下左它都是0
所以它是有一个上边框的
就是在你的
customize
哈customize的header builder这里
然后呢我们只要点点中这个primary menu
在design这里
你就可以看到
针对SUB menu指的就是你的子类目
就是你的下拉的这个类目
针对SUB menu你可以去进行相应的设置
它的样式
边框颜色
文字的这些大小等等
都是可以在这里设置
包括你也可以为他的这个下拉的类目
你可以增加一个背景色等等
都在这里
然后相应的
你同样也可以针对于Pad端
以及手机端
你都可以单独的去进行调整
好那这个呢
就是传统的这个
最传统的这个菜单的显示方式
接下来我们教大家去设置Mega menu
也就是超级菜单
我们首先使用Astra自带的超级菜单
相对简单一点
但是我觉得其实也蛮好用的
关键是它可以让我们的网真性能啊
不会受什么影响
因为都是使用主题自带的
要使用Astra的Mega menu呢
我们首先要开启一下
它的这个Mega menu的功能
可以检查一下
我们来到Astra的这个后台
我们先确保一下它这里有一个net menu
这里这个呢我们是要开启的好
它目前是已经开启状态的
然后我们依然回到menu appearance menu这里
我们现在想要做的超级菜单
只是放在产品上面
就是我希望
我希望它产品的下方的这个紫菜单
它是像超级菜单的方式直接平铺开来
这样会显得特别的大气
所以呢我们先点击products这个项目
最右边这个向下的箭头
这里有一个Astra Mega settings
这里我们点击一下
我们这里看到有一个Mega menu
我们将它开启
然后呢先选择一下Mega menu的宽度
宽度呢我个人比较偏向于使用content
content呢
就是我的页面的内容是什么宽度
那它就是什么宽度
我们先来点击save change
然后来预览一下它的效果
好记得这里点击之后呢
来到我们menu设置这里
下方这个save的按钮还要再点击一下
好我们现在来刷新一下这个效果
OK可以看到啊
我们products它
原先传统的菜单它是两个项目
然后呢我要把鼠标放到那个motion
或者auto上面
才会显示下面的其他的类目
那现在它形成超级菜单了
所以它是直接变成两列
并且它的宽度
整个菜单的宽度呢
是跟我们页面的内容是一样宽的
好所以这里的结构其实呢
就是也蛮清晰的
我们还是回到menu设置这个界面
这里的结构呢其实就是两列
呃这两个commercial grade跟auto这两个呢
是属于呃单独的两列
然后呢
它们下面再分别有它的这个词类目
好我们继续打开这个extra Mega settings
这里我们在product下方
我们进行设置
这个下面呢我们还可以增加一个图标
比如说啊
图标的话你可以自己上传
你也可以选择
系统里面自带的一些图标
我搜一下有没有帐篷啊
他没有帐篷
那么我随便
我选我随便选一个
嗯给大家看一下
然后这里是图标的位置
你是选择在before menu label
就是在菜单的标签前还是后
然后呢这个
是大小你可以去调整大小
我调整40
我看一下
然后呢
这个是图标跟菜单文字的那个空间
好我们先这样的设置来
点击save预览一下效果
记得这里还要再点击save
我们刷新一下
啊现在可以看到好丑啊
哈哈但是啊
至少大家看到了这里
其实我们是可以加图标的
所以但是还是太丑了
这个有点太异类了
我把这个图标去掉吧
啊点击这个减号就把图标去掉了
我们再来save一下好
图标没有了
然后我们再来设置其他的
那现在呢
我们看到products下方它呈现两列
但是呢呃
其实commercial grade TENSE跟auto TENSE
它其实是标题
那标题的话
它是不是应该是要粗体啊
比较好一点
要不然其实这样子
我是没办法判断哪个是标题
哪个是项目
所以呢我们首先把这两个标题呢
我们设置一下
设置这两个标题呢
同样是在啊menu设置这里
那么前面我们设置的是product
这个Astra menu setting
然后我们现在的话是要设置呃
commercial green TENSE
我们要将这个变成标题
我们还是点击右边这个向下箭头
它也有extra Mega settings
这里我们点击一下
这里呢它可以让我们选择s heading
这里我勾选一下就是把它作为标题
那么我们就可以啊
就可以了
好然后我们点击保存
再点击保存
来重新刷新一下预览一下好
可以看到现在commercial grade TENSE呢
这里它已经变成标题了
好我们把另外一个也改一下
户外的帐篷
这个也改一下
然后如果你要加图标
那这里可以同样是可以加图标的
然后这里其实你还可以设置其他的
呃Mega menu separate color啊
我们来点击一下
这个应该是分隔线
我们选择一个黑色看一下
好刷新一下
好可以看到啊
它确实是一个分割线
但是很难看
所以我们还是把这个分割线给关掉
还是回到menu setting的这个界面
然后呢outdoor tense extra Mega Settings
我们刚刚设置了一个separate color
对吧OK啊
我们把它改成
嗯嗯就是会让它调为透明啊
这个颜色
这里上面是选色
下面这个条呢
是透明条
透明度的条
我们把它改成透明就好了
好再save一下OK
那现在我们可以看到它呢
这里是两个标题
并且下方就是我的子类目
那我现在可能我想把样式再调整一下
比如说我这里
我的这个类目
它是一个全新的新新上架的产品啊
然后呢我的这个storage产品呢
是我的热卖的产品
那我其实是可以在他们上面
去加相应的标签的
我来演示一下啊
首先我要为这个exhibition tense这里
我增加一个呃
新到的这个标签
我增加一个new的标签
你可以在这里设置
你在exhibition tense这个项目上
点击向下箭头
然后呢打开astramage settings这里
然后呢这里有一个menu highlight label
我设置new
就是给它加一个highlight的一个标签
我先save看一下效果
发现一下
哎看到exhibition TENSE这里
旁边加了一个小小的new
但这个标签还不够明显
所以我要给它加个背景色
还是
打开exhibition TENSE这里的Astramag Settings
这里
在这个标签
我添加的是new
在design这里
design highlight labels啊
首先我可以将这个标签的颜色改一下
然后呢
我可以将这个标签我增加一个背景色
啊我给它改成
颜色改成啊
标签颜色改成白色
背景色呢
我改成一个红色
这样就比较醒目一点
好我see
然后同样的
我顺带把这个storage tense这里
也增加一个标签
打开extra Mega settings这里
这个标签是什么
因为我是热卖产品嘛
我可以写hot
然后呢在design这里
标签颜色改成白色
标签的背景色改成红色
say好
say
好我们前段来预览一下
哎可以看到
这里两个标签都加好了
exhibition Tan这里是new storage Tan这里是Halt
对吧那这样
我们可以重点的去
将我们想要主推的产品
进行一个突出
那用户可能也会比较容易
被这样的标签所吸引
现在我比如说我觉得呃
它的样式还不够
我想要再增加一些样式
就是
我想让这个超级菜单有一个背景色
并且呢
我想把这些字体的颜色稍微调整一下
那么我们是在
还是在menu设置的这个界面
在products这里
我们点击这个Astra menu settings这里
在右边有个design
design这里呢
首先我可以增加一个背景
我这里呢
可以有两种
一个是我直接增加颜色
另外一种呢
而且颜色这里
我还可以选择是使用渐变的颜色
那我这里选择用纯色啊
我颜色我挑选一个淡淡的灰色
然后你也可以去上传图片啊
那我这边就不上传图片了
我就选择用颜色
然后呢这个也呃colors
这里就下面
针对于我呃
超级菜单那些项目的这个字体颜色
我调整一下
比如说我希望呃两个heading
就是commercial跟这个auto
这两个我颜色不变了
但是我希望呃下面的这个这些text link
我想有一个颜色的变化
就是
我希望鼠标放到这个项目上的时候呢
它会有鼠标悬浮的效果啊
我只要改变一下这个text link
这里的hover
我把它改成这个蓝色
然后下面这里呢
这个分隔符
呃
我希望比如说我希望顶部的这个边框
我想再宽一点点
我增加为调整调整为3
并且呃顶部的边框的这个颜色
我就还是维持为这个蓝色
好我点击保存
这里再点击保存
然后我们再来刷新一下这个效果
好可以看到呢
目前这个超级菜单的背景色
已经调整为我们想要的
并且
我鼠标放到对应的项目上的时候呢
他会出现颜色变化的这个悬浮的效果
OK那么
这就是使用Astra自带的这个Mega menu
就是来去制作这个超级菜单
那超级菜单其实我们也蛮推荐使用的
因为这样子会让用户啊
能够第一时间一目了然
知道你有哪些产品分类
因为传统的那个菜单呢就
是他会啊
他相对来说效率没那么高
用户可能要鼠标要多点击操作一次
才能知道啊
你的产品的总的这个结构是怎么样的
而且他可能往往也没办法像
超级菜单这样子
一目了然
他知道啊
你有几个分类
每个分类下面有几
有几样这个子类目的产品
所以
我们其实也蛮推荐使用超级菜单的
这个也是目前比较流行的呃
一种菜单的方式
但是如果我们觉得
Astra Pro的这个超级菜单样式
还不够满足你
你希望增加一些图片
那么其实也是可以的
Astra的这个超级菜单
它也允许我们增加图片
但是它做的没有那么的好看
我给大家看一下
比方说
我在commercial grade tent这里我加个图片
它比较死板
就是在icon这里我选择上传一个图片
啊比如说我随便上传这个
点击一下
然后呢我把
图片大小放到最大看一下啊
可以看到呢
他也会有一个图片
但是他放到最大
他也就是这样子的
而且他也只能放在这个位置
那如果你想要呃调整到别的位置
那基本上
那就是你要使用呃定制代码了
那这个
对于没有任何代码基础的人来说呢
这个就会比较麻烦
因为我们其实这个见证的课程
还是比较呃
希望推崇于说
大家能够几乎不用代码
都可以去完成网站
所以在这种情况下
假如你觉得这样的样式
你觉得你能接受了
那么其实也是可以
那你就用这样的样式
呃就去做这个超级菜单
比如说我在这个auto户外
这里我再加一个图片
图片大小调为最大
然后呢我们刷新一下
好可以看到呢
嗯好像看着也还行啊
但是啊我们是看到图片是被压缩了
就是这个地方
你必须要使用正方形的图片
那因为我上传的是长的16:9的图片
所以它这里被压缩了
尤其这里面就很明显
你用一张正方形的图片呢
它就不会出现像这种被压缩的效果
那么似乎这样子看好像也还OK啊
也还可以
我们来看一下
但是似乎呢
Astra的Mega Manu它只能做到这个程度了
我们就没有办法再呃
把图片的位置去放到别的地方
那如果我们要让图片的显示更加的分
它的位置更加的自定义一点
那么我们接下来就为大家介绍第二种
使用ELEMENTAL Pro的这个header build的功能
来去创建自定义的这个header
以及尤其是它的菜单
那我们现在呢
来使用elemental的呃
theme builder的这个工具
来去创建完全自定义的这个页媒
以及菜单
要去创建啊我们
那我们首先呢要来到elemental的设置
这里
要开启一个叫做menu的一个设置啊
在elemental这里我们点击settings这里
在
features这里
最后一个
这里呢有一个叫做menu的一个选项
我们需要将这个menu开启一下
把它选择active的状态
好然后我们点击下保存
然后我们接下来
就开始使用elemental的这个呃
创建header在
在这个templates这里
templates这里有一个叫做theme builder
这里呢我们可以创建这些的一些模板
那么我们这里要创建的是header
那么刚刚啊
我之前已经创建了一个了
我们点击这个elemental Pro啊
elemental header这个ARE
这个我点击edits
好直接将那个关这个关掉好
那这里呢
其实我们就可以直接去创建
我们的head
那首先我们看一下
我们之前做的这个head的样式啊
那我们的head需要包含这些元素
一个是logo
一个是我的这个菜单
然后呢是我们的一些社交媒体的图标
还有搜索的按钮
所以呢我们要啊将这些元素呢
一一的要去添加进去
在这个elemental header的界面呢
我们点击一下这个加号
然后呢我们首先要增加一个容器
容器的布局呢
我们选择这个来看一下分为几块
logo一块
中间的菜单
以及搜索框和搜索的图标一块
还有社交媒体的图标一块
好我们选择这个三块布局
三列的这个布局
然后最后我们啊
我们先往里面添加内容
最后再来调整它的样式
首先在第一块这个容器里面
我们增加一个
这里有一个叫site logo
我们添加进来
呃因为我们之前已经签呃
已经在后台这里
后台的
呃
其实是在customize
appearance customize里可以看到
其实我的site title and logo
就是我们之前在自定义
呃在外观的自定义这里呢
我们其实已经添加了一个logo
所以呢
我们在elemental编辑界面
我只要将空间里面的
这个elemental的这些
elements这里
这里下方有一个site logo
我拖过来
它自动就显示我的站点的这个logo的
那这个logo呢
现在会有一点点大
我们要给它调整一下啊
我们先不调
我们先把元素都添加好
添加好之后呢
然后我们再来调整最后的样式
logo添加好之后呢
我们接下来要添加这个菜单
菜单这里呢
我点击这个加号
然后呢我在左边的elements这里
我搜索一个menu
就最后一个
这个menu呢
我们之前在elemental的设置那里
我们因为将这个menu开启了
所以它是有这个menu的选项
否则你是呃看不到这个选项的
将它拖过来
鼠标按住它
然后拖过来
拖过来之后呢
大家看到它这里有item 1-3
那么呃用elemental做菜单呢
比较麻烦一点
就是
这些我们都是要一个个手动的去书写
并且要去加链接的
所以我们现在要更改一下这些item
我这里一共是7个项
home PRODUCTS FAQ services blog about contact好
我一个一个的去改
首先是home
link这里呢
啊我只要输入我的path
就是那个路径就好了
因为我就是在这个网站上嘛
所以我的路径呢
我域名就不用写了
我路径就是斜杠home啊
这个路径从哪里查呢
大家只要直接去page这里
你比如说home
你点这个quick Edit
它这个slug就是你的这个路径
呃你比如说
你要使用这个路径
那么你就加一个斜杠
先加一个斜杠
然后在home就可以了
好一个是home
然后呢是products
然后我的link也是路径
啊是products
但实际上这里我可以不写路径
因为我要做的是超级菜单用户
实际上他把鼠标放在products上面
它其实是选择下面的这些选项
我不需要它去点击这个products
所以这里呢
我这个products link我可以就空白
然后是我的FAQ
FAQ这个是有路径的就是FAQ
然后增加一个
services应该是
啊对的路径
然后是blog博客
然后是about her contact
contact好了
一共7个项目已经添加好了
那现在
我看到他的这个菜单挤在一起了
所以我们要调整一下这个宽度啊
我们首先选中这整个大的容器
这整个大的容器呢
就是我们我们的菜单整个一块那
呃就是我如果选中这个容器
我就通过点击呃
我鼠标放在这个容器上方
它会出现这样的一个符号
我点击中间这个6个小点
我就可以选中它
然后呢我要将这个宽度
先设置为我的页面的宽度
那我们的页面宽度
就是之前
我们在外观的这个global全局设置里面
我们设置的是1,200的一个页面宽度
所以我这里在左边这个waste这里
我要设置为1,200
让它宽一点
好这个呃
我们设置为1,200
之后呢
先暂时看到这个菜单没有折叠了好OK
那我们就先暂时这样
然后我们接下来呃
重点是要为这
个product下方我要增加超级菜单
那么我先点击鼠标放到
鼠标放到这个menu上面
然后呢点击这个小的小笔的符号
然后我们在左边选中
点击这个products
这里有一个drop down content
我点击一下把它开启
开启之后呢
这里就会看到出现一个小的向下箭头
然后呢我们点击一下这个向下箭头
它会出现一个下拉框
然后呢我们可以在这个drag widget页
这里我们就可以添加元素了
呃我比如说我要增加一个超级菜单
我希望显示的方式是呃
左边一个图片
然后呢是commercial grade tents
下面一列它的呃子类目
然后呢再中间是一个图片
就这个图片
然后呢再是outdoor tents
然后下面又是camping tents
那么我应该这么设置
我点击这个加号
然后呢我选择4栏
选择4栏的这个布局
并且我的这个布局呢
我也可以去为它设置一下
整体的一个宽度
我也给它设置为1,200
就是呃
大家看到目前有中间有一列呃
有一行白的
这行白的就代表的是我的
就是我的这个超级菜单
它整个容器的呃就是它
反正目前是一个占位的状态
那么我需要将这
整个我的超级菜单的宽度呢
也设置为我的内容宽度
所以我选中他之后呢
我在左边把宽度改一下
那选中的方式你既可以通过选择啊
你鼠标放在整个大的容器上方
他右上方会出现一个小的标
你点中他
点中它之后
它会出现一个Edit container
或者你也可
以右键右键
这里呢有一个有一个structure
然后呢这里呃我们可以看一下啊
对CTRL2我们对应选一下
对它这个就是ITEM2
那我们从层次上可以看到它
目前我们ITEM2下面
我们又分别加了一个container
就是我分别加了4栏嘛
所以我选中ITEM2呢
我将这个宽度设置为在左边这里
我将这个宽度设置为1,200
好现在要做什么
现在其实就是
我们往这个四个容器里面
一个一个一一添加内容
那首先我添加一个图片
在左边左边这里呃elements空键就是呃
大家可以
大家可以点击这个加号
然后呢
左边会出现相应的空间让你选择
你搜索一个
你搜索一个图片
image
然后呢我点击这个图片
啊我增加一个这个图片
嗯这里如果我们想要是图片
然后菜单图片菜单就是呃
就是如果呃
第一列图片
第2列这个图片对应的菜单
第3列图片第4列对应这个图片的菜单
那么可能最好是用呃正方形的图
但是因为我目前媒体库里面
其实我只有长方形的图
所以可能会显示有点怪
但是没关系
我们就先演示一下
图片加好了
然后我们接下来
在第二个第二栏的这个容容器里面呢
我们增加一个我们叫做在左边这里
空键这里我先点这个加号
然后呢左边我搜索一个叫做icon list
icon list
并且我还需要在上方加一个标题
所以我还是要在啊
我鼠标点击在这个容器上方
然后呢我在左边的
这个控件里面我们增加一个叫做heading
就是你的标题
我要增加一个标题
标题呢就放在这个icon list上方
那这个标题呢
啊我就是commercial
grade ten
那标题太大了
所以我选中这个标题之后呢
我在style这里
有一个Typography
点击这个小的笔
我们这里有一个size
我们选点击啊
我们设置一下
设置为18
并且呢帮并且呢
将这个颜色调整一下
这个颜色目前是蓝色
好我们可以调整为因为它是标题嘛
所以我希望颜色深一点
我就选择这个
黑色的好了
好然后现在呢
我们就是要一个一个的将这些项目
就是这个list item这里啊
将一个个项目你要加进去
那么我们项目有哪些
就是这些a frame TENSE
emergency TENSE
exhibition TENSE industry等等等
blah blah blah blah
这些全部都加进去
并且要把这个图标去掉
图标的话呢
就是你只要点进点中相应的项目
将这个呃点击这个小的垃圾桶remove
然后将这个图标一个个都删掉就好了
然后呢这目前只有3个
不够的话我再加啊
我可以用编号表示一下
我就不改了
那不改名称了
我就往里面添加
好然后呢
我们在第三栏的容器里面
我们再增加一个图片
点击这个加号
在左边image这里
来将这个图片拖过来
增加一个图片
实际上这些
已经是使用elemental
编辑页面的一些技巧了
之后呢我们在做页面的时候
其实我们会讲更加
详细的
如何使用ELEMENTAL编辑页面的这些技巧
那么
我们现在只是因为讲到菜单的这个
超级菜单的自定义设置
所以我们就提前啊
将elemental编辑自定义菜单
我们可能会用到的一些空间
来先给大家演示一下
那实际上就是这个
我们目前在制作菜单的这个过程
就是我们未来
去制作我们网站上
所有网页的这个过程
我们又到
我们用到的都是elemental的这个工具
只是我们现在只是在编辑菜单而已
好那么现在同样的
我要在这里加一个标题
以及他的呃这些菜单的项目
那么我是不是要点击加号
从左边控件里面继续再搜索heading啊
可以这样子
也可以更简便的方法
选中这个commercial grade tense
然后呢右键有一个copy
再到左边这里
然后点击
然后呃paste过来
把它粘贴一下
然后呢你再把他的名字改掉就好了
这么做的好处就是
你不用再调整它的样式了
它是连带它的样式一起复制过来的
然后这个这个项目同样的点击copy
粘贴
然后只是呢
呃我这些项目名称我也不改了
还是维持这样子
然后呢我们先来
啊我们先点击save
然后我们来预览一下它的效果吧
呃样式还没有调
先忽略这个样式的问题
但是
我们鼠标放到products上方的时候呢
它是这样显示的
所以我们就可以完全自定义的
那现在也横向的好难看对吧
那么我们就
其实横的图片你可以放到最上方
啊比方说我这里调整一下
我把这个横的图片呢啊copy
粘贴然后呢选中他把他往上拖一点
拖到这个上方
再把这个横的图片选中他啊copy
然后呢到这里粘贴啊
他每次粘贴
都只能粘贴在你这个这个元素的下方
他没办法粘贴到上方
所以你可以拖拽
我们再保存一下草稿
好然后我们刚刚那个预览界面
它也会自动更新的哎
可以看到啊
我的图片呢其实已经在上方了
也就是说
那如果你有正好有4个大的类目
那么你还可以用4张横向的图片
每张图片代表你的一个类目
那这样的话
其实你的超级菜单就会显得很好看
相应的呢
就是你同样可以为你的这个容器
增加背景色啊
比如说我想为我的这个容器呢
增加背景色为嗯
增加背景色是在这里的
你选中这个大大的容器
就是你整个超级菜单的这个容器
之后呢在style这里
style就是关于你所有样式的
什么颜色啊
字体啊大小都是在这里设置的
那么你我们选中容器的话
在style这里
我们就可以在background背景的这里
我们可以选择它的一些颜色
比方说我调整为一个
淡灰色再点击保存草稿
好现在看到呢
这个菜单其实就显得还比较好看一点
啊跟我们之前的做好的菜单呢
其实还有点区别对吧
之前的菜单他其实还是会呃
相对来说没有那么的自定义一点
他图片只能是这样子了
而且他只能用正方形的图但
是我们如果是使用Animato Pro
我们来做超级菜单
那么它会更加的自定义一点
那么我们现在这些社交媒体图标
包括搜索等等
我们应该怎么设置呢
其实一样的
依然是在这个容器里面
我们在啊
目前这个容器中间
这个容器里面呢
我们是只有这个菜单
那么我们现在
比如说
我要再跟他给他增加一个搜索的按钮
那么一样的
我先右键之后
在左边空间里面
我们可以呃搜索一下
一个search
它有一个search form
来看一下是不是我们想要的
好那么这个search form呢
不是我们想要的
因为它是属于这种样式
我们看一下有没有其他样式
okay啊full screen
它就是显示它只有它只有一个小图标
那现在啊
我们看到这个社区的图标
它是在我们菜单下方的
我们要把它调整为横向的
那么我们其实逻辑是这样的
就是因为这个大
这个大的容器就是中间这个容器呢
它的布局就是大家可以看到
我选中容器之后
在左边layout就是布局
布局这里下方有一个direction
有一个direction
它这里显示的是垂直的布局
我只要点击一下第一个
改成横向的布局就可以了
那这样的话呢
我的这个搜索的小的图标
就会在这个菜单的右边了
我们现在唯一要做的
就是将这个容器的宽度拉
拉高一点
那么相应的
比如说我把这个logo的宽度也给啊
调的小一点
logo的宽度呢
我在这里调
我选中这个容
器第一个它logo所在的容器
这里呢左边布局下方有一个was
这里它目前是25%
给它调整一下
调整为10%
好然后呢
我们再来调整一下中间这一栏
这个容器的宽度
它目前在layout这里显示50%
我给它调整为60%
好并且呢现在它们的高度不一对吧
我希望
中间这一栏他的这个呃内容啊
他是能够呈现在就是中间的
就上下的这个居中的位置
那我选中中间这个大的容器
选中它之后呢
我们在align items这里
就左边布局下方
这里align items这里有一个center
哎这样的话呢
啊它就显示是在呈现中间了
然后我们再点击一下啊
保存草稿
再来预览一下
那就会好很多了啊
鼠标放上去它就呈现这样的一个效果
那么呃在右边
我们接下来就加一些呃
SOS社交媒体的图标
那么我们就是其实就是在一样的
我在第三栏的这个容器里面
我呢增加一个往里面加加一个
我搜索一下social
然后这里就有很多social icon这里
那我可以给他
我选中他之后呢拖过来
然后他这里就会出现social logo
然后他目前是靠上拍的
所以我选中这个容器之后呢
在左边layout这里align items这里呢
我选择center
搞错了不好意思是呃
justify content这里我们选择这个center
然后呃我比如说我觉得这个图标
这些都图标都太大了
我想换个样式
这里呢啊
你选中这这个图标的空间
我们在左边这
里呢我们就可以就是conton
这里呢它有shape就它的形状
圆形的方形
呃这个round就是它这个方形
但是它周围是有点圆的
square呢就是完全正方形
然后circle圆的
就你你你都可以去进行相应的调整
然后包括它的大小
大小就是在style这里你可以呃
你可以去调整它它这个size
你看可以我们可以不随意的
灵活的去调整它的size
啊我就先比如说先这样子
然后呢我们点击呃保存草稿
再来预览一下它的效果
可以看到就是我们的menu呢
慢慢的在成型
也就是说其实我们如果用elemental呢
也是完全可以去做我们的这个页眉呃
最主要是
这个页眉是可以完全自定义的做
如果我们使用
主题自带的这个页眉工具
以及它的超级菜单的这个工具呢
我们相对来说做出来的这个页眉会呃
他没有那么的自定义
就是他有很多的设置
是必须要通过你自己写代码去完成的
但是如果你使用elemental来编辑呢
就是呃你把它理解为
你就是像编辑一个页面一样
你想怎么去编辑
这个菜单的显示就可以怎么编辑
区别在于说呢
使用elemental你自己做的这个菜单
呃我个人感觉最大的影响是
它会影响到你的网站的加载速度
它虽然的确是让你的样式
做的很好看了
但是现在我们还没有完善啊
我就不继续往下了
因为我们之后会教大家
去用elemental做所有的页面啊
之后呢我们会再教
大家做页面的时候呢
会让大家更加详细的去了解
elemental的各种各样的一些丰富的功能
你只要学会了用element做页面
那么你其实你就对你来说
做这样的一个header
其实是非常非常简单的
那么呃就是
但是问题就在于说
我们用elemental做的这个head呢
它可能会导致网页的加载会有影响
而我们如果使用主题自带的这个head
啊
他会相对来说代码会更加简洁一点
elemental的这个做的做出来的这个head
页面的代码的相对来说
会更加复杂一点
所以
会导致网页的加载会有一些影响啊
但好处就在就是在于说
你可以完全自定义
你可以做出各种各样丰富的
这个菜单的样式
你可以做出很多啊
别的网站做不出来的菜单样式
所以就是这里面的利弊
可能需要大家自己来权衡
是选择让网站看的更丰富
而稍微放弃一些网站的加载速度呢
还是说
你还是想要优先要网站的加载速度
而呃放弃丰富多彩的
花里胡哨的这种菜单的显示
那如果你要问我
那我宁愿选择这样的传统的菜单
就使用主题自带的菜单
因为对我来说
其实首先这样的样式也已经挺好看了
其次呃
对我来说
我可能更加追求网站的效用
因为快的加载速度
其实会让用户的体验可能会更好一点
我宁愿啊
打开一个
一秒钟就能直接打开网页的网站
但他的样式可能稍微差一点点
而不愿意花要花三五秒才能去
打啊三五秒去打开一个网站的首页
只是为了看
他丰富多彩的一些网页显示
所以可能对我来说
我个人会比较追求还是效用吧
还有用户的体验
可能会更加偏向于使用主题自带的
这个呃
head以及菜单啊
它的包括这个主题Astra
它也自带了呃
超级菜单的这个设计
其实也已经蛮好看了
所以呢啊
关于elemental
来去做head的部分的介绍呢
我们就讲到这里
虽然这里还没有完成
但其实大家已经知道了
怎么去做
无非就是你在这里面
一步一步的去优化它的样式啊
还有呢就是最关键的是
当你做完这一个之后呢
你还要再看一下在tablet
就是你Pad端的显示
好然后呢
你还要再看一下手机端的显示
在三个不不同的这个显示端
你都要去做相应的调整
那目前它还是它是还没有调整的
所以使用elemental呢
就是我们必须要在不同的显示端
都要去做相应的调整
它其实不是完全自动的去适配的啊
就是必须要手动的去调整的
那些移动适配的只有模板
那人家是提前调过的
是移动适配的
另外呢
我们如果使用主题自带的这个菜单
他其实也是呃
基本上你你只要稍微的调一点点
就基本上
他也是自动的去各个显示端去适配的
所以我个人其实还是比较倾向于
使用主题自带的这个菜单
好那关于elemental啊
创建自定义菜单的部分
我们就讲到这边
那有兴趣的啊同学你们可以自
己去再研究一下
往里面你可以加各种各样东西
你可以加你
你可以甚至做两两两层的菜单啊
然后呢呃记得就是你菜单做完之后
呃在发布之前
你首先在这个display condition这里
你要添加一个条件
就是它这里include entire site
就是让这个菜单显示在整个网站上
当然你也可以增加条件
就是比如说你只是让这个菜单啊
只显示在部分的页面上
在这里面
其实都可以去添加相应条件的
比如说你只想增加在啊contact页面
那么你
那么你就在这个add condition这里啊
你选择这个有个叫singular
然后all singular这里呢
你可以选择那我的contact
联系联系页面
那我是在页面里面呢
比如说我选择这个page这里
然后呢你这里就输入一个
contact
选中它
然后我save and close那么我们来看一下啊
就是啊其实它
当你进入到contact的这个页面
它就会显示你刚刚做的
这个自定义的菜单了
那么我们目前这个是默认的菜单
主题自带的我们刚刚创建的
我先刷新一下啊然后呢
哎
他现在已经显示在整个网站上了哈
对
因为我们刚刚在呃这个自定义菜单
我display condition这里呃
有一个entire site这里我没有去掉
我把它这个关掉
然后呢我把它点击say再保存一下好
我们再刷新一下
好那个是全这个
还是之前主题自带的我们做的菜单
但我们现在选择点击这个contact
来看一下它的菜单有
没有变化好看到菜单已经不一样了
也就是说呢
其实呃用m elemental呢
确实是很灵活很自定义
你可以呃
自定义的
去让某一些菜单显示在某一些页面上
你也可以显示在整个网站上
好了那关于elemental做私定菜单部分呢
我们就介绍完毕了
所以关于菜单制作
我们其实分享了两种方式
第一种呢
就使用主题自带的这个菜单那astral
同时呃
他也提供了超级菜单的这个选项
以及设置
只是相对来说呢没有那么的自定义
第二种呢
就是你可以选择使用ELEMENTAL
来完全自定义
你的菜单的一个显示的样式
这里呢你关键是
你可以做一个丰富多彩的
一个菜单的选项
就是像这样子的丰富多彩的
也可以做各种各样的排版布局在里面
好了那关于菜单的部分呢
我们就讲到这里
