> For the complete documentation index, see [llms.txt](https://docs.rafflex.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rafflex.io/marketing/website-tools/top-banner-text.md).

# Top Banner Text

The scrolling banner runs across the very top of every page, above your site's header. It is a great way to promote special offers or important competitions, and it is one of the first things visitors

***

The scrolling banner is a strip in your brand colour that sits above your site's header on every page. Your messages glide across it from right to left in a continuous loop, with a small separator icon between each one. If your messages are short, they repeat so the banner is always full from edge to edge, on both phones and computers. On a computer, the banner pauses while a visitor holds their mouse over it, which makes any links easy to click.

Use it for things you want every visitor to notice, such as:

* A flash sale or discount code ("Use code FRIDAY20 for 20% off today only").
* A new or ending soon competition ("Last chance! The BMW M4 draw is tonight at 8pm").
* Trust messages ("Over 5,000 winners and counting").
* Important notices, such as a change to draw times.

***

### Add Your Banner Messages

{% embed url="<https://vimeo.com/1072538277/81f44ec5c5?share=copy>" %}

1. In the **admin panel**, click **Settings** in the left-hand menu.
2. Open the **Marketing** tab. The page is titled **Marketing & Social**.
3. Scroll to the **Banners & Promos** section.
4. Under **Scrolling Banner Text**, click **Add to Scrolling Banner Text**. A new message box appears.
5. Type your message into the box labelled **Data**. You can use the small toolbar above it to format your text (see below).
6. To add another message, click **Add to Scrolling Banner Text** again. You can add up to 10 messages.
7. Click **Save Settings** at the bottom of the page. You will see a message saying **Marketing settings saved successfully**.

Visit your site and you will see your banner scrolling across the top.

{% hint style="info" %}
Every message box must have some text in it before you can save. If you added a box by mistake, delete it (see below) rather than leaving it empty.
{% endhint %}

#### Formatting your messages

Each message has a small text editor with these buttons:

| Button            | What it does                                                                                                                                                                     |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Bold**          | Makes text heavier. Banner text is already shown in bold, so this button makes little visible difference.                                                                        |
| **Italic**        | Slants text, useful for emphasis.                                                                                                                                                |
| **Link**          | Turns the selected words into a clickable link. Highlight the words, click the link button, then paste the web address, for example the page of a competition you are promoting. |
| **Underline**     | Underlines text, a handy way to show that something is a link.                                                                                                                   |
| **Strikethrough** | Draws a line through text, perfect for showing an old price next to a new one.                                                                                                   |

{% hint style="success" %}
**Keep messages short and punchy.** The banner is always moving, so visitors only have a second or two to read each message. Aim for a handful of words, lead with the most important part, and put each offer in its own message rather than one long sentence.
{% endhint %}

***

### Change the Separator Icon

By default, a small slanted line appears between each message. You can replace it with your own icon, such as your logo mark, a star or a ticket.

1. In the **Banners & Promos** section, find **Marquee Separator Icon**.
2. Click the upload box and choose your image.
3. Click **Save Settings**.

For the best result, use a **PNG** image of **24 x 24 pixels** with a transparent background, and keep the file small (well under 100KB). The icon is shown quite small, so simple, bold shapes work best.

To go back to the default separator, remove the uploaded image and click **Save Settings**.

***

### Edit, Reorder or Remove Messages

* **To edit a message**, click into its box, make your changes and click **Save Settings**.
* **To change the order**, drag a message by its handle to a new position, then click **Save Settings**. Messages scroll in the order they appear in the list.
* **To delete a message**, click the bin icon on that message, then click **Save Settings**.
* **To turn the banner off**, delete every message and click **Save Settings**. The banner disappears from your site until you add a new message.

{% hint style="info" %}
Changes usually appear on your site straight away. If you do not see them, refresh the page. If your banner does not appear at all after saving, contact Rafflex support.
{% endhint %}

{% hint style="info" %}
The banner uses your **Primary Color** (your main brand colour) as its background. To change it, update your colours in [Choose Site Colours](/customise-your-site/choose-site-colours.md).
{% endhint %}