# 5.4. HTML Code

The **HTML Code** widget allows you to insert and display custom HTML code directly on your website. This is useful for adding elements that are not provided in the editor, such as embedded code, custom HTML snippets, or interactive components.

Using **HTML code** provides high customization capabilities but comes with a certain level of complexity, requiring users to have basic knowledge of HTML to use it effectively. If you're new to coding, start with drag-and-drop features and gradually learn to maximize the potential of your Landing Page design tool.

## **1. Add HTML Code to the landing page**

* Click on **Widgets** in the sidebar of the editor.
* Select **HTML Code** from the **Advanced** section.
* Choose the **HTML Code** element and drag it onto your landing page.

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

## **2. HTML Code Editor**

### 2.1. Edit HTML

To access the **Content Editor**, click on the **HTML Code** widget you wish to modify on the screen and select **Content** from the quick settings bar.

<figure><img src="/files/3PZitYLXoNRkKRblIAod" alt=""><figcaption></figcaption></figure>

A **HTML Edit** popup will then appear on the screen, allowing you to input your desired design code.

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

### 2.2. Design Editor

To access the **Design Editor**, click on the **HTML Code** widget you wish to modify on the screen and select **Design** from the quick settings bar.

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

* **Align:** Helps you align the HTML Code within its container, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align.md).
* **Sizes:** In the design editor, this allows you to adjust the size and position of elements on your landing page, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size.md).
* **Display on:** Lets you control the display of the HTML Code on different devices, including Desktop and Mobile


---

# 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://docs.shopone.io/english/basic-elements/advanced-widgets/html-code.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.