# Text Elements

In this article, you learn how to add text elements to a step. There are two kinds of text: **Headline** and **Paragraph** widgets.&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2Fw38lErnk5NbKUS0Bobwg%2Fimage.png?alt=media&#x26;token=9f6c06a5-a84d-4fa2-a0af-59f6a2e6f936" alt=""><figcaption></figcaption></figure>

## Customizing text

Follow these instructions to add a **Headline** or **Paragraph** widget to the canvas.

1. Drag a widget to a canvas location.
2. Click one time inside the widget to display the text editor.

![Headline editor](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FK6GOKtHmH9FXkoKyjEao%2Fa-2a.png?alt=media\&token=f9f8b490-a460-452a-821e-18149e85a567)

3\. Enter text.

4\. Use the editor to style the text (font size, alignment, color, bold, etc.).

5\. Click Save changes.

6\. Click Preview.

{% hint style="success" %}
**Note**  You can quickly edit and style other elements on the canvas at the same time. Click the widget to open the settings panel and make changes.
{% endhint %}

### Adding custom settings

Click the widget one time to open the **Headline** settings on the left panel. This is where you can style your text (e.g. margins, background, color, etc.).

Click the **Style** tab to change the padding, spacing, add text shadow effects etc.

Click the **Data** tab to bind data to it. It gives you the power to design **any element as a product**, making your element more interactive.

Click the **Interaction** tab to give the headline an action when it's clicked, hovered over or on mouse leave)

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FtpSOhfmv6Lj9KnOsoGj9%2Fimage.png?alt=media&#x26;token=89088190-9ec4-43ab-a0c0-d4361e592b45" alt=""><figcaption></figcaption></figure>
