The Banner with Background Color is a clean, lightweight version of the image banner. Instead of using a background image, you use a solid color β with the option to add an image within the banner content.
Itβs ideal for highlighting offers, updates, or info blocks that donβt need a full-width image background.
Add Your Banner Info
You can add all the same content as the image banner:
Title (e.g., βSpecial Dealβ)
Subtitle (optional)
Description (e.g., βFree shipping on orders over $50β)
Button Text and Action URL
β NEW: You can add an image inside the banner (e.g., a product or icon) β separate from the background.
Design & Customization
Layout
Choose Layout: Split and Stack layouts are available (like image banner)
β Image Position: Since the image is added as content, you can place it:
Left
Right
Top
Bottom
Scroll Behaviour
Same options as the image banner:
Vertical / Horizontal scrolling
Indicator dots and their alignment
π¨ Design Settings
All the text customization options are available for:
Title Style
Subtitle Style
Description Style
Button Style
Margins for spacing
ποΈ Visibility Options
Same as all Twinr native elements:
Platform: Android, iOS, or All
Device: Mobile or Tablet/iPad
User: Guest, Logged-in, or All
β Whatβs Different from Image Banner?
Background Image
β Yes
β No
Background Color
β No
β Yes
Content Image (inside)
β No
β Yes
Overlay Option
β Yes
β No
Image Position (Content)
β No
β Yes
π± How It Looks
Hereβs an example of a banner with background color and content image on the right side: