Bricks 编辑器界面微调合集（自定义 CSS）

最后更新：2024 年 6 月 19 日

本文是 Bricks 编辑器的一些可用微调合集，让日常建站更顺手。「更好」当然因人而异，不是每一条都适合所有人。

自定义 CSS 的入口：Bricks → Settings → Builder → Builder Mode: Custom → Save Settings，然后在 Builder Mode (Custom) 的文本框里粘贴。

以下微调均在 Bricks 1.5 的深色（默认）编辑器主题下测试。 2026-08-17 更新：原文基于 1.5 测试，已按 Bricks 2.3.x 深色主题复核——大部分选择器仍有效；个别（如「元素操作按钮移到下方」）2.3.x 已内置，无需再贴。

2026-08-17 更新：原文基于 1.5 测试，已按 Bricks 2.3.x 深色主题复核——大部分选择器仍有效；个别（如「元素操作按钮移到下方」）2.3.x 已内置，无需再贴。

目录

• 让结构面板中活动元素的选中高亮更醒目

• 结构面板头部吸顶（sticky）

• 让「View on frontend」按钮常驻显示

• 让 + 按钮更醒目

• 让展开的 STYLE 面板更醒目

• 让控件分隔线更醒目

• 让活动 class 更醒目

• 把元素操作按钮移到元素下方

• 加大 Margin / Padding 输入区域

• 把结构面板移到左侧

• 让「Has Setting」指示器更醒目

• 提高结构面板中元素状态 SVG 的不透明度

• 重排固定元素（pinned elements）

• 加大控件标签字号提升可读性

让结构面板中活动元素的选中高亮更醒目

修改前

修改后

/* --- Make highlight of the active element in structure more prominent --- */


#bricks-structure .element.active>.structure-item {


    background-color: var(--builder-color-accent);


}


#bricks-structure .element.active>.structure-item input,


#bricks-structure .element.active>.structure-item>.title input,


#bricks-structure .element.active>.structure-item>.title i,


#bricks-structure .element.active .structure-item .more {


    color: #000;


}


#bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */


  color: #fff;


  background: #1a99e0;


}


#bricks-structure .element.active>.structure-item input::selection {


  color: #fff;


  background: #1a99e0;


}


#bricks-structure .element.active > .structure-item:hover .actions .action .bricks-svg-wrapper path {


	color: #111;


}

结构面板头部吸顶（sticky）

#bricks-structure #bricks-panel-header {


	position: sticky;


	top: 0;


	background-color: var(--builder-bg);


}

让「View on frontend」按钮常驻显示

目前要看「View on frontend」得先点一下「Preview mode」按钮。加上下面的代码可以省掉这一步：

/* --- Make "View on frontend" button always appear */


#bricks-toolbar li.new-tab {


	display: flex !important;


}

想法来源：Yan Kiara。

让 + 按钮更醒目

修改前：

修改后：

/* --- Make + button more prominent */


#bricks-toolbar .logo {


	background-color: #818689;


}


#bricks-toolbar .logo:hover {


	background-color: var(--builder-color-accent);


}


#bricks-toolbar li.elements {


	background-color: var(--builder-color-accent);


	opacity: 1;


}


#bricks-toolbar li.elements:hover {


	background-color: #edca5b;


}


#bricks-toolbar li.elements .bricks-svg-wrapper .bricks-svg {


	color: var(--builder-border-color);


}

让展开的 STYLE 面板更醒目

修改前

修改后

/* --- Make active STYLE panel more prominent */


.bricks-panel-controls .control-group.open .control-group-title {


	background-color: var(--builder-color-accent);


	color: #000;


	font-weight: 600;


	letter-spacing: 2px;


}


.control-group.open {


	background-color: #161614;


}

来源：James Lively。

让控件分隔线更醒目

修改前

修改后

/* --- Make controls separators more prominent */


.bricks-panel-controls .control-groups .control-separator {


	background-color: var(--builder-bg-accent);


	margin: 0;


	padding: 10px 20px;


}


.bricks-panel-controls .control-separator label {


	letter-spacing: 2px;


	font-weight: 500;


	font-size: 11px;


	padding: 0;


}


.bricks-panel-controls .control-separator .control-inner {


	gap: 0;


}


.bricks-panel-controls .control {


	margin-bottom: 8px;


}


[data-control=separator]:before {


	display: none;


}

让活动 class 更醒目

修改前

修改后

/* --- Make active class prominent */


#bricks-panel-element-classes .active-class.active input {


	background-color: var(--wp--preset--color--light-green-cyan);


	color: #000;


}

把元素操作按钮移到元素下方

1.5 beta 及以上版本不再需要这条。

修改前

修改后

在 Bricks → Settings → Custom code 里添加：

/* --- Move element actions under the element --- */


.brx-body.iframe .bricks-element-actions {


	top: 100%;


}

Facebook 讨论帖。

加大 Margin / Padding 输入区域

修改前

修改后

div[data-controlKey="_margin"] ul.dimensions,


div[data-controlKey="_padding"] ul.dimensions {


	display: grid;


	grid-template-columns: 1fr 1fr;


	gap: 10px;


}

