<本设置项在zibll(v7.3)前版本名为顶部导航,本wiki按照最新版本更新与维护>

这是子比主题7.1版本以后的全新功能

1.开启导航幻灯片

<本设置项在zibll(v7.3)前版本名为开启导航幻灯片,本wiki按照最新版本更新与维护>

1.1开启导航幻灯片

图片[1]-顶部多功能组件-子比主题帮助

这里可以自定义导航幻灯片的显示页面

默认只显示首页

站长根据需要自行设置

这里是导航幻灯片的效果图

图片[2]-顶部多功能组件-子比主题帮助

针对您的站点要求,您也可以选择上传视频等文件媒体播放

1.2顶部多功能组件的显示规则

图片[3]-顶部多功能组件-子比主题帮助

功能设置项

可以选择设置的顶部多功能组件的显示规则

由于移动端的界面大小可能会因为此设置的不方便,占屏面积过小可能会对用户的使用体验造成一定的影响

由此,我们的可以在这里设置此项的显示逻辑:

1.全部显示:PC段和移动端均显示顶部多功能组件

2.仅在PC端显示:只在电脑端(PC端)显示顶部多功能组件,移动端不显示顶部多功能组件

3.仅在移动端显示:只在移动端(手机,平板等移动端设备)上显示顶部多功能组件,PC端不显示顶部多功能组件(不影响其他组件以及自定义组件/布局)

2.背景内容

图片[4]-顶部多功能组件-子比主题帮助

美化和功能性兼用的设置项

