💈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:

{{>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, 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

  2. Banner with background - {{>banners/banner-with-bg background-image="../assets/images/subscription.png"}} - banner with any background image that you want.

    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)):

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

To add banners on the home page:

  • Open index.hbs file

  • Insert your preferred banner in any place of the layout:

  • 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 it in your Ghost Admin Panel.

  • Thats it! Now you have customized home page layout with banners!

Last updated