---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/html'
title: 'Adding an HTML Element | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:29:50+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Raw HTML/CSS/JS code'
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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding an HTML Element'
      description: 'Raw HTML/CSS/JS code'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:29:50+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/elements/html'
      articleSection: 'Text and media'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/html'
      description: 'Raw HTML/CSS/JS code'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Text and media](/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Adding an HTML Element.

Raw HTML/CSS/JS code

 Learn DXPR BuilderBuild pagesAdd contentText and media

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You get a spot on the page where your own code runs, such as a social post or a booking widget. Use it when a third-party embed or custom markup has no matching element.

## Add an HTML element

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **HTML**. It lands at the top of the column and its settings dialog opens.
2. Copy the embed code from the service's Embed or Share option. Paste it into the **Raw HTML** editor.
3. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

Your embed works in the editor as soon as you click **Save** in the dialog, because the builder runs its script there too. In the video, a Google Calendar of US holidays shows as soon as the dialog closes. Visitors see it once you save the page and it is published.

## Set up your HTML element

Hover the element and open **More > Settings** in its control bar. Options:

- **Raw HTML:** a code editor for your HTML, CSS or JavaScript. Scripts run in the editor and on the published page.
- **HTML ID:** an optional ID to target the element with CSS or JavaScript.
- **HTML classes:** optional CSS classes for the element wrapper.

## If you don't see it

- **HTML is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **The embed shows as plain text or a bare quote.** The embed script has not loaded yet, or its `<script>` line is missing. Wait a few seconds, or paste the full embed code again.
- **The field has code but visitors see nothing.** Your site runs text format filters for visitors, and the format can strip tags such as `<script>` or `<iframe>`. Editors still see the code working. Ask an administrator to clear **Apply text format filters to frontend content** in [General settings](/hc/documentation/learn-dxpr-builder/admin/general-settings), or to allow those tags in the text format. Then reload the published page.
- **The layout below the element breaks.** The code has an unclosed tag. Check that every opening tag has its closing tag.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your HTML element.