可以这这里设置顶部多功能组件的背景

  • 图片地址:您可以添加想要的背景,也可以点击上传(图片加载会影响加载时间,可以使用第三方图床或者OSS以加快加载速度)
  • 视频背景:选择或上传一个背景,作为多功能组件的背景视频,同样的,视频加载会更影响加载时间,可以使用第三方图床或者OSS以加快加载速度(移动端不显示视频,如您设置了视频,建议添加一张图片来供移动端显示,或者在下方显示规则中选择移动端不显示)
  • 显示规则:可以选择是否在PC端或移动端显示(由于移动端页面大小原因,您可以按照您的站点需求选择是否显示
  • 跳转链接:当显示到这张幻灯片(图片或者视频)的时候,点击背景,可以选择跳转到某个链接(可以作为广告或宣传使用)
  • 叠加图层:这个可以参考早期的新版幻灯片,使用多个图层加载,使用不同的加载速度等,可以制作出更好看更有动感的幻灯片(此设置只对图片生效,使用视频设置会出错)

2.1叠加文案

和上面的叠加图层类似,

图片[5]-顶部多功能组件-子比主题帮助

可以选择为幻灯片增加一个文案显示在幻灯片上方(例如:点击查看,点击即可了解,欢迎您的访问等您需要添加的文案)

图片[6]-顶部多功能组件-子比主题帮助

添加幻灯片文案后,您可以选择是否添加幻灯片简介,如不需要,留空即可

  • 显示位置:您可以选择将幻灯片文案显示在幻灯片的某个位置(这里需要注意的是,显示位置中的左侧居中,居中显示,底部集中与右侧居中可能会与多功能组件的文字、下方的显示卡片等重叠)
  • PC端字体大小:可以单独设置电脑端的幻灯片文字大小,不与显示文字等大小重叠!
  • 移动端字体大小:同上,可以单独设置移动端的幻灯片文字大小,不与显示文字等大小重叠!(提醒,包括PC端字体大小,在此设置标题的字体大小,简介的大小为标题大小的60%,最小12px
    字体越大,文案周边的间距也越大!字体大小请根据内容合理调整,避免在某些设备显示不全!文字过大也会影响用户对于页面的观感以及使用体验!
  • 文案视差滚动: 视差滚动功能为添加的幻灯片叠加文案相较背景滚动的显示时间差,为负数则滚动慢一拍,为正数则滚动快一拍,为0则关闭,可以按照自己的美观需求改动,正常建议调整在-50%~50%即可

下方的添加背景项目,您还可以点击添加多张幻灯片,调整幻灯片之间的顺序,每张幻灯片都有同上方一样的独立设置,可以做出更好看的网站门户!

3.背景显示设置

图片[7]-顶部多功能组件-子比主题帮助

3.1幻灯片方向

美化设置项,在有多张幻灯片(图片)的情况下,您可以选择两种切换效果(左右切换或上下切换按钮)一般建议使用默认的左右切换按钮,会让幻灯片切换看起来更美观顺畅

3.2循环切换

功能设置项,在有多张幻灯片(图片)的情况下,当按照停顿时间切换,顺序播放一遍完成后,是否从头开始继续循环播放

若不开启则会在顺序播放完一遍后停留在最后一张幻灯片,可以按照自己的幻灯片内容以及使用需求设置

图片[8]-顶部多功能组件-子比主题帮助

3.3显示翻页按钮

功能设置项,可以在幻灯片的两边显示左右箭头的翻页按钮(见上图左右两侧中间部分的两个翻页按钮),可以在有自动播放的同时选择切换播放幻灯片

3.4显示指示器

功能设置项,可以指示目前的幻灯片播放次序状态(截止子比主题V7.5.1版本,子比主题的播放指示器不支持点击直接跳转,只能通过上方的翻页按钮切换幻灯片)

3.5切换动画

图片[9]-顶部多功能组件-子比主题帮助

功能/美化设置项

一共有五种切换模式,分别是滑动切换、淡入淡出、3D方块、3D滑入、3D翻转

滑动切换为从左边推入,这个切换效果最通用

淡入淡出更美观,很好用,可以按照自己的喜好添加

3D的的三个模式(方块、滑入、翻转)的冲击力相较于上面两个会更吸引用户的视点,如果想要幻灯片更有吸引力,更吸引用户眼球,可以试试用这三个切换方式

4.顶部多功能组件幻灯片高度设置

4.1按比例自动高度

图片[10]-顶部多功能组件-子比主题帮助

美化/功能设置项,开启此设置项过后,幻灯片的长宽比会按照此比例裁剪然后显示出来,对于多张长宽比例不一的幻灯片显示会有很大的帮助

但同时需要注意:开启自动高度后,下方设置的PC端/移动端高度设置会失效,设置了之后下方的高度设置再怎么设置保存更新也不会生效!如果发现设置的高度不生效不起效果,建议先排查是否打开比例自动高度导致设置冲突!

4.2自动高度

图片[11]-顶部多功能组件-子比主题帮助

这里的自动高度和上方的按比例自动高度也是相互冲突的,只能同时设置一项,不然会优先按照按比例最大高度的长宽比例裁剪显示

最大高度和最小高度为多张长宽不一幻灯片时裁剪高度来显示

但开启此项需要同时注意的是,幻灯片之间高度差以及每张幻灯片的高宽比不同也会导致显示不佳的问题出现

5.电脑端高度与移动端高度

图片[12]-顶部多功能组件-子比主题帮助

这里可以设置幻灯片与移动端高度和电脑端的固定高度

与上两个设置项会冲突,请注意!

6.幻灯片间距与切换速度

图片[13]-顶部多功能组件-子比主题帮助

6.1幻灯片间距

在上方3.5切换动画中,像是滑动切换等切换(淡入淡出切换不起效,设置多少都没用),在这里可以设置幻灯片间距

图片[14]-顶部多功能组件-子比主题帮助

如上图所示

可以有一定效果的分隔不同的幻灯片,对于设置了叠加图层的幻灯片也会提高一定的观感

若不慎设置觉得中间的白条碍眼的话,只需把幻灯片间距设置为0即可

6.2切换速度

功能性设置项,可以设置两张幻灯片之间的切换速度(这里的设置对所有的切换效果都管用)如果没有特殊要求有感觉不好把握,设置为0(主题会按照一般状态下较为合理的自动模式设置切换速度)

同时提醒,这里的切换单位是ms(毫秒)1000ms(毫秒)=1s(秒)(例如要设置0.6s,那设置为600ms即可)

7.自动播放与停顿时间

图片[15]-顶部多功能组件-子比主题帮助

7.1自动播放

开启自动播放后,会自动按照下方的停顿时间来切换幻灯片(注意:如果关闭自动播放而且没有打开翻页按钮的话,幻灯片将永远停留在第一张无法继续切换)

7.2停顿时间

可以设置自动切换的时间(注意上面的单位是毫秒ms,这里的单位是秒s)

8.叠加搜索组件

图片[16]-顶部多功能组件-子比主题帮助
图片[17]-顶部多功能组件-子比主题帮助

PC端显示与移动端显示:可以单独选择设置是否在PC端以及移动端显示,勾选那个就在相应的终端上显示,全勾选为都显示,两个都不勾选则为关闭顶部叠加搜索组件

8.1热门搜索

开启后可以在叠加搜索组件的下方显示网站搜索的热门关键词

下方可以选择搜索词的最多数量(可以少于这个数字,但是显示的关键词不会多余这个数字,这里设置的是关键词上限)

8.2热门搜索

可以设置是否允许用户选择搜索分类

  • 默认分类:选择文章的分类,可以在有多个文章分类的站点分类下选择搜索的分类,帮助用户更精准的搜索到自己想要的东西(默认分类则为用户没有选择下搜索的分类)
  • 允许用户选择更多分类:只添加了默认分类,用户只能选择在默认分类中搜索,这里才能设置显示在前台下运行用户搜索的分类(这里设置主要是可以排除像是网站公告,站务版等分类可以不在搜索分类中显示)

8.3显示类型选择

显示切换搜索类型的按钮(文章,用户,版块,帖子)

这里区别一下,上方的8.1热门搜索,是选择文章分类搜索设置,这里是选择类型(文章,用户,版块,帖子)

8.4默认搜索类型

这里的设置和8.3显示类型选择有联系,但注意,这两个设置项并不冲突,上方是可以允许用户选择类型,这里是直接设置默认的搜索类型

图片[18]-顶部多功能组件-子比主题帮助

例如,普通网站可以选择默认文章

论坛类网站可以选择默认搜索帖子

子比主题强大的自定义性,只为能让您创造出更完美,精细,快速,便捷的网站,为您提供更高自由度的设置!

8.5额外内容

图片[19]-顶部多功能组件-子比主题帮助

这里可以设置在搜索组件上下方的文字

这里支持html代码(可以找GPT写),但同样的,请一定注意代码规范以及闭合!!!

同时,也需要关注代码高度

9.叠加封面卡片组件

图片[20]-顶部多功能组件-子比主题帮助
图片[21]-顶部多功能组件-子比主题帮助

首先,PC端显示/ 移动端显示在前面说过设置逻辑,这里不再赘述

这里的设置项主要为设置在背景下方叠加显示的图标卡片组件,如上图二所示

PC端显示与移动端显示:可以单独选择设置是否在PC端以及移动端显示,勾选那个就在相应的终端上显示,全勾选为都显示,两个都不勾选则为关闭顶部叠加搜索组件

9.1模块背景

整个模块显示背景,关闭后每个卡片都显示背景

具体的区别这里用图片来展示,美观设置项,不过多阐述,按照审美喜好设置即可

图片[22]-顶部多功能组件-子比主题帮助

9.2方形图标

图标显示为正方形,而不是圆形

美观设置

以图片展示来看吧,如下图

图片[23]-顶部多功能组件-子比主题帮助

9.2添加卡片

图片[24]-顶部多功能组件-子比主题帮助

这里就可以设置卡片的图片的内容了!

9.2.1选择图标

首先,选择图标,子比主题自带Font Awesome-v4的图标库

图片[25]-顶部多功能组件-子比主题帮助

您可以自由的选用

主题还内置了75个SVG图标,其中还有27个彩色SVG图标,可以做出更好看的网站叠加封面卡片!

图片[26]-顶部多功能组件-子比主题帮助

9.2.2自定义图标

当然,这里大于700+图标是不够用的,这里附上拓展教程(这里直接放原链接了,原文我在前面的教程集合文件夹也有)

Wordpress全站使用阿里巴巴Iconfont图标详细图文教程-Zibll子比主题

下方的自定义图标就可以插入自己想要的图标,具体教程参考上面的进阶教程!

9.2.2.1图标颜色

这里可以设置上方图标以及自定义图标的背景颜色(是的,对两个都适用)

有纯色,也有渐变色,可以根据前景色自主搭配

9.3跳转链接

这里的逻辑和幻灯片等元素的自动跳转链接是一样的

点击这个图标卡片即可跳转到指定的链接(可以是内部链接也可以是外部链接)

图片[27]-顶部多功能组件-子比主题帮助

和wp的添加链接是一样的

(使用实例解释:例如我这里几个卡片分别指向了我网站的几个分类a,b,c。我在添加相应的链接后,同时设置了连接文字(链接文字和卡片文案标题不是一个东西!,在上面显示的事文案标题,可以看下面)这样点击卡片后就可以跳转到对应的链接了)

9.4文案标题与文案简介

图片[28]-顶部多功能组件-子比主题帮助

第一行文案,字体稍大一点,在3-6个字之间最好

第二行建议在4-8个字之间为宜

10.组件高斯模糊特效

图片[29]-顶部多功能组件-子比主题帮助

PC端显示与移动端显示:可以单独选择设置是否在PC端以及移动端显示,勾选那个就在相应的终端上显示,全勾选为都显示,两个都不勾选则为关闭顶部叠加搜索组件

搜索组件和卡片组件背景显示高斯模糊特效(高斯模糊特效比较占用浏览器性能,部分性能较低的设备可能会不流畅)

© 版权声明
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容