Banner Element(with Background Color)

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.

---

Content Tab – 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.

---

Settings Tab – 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

✅ 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

👁️ Visibility Options

Same as all Twinr native elements:

• Platform: Android, iOS, or All

• Device: Mobile or Tablet/iPad

• User: Guest, Logged-in, or All

---

📱 How It Looks

Here’s an example of a banner with background color and content image on the right side:

---

✅ Summary

Tab	What You Can Do
Content	Add title, description, CTA, and an inline image
Layout	Choose content position and scrolling behavior
Design	Style text, buttons, spacing
Visibility	Show to specific users, platforms, or devices