> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-elements/advanced-widgets/html-code.md).

# 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