使用模块化配置实现多种网站布局-布局教程、模块使用及可视化配置详解

建设一个wordpress网站,网站的布局肯定是最重要的。美观漂亮且易于阅读又能突出网站重点的布局设计更容易吸引力用户浏览网站。对于站长来说,网站布局也是最让人头疼的一件事儿了。zibll子比主题为了解决这个问题,采用模块化配置,将页面分为多种容器,再将不同的内容做成不同的模块,站长可自由的将任意模块放置到任意位置容器中,从而实现高度自由化,轻松的实现多种布局样式!

熟悉布局概念

首先我们了解,什么是布局容器?
我们将一个空白的页面,分为多个不同位置的方块,每一个方块里面都可以放置任意的模块,同时这些方块可以自由的删除、清空,方块里面的内容也就是模块也可以随意的添加、删除、更换、排序。那么我们就把这样可以放置模块的方块叫为容器。

如果你还不明白,那么看一下这一样图,子比主题是如何设计布局容器的。

图片[1]-wordpress网站使用zibll子比主题实现模块化布局、多种布局方案详解

通过上面的图片可以看出来,一个页面的固定内容有:顶部导航、页面主内容、底部页面。那么除此之外,其它位置都是可放置模块的容器,换句话说就是默认是没有内容的,只有你在容器内添加了模块那么该容器位置才会显示内容!

了解了布局容器之后,还有一个重要的布局要素也是:页面区分。
为了实现在不同类型的页面能组合不同的布局内容,比如我们需要在首页的顶部全宽度显示一个幻灯片模块,但是其它类型页面不显示。那么子比主题在设计容器的时候,每一个不同类型的页面都有该页面类型单独的容器:
例如:顶部全宽度容器,那么对应的就有:
首页-顶部全宽度、文章页-顶部全宽度、分类页顶部全宽度、用户页-顶部全宽度、搜索页顶部全宽度、其它页面-顶部全宽度

另外请注意,所有页面的侧边栏都是可以单独开启或者关闭的,那么如果在没有开启侧边栏页面中,全宽度容器和主内容容器其实是一样的效果!如图所示:

图片[2]-wordpress网站使用zibll子比主题实现模块化布局、多种布局方案详解

最后,出了上图之外的容器,还有没有其它位置的容器呢?
答案是有的!除了页面主要位置之外,子比主题还设计了一个在移动端弹出菜单内的容器,方便将模块添加到此处。

图片[3]-wordpress网站使用zibll子比主题实现模块化布局、多种布局方案详解

开始配置

熟悉了模块容器之后我们开始配置布局,整个布局配置流程大概分为:
1.必要的主题设置 2.页面的布局设置 3.添加模块

必要的设置

我们按照从页面的顶部到底部的流程进行设置,首先我们来设置顶部导航栏的样式。

顶部导航栏分为PC端样式和移动端样式,设置的方法都在主题设置-页面显示-顶部导航
具体方法请查看以下文章:

接下来就是最主要的侧边栏设置,针对不同页面选择是否开启侧边栏,以及设置侧边栏靠左还是靠右

进入主题设置-全局&功能-页面&显示

图片[4]-wordpress网站使用zibll子比主题实现模块化布局、多种布局方案详解

同时每一篇文章、页面都可以单独的设置侧边栏功能。编辑文章或页面时候, 在右下角的扩展功能处进行设置

图片[5]-wordpress网站使用zibll子比主题实现模块化布局、多种布局方案详解

最后我们设置页面底部

进入主题设置-页面显示-底部页脚

图片[6]-wordpress网站使用zibll子比主题实现模块化布局、多种布局方案详解

添加模块

一些必要的设置完成之后,我们就可以开始添加模块了。在上面的内容中,我们了解了不同页面的各个位置为容器,那么接下来我们需要把模块添加到对应的容器中,实现我们想要的布局效果。

添加模块支持可视化配置的,每一次修改都可以实时预览,自己每一次的添加、修改都一目了然,推荐刚刚接触模块配置的新用户使用!
进入方式:1.前台管理员登录后,点击模块配置 2.wp后台-外观-小工具-使用实时预览管理

对于已经很熟悉容器位置的老用来说,可以直接在wp后台-外观-小工具处进行配置,可以更加快速的添加、修改模块,同时加载速度更快

注意:使用实时预览管理,不会显示全部位置容器,只会显示当前页面存在的容器,进入之后默认是在首页,那么只会显示在首页的容器,如果你想在文章页面添加模块,需要先在右侧页面点击进入任意文章页。

模块明细

进入模块配置之后,就可以选择添加模块了。在这里你就可以看到十分丰富的模块了,将不同的模块添加到需要的位置,同时支持拖动排序。目前子比主题支持以下模块,同时还在不断的更新中!

空白页面添加模块

上面说到,主题设定了首页、文章页、分类页等页面的容器,那我们如果需要新建一个空白页面,然后再给这个页面添加模块,该如何操作呢?

1.新建页面,有右侧底部开启布局容器,并选择需要的容器位置

图片[9]-wordpress网站使用zibll子比主题实现模块化布局、多种布局方案详解

2.保存后就可以看到对应的容器了,使用模块配置添加需要的模块即可!

图片[10]-wordpress网站使用zibll子比主题实现模块化布局、多种布局方案详解

使用此功能配合子比主题丰富的模块,可以创建出各种各样的页面,甚至你还可以单独创建一个页面,添加需要的模块,再把此页面设置为首页【查看教程】,这是一个自由度超高的功能,能实现哪些优秀的效果,就需要丰富的想象力了!

更多配置技巧

V8.0更新了一个强大的功能,那就是每一个模块都可以根据内容ID来隐藏或显示,比如我们想要把一个‘图片广告’模块只添加到文章‘A’这个页面中,或者我们要把一个‘重要通知的帖子’模块添加到侧边栏,但是需要在‘a/b/c’这是几个帖子页面不显示,这时候就可以用此功能即可实现。同时此功能让子比主题的模块化配置再次变得更加灵活、自由!【查看截图】

根据上面的教程,我们配置了整体页面的布局,为了更好的效果,我们还需要配置一些其他设置。

如果需要调整文章列表的显示效果,请查看以下文章:

最后提醒一下:使用模块配置,可以将任意模块添加到任意位置的容器。但是!并不是所有模块都适合添加到任意位置!请根据实际效果合理调整!

© 版权声明
THE END
文章不错?点个赞呗
点赞87赞赏 分享
评论 共14条

请登录后发表评论

        • 老糖的头像-WordPress主题模板-zibll子比主题代理会员老糖徽章-备受瞩目-WordPress主题模板-zibll子比主题等级-LV8-WordPress主题模板-zibll子比主题作者1