Expanding CTA

Overview

The Expanding CTA module creates an attention-grabbing call-to-action that expands with an animation when it scrolls into the viewport. It features a title, subtitle, body text, optional media (icon or image), primary and secondary buttons, an optional countdown timer (with fixed-date or evergreen modes), and a page overlay effect. Perfect for promotional banners, limited-time offers, and high-conversion landing page sections.

Content Settings

Content

Title  (Text Field)

The main heading text for the CTA.

• Default: Unlock Your Full Potential

Title Tag  (Dropdown)

Choose the HTML heading tag for the title.

• Available options: H1, H2, H3, H4, H5, H6
• Default: H2

Subtitle  (Text Field)

A secondary heading below the title.

• Default: Limited Time Offer

Body Text  (Rich Text)

The main body content of the CTA. Supports rich text formatting.

• Default: Take advantage of this exclusive deal before it’s gone.

Media

Media Type  (Dropdown)

Type of media to display alongside the content.

• Available options: None, Icon, Image
• Default: None

Icon  (Icon Picker)

Pick an icon to display.

• Only appears when Media Type is set to Icon.

Media Position  (Dropdown)

Where the media appears relative to the content.

• Available options: Above, Left, Right
• Default: Above
• Only appears when Media Type is not None.

Image  (File Upload)

Upload or select an image.

• Only appears when Media Type is set to Image.

Buttons

Primary Button Text  (Text Field)

Text for the primary CTA button.

• Default: Get Started Now

Primary Button URL  (Text Field)

Link URL for the primary button.

• Default: #

Open in New Tab  (Toggle)

Open the primary button link in a new tab.

• Default: Off

Use Icon  (Toggle)

Add an icon to the primary button.

• Default: Off

Icon  (Icon Picker)

Choose an icon for the primary button.

• Only appears when Use Icon is enabled for the primary button.

Icon Placement  (Dropdown)

Place the icon before or after the button text.

• Available options: Left, Right
• Default: Right
• Only appears when Use Icon is enabled for the primary button.

Show Icon on Hover Only  (Toggle)

Only show the icon when hovering the button.

• Default: Off
• Only appears when Use Icon is enabled for the primary button.

Show Secondary Button  (Toggle)

Display a secondary button alongside the primary.

• Default: Off

Secondary Button Text  (Text Field)

Text for the secondary button.

• Default: Learn More
• Only appears when Show Secondary Button is enabled.

Secondary Button URL  (Text Field)

Link URL for the secondary button.

• Default: #
• Only appears when Show Secondary Button is enabled.

Open in New Tab (Secondary)  (Toggle)

Open the secondary button link in a new tab.

• Default: Off
• Only appears when Show Secondary Button is enabled.

Use Icon (Secondary)  (Toggle)

Add an icon to the secondary button.

• Default: Off
• Only appears when Show Secondary Button is enabled.

Icon (Secondary)  (Icon Picker)

Choose an icon for the secondary button.

• Only appears when both Show Secondary Button and Use Icon (Secondary) are enabled.

Icon Placement (Secondary)  (Dropdown)

Place the icon before or after the secondary button text.

• Available options: Left, Right
• Default: Right
• Only appears when both Show Secondary Button and Use Icon (Secondary) are enabled.

Show Icon on Hover Only (Secondary)  (Toggle)

Only show the icon when hovering the secondary button.

• Default: Off
• Only appears when both Show Secondary Button and Use Icon (Secondary) are enabled.

Animation

Trigger Mode  (Dropdown)

How the expanding animation is triggered.

• Available options: Scroll into Viewport
• Default: Scroll into Viewport

Expand Scale  (Slider)

The scale factor when expanded (1.0 = no change, larger values make the CTA grow more).

• Range: 1.0 to 1.5
• Default: 1.1

Animation Duration (ms)  (Slider)

Duration of the expand/collapse animation in milliseconds.

• Range: 200 to 1200 (in ms)
• Default: 600

Animation Easing  (Dropdown)

The easing curve for the animation.

• Available options: Ease, Ease In, Ease Out, Ease In Out
• Default: Ease

Overlay & Page Behavior

Show Overlay on Expand  (Toggle)

Dim the page background when the CTA is expanded, drawing full attention to the CTA.

• Default: Off

Overlay Color  (Color Picker)

Background color of the overlay.

• Default: Semi-transparent black (rgba 0,0,0,0.7)
• Only appears when Show Overlay on Expand is enabled.

Hide Site Header on Expand  (Toggle)

Hide the site header when the CTA is expanded.

• Default: Off
• Only appears when Show Overlay on Expand is enabled.

Hide Back-to-Top on Expand  (Toggle)

Hide the back-to-top button when expanded.

• Default: Off
• Only appears when Show Overlay on Expand is enabled.

Disable Page Scroll on Expand  (Toggle)

Prevent page scrolling when the CTA is expanded (fullscreen mode).

• Default: Off
• Only appears when Show Overlay on Expand is enabled.

Countdown Timer

Show Countdown Timer  (Toggle)

Display a countdown timer in the CTA to create urgency.

• Default: Off

Countdown Mode  (Dropdown)

Fixed counts down to a specific date. Evergreen starts a fresh countdown for each visitor.

• Available options: Fixed Date, Evergreen
• Default: Fixed Date
• Only appears when Show Countdown Timer is enabled.

Target Date  (Date & Time Picker)

The date and time to count down to.

• Only appears when Countdown Mode is set to Fixed Date.

Duration (hours)  (Slider)

Countdown duration in hours for each visitor.

• Range: 1 to 720 (in hours, i.e. up to 30 days)
• Default: 24
• Only appears when Countdown Mode is set to Evergreen.

Layout  (Dropdown)

