# Banners

> The student area banners: the type for each navigation model, what happens on click, the images, the background video, the showcases and the order.

A banner is a strip in the student area that takes the student to a destination: a product, an external page or none. It gives access to nothing. Banners live in **Content > Banners**.

## How it works

**The most important rule:** the banner type depends on the account's navigation model. You choose the model in **Settings > Student area**, under **Navigation model**.

| Banner type | Shown in the | What it is |
|---|---|---|
| **Full banner** | **Cademi Model** | The streaming-style strip: background image or video, logo, title, text and button. |
| **Image** | **Educational Model** | One image for computers and another for phones. |
| **Custom HTML** | **Educational Model** | HTML code of yours, shown in the student area. |

A banner from the other model stays saved, but it does not appear. The list shows **Not shown in the current style**. The editing screen explains how to switch the format.

A banner has two statuses: **Published** and **Draft**. The status sits in the badge on the list and in the editing header. In draft, the banner disappears for students. The administrator preview still shows it.

## Step by step

### Create a banner

1. Open **Content > Banners**.
2. Click **New Banner**.
3. Fill in **Name**. It only identifies the banner in the dashboard.
4. In the Educational Model, choose the **Format**: **Image** or **Custom HTML**.
5. Click **Save**.

The banner's editing screen opens next.

### Choose what happens on click

The **Click action** panel does not exist in **Custom HTML**, because the HTML brings its own links. In the others, choose under **When the banner is clicked**:

- **Do nothing**.
- **Open a product**: choose the **Destination product**. A student without access goes to the product's offer. If there is no offer, the screen shows **Offer not configured.**, with a shortcut to fill it in.
- **Open an external page**: fill in the full **Destination address**, with https://.

If the action is not **Do nothing**, choose under **Open link in**: **Same window** or **New tab**.

### Build a Full banner

- **Banner content**:
  - **Logo**, in PNG up to 300 KB, preferably horizontal;
  - **Title** and **Text**, each with its own color;
  - **Show text shadow**;
  - **Button text**. When empty, the button disappears;
  - **Button colors**.
- **Background images**: **Desktop image** (JPG up to 800 KB, 1920 × 1080 px) and **Mobile image** (JPG up to 800 KB, 600 × 1050 px).
- **Background video (optional)**:
  - **Video URL**: the full URL of a YouTube or Vimeo video;
  - **Mobile video URL**. When empty, phones use the same video;
  - **Show video overlay**: a color with transparency, to keep the text readable;
  - **Video sound**: **With sound** or **Muted**. Browsers only play the video on their own when it is muted;
  - **When the video ends**: **Repeat** or **Stop**.
- **Appearance**: **Banner height** as a percentage of the screen, **Show bottom gradient**, **Menu color over the banner** and **Reduce content during video playback**.

### Build an Image or HTML banner

- **Image**: **Desktop image** (JPG up to 1 MB, 1920 × 1080 px) and **Mobile image** (JPG up to 1 MB, 600 × 1050 px).
- **Custom HTML**: paste the **HTML code**.
- **Display**: check the showcases where the banner appears. With none checked, it appears in all of them.

Save with the bar at the bottom.

### Sort, duplicate and delete

- Drag the banners by the handle to change the order.
- **...** > **Duplicate** creates a copy.
- **...** > **Delete** sends the banner to the trash.

To bring it back, open the **Trash** in the corner of the screen.

## Good to know

- **Full banner without showcases.** The **Full banner** has no showcase selection. In the Cademi Model, it is the home page strip.
- **Background image with a video.** Upload the background image even with a video. It sits behind the video while the video loads. Without a mobile image, phones use the desktop one.
- **Product banner.** A product can also have a banner of its own, at the top of its page. Its options are similar to those of the full banner. See [Product page and lesson page](https://help.cademi.cloud/en/conteudo/pagina-do-produto-e-da-aula.md).
- **The other model's banners.** Changing the account's **Navigation model** does not delete the other model's banners. They just stop appearing, until you switch each one's format.

## Frequently asked questions

**I created a banner and the student cannot see it.** Check three things:

1. The status is **Published**.
2. The type matches the account's navigation model.
3. On an **Image** or **Custom HTML** banner, the showcases checked under **Display** are right.

**The banner shows up as a blank space.** The background image is missing. Upload the **Desktop image** and the **Mobile image** before publishing.

**I want a video in the banner, but the option does not appear.** Video only exists in the **Full banner**, in the Cademi Model. **Image** and **Custom HTML** banners have no background video.