Call to Action Banner

1. Module Location

The Call to Action Banner module is saved in the Design Manager, under Content.

Path: Manage → Content → Design Manager

Navigating to the module in Design Manager — Locate the module in Design Manager

2. How to Use the Module

Step 1 — Find the module

Click the + icon in the page editor to open Add modules, then search for the module name “Call to Action Banner.”

Searching for the module in Add modules — Search “Call to Action Banner” in the module picker

Step 2 — Add it to the page

Drag the module from the search results panel onto the desired section of the page.

Dragging the module onto the page — Drag the module onto the page canvas

Step 3 — Edit the content

Open the module's Content tab to edit the Eyebrow, Heading, Description, and the list of Buttons.

Content tab with eyebrow, heading, description and buttons fields — Content tab — Eyebrow, Heading, Description, and Buttons list

To update an individual button, hover over the item in the Buttons list and click the pencil icon that appears. Each button has three fields: Button Text, Button Link (supports external, content, file, email, blog, call-to-action, phone, WhatsApp, and payment links), and Primary Button (checkbox — uses the Primary Button style fields from the Style tab when checked, otherwise uses the Secondary Button style). Use the Previous / Next controls at the top to move between items. You can add up to 5 buttons (minimum 0).

Button editor with text, link and primary checkbox fields — Button editor — Button Text, Button Link, Primary Button

Step 4 — Customize the styling

Switch to the Styles tab to adjust the module's appearance. Styling is organized into three collapsible groups: Section Background, Typography, and Buttons.

Styles tab groups — Styles tab — three styling groups

Section Background

Set the Background Color, the Dot Pattern Color (used for the subtle radial-gradient dot overlay), and the Top / Bottom Spacing (in px, 0–200) around the section.

Typography

Control the font family, size, weight, and color for the Eyebrow, Heading, and Description (Body) text.

Buttons

Customize the Button Font, Primary Button Color (filled background), Primary Button Text Color, Secondary Button Color (used for the ghost button's border), Secondary Button Text Color, and the Corner Radius (px, 0–40). The Primary Button style applies to buttons with the Primary Button checkbox checked; the Secondary style applies to unchecked buttons.

3. Quick Reference

Add module: Search “Call to Action Banner” → drag onto page
Edit content: Content tab → Eyebrow / Heading / Description / Buttons list
Edit a single button: hover → pencil icon → Button Text / Button Link / Primary Button
Button limit: 0–5 items
Edit styling: Styles tab → Section Background / Typography / Buttons