---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/html'
title: '添加 HTML 元素 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:50:49+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  页面上留一块运行您自己代码的位置，如社交帖子或预订小部件。第三方嵌入或自定义标记没有对应元素时使用。

  添加 HTML 元素
  登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
tags:
  - 'Text and media'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T13:50:49+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: '添加 HTML 元素'
      description: |-
        页面上留一块运行您自己代码的位置，如社交帖子或预订小部件。第三方嵌入或自定义标记没有对应元素时使用。

        添加 HTML 元素
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:50:49+0000'
      dateModified: '2026-10-24T13:50:49+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/html'
      articleSection: 文本与媒体
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/html'
      description: |-
        页面上留一块运行您自己代码的位置，如社交帖子或预订小部件。第三方嵌入或自定义标记没有对应元素时使用。

        添加 HTML 元素
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[添加内容](/zh-hans/hc/documentation/learn-dxpr-builder/elements) /[文本与媒体](/zh-hans/hc/documentation/learn-dxpr-builder/elements/text-and-media) # 添加 HTML 元素.

 学习 DXPR Builder搭建页面添加内容文本与媒体

   ## 本指南内容

 相关指南

- [在样式面板中改变元素外观](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

页面上留一块运行您自己代码的位置，如社交帖子或预订小部件。第三方嵌入或自定义标记没有对应元素时使用。

## 添加 HTML 元素

登录后打开页面：悬停内容区即出现构建器控件。[您的第一页](/hc/documentation/learn-dxpr-builder/getting-started/first-page)介绍基础操作。

1. 悬停列，点击其控制栏中的 **+**；空白页面请点击 **Add Elements**。打开 **Content** 选项卡并点击 **HTML**。它落在列顶部，设置对话框打开。
2. 从服务的 Embed 或 Share 选项复制嵌入代码，粘贴到 **Raw HTML** 编辑器。
3. 点击对话框中的 **Save**。再点击内容区顶部工具栏中的 **Save** 保存页面。

  ## 您会看到的内容

点击对话框中的 **Save** 后，嵌入即在编辑器中生效，因为构建器在那里也运行其脚本。视频中美国假日 Google 日历在对话框关闭后立即显示。保存并发布页面后访客可见。

## 设置您的 HTML 元素

悬停元素，在其控制栏打开 **More > Settings**。选项：

- **Raw HTML:** 写 HTML、CSS 或 JavaScript 的代码编辑器。脚本在编辑器和发布页都运行。
- **HTML ID:** 可选 ID，供 CSS 或 JavaScript 定位该元素。
- **HTML classes:** 元素外层的可选 CSS 类。

## 如果看不到它

- **Content 选项卡中没有 HTML。** 您的用户档案隐藏了它。请管理员到[用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)启用。
- **重新加载后消失。** 页面未保存。请重新添加并点击内容区顶部工具栏中的 **Save**。
- **嵌入显示为纯文本或空引用。** 嵌入脚本尚未加载，或其 `<script>` 行缺失。请等几秒，或重新粘贴完整嵌入代码。
- **字段有代码但访客什么都看不到。** 站点对访客运行文本格式过滤，格式可能去掉 `<script>` 或 `<iframe>` 这类标签。编辑仍能看到代码生效。请管理员取消 **Apply text format filters to frontend content**（[常规设置](/zh-hans/hc/documentation/learn-dxpr-builder/admin/general-settings)），或在文本格式中允许这些标签。再重新加载发布页。
- **该元素下方布局错乱。** 代码有未闭合的标签。请检查每个开始标签都有结束标签。

## 接下来做什么？

[样式选项卡](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)：改变 HTML 元素的间距和背景。