Bricks Builder 基础布局介绍

这次我们来说一说用Bricks Builder建站需要知道的基本布局知识。

我们在不使用任何布局的情况下，直接摆放widget元素，我们会发现每个元素是通过上下垂直的方式摆放的。为什么？因为所有在画布里的元素其实都是在 HTML MAIN 里面的，它的默认设置就是 flex-direction: column，这个是砖块构建器自带的。

我们可以通过F12检测看一下，在HTML层面，确实有个 main id，我们全部放的内容也都在 main 名下。那么，什么是 main 标签？ 其实你不需要很详细的知道，你把它简单的认为是网站内容标签，全部的内容（body）都在main里面就可以了。其他的 HTML 标签，我们下面说。

再次强调，Main Html 我们是编辑不了的，只能通过CSS代码，不过每次编辑都要用代码的话，那还用什么页面构建器嘛。所有这里就会用到 layout 布局，这样我们就可以随意操作main里面的元素。

Bricks Builder一共提供4种布局，你在上面的图片就能看到。它们本质上没有区别，都是一样的，稍微特别点的就是模块和容器：

• 容器：其他三个都是全宽100%，而容器container不是，它的默认宽度是1100px。
• 模块：它是有属于自己的 section html 标签的，而且它还会自带一个容器container。

上面说的这些都是Bricks的默认设置，你全部都可以在主题风格里面改。

由于它们本质上都是一样的，所以设置上也都是一样的。

一开始的“使用查询循环”是 Query Loop，这里就不说了，跳过。

这个设置其他对用户来说毛用没有，它主要是让搜索引擎们清楚知道我们的网站结构，内容设置不会有什么变化。

• div：最常见的标签，不知道选什么用它就是了
• section：模块标签，用来区分网站上不同的区域
• a（link）：添加链接
• article：通常用于博客的内容
• nav：用于提供导航链接的元素，像目录，菜单，面包屑…
• ol：带编号的列表
• ul：项目符号列表
• li：就是你现在看到的这个，列表里的条目
• aside：和页面内容无关的内容，通常用在侧边栏
• address：某个人或某个组织的联系信息
• figure：代表一段独立的内容

以上是Bricks Builder自带可以选择的 html 结构标签，不过你可以自定义它，html标签有一堆，你可以在这里详细看看。