The Reporter - User Documentation
DemosSupport
  • πŸ‘‹Introduction
  • πŸ†•Changelog
  • 🏁GETTING STARTED
    • πŸ”½Uploading a Theme
  • πŸ“œMain Templates
    • πŸ“°Post Page/Post Page with Sidebar
    • 🐱Categories Page
    • πŸ§‘β€πŸŽ¨Authors Page
    • ♾️Archive (All posts) Template
  • βš™οΈCUSTOM SETTINGS
    • ℒ️Logos
    • πŸ”€Typography
    • 🀯Header
      • 🧭Header Type
      • πŸ“Header Height
      • πŸ” Header Navigation Font Size
    • πŸ“Border Radius
    • ⚑Featured Posts Section
    • 🍑Homepage Layout
      • πŸ“‘Homepage Tags
      • πŸ›οΈHomepage Sections Layout
  • πŸ‘£Footer Customization
    • πŸ₯ΎFooter Type
    • 🐾Footer Categories
  • πŸ“’CTA Text and Subtext
  • πŸ“ŸCustom Widget (HTML Widget)
  • 🀝MEMBERSHIP FEATURE
    • πŸŽ™οΈSetting Up
    • ℹ️Sign In Page
    • πŸ”ΌSign Up Page
    • *️⃣Subscribe Page
    • πŸ‘€Account Page
    • πŸ’ΈMembership Page
  • πŸ§‘β€πŸš€Advanced Customization
    • πŸ‘©β€πŸ«Introduction
    • 🏠Home Page
      • 🧱Sections Customization
      • πŸ’ˆBanners (CTA blocks) Customization
    • πŸ‘ŸFooter Tags
  • πŸ”©Other Settings
    • πŸ“ΉAdd 'Has Video Content' Icon
    • πŸ“ΈAdd Your Instagram Link (Icon)
    • ⏬Submenus
  • β˜‘οΈTERMS & CONDITIONS
    • πŸ”Refund Policy
Powered by GitBook
On this page
  • Here is the options:
  • To add banners on the home page:
  1. Advanced Customization
  2. Home Page

Banners (CTA blocks) Customization

PreviousSections CustomizationNextFooter Tags

Last updated 1 year ago

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

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

Now, find new the-reporter.zip file and it in your Ghost Admin Panel.

πŸ§‘β€πŸš€
🏠
πŸ’ˆ
upload
that you can customize in Ghost Admin Panel settings