HTML/CSS 转 Bricks：把现成代码直接粘贴成原生元素

在 Bricks 里复刻一个网页库的布局、或把 AI 生成的 HTML/CSS 落地成页面，传统做法是从零开始一个元素一个元素地搭。Bricks 的「HTML & CSS to Bricks」功能改变了这个工作流：把 HTML 或 CSS 直接粘贴进构建器，就能瞬间生成原生元素和样式。

本文依据 Bricks 官方文档《HTML & CSS to Bricks》改写，讲清楚这个功能的开关、工作原理、示例和注意事项。

HTML/CSS 转 Bricks 是什么

这是一个构建器内置的「粘贴即转换」能力：你在构建器画布里粘贴一段 HTML，Bricks 会解析它并把标准标签映射成原生元素；粘贴 CSS 时，则会自动生成对应的全局类（Global Classes）和全局变量（Global Variables）。

典型使用场景：

转换出来的是原生 Bricks 结构，之后在构建器里想怎么改就怎么改，不受「一段死代码」限制。

开启与配置

功能的开关在 Bricks → Settings → Builder → HTML & CSS to Bricks，有三种模式：

工作原理

粘贴内容后，构建器先识别内容类型（HTML 还是 CSS），再执行转换。

HTML 转换：Bricks 解析 HTML，把标准标签映射为对应的原生元素（映射表见下节）。

全局类与变量：

• 映射为控件样式：margin、padding、排版（typography）等 Bricks 有专门 UI 控件的属性，会直接落到元素的样式控件里；
• 落入自定义 CSS：没有对应 UI 控件的属性，会被写进该元素的 Custom CSS 区域；
• 变量转换：:root 中定义的变量会转成 Bricks 的全局变量（Global Variables），代码里的 class 则生成对应的全局类。

HTML 标签转换映射表

官方文档给出的标准映射：

其他标签（如 <p>、<a>、<ul> 等）同理会映射到 Bricks 的基础元素，保证结构语义不丢。

示例：HTML + 全局类一起粘贴

把下面的 HTML 和 CSS 一起复制，粘贴进构建器：

<section class="feature">

  <h2>Built for client work</h2>

  <p>Start with a native Bricks structure, then refine it in the builder.</p>

</section>

<style>

  :root {

    --feature-space: 2rem;

  }

  .feature {

    padding: var(--feature-space);

    background-color: #f4f4f4;

  }

</style>

转换后你会得到：

• 一个原生的 Section 元素、一个 Heading 元素、一个文本元素；
• 一个名为 feature 的全局类（样式来自 .feature 规则）；
• 一个名为 --feature-space 的全局变量（来自 :root）。

其中 padding 和 background-color 等 Bricks 支持声明会映射到对应 UI 控件，剩下的声明保留在 Custom CSS 里。

示例：只粘贴 CSS

如果结构已经存在、只是想要一套新的类和变量，可以只粘贴 CSS：

:root {

  --card-radius: 12px;

}

.card {

  border-radius: var(--card-radius);

  padding: 1.5rem;

}

粘贴后 Bricks 会创建 --card-radius 全局变量和 card 全局类，然后在构建器里把 card 类应用到任意元素即可。

安全机制：脚本不会自动执行

粘贴的代码里如果带 JavaScript 或外部样式表，Bricks 不会自动执行或加载：

• 检测到的 <script> 或外部链接会被放进一个 Code 元素里；
• 该 Code 元素必须由有权限的用户人工审查、签名（Sign code）并保存后才会执行。

例如粘贴 <script>console.log('Ready')</script> 会生成一个 Code 元素，脚本保持非激活状态，直到有权限的用户审查并签名。

这一点与 Bricks 的代码签名机制是同一套安全模型：可执行代码没有有效签名就不会运行。

权限与注意事项

• 需要「Create global classes」权限：转换要正确生成样式，当前用户必须拥有创建全局类的用户权限。角色没有该权限时，转换器无法创建导入 CSS 所需的 class 记录；
• 转换只是结构起点：因为你的站点已有主题样式、主题/插件 CSS，转换结果可能需要手动微调才能与源码完全一致——这是预期行为，不是 bug；
• 纯 CSS 粘贴：只粘贴 CSS 时，Bricks 会生成对应的全局类和全局变量；
• 确认对话框：开着「confirm on paste」时，每次粘贴都会问一次，批量粘贴场景嫌烦可以关掉确认。

常见问题（FAQ）

Q：粘贴 HTML 后样式和原来不完全一样？ A：正常。转换产出的是原生 Bricks 结构，现有主题样式和插件 CSS 会影响最终渲染，在构建器里微调即可。

Q：粘贴的 JS 为什么不执行？ A：安全设计。脚本会被放进 Code 元素，需要人工审查、签名、保存后才执行。

Q：没有生成全局类？ A：检查当前用户角色是否拥有「Create global classes」权限，转换器依赖该权限创建 class 记录。

Q：只想要变量不要类，可以吗？ A：粘贴内容决定了生成结果——:root 变量必然转成全局变量，class 规则必然转成全局类。只粘贴需要的部分即可。

Q：这个功能在哪关掉？ A：Bricks → Settings → Builder → HTML & CSS to Bricks，选 Disabled。

延伸阅读

• 转换出的结构最终要落到布局体系上：Bricks Layout 布局详解
• 老站整体迁移到 Bricks 的完整流程：从 Elementor/Divi 迁移到 Bricks：完整分步指南
• 粘贴出的样式想要再系统化？参考 Bricks 元素 Style 设置详解
• 还没装 Bricks？先看 Bricks 安装配置指南
• 官方文档：HTML & CSS to 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.

获取报价 →浏览全部教程