顶部多功能组件:页面顶部全屏幻灯片、视频、搜索栏等功能配置教程

zibll子比使用模块化布局，可以很方便创建出UI精美、内容丰富的页面，配合zibll子比主题的顶部多功能模块，可以让页面实现更加大气、美观的效果。

顶部多功能组件是集成了幻灯片、视频背景、搜索栏、图标卡片为一体的多功能组件，放置在页面顶部，全宽度显示。功能十分强大，通过配合可以轻松实现各种现代化页面的首页效果。

截图演示

因为此模块，功能十分强大，所能实现的样式也十分丰富，所以我们简单的做几个示例。

第一个就是我们官网演示站的首页，使用了视频背景+搜索栏+图标卡片【点击查看效果】

然后我们官网演示站的商城首页也使用了此模块，仅添加了一个视频，移动端为幻灯片【点击查看演示】

功能简介

此功能主要通过3个模块组合，来实现各种不同的效果，包括幻灯片、搜索组件、图标卡片组件。

这其中的幻灯片组件是功能最强大的，不仅支持图片切换、还支持配置视频背景，叠加图层，叠加自定义HTMl，自定义切换动画等等。幻灯片的配置方式以及幻灯片的更多应用方式可以查看以下教程：

配置教程

首先我们进入主题配置->页面显示->顶部多功能组件

在此处我们可以选择在哪些页面开启此功能，开启后就在下面添加图片幻灯片、或者视频背景。

那么这里，我们首先需要添加幻灯片内容，幻灯片内容主要包括图片背景、视频背景、叠加内容、点击跳转链接等，我们根据自己的需求添加。

需要注意的是，视频背景仅支持在PC端显示，所以我们如果需要在移动端也显示的话，请注意要添加图片。

单个幻灯片都是支持自定义是都在PC端、移动端显示的，也支持设置叠加内容，这个一定要根据自己的需求合理配置

接着我们按照需要开启并配置搜索组件和图标卡片组件
组件均支持多项自定义功能配置，同时都支持单独设置是否在在PC端、移动端显示，根据需要合理配置

最后，就是最核心的配置了，就是组件背景显示配置，主要包含显示高度，幻灯片切换动画等，这里特别要注意的就是高度配置，一定要根据自己设置的背景尺寸、开启的功能来合理配置PC端高度和移动端高度。如果高度配置不合理，就可能会出现由于显示不下挤成一坨的样子，十分难看。

同时，也要根据自己配置的幻灯片背景数量，合理的配置切换动画、切换时间等功能，我们强烈建议配置好之后，一定要在PC端和手机端都预览一下，确保显示效果，有不合适的地方及时调整。

在自定义页面开启

看了上面的教程，想必大家都已经在自己首页测试体验过了，那么疑问来了，除了主题配置中的首页、文章页、分类页等页面可以开启此功能，那么可不可以在自己新建的页面也开启此功能呢？

答案当然是可以的，zibll主题V8.2新增了页面显示顶部多功能组件的功能。我们官方演示站的商城首页就是新建了一个空白页面，开启了此功能，同时通过模块化组件，实现了一个空白页面做好的商城首页效果。
商城首页的配置教程及示例可以查看以下教程：

配置教程很简单，在我新建的页面编辑的最底部，就可以选择开启此功能，然后配置方式和上面就一模一样了

教程最后，我们建议新手朋友一定要看一下我们zibll主题的布局教程，通过模块化组件像拼积木一样自由组合布局，既简单又高度自由化！