Banner Element(with Background Image)

The Banner with Background Image is one of the most visually striking elements in your app. It’s designed to grab attention, great for promotions, offers, or important updates. You can add a background image, customize text styles, layout, button action, and more.

---

Content Tab – Add Your Banner Info

This is where you set up each banner item:

🔽 Sections:

• Background Image: Upload your main banner visual (required)

• Title: Bold headline (e.g., “Year-End Sale”)

• Subtitle: Optional upper text (e.g., “Up to 90%”)

• Description: Supporting details or message

• Button Text: CTA (e.g., “Shop Now”)

• Button Action: Enter the URL to navigate when the button is tapped

You can create multiple banners and manage them using the Banner Item List (add, delete, reorder, toggle visibility).

---

Settings Tab – Design & Customization

The banner comes with detailed configuration options grouped into different sections:

📐 Layout

• Choose Layout:

  • Split 1, Split 2, Split 3: Image and text side-by-side in various arrangements

  • Stack Top, Center, Bottom: Stack content vertically

• Alignment: Align content left, center, or right

🖱️ Scroll Behaviour

• Scroll Direction: Switch between horizontal or vertical banners

• Indicator Style: Multiple styles to show scrolling progress

• Indicator Alignment: Align indicator (left, center, right)

• Indicator Position: Show indicator on banner or under banner

🎨 Design Settings

• Ratio: Choose aspect ratio (e.g., 4:3)

• Corner Radius: Adjust image roundness — square, rounded, or pill

• Apply Overlay: Optionally apply a dark overlay to enhance text readability

🔤 Title Style

• Font Size (e.g., 16px)

• Font Weight (e.g., Bold – 700)

• Color – HEX input (e.g., #FFFFFF)

• Opacity – Adjust transparency (0 to 100%)

✍️ Subtitle Style

• Font Size (e.g., 10px)

• Font Weight (e.g., SemiBold – 600)

• Color and Opacity

📝 Description Style

• Same customization options as subtitle — ideal for body text

🔘 Button Style

• Choose from:

  • Filled

  • Outlined

  • Text

• Customize:

  • Margin (Top/Bottom/Left/Right)

  • Button color, shape, and padding via theme

👁️ Visibility

Control when and where this banner is shown:

• Platform: Android, iOS, or All

• Device: Mobile or Tablet/iPad

• User: Guest, Logged-in, or All

---

📱 How It Looks

Below are examples of how the banner appears in the app:

Clean layout with center stacked content and horizontal scroll

Split layout with style split 1 and verticle scroll

---

✅ Summary

Tab	What You Can Customize
Content	Image, title, subtitle, description, button text
Layout	Position, alignment, scroll indicators
Text Styles	Font size, weight, color, opacity
Button Style	Design type, margins, link
Visibility	User/device/platform targeting
Multiple Banners	Manage, reorder, or hide individual items