> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design an element

> Select, arrange, style, and set the states of elements in the Content section of the Widget Studio.

Designing an element sets how it looks and where it sits on the screen. You make these changes in the **Content** section of the Widget Studio, where each element is listed in the **Elements** list.

![Widget Studio Content tab with the Screen Default and Elements list: Wrapper, Button, Image, Text, and Heading](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-1-2x.png)

## Select and arrange elements

### Select an element

Click an element to select it, or click its name in the Elements list.

### Add, duplicate, edit, or delete an element

Hovering over an element in the Elements list displays secondary actions. Click the **+** icon to add an element below the selected element. Click the **three-dots** menu to edit, rename, duplicate, hide, or delete the element.

![Content tab with the Image element selected in the Elements list under Wrapper](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-2-2x.png)

> [!NOTE]
>
> If an event is associated with one of your elements, you can't delete the element. You must delete the event first.

#### Duplicate an element

You can duplicate an element on the same screen, or duplicate an element from one screen to another.

### Resize an element

You can resize your elements in the preview window (on the right). Position your cursor on an element's edge, then click and drag to edit its dimensions.

You can also modify these dimensions in the left panel.

#### Auto-resize text and heading

![Heading element panel, General tab, with Auto-resize block to fit text checked](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-7-2x.png)

Select **Auto-resize block to fit text** on the **General** tab to adjust the element's size so it expands or shrinks to fit the text.

#### Smart guides

Smart guides help you align and position elements both vertically and horizontally while editing your widget.

#### Constrain proportions

Once your element is resized, you can lock its dimensions.

To constrain an element's proportions:

1. Select an element in the left panel.
2. Hover over the element and click the **padlock**.

### Move an element

Drag and drop an element in the preview to move it.

### Rotate an element

To rotate an element, select it, and enter the desired rotation angle in the rotation parameter in the left panel.

## Edit an element's content

Click an element to access its settings.

You can use AI to edit or generate your text.

![Text element panel, General tab, with the text content editor reading Get 20% off your first order when you join our list today](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-3-2x.png)

To add a link, highlight a word, group of words, or a whole block of text.

> [!NOTE]
>
> To modify the URL associated with text, you can create a click event and associate a **URL** action with it.

You can also add emojis to your headings, text, and links.

## Upload your own font

You can add your own font to your widget.

1. Click the **T** icon in the text editor, then click **+ Add a font**.

   ![Text element panel with the font settings popover showing Font size, Font family, and Font weight, and an Apply button](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-4-2x.png)

2. In the font import settings, choose your **Font Source:**
   * **From your website:** Select this option if the font is already hosted on the same website as the widget.
   * **Link to a font file:** Provide the direct URL to the font file (for example `.woff`, `.woff2`, `.ttf`, or `.otf`).
   * **Embed code:** Insert the CSS code to import the font using `@import` or `@font-face` (from services like Google Fonts or Adobe Fonts). When pasting Google Fonts, only copy the code from `@import` to `</style>`.

3. Specify the **Font family**.

4. Click **Preview & Add** to instantly see how the font will look with your text.

![Custom font preview dialog for Pacifico listing font weights from Thin 100 to SemiBold 600, with Back, Cancel, and Add buttons](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-5-2x.png)

You can also adjust the preview text and toggle italic display. You can select one or several font weights. Click **Add** to confirm.

Once saved, your font appears in the **Font family** dropdown. You can apply the font to any text element and preview it in real time.

## Use custom colors

With the eyedropper in the color picker panel, you can pick any color on the screen and use it in an element.

![Text element panel with Enable background color checked and the Custom color picker open on a #ffffff Hex value](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-6-2x.png)

## Set an element's states

When you select an element, two tabs appear at the top of the editing menu: **General** and **States**.

Select the **States** tab to find additional properties that let you edit the element's states (Hover, Active, Disabled).

![Text element panel, States tab, with Choose state set to default and a prompt to select a state to edit](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-8-2x.png)

For example, you can set a different font, background color, or border for an element's hover state.

![Text element panel, States tab, with Choose state set to hover and Font, Background Color, Background Image, and Border sections](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-9-2x.png)

When you click the **General** tab, your widget's preview switches to the element's default state. You can choose the element's default state in the **General** tab.

## Edit the HTML of a text element

Use the HTML code editor to change the markup of a text element, such as the strong tags around part of a message.

To edit the HTML of a text element:

1. Select a text element.
2. In the **Text content** toolbar, click the three-dots menu, then click **Code**.
3. Edit the HTML in the code editor.

![Text element settings panel on the General tab, with the text content shown as HTML code, including the strong tags around 20% off](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-14-code-2x.png)