本篇文章介绍BricksBuilder编辑器的基本使用、如何创建Bricks模板、如何设定显示条件等内容。
补充：好多读者反应英文界面操作起来不熟悉，很多页面元素找不到，更习惯使用中文界面，所以，从本篇教程起Bricks主题教程内容的截图一律改成中文界面截图，同时重要的需要着重记忆的界面以及术语我会再使用英文再强调下。另外，还是建议掌握一些基础的英文专业术语，方便以后出现其他更优秀的编辑器将能够更容易无缝切换。
下面正式开始本篇教程的学习。
BricksBuilder创建模板
打开WordPress后台 -> Bricks -> 模板 -> 新建 -> 输入标题（英文）-> 右侧选择模板类型 -> 发布 -> 用Bricks编辑
模板标题第一次填写的时候尽量选择英文，因为首次填写的标题会自动成为该模板的Slug，当然也可以后期自行修改。
Bricks支持8种类型的模板，分别为：页眉（header）、页脚（footer）、单页（single）、模块（section）、弹窗（popup）、汇总页（archive）、搜索结果（Search Results）、404错误页面（Error Page）等。
建议仅练习使用的话可以选择“单页”类型，对应WordPress的页面。
Bricks编辑器界面介绍
Bricks编辑器的样式对比度不算高，看起来优点费眼睛，在上一篇教程中讲过一些Bricks主题的初步设置，其中Builder设置中可以修改编辑器的样式，将模式改为“Custom”，并输入CSS代码保存即可修改，样式如下图所示（相关样式代码我会放在本文最后）：
界面跟Betheme主题编辑器和Elementor差不多，操作也基本一致，整个编辑器可以分成四大部分：
- 元素区：显示所有已经预设好的排版工具以及功能模块，开箱即用，需要用到什么元素将其拖拽至画布中即可，所有的页面均可像搭配积木一样设计。
- 画布区：实时可视化显示，对元素的任何细节修改均可在画布中看到。
- 结构区：显示元素的层级，方便调整。
- 工具栏：显示一些常用的功能，如：返回WordPress面板、设置元素伪类、样式管理、导入模板等等，里面的各项功能我会随着教程的深入慢慢讲。
Bricks布局元素介绍（排版）
Bricks编辑器中所有的元素均需要放入至排版元素中，Bricks有四大排版元素，可以非常快速的对整个页面分组、布局：
- 模块（Section）：用于划分整个页面，每个部分可以有不同的设计主题；此类型所站页面宽度为100%全宽，可以使用容器或区块元素进行精细排版。
- 容器（Container）：用于对模块划分，也可单独使用，所占页面宽度为1100px，可自定义。
- 区块（Block）：用于对容器划分，可单独使用，所占页面宽度为100%全宽，但是，容器和区块嵌套使用的话，区块宽度受制于容器宽度。
- Div：没有任何预设样式的布局元素，都需要自己设置一些参数。
这四种类型的布局元素，默认布局方式为FlexBox（建议学习基本的前端布局知识，能帮助你更好的理解），若是完全没有代码基础的话，我建议只使用前三种排版元素，开箱即用，不需要对每个元素配置常用参数。
Bricks基础操作
添加元素
我们可以手动将元素拖拽至画布中，也可拖拽至右侧层级结构区，这两部分都会显示。
比如：我已经向画布中添加了标题（Heading）、富文本（）、图像、按钮等元素，且都包含在同一个容器中，该容器位于顶部的模块中，整个层级关系在右侧结构区中展示了出来。
结构区中的所有元素都可以通过拖拽的方式改变元素层级，类似于PS软件的图层功能。
同时，鼠标指针悬浮至某一元素时可以显示元素的快捷操作：复制、删除等（若不显示，需要在Bricks主题设置中开启，详情见《Bricks主题后台初步设置及其基本介绍》中结构面板部分）。
选中该元素鼠标右键单击可展示针对该元素的快捷菜单操作，菜单中共有两个复制按钮，第一个为复制该元素的样式代码，使用“ctrl+v”，可以将其粘贴到任何Bricks编辑器的页面中；第二个为复制该元素到当前编辑器中，两者的区别讲起来不如自己实际操作一遍可以体会其区别。
将鼠标指针选中布局元素，如：容器，在画布中可以看见该容器下方出现4个操作按钮，从左至右依次为：添加布局元素、布局元素（区块）、调整元素宽度、调整元素高度。
默认添加布局元素为区块，鼠标悬浮至添加图标后可以自行选择添加布局元素的种类，区块默认添加至选中元素的下一个层级（即该层级之内，建议自己实际操作一遍体会）。
元素参数设置
元素区中除了排版布局中的模块、区块，其他页面元素，如：标题、富文本、图像等等，均为不可再次拆分的最小元素。
点击一个元素，编辑器左侧即显示该元素所支持的参数修改，所有元素可修改的参数已经分成了2个选项卡分类，“内容（content）”和“样式（style）”，我们可以根据需求对每一个元素进行精细化设置，下面以标题“标题”元素为例，进行说明：
内容参数设置
选中标题元素后，左侧即可显示可修改的参数，在内容选项卡界面可以修改标题显示文字、html标签、类型、样式、链接类型、分离式等等
其中，html标签主要设置该标题的H-tag，这是SEO内容优化中及其重要的排名要素之一，能帮助搜索引擎蜘蛛更清楚的了解页面主题及内容结构，通常一个页面有且仅有一个H1标签来点出页面的中心主题，所以我更倾向常使用H2～H4标签，并根据关键词及页面中的内容适当选择。这部分内容建议移步至谷歌SEO优化教程中学习（教程内容还未完善，不过已有几篇关键词分析的内容，博主努力肝中，精力有限，还请谅解…）。
内容中也会有样式设置，不过这里的样式设置非常简单，大多是Bricks主题的一些预设，更详细的设置可以通过第2个选项卡分类设置。
链接类型可自由选择，支持内部链接、自定义外部链接、灯箱图片和视频、媒体、动态数据等等，选定完链接类型后，可以出现该链接的详细设置，如：属性: rel、属性: aria-label、属性: title以及是否启用新标签页打开等，（这里我就不一一介绍了，建议学习一些基础html知识，有些链接属性可以保持默认不填写）。
样式参数设置
样式选项卡中的参数都是相同的，共分为8个部分：布局、排版、背景、边框/盒影、渐变/覆盖、转换、CSS、属性，下面我详细介绍一些使用频率比较高的参数的设置。
布局
布局可以根据需求随意更改元素的内边距和外边距，单位为px，默认不显示，比如：在外边距中输入100则，则代表此元素的外边距为100px；当然也支持rem、vh、vw等，需要手动输入单位才能生效；同时，Bricks也支持使用var()、clamp()等计算格式。
单位之间的换算以及函数计算格式如何使用，建议自己查询前端知识，我这里就不过多介绍了。
三个按钮功能
外边距和内边距旁边有两个按钮，第一个为切换输入参数的样式，第二个为切换参数联系方式，比如，我切换至“各个方面都有联系”，当我随意在输入框中输入参数时（上边距），其他方向的参数会自动填充。
第三个按钮是输入全局参数，需要自定义，功能上与var()、clamp()等计算格式差不多，不过这次是可视化形式表现的。
排版
这里主要针对元素中的文字内容做参数调整，可自定义文字颜色、大小、对齐方式、字体样式、字重（文字粗细）、间距、阴影、装饰等等。
背景
可修改元素的背景样式，支持纯色、渐变、图片、GIF动图等。
边框/盒影
可修改元素边框宽度、颜色、阴影、边框角度等等
覆盖/渐变
用于设置覆盖在元素上层的样式，可适用于设定背景、文字、颜色显示类型（线性、圆锥型），支持两种及以上颜色的渐变。
转换
用于设置元素的位置变化，比如：以元素中心点旋转15度，需要在“旋转（Z）”中设置参数为15。这个功能可以配合伪类（:hover）以及Bricks显示条件设计出各式各样的动画效果。
CSS
可自定义一些全局或者非全局的CSS样式，增强元素的显示效果。CSS这块建议学习一些基础的前端知识，便于理解CSS代码，同时也可以配合WordPress插件无代码实现一些样式效果。
这里只简单举例说明，代码如下：
:root {
--primary-color: #ff5733; /* 全局可复用 */
--button-radius: 15px; /* 全局可复用 */
}以上声明了两个CSS自定义变量，一个颜色值（网站主色调），一个按钮半径值，我可以使用var()函数调用这些自定义变量。
我后期会出一篇关于CSS结合Bricks主题使用的教程。
属性
用于设置结构化数据参数，结构化数据可以增强页面在SERP中的显示效果。不过，我很少使用这个功能，过于麻烦了，一般下载一个WordPress插件可以为我解决这个问题。
提示：每当对参数进行过修改，就会在前面出现圆点，这样能够很快查找我们对哪些参数进行了自定义设置。将鼠标移动到圆点上会变为”x”，点击后我们对于该项的自定义设置都将会被清除，特别方便的小功能！
Bricks编辑器模板保存
当你设计完成一个模板后需要设置显示条件并保存，以下是操作步骤：
点击左上方Bricks模板设置（“小齿轮”按钮）-> 条件 -> 添加条件 -> 根据WordPress中添加的页面、文章分类目录、产品分类目录等选择 -> 保存。
打开对应页面即可看到设计并保存的页面模板样式，其中在创建新模板时的模块（section）、弹窗（popup）等等，因为应用场景不同，可以不用设置显示条件。
以上是一些关于Bricks主题编辑器的新建模板、元素设置、参数调整等基础操作，其实还有很多未提到的设置，这个就靠大家自行探索了，多操作几次后基本上能上手这款页面编辑器了。
代码：
:root{
--builder-border-radius: 4px;
--builder-box-shadow: 0 0 12px rgba(0,0,0,.4);
--builder-input-height: 32px;
--builder-popup-input-height: 40px;
--builder-element-action-size: 22px;
--builder-spacing: 20px;
--builder-placeholder-opacity: 0.8;
--builder-color-highlight: #1b98e0;
--builder-bg-unsigned: rgba(250,67,98,.2);
--builder-color-unsigned: #b60725;
--builder-color-success: #08693c;
--builder-gray-0: #010101;
--builder-gray-1: #121417;
--builder-gray-2: #23282d;
--builder-gray-3: #343c43;
--builder-gray-4: #454f59;
--builder-gray-5: #56636f;
--builder-gray-6: #687685;
--builder-gray-7: #7b8a99;
--builder-gray-8: #8694a1;
--builder-gray-9: #9da8b2;
--builder-gray-a: #a8b1bb;
--builder-gray-b: #bec5cc;
--builder-gray-c: #c9cfd5;
--builder-gray-d: #d4d9dd;
--builder-gray-e: #eaecef;
--builder-gray-f: #f5f6f7;
--builder-canvas-scrollbar-track: var(--builder-gray-e);
--builder-canvas-scrollbar-thumb: var(--builder-gray-c);
--builder-canvas-scrollbar-thumb_hover: var(--builder-gray-a);
--builder-bg: var(--builder-gray-0);
--builder-bg-2: var(--builder-gray-2);
--builder-bg-3: var(--builder-gray-3);
--builder-bg-accent: #E5F7FF;
--builder-color-accent: #0dbdfd;
--builder-color-accent-inverse: var(--builder-gray-3);
--builder-color: #ffffff;
--builder-color-description:var(--builder-gray-e);
--builder-border-color: var(--builder-gray-4);
--builder-color-knob: var(--builder-gray-8);
--text-size:14px;
--opacity:1;
--opacity-90:calc(var(--opacity) * .9);
--opacity-80:calc(var(--opacity) * .8);
--opacity-70:calc(var(--opacity) * .7);
--opacity-60:calc(var(--opacity) * .6);
--orange: #ff8c28;
--radius-s:0.7rem;
--builder-accent-dark:#025e82;
--builder-semi-dark:#007FAD;
--transition: all 200ms ease-in-out;
}
[data-control=editor] .mce-toolbar .mce-btn-group .mce-btn:active, [data-control=editor] .mce-toolbar .mce-btn-group .mce-btn:focus, [data-control=editor] .mce-toolbar .mce-btn-group .mce-btn:hover, [data-control=editor] .quicktags-toolbar .button:active, [data-control=editor] .quicktags-toolbar .button:focus, [data-control=editor] .quicktags-toolbar .button:hover{
color: var(--builder-gray-0) !important;
}
.bricks-panel {
color: var(--builder-color);
font-size: var(--text-size);
}
#bricks-panel-sticky{
z-index: 200!important;
}
.plstr-context-menu__section-wrapper {
color: var( --builder-color);
font-size: var(--text-size);
}
.bricks-panel .input,
.bricks-panel input,
.bricks-panel select,
.bricks-panel textarea {
font-size: var(--text-size);
}
.bricks-panel input::placeholder {
color: var(--builder-color) !important;
font-size: var(--text-size);
}
#bricks-structure .structure-item .title>.icon{
opacity: 1;
}
#bricks-structure .element.active>.structure-item>.title input{
color: var(--builder-color);
}
[data-control=select] li.hover, [data-control=select] li.selected, [data-control=select] li:hover {
color: var(--builder-gray-1);
}
#bricks-panel-header .actions li.highlight {
background-color: var(--builder-bg-accent-inverse) !important;
color: var(--builder-color-accent) !important;
}
/* Changes the size of the style applied indicator on breakpoints. */
#bricks-toolbar li.breakpoint.has-settings > span:after {
height: 3px;
width: 90%;
background-color: var(--orange);
opacity:var(--opacity-60);
transition: 300ms;
}
#bricks-toolbar li.has-settings:hover>span:after,#bricks-toolbar li.breakpoint.base>span:before{
background-color: var(--builder-color-highlight);
opacity:.8;
}
/* Update the tooltips */
[data-builder-mode="dark"] [data-balloon]::after {
background-color: var(--builder-bg-2);
color: var(--builder-color);
font-size: var(--text-size);
padding:.75em;
border: 2px solid var(--bg-brighter);
border-radius: var(--radius-s);
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
z-index: 2005;
}
[data-builder-mode="dark"] [data-balloon]::after {
background-color: var(--builder-bg-2);
color: var(--builder-color);
font-size: var(--text-size);
padding:.75em;
border: 2px solid var(--builder-color-accent);
border-radius: var(--radius-s);
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
z-index: 2005;
}
[data-builder-mode=dark]{
--bricks-tooltip-bg:var(--builder-color-accent)!important;
}
.control-visual svg,#bricks-structure .structure-item .element-states svg {
opacity: var(--opacity-80);
}
#bricks-panel-element-classes .active-class input{
font-size: var(--text-size);
}
#bricks-panel-element-classes .active-class input.placeholder{
opacity: var(--opacity-70);
}
#bricks-panel-tabs li.active {
background-color: var(--builder-accent-dark);
}
#bricks-panel-tabs li {
opacity: var(--opacity-90)!important;
}
#bricks-panel-tabs li:hover {
background-color: var(--builder-semi-dark);
}
#bricks-panel-view li .bricks-svg-wrapper{
opacity: var(--opacity-80)!important;
}
#bricks-panel-tabs {
gap: var(--builder-spacing);
}
#bricks-panel-elements-categories{
padding: var(--builder-spacing);
}
.bricks-panel-controls .control-group-title .arrow{
opacity: var(--opacity-90);
}
body[data-locked-classes="true"] #bricks-panel-element #bricks-panel-element-classes .element-classes li .name {
color: var(--white)!important;
opacity: 1;
font-weight: 600;
}
body[data-locked-classes="true"] #bricks-panel-element #bricks-panel-element-classes .element-classes li{
background-color: var(--builder-color-success)!important;
color: var(--white);
opacity: var(--opacity-90);
}
body[data-locked-classes="true"] #bricks-panel-element #bricks-panel-element-classes .element-classes li[data-locked="true"]{
background-color: var(--builder-color-unsigned)!important;
color: var(--white);
opacity: var(--opacity-90);
}
/* Category Title */
#bricks-panel-header .actions svg ,#bricks-panel-header .actions i,#bricks-panel-elements-categories .category-title .badge {
opacity: var(--opacity-80)!important;
}
#bricks-panel-elements-categories .category-title {
color: var(--builder-color);
opacity:var(--opacity-90);
border-radius: 0.5rem;
background-color: var(--builder-gray-2);
margin-bottom: 1em;
transition: var(--transition);
}
.bricks-add-element .element-label{
font-size: var(--text-size)!important;
}
#bricks-panel-elements-categories .category-title:hover {
background-color:var(--builder-accent-dark);
color: var(--builder-bg-accent);
}
#bricks-panel-elements-categories[data-col="1"] ul.sortable-wrapper li.bricks-add-element .element-icon {
opacity:var(--opacity-80)!important;
}
.bricks-add-element:hover{
background-color: var(--builder-gray-1);
}
#bricks-panel-elements-categories .category-title.expand:hover{
color: var(--builder-color)!important;
background-color: var(--builder-semi-dark);
}
#bricks-panel-elements-categories .category-title.expand {
background-color: var(--builder-semi-dark);
color: var(--builder-color);
}
bricks-panel-elements-categories .category-title .badge:focus, #bricks-panel-elements-categories .category-title .badge:hover{
color: var(--builder-bg-accent);
}
#bricks-panel-elements-categories .category-title {
z-index:auto!important;
}
#bricks-panel-element-classes .active-class.active input {
background-color: var(--builder-gray-f);
color: var(--builder-gray-0);
}
.control-visual .bricks-svg-wrapper.computed svg{
opacity: var(--opacity-60);
}
.control-visual .bricks-svg-wrapper.active svg, .control-visual .bricks-svg-wrapper:hover svg {
opacity: var(--opacity);
}
#brxcStructureHelper .brxc-overlay__pannel-col--left ul li.active,.mce-toolbar .mce-btn-group .mce-btn.mce-active, .mce-toolbar .mce-btn-group .mce-btn:active, .qt-dfw.active,.bricks-panel-controls .control-group-title .brxc-group-icon:hover, .bricks-panel-controls .control-group-title .brxc-group-icon.active, #brxcClassManagerOverlay .brxc-group-icon.active, #brxcGridUIOverlay .brxc-group-icon.active,#panel-pseudo-classes .input-wrapper .active-pseudo-class {
color: var(--builder-gray-0)!important;
}
[data-control=info]{
color:var(--builder-color);
background-color: rgba(0, 176, 244, .6);
}
#bricks-toolbar .save:hover {
background-color: var(--builder-bg-accent);
}
/* Changes the size of the style applied indicator on breakpoints. */
#bricks-toolbar li.breakpoint.has-settings > span:after {
height: 3px;
width: 90%;
background-color: var(--orange);
opacity:var(--opacity-60);
transition: 300ms;
}
/* Advance Themer */
body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper i, #bricks-structure[data-has-shortcuts-sidebar="true"] .brxce-panel-shortcut__wrapper i{
opacity: var(--opacity)!important;
}
body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper, #bricks-structure[data-has-shortcuts-sidebar="true"] .brxce-panel-shortcut__wrapper {
z-index: 202!important;
background-color:var(--builder-gray-1)!important;
}
.brxc-overlay__panel-inline-btns-wrapper input:checked+label, .brxc-overlay__panel-switcher-wrapper input:checked+label, .brxc-overlay__action-btn.outline.primary, .brxc-overlay__action-btn.outline.active,.brxc-overlay__resize-icons i.active {
border-color: var(--builder-color-highlight)!important;
color: var(--builder-color)!important;
}
#brxcClassConvertCanvas li input{
color: currentColor!important;
}
#brxcClassConvertCanvas li, #brxcClassBulkActionList li, .brxc-custom-components__preview-container li {
background-color: #000000!important;
}
.active i.fa-toggle-on{
fill:var(--builder-color-accent)!important;
}
.brxce-panel-shortcut__container li.has-settings:before {
border-left: 3px solid var(--builder-color-accent)!important;
opacity: var(--opacity)!important;
}
.element.active > .structure-item > .title .brxc-tag-btn-wrapper button.brxc-tag-btn {
color: var(--builder-gray-0)!important;
}
/* Update the has custom style settings indicator added by Advanced Themer */
#bricks-structure[data-indicators-color="colored"]
.panel-content
.bricks-draggable-item.element[data-has-styles="true"]
> .structure-item:before {
background: var( --builder-color-unsigned) !important;
opacity: 1 !important;
}
/* Update the has classes indicator added by Advanced Themer */
#bricks-structure
.panel-content
.bricks-draggable-item.element[data-has-classes="true"]
> .structure-item:after {
background: var(--builder-color-accent) !important;
opacity: 1 !important;
}
/* Update the AT Dynamic Data Popup */
.brxc-overlay__inner .brxc-overlay__header-title,
.brxc-overlay__inner2 .brxc-overlay__header-title,
#brxcDynamicDataCanvas > ul li,
#brxcDynamicDataCanvas > ul > div > span,
#brxcDynamicDataModalOverlay .brxc-overlay__action-btn {
color: var(--builder-color);
font-size: 18px !important;
opacity: 1 !important;
}
#brxcDynamicDataCanvas > ul li span {
font-size: 15px !important;
font-weight: 500;
}
#brxcDynamicDataModalOverlay .brxc-overlay__action-btn {
font-size: 15px !important;
font-weight: 500;
opacity: 1 !important;
}
.iso-search {
color: var(--builder-color);
font-size: 18px !important;
opacity: var(--opacity) !important;
border-radius: var(--radius-s) !important;
height: 50px;
}
.iso-search-icon {
opacity: 1 !important;
font-size: 16px !important;
}
.brxc-overlay__inner-wrapper > * {
background: black !important;
}
#brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector.active, #brxcPlainClassesOverlay #plainClassesMostUsedCanvas .brxc-overlay__action-btn.active, #brxcPlainClassesOverlay #plainClassesSearchResultsCanvas .brxc-overlay__action-btn.active, #brxcDynamicDataModalOverlay .brxc-overlay__action-btn.active {
color: var(--builder-gray-0)!important;
background-color: var(--builder-bg-accent);
}
#brxcDynamicDataCanvas > ul li:hover{
color: var(--builder-gray-0)!important;
}
#brxcCustomComponentsContainer{
display: flex;
flex-direction: column;;
}
/* 1.10 Beta settings search field*/
#bricks-panel-controls-search {
background-color: var(--builder-gray-3);
border-top: 1px solid var(--builder-gray-b);
}
#bricks-panel-controls-search input {
font-size:1.6rem;
line-height: 1.5;
padding: .5em 1em;
height: 50px; /* restoring original value overwritten by AT */
border-radius: 0;
}
#bricks-panel-controls-search.focus input {
color: white;
}
#bricks-panel-controls-search .bricks-svg-wrapper{
background-color: transparent;
}
#bricks-panel-element-breadcrumbs{
opacity: .9;
font-weight: 500;
}
#bricks-panel-element-breadcrumbs .is-active{
opacity: 1;
}
#bricks-toolbar .save .has-unsaved-changes:before {
width: 8px;
opacity: 1;
background-color: var(--orange);
}