BricksBuilder编辑器入门介绍和基础操作教程

本篇文章介绍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);}