> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/the-reporter-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/the-reporter-user-documentation/advanced-customization/home-page/banners-cta-blocks-customization.md).

# Banners (CTA blocks) Customization

**The Reporter** has 2 variants of pre-made banners. Each banner is **pre-made** partial, that can be inserted anywhere. They looks like this:

```handlebars
{{>banners/banner-with-bg background-image="../assets/images/subscription.png"}}
{{>banners/banner-default}}
```

Each banner is a block with **CTA text** and **subtext**, [**that you can customize in Ghost Admin Panel settings**](/the-reporter-user-documentation/cta-text-and-subtext.md), and **input** for subscription. Banners won't show up for the users that are already site members.

### Here is the options:

1. **Default** - `{{>banners/banner-default}}` - default option with black background 

   <figure><img src="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2Fqnz37A701EQG1DoiOTZc%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-10-16%20%D0%B2%2012.50.51.png?alt=media&amp;token=2caf829b-ec39-465c-a55d-35c4a766e15f" alt=""><figcaption></figcaption></figure>
2. **Banner with background** - `{{>banners/banner-with-bg background-image="../assets/images/subscription.png"}}` - banner with any background image that you want.&#x20;

   <figure><img src="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2FwkjjqrYVgWNvLHI999mO%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-10-16%20%D0%B2%2012.53.54.png?alt=media&amp;token=5963576b-e3ab-4108-8668-dafab6a17f9b" alt=""><figcaption></figcaption></figure>

   To add background, put your image inside assets folder, and then insert path to your image inside `background-image` prop like this (don' forget to add the image name with the file format (.png/.jpg/.webp)):&#x20;

```handlebars
{{>banners/banner-with-bg background-image="../assets/images/YOUR_IMAGE_NAME.jpg"}}
```

### To add banners on the home page:

* **Open** `index.hbs` file&#x20;
* **Insert** your preferred banner in any place of the layout:&#x20;

<figure><img src="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2Fa6yTl65bbxg4VF70hf0R%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-10-16%20%D0%B2%2013.49.28.png?alt=media&amp;token=9df9190f-d5ee-4927-bee8-abbe4bbef938" alt=""><figcaption></figcaption></figure>

* When you're done with the customization, we need to zip our theme to upload its customized version in Ghost. To do this, **insert** `npm run zip` command into the terminal, that we already opened, and press **Enter.**
* Now, find new `the-reporter.zip` file and [**upload**](/the-reporter-user-documentation/getting-started/uploading-a-theme.md) it in your Ghost Admin Panel.
* **Thats it! Now you have customized home page layout with banners!**