Display countdown items inline (side by side) or stacked (vertically).

• Available options: Inline, Stacked
• Default: Inline
• Only appears when Show Countdown Timer is enabled.

Show Days  (Toggle)

Show or hide the days unit in the countdown.

• Default: On
• Only appears when Show Countdown Timer is enabled.

Show Hours  (Toggle)

Show or hide the hours unit in the countdown.

• Default: On
• Only appears when Show Countdown Timer is enabled.

Show Minutes  (Toggle)

Show or hide the minutes unit in the countdown.

• Default: On
• Only appears when Show Countdown Timer is enabled.

Show Seconds  (Toggle)

Show or hide the seconds unit in the countdown.

• Default: On
• Only appears when Show Countdown Timer is enabled.

Separator Style  (Dropdown)

The character displayed between countdown units.

• Available options: : (Colon), . (Dot), – (Dash), None
• Default: : (Colon)
• Only appears when Show Countdown Timer is enabled.

On Expired  (Dropdown)

What happens when the countdown reaches zero.

• Available options: Hide CTA, Show Expired Message, Redirect to URL
• Default: Hide CTA
• Only appears when Show Countdown Timer is enabled.

Expired Message  (Rich Text)

Message to display when the countdown expires. Supports rich text formatting.

• Default: This offer has expired.
• Only appears when On Expired is set to Show Expired Message.

Redirect URL  (Text Field)

URL to redirect to when the countdown expires.

• Only appears when On Expired is set to Redirect to URL.

Link

Standard Divi link options for adding a URL to the module.

Background

Standard Divi background options including solid color, gradient, image, and video backgrounds.

Design Settings

Expanding CTA

Content Alignment  (Dropdown)

Align all content within the CTA.

• Available options: Left, Center, Right
• Default: Center

Expanding CTA (continued)

Background, border, and box shadow options for the CTA container.

Icon & Image Design

Icon Size  (Slider)

Set the size of the icon.

• Range: 10 to 200 (in px)
• Default: 40px

Icon Color  (Color Picker)

Set the color of the icon.

• Default: Black (#000000)

Image Width  (Slider)

Set the width of the media image.

• Range: 0 to 1000 (in px or %)

Image Alignment  (Dropdown)

Align the image within the media wrapper.

• Available options: Left, Center, Right
• Default: Center
• Only appears when Media Position is set to Above.

Icon & Image Design (continued)

Spacing options for the icon, plus border and box shadow options for the image.

Title Design

Font styling (font family, weight, size, color, letter spacing, line height, text alignment) and spacing options for the title.

Subtitle Design

Font styling and spacing options for the subtitle.

Body Design

Font styling and spacing options for the body text.

Button Design

Button Style (Primary)  (Dropdown)

Visual style of the primary button.

• Available options: Solid, Outline, Ghost, Text Link
• Default: Solid
• Shown under the Primary tab.

Hover Effect (Primary)  (Dropdown)

Hover animation for the primary button.

• Available options: None, Slide, Grow, Shrink, Pulse
• Default: None
• Shown under the Primary tab.

Button Style (Secondary)  (Dropdown)

Visual style of the secondary button.

• Available options: Solid, Outline, Ghost, Text Link
• Default: Outline
• Shown under the Secondary tab.

Hover Effect (Secondary)  (Dropdown)

Hover animation for the secondary button.

• Available options: None, Slide, Grow, Shrink, Pulse
• Default: None
• Shown under the Secondary tab.

Button Design (continued)

Each button tab (Primary / Secondary) includes full font styling, spacing, background, border, and box shadow options.

Expired Message Design

Font styling, spacing, and border options for the expired message text.

Countdown Number Design

Font styling options for the countdown numbers (e.g., size, color, weight).

Countdown Label Design

Font styling options for the countdown labels (Days, Hours, Minutes, Seconds).

Countdown Separator Design

Font styling and margin options for the separator characters between countdown units.

Countdown Item Design

Background Color  (Color Picker)

Set the background color for countdown items.

• Default: Light gray (rgba 0,0,0,0.05)

Countdown Item Design (continued)

Spacing and border options for individual countdown item boxes.

Built-in Style Options

Standard Divi style groups including Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation.

Advanced Settings

• HTML Attributes — Add custom data attributes to the module.
• Custom CSS — Write custom CSS targeting specific parts: Container, Title, Subtitle, Body, Media Wrapper, Primary Button, Secondary Button, Button Wrapper, Countdown, Countdown Item, Overlay, and Expired Message.
• HTML — Add custom HTML before or after the module output.
• Conditions — Set conditions for when this module should display.
• Interactions — Configure click, hover, or scroll-based interactions.
• Visibility — Show or hide this module on desktop, tablet, or phone.
• Transition — Customize hover transition duration and style.
• Disabled On — Disable the module on specific devices.
• Overflow — Control how content that overflows the module boundary is handled.
• Z Index — Set the stacking order of the module relative to other elements.
• Scroll Effects — Add parallax or scroll-triggered animation effects.
• Position — Control the module’s positioning (relative, absolute, fixed, sticky).

Tips & Best Practices

• Pair the expanding animation with the overlay and “Disable Page Scroll” options to create a fullscreen, attention-locking CTA experience that stops visitors in their tracks.
• Use the Evergreen countdown mode for personalized urgency — each visitor sees their own unique countdown starting from when they first visit the page.
• Set the “On Expired” action to “Show Expired Message” to gracefully handle users who arrive after a promotion ends, rather than leaving an empty space.
• For a clean design, use the Outline or Ghost button style for the secondary button to create visual hierarchy between the primary and secondary actions.
• Adjust the Expand Scale to a subtle value like 1.05–1.1 for a professional look, or increase it to 1.3+ for a more dramatic attention-grabbing effect.