# Marquee text

<figure><img src="/files/kchhfKxe0369mv70YNSf" alt=""><figcaption><p>Source: <a href="https://demo.foxify.io/?utm_source=foxecom&#x26;utm_medium=help_center_foxify_marquee_text&#x26;utm_campaign=anchor_text&#x26;utm_term=template_sport">Template Sport</a></p></figcaption></figure>

The Marquee text is a dynamic element that allows you to create scrolling text, perfect for announcements, promotions, or eye-catching updates on your page.

## How to add a marquee text

{% hint style="success" %}
**Steps:**

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements (**<img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FKqvedGnvQChzk2ELEVM7%2FPlusCircleIcon%20(1).svg?alt=media&#x26;token=c806485a-0edc-468b-84a8-5873ad69e97d" alt="" data-size="line">), or press **E**.
2. Select **Promotions** > **Marquee text** or in **Quick add**, select **Marquee elements**.
3. Drag the marquee text onto your canvas.
   {% endhint %}

<figure><img src="/files/50ai56oGeshuKPhKJYOa" alt=""><figcaption></figcaption></figure>

## How to edit marquee text

{% hint style="success" %}
**Steps:**

1. **Select** the relevant marquee text element in the editor.
2. Use the tools bar above the selected marquee text element to quickly edit it.

All the formatting tools below can be found in the right-handsided **Inspector** panel.
{% endhint %}

### General settings

* **Manage content:**
  * Click on **Content** to edit or add items to the marquee.
  * Add up to 10 content items. For each item, you can:
    * **Add text**: Enter the text you want to display.
    * **Add an icon and/or an image**: Use the Select Icon or Select Image option to enhance your marquee text visually.
    * **Link**: link your marquee text to your desired page.
* **Scroll direction**: Choose the direction of the scroll: Left to Right <img src="/files/C1U8u6xuZFfOtTBRLGqq" alt="" data-size="line"> or Right to Left <img src="/files/Xl9s1yccxV5nKG2jWAcj" alt="" data-size="line">.
* **Content layout:** Choose the direction in which your marquee items are arranged.

{% hint style="info" %}
The layout configuration only applies when both text and icon/image are assigned to each **Content** item.

![](/files/c6gEiJVGAN2Fqq9Kp4xs)
{% endhint %}

{% tabs %}
{% tab title="Horizontal" %}

<figure><img src="/files/HSj3l7hM7BLjksfiH6eh" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical" %}

<figure><img src="/files/3IlBrQGIXLYLt6RFowAG" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Content alignment**: Align the text and visuals vertically: Top, Center, or Bottom.
* **Scroll speed**: Adjust the scrolling speed using the slider. Increase or decrease the speed to match the design's tempo.
* **Pause on hover**: Enable this option to pause the scrolling effect when a visitor hovers over the marquee.

### Design settings

Customize the appearance of your marquee content to match your branding and create a visually appealing scrolling element.

* **Icon and image:**
  * **Icon size**: Adjust the icon size slider to increase or decrease the size of the icon used in your marquee text. Ensure icons are proportional to the text for a balanced look.
  * **Image size**: Use the image size slider to resize any images accompanying your marquee text.
  * **Image radius:** Set the image radius to give your images rounded corners.

<figure><img src="/files/8xGDsvla4UEDPReQoYjZ" alt=""><figcaption></figcaption></figure>

* **Text:** Style the text (color, font, size, etc.) to fit your branding.

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

{% hint style="info" %}
**Pro tips** :star:: &#x20;

* Experiment with these settings to find the perfect balance of text size, font, and spacing. Preview your changes to ensure the marquee text looks seamless and aligns with your design goals.
* For further customization, explore the [Animations](/foxify-app/foxstudio/layout-and-styling/animations.md) tab to add dynamic effects like fade-ins or bounces, making your marquee text even more engaging!
  {% endhint %}


---

# 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.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/marquee-text.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.
