# HTML

For advanced users who need more control or want to embed specific elements not available through standard content blocks, the "HTML" element allows you to insert custom HTML code directly into your email template.

### Adding an HTML Element

1. **Access the Content Tab:** Ensure the **Content** tab is active in the right-hand sidebar.
2. **Drag and Drop:**

   * Locate the "HTML" element (often represented by an icon like `</>`) in the sidebar.
   * Click and drag the "HTML" element onto your email canvas, placing it within a column or content area where you want your custom code to render.

   Upon dropping, a placeholder might appear on the canvas (e.g., "Hello, world!" rendered from default HTML). The properties for this HTML element will load in the right-hand sidebar, primarily featuring a code editor.

<figure><img src="/files/W5k76LtqAkJmM7qfdnN4" alt=""><figcaption></figcaption></figure>

### Adding and Editing Custom HTML

With the HTML element selected, you can input and modify your code in the sidebar.

1. **Locate the HTML Editor:** In the right-hand sidebar, under the "Content" tab for the selected HTML element, you will find an HTML code editor. It might have a line number and some default code (e.g., `<strong>Hello, world!</strong>`).
2. **Input Your Code:**
   * Delete the default code if necessary.
   * Type or paste your custom HTML code directly into the editor.
   * As you type or after you paste and click away, the canvas will attempt to render your HTML code live.

<figure><img src="/files/vFZOzUCWSeFLnfOFBVjl" alt=""><figcaption></figcaption></figure>

### Customising HTML Element Properties

While the main content is your custom HTML, some general container settings are available.

#### General (Container Padding)

This controls the padding *around* the entire HTML block element.

* **Container Padding:**
  * **All Sides:** Enter a pixel value (e.g., `10px`) for equal padding on all sides of the HTML block.
  * **More Options:** Toggle on for individual "Top," "Right," "Bottom," "Left" padding controls.

<figure><img src="/files/Kk6fY0R8eJhoFAnWfXQV" alt=""><figcaption></figcaption></figure>

#### Responsive Design

Manage the visibility of your custom HTML block on different devices.

* **Hide on Desktop:** Toggle on to hide the HTML block on desktop views.

<figure><img src="/files/7Ao4E4U2cyirK2gQ0Pj9" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://userflux.gitbook.io/userflux-docs/feature-guides/user-journeys/email-builder/html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.