Guide / Banner Settings
KO EN

Banner Settings

Banner Settings allows administrators to create, edit, schedule, delete, and display banners inside iBoard pages or HTML layouts. Banners can contain HTML content and can be called from pages using a banner shortcode.

Use Banner Settings when you need to manage promotional banners, announcement sections, homepage hero blocks, event messages, top notices, or reusable HTML banner content.

Overview

The Banner module is composed of three main areas: Banner List, Banner Usage Guide, and Banner Information.

Area Description
Banner List Displays registered banners and allows administrators to edit, delete, or add banners.
Banner Usage Guide Explains how to call a banner from HTML using the banner shortcode.
Banner Information Creates or updates banner name, display period, and HTML content.

Banner List

The Banner List page displays all registered banners. Administrators can review the banner name, start date, end date, and available actions.

Main Buttons

Button Purpose
Guide Opens the Banner Usage Guide popup.
Add Banner Creates a new banner.
Setting Opens the selected banner for editing.
Delete Deletes the selected banner.

List Columns

Column Description
ID Internal banner ID.
Name The banner name used when calling the banner from HTML.
StartDate The date and time when the banner becomes active.
EndDate The date and time when the banner stops being displayed.
Actions Provides edit and delete actions for each banner.

Banner Usage Guide

The Banner Usage Guide explains how to display a banner inside HTML. A banner is displayed by placing the banner shortcode where the banner content should appear.

Basic Banner Shortcode

[Banner, {Name:MainTopBanner}]

The value after Name: must match the banner name exactly.

Banner names are case-sensitive depending on the implementation. Use the exact same name that was saved in Banner Information.

Example Usage Inside HTML

You can place the banner shortcode inside any HTML structure such as a section, div, header, footer, page layer, or custom layout area. 

<section class="main-hero">
    <div class="container">
        [Banner, {Name:MainTopBanner}]
    </div>
</section>

Example Banner Content

Banner content itself can contain HTML. 

<div class="promo-banner">
    <h2>Summer Promotion</h2>
    <p>Special offer is available now.</p>
    <a href="/ShowPage/Promotion" class="btn btn-primary">View Details</a>
</div>

Result

When the page is rendered, the banner shortcode is replaced with the banner content that matches the banner name.

Banner Information

The Banner Information page is used to create or edit a banner. It contains banner preferences and the HTML editor for banner content.

Banner Preferences

Field Description
No. Banner number. New banners may show AUTO before they are saved.
Name Banner name used in the banner shortcode. This field is required.
Start Date The date and time when the banner starts being displayed.
End Date The date and time when the banner stops being displayed.

Content

The Content section contains an HTML editor. Write or edit the banner markup in this area. The content can include text, images, buttons, links, Bootstrap components, or custom HTML. 

<div class="alert alert-info">
    <strong>Notice:</strong> Our new service is now available.
</div>

Create a Banner

  1. Open Admin > Site > Banner.
  2. Click Add Banner.
  3. Enter the banner name.
  4. Set the start date and end date.
  5. Write the banner HTML content in the editor.
  6. Click Save Page.
  7. Copy the banner shortcode and place it inside the page or layout where the banner should appear.

Edit a Banner

  1. Open the Banner List.
  2. Find the banner you want to edit.
  3. Click Setting.
  4. Update the banner name, date range, or HTML content.
  5. Click Save Page.
  6. Preview the page where the banner is used.

Delete a Banner

  1. Open the Banner List.
  2. Find the banner you want to remove.
  3. Click the delete button.
  4. Confirm the deletion if prompted.
Before deleting a banner, confirm that it is not currently used by any page, layout, header, footer, or campaign area.

Display Period

The Start Date and End Date control when the banner should be displayed. This is useful for announcements, seasonal promotions, event banners, and temporary notices.

Scenario Recommended Setting
Always visible banner Use a wide date range or leave date restrictions empty if supported by the system.
Promotion banner Set the Start Date and End Date according to the promotion period.
Event notice Set the banner to end after the event date.
Temporary maintenance notice Use a short date range and remove or disable the banner after maintenance is complete.

Common Use Cases

Use Case Recommended Action
Homepage hero banner Create a banner with hero HTML and place the shortcode in the top area or main page.
Promotion announcement Create a banner with a promotion message and active date range.
Site-wide notice Place the banner shortcode in a common layout section such as Top Area or Header area.
Product campaign Create a campaign banner and place it inside product detail or shop pages.
Reusable HTML block Use a banner when the same HTML block needs to appear in multiple pages.

Recommended Naming Rules

Use clear and predictable banner names because the banner name is used when calling the banner from HTML. 

Recommended:
MainTopBanner
HomeHeroBanner
PromotionSummer2026
FooterNotice
ShopCouponBanner

Avoid:
banner1
test
new banner
Main Top Banner!!!

Important Notes

  • The banner name must match the value used in the banner shortcode.
  • Banner content can contain HTML, so make sure the markup is valid.
  • Do not delete banners that are currently used by live pages.
  • Use clear names for banners that will be reused in multiple places.
  • Check the Start Date and End Date when the banner does not appear.
  • Preview the page after adding or editing banner content.

Troubleshooting

Problem Possible Cause Solution
Banner does not appear The banner name may not match the shortcode name, or the display period may not be active. Check the banner name, shortcode syntax, Start Date, and End Date.
Banner content looks broken The HTML markup may be incomplete or invalid. Check opening and closing tags in the HTML editor.
Old banner still appears The page may be cached, or the wrong banner is being called. Refresh the page, clear cache if needed, and confirm the shortcode name.
Banner is not active during the expected time The Start Date or End Date may be incorrect. Review date and time values carefully.
Delete action removes needed content The banner may still be used by another page. Search pages or layouts for the banner shortcode before deleting.

Best Practices

  • Use one banner for one clear purpose.
  • Use consistent naming rules such as HomeHeroBanner or FooterNotice.
  • Keep banner HTML clean and easy to edit.
  • Avoid placing very large scripts inside banner content.
  • Use active date ranges for temporary campaigns.
  • Test banners on desktop and mobile screens.
  • Keep a backup before making large HTML changes.
Banners are reusable HTML blocks. Manage banner names, display periods, and content carefully so that pages remain consistent and easy to maintain.