# 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**](https://highfivethemes.gitbook.io/the-reporter-user-documentation/cta-text-and-subtext), 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&#x26;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&#x26;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&#x26;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**](https://highfivethemes.gitbook.io/the-reporter-user-documentation/getting-started/uploading-a-theme) it in your Ghost Admin Panel.
* **Thats it! Now you have customized home page layout with banners!**


---

# 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://highfivethemes.gitbook.io/the-reporter-user-documentation/advanced-customization/home-page/banners-cta-blocks-customization.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.