Skip to main content

Banner Options

The Banner is a prominent section at the top of your page, ideal for highlighting welcome messages, announcements, or calls to action.

1. Enable / Disable the Banner​

🔘 Show Banner:

  • Turn this ON by selecting "Yes" in the "Enable banner" setting
  • When disabled, the banner and all its content will be hidden

2. Banner Title & Subtitle​

Only visible when Banner is enabled

📌 Title:

  • Enter your main headline (e.g., “Welcome to Our Website”)

📝 Subtitle:

  • Enter a short description under the title

🔤 Title Tag (HTML):

  • Choose a heading tag for the title: h1–h6 (h1 is largest)

🎨 Text Color:

  • Choose separate colors for title and subtitle text

3. Background Color & Image​

🌈 Background Color:

  • Choose a solid color background (optional if using an image)

🖼️ Background Image:

  • Upload or choose an image for the banner background
  • After setting the image, you can configure:
    • Image position (e.g., Center Top, Right Bottom)
    • Repeat (useful if the image is small)
    • Size: “Cover” stretches image to fit the banner
    • Attachment: fixed or scrolls with the page
    • Overlay color: transparent layer for better text readability

4. Size & Layout​

📏 Banner Height:

  • Use values like 400px or 50vh (half screen height)

🎨 Custom CSS Class:

  • Advanced: add your own class name for custom styling

📦 Container Type:

  • container: fixed width
  • container-fluid: full width
  • default: uses theme default layout

5. Call-To-Action (CTA) Buttons​

You can add multiple CTA buttons like “Learn More” or “Contact Us”.

Each button allows:

  • Text: label for the button
  • Link: URL or page it directs to
  • CSS Class: default is btn btn-primary
  • Target: same tab or open in new tab

6. Display Options​

Where should the banner show?

  • All pages
  • Only current page

Tips for Best Results​

  • Use a semi-transparent overlay to make text more readable over background images
  • Ideal height: 300px to 600px
  • Don’t overcrowd with too many buttons — 1–2 is plenty

Conclusion​

Astroid’s Banner feature helps you create a professional and engaging header section without any coding knowledge. It's easy to customize and adds impact to your site’s first impression.