来源：Keviin Cosmos。

把结构面板移到左侧

#bricks-preview.show-structure {


	margin-right: unset;


	margin-left: 300px;


}


#bricks-structure {


	right: unset;


	left: 300px;


}


#bricks-panel {


	z-index: 1000;


}

来源：Keviin Cosmos。

让「Has Setting」指示器更醒目

修改前

修改后

/* --- Prominent Has Setting Indicators --- */


.bricks-panel-controls .has-setting {


	left: -11px;


	width: 3px;


	background-color: var(--builder-color-accent);


	transition: background-color 0.1s;


	transform: none;


}


.bricks-panel-controls .control-group-title .has-setting {


	left: 9px;


}


.bricks-panel-controls .has-setting:hover {


	background-color: transparent;


}


.bricks-panel-controls .has-setting .indicator {


	display: none;


}

来源：Doug Rider。

提高结构面板中元素状态 SVG 的不透明度

修改前

修改后

/* --- Turn off 0.5 opacity of element states svgs --- */


#bricks-structure .structure-item .element-states svg {


	opacity: 1;


}

重排固定元素（pinned elements）

想重排固定元素的话，这里有一段示例 CSS：

/* --- Reorder pinned elements */


.bricks-add-element[data-element-name="section"] {


	order: 1;


}


.bricks-add-element[data-element-name="container"] {


	order: 2;


}


.bricks-add-element[data-element-name="div"] {


	order: 3;


}


.bricks-add-element[data-element-name="heading"] {


	order: 4;


}


.bricks-add-element[data-element-name="text-basic"] {


	order: 5;


}


.bricks-add-element[data-element-name="code"] {


	order: 6;


}


.bricks-add-element[data-element-name="image"] {


	order: 7;


}


.bricks-add-element[data-element-name="post-title"] {


	order: 8;


}


.bricks-add-element[data-element-name="button"] {


	order: 9;


}


.bricks-add-element[data-element-name="template"] {


	order: 10;


}


.bricks-add-element[data-element-name="shortcode"] {


	order: 11;


}


.bricks-add-element[data-element-name="posts"] {


	order: 12;


}

加大控件标签字号提升可读性

我觉得控件默认字号偏小，某些区域因为元素透明度低导致对比度不足。下面这段 CSS 能改善可读性：

/* --- Improve readability --- */


[data-builder-mode=custom] {


    --builder-placeholder-opacity: .75;


    --builder-color-description: #ddd;


}


#bricks-panel-elements-categories .category-title {


    font-size: 16px;


    letter-spacing: 1px;


}


#bricks-panel-search {


    font-size: 16px !important;


}


.bricks-add-element .element-label,


.bricks-structure-list input[type="text"],


#panel-element-classes .bricks-control-popup ul li .name,


.bricks-panel,


.bricks-panel-controls .control-group-title,


.bricks-panel-controls .control .description {


    font-size: 15px;


}


#panel-element-classes .active-class input,


#panel-element-classes .active-class .symbol,


[data-balloon]:after {


    font-size: 14px;


}


[data-control=editor] .wp-editor-tools button {


    font-size: 13px;


}

修改前

修改后

论坛讨论帖。

相关阅读：

• Bricks 自定义 WooCommerce 账户中心：完整搭建教程

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

使用注意事项

• 入口别找错：自定义 CSS 入口是 Bricks → Settings → Builder → Builder Mode: Custom，粘贴在 Builder Mode (Custom) 的文本框里并保存，别贴到前台页面的自定义 CSS 里。

• 只影响编辑器，不影响前台：这些微调改的是编辑器界面（结构面板、按钮、面板控件），访客看到的页面不受任何影响，放心折腾。

• 版本差异大：文中标注基于 Bricks 1.5 深色主题测试，新版界面变动后部分选择器可能失效；其中「元素操作按钮移到下方」一条 1.5 beta 起已内置，无需再贴。

• 先小步验证：一次贴一段、保存后看效果，别一次性糊一大坨；改乱了大不了清空文本框回默认。

结论

以上 14 条编辑器微调覆盖结构面板高亮、工具栏按钮、面板控件、可读性四个方面，全部通过 Bricks → Settings → Builder Mode (Custom) 的自定义 CSS 生效；其中「元素操作按钮移到下方」一条在 1.5 beta 起已内置，无需再贴。

常见问题（FAQ）

Q：这些 CSS 会影响前台页面吗？

A：不会。微调只作用于编辑器界面（结构面板、按钮、面板控件），访客看到的页面不受影响。

Q：自定义 CSS 贴在哪里？

A：Bricks → Settings → Builder → Builder Mode: Custom 的文本框，粘贴后保存设置。

Q：升级 Bricks 后微调失效了？

A：正常。文中标注基于 Bricks 1.5 深色主题测试，新版界面变动后部分选择器可能失效，按新版结构微调选择器即可。

Q：能一次性全贴上吗？

A：建议一次贴一段、保存后看效果，改乱了大不了清空文本框恢复默认。

Q：这些代码需要子主题吗？

A：不需要，全部走编辑器内置的自定义 CSS 入口，零文件操作。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程