brickswiki.com

首页 / 中文教程 / 教程

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

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

Ray Chan·2026-08-12·约 4 分钟

最后更新：2024 年 6 月 19 日

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

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

以下微调均在 Bricks 1.5 的深色（默认）编辑器主题下测试。

目录

  • 让结构面板中活动元素的选中高亮更醒目
  • 结构面板头部吸顶（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;
}

修改前

修改后

论坛讨论帖。

结论

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

需要帮忙？

用 Bricks 建站？我接客户项目。

从快速营销站到完整的 Bricks 建站，再到从 Elementor 迁移——我都做过。本站每篇教程都来自真实项目经验。告诉我你的需求，一个工作日内回复。

  • ✓Bricks 建站与改版
  • ✓Elementor / Divi → Bricks 迁移
  • ✓Bricks → Astro / headless 性能升级
  • ✓速度优化，PageSpeed 95+ 目标

相关教程

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

阅读全文 →

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

阅读全文 →

Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据

阅读全文 →