Call to Action

Use Call to Action to display a heading, body text, and a styled button together as a single structured prompt for site visitors.

Usage

The Call to Action module renders a heading, supporting text, and a button in a single self-contained unit. The heading and text are positioned alongside or above the button depending on the selected layout, and all three elements share a common background and padding container. The embedded button supports the same icon, color, gradient, and border settings as the standalone Button module.

Use Call to Action for promotional banners, section endings, and landing page prompts where a headline and short message need to appear directly next to or above a primary action button. It suits layouts where the heading, text, and button share a background color or border and should move together as one unit.

Module Settings

The Call to Action module settings control the heading and body text content, module layout and visual styling, and the embedded button behavior.

General Tab

The General tab sets the heading text, heading tag, and body text for the module.

Heading Default: Ready to find out more?; Supports: Field Connections

The main heading displayed at the top of the module.

Heading Tag Default: h3

Sets the HTML tag used to render the heading.

• h1: Renders the heading as an <h1> element.
• h2: Renders the heading as an <h2> element.
• h3: Renders the heading as an <h3> element.
• h4: Renders the heading as an <h4> element.
• h5: Renders the heading as an <h5> element.
• h6: Renders the heading as an <h6> element.

Text Default: Drop us a line today for a free quote!; Supports: Field Connections

The body text displayed below the heading. Supports formatted text using the WordPress editor.

Style Tab

The Style tab controls the module layout, background, border, spacing, and the color and typography settings for the heading and body text.

Layout Default: Inline

Determines how the text content and button are arranged within the module.

• Inline: Places the text content and button side by side in a horizontal row.
• Stacked: Stacks the text content above the button in a vertical column.

Alignment

Alignment (Stacked Only) Default: Center

Sets the horizontal alignment of all content within the module. This field appears when Layout is set to Stacked.

Background Color Supports: Field Connections

Sets the background color of the module content area.

Border settings

Border settings control border style, width, color, radius, and related responsive border controls where available.

Padding Default: 0; Supports: Responsive, Link Values

Sets the inner spacing around the module content area. Accepts px, em, or % units.

Heading

The Heading section controls the color and typography of the heading.

Heading Settings

Heading Color Supports: Field Connections

Sets the text color of the module heading.

Heading Typography Supports: Responsive

The font settings for the module heading.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Text

The Text section controls the color and typography of the body text.

Text Settings

Text Color Supports: Field Connections

Sets the text color of the body text.

Text Typography Supports: Responsive

The font settings for the body text.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Button Tab

The Button tab sets the button label, link, icon, padding, text colors, background, and border.

Button Text Default: Click Here; Supports: Field Connections

Sets the label displayed inside the button.

Button Link Supports: Field Connections

Sets the URL, target, and link attributes for the button.

Link settings

Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.

Button Icon

The Button Icon section adds an optional icon to the button and controls its position and visibility.

Button Icon Settings

Button Icon Supports: Field Connections

Adds an optional icon to the button. Selecting an icon reveals the icon position and visibility controls.

DuoTone Primary Color (DuoTone Icons Only) Supports: Field Connections

Sets the primary color of the selected DuoTone icon.

DuoTone Secondary Color (DuoTone Icons Only) Supports: Field Connections

Sets the secondary color of the selected DuoTone icon.

Button Icon Position (Icon Only) Default: Before Text

Places the icon before or after the button text when an icon is selected.

• Before Text: Displays the icon to the left of the button label.
• After Text: Displays the icon to the right of the button label.

Button Icon Visibility (Icon Only) Default: Always Visible

Controls whether the icon is always shown or appears only on hover when an icon is selected.

• Always Visible: The icon displays at all times.
• Fade In On Hover: The icon is hidden by default and fades in when the button is hovered.

Button Padding Supports: Responsive, Link Values

Sets the inner spacing around the button label and icon.

Button Text

The Button Text section controls the colors and typography used for the button label.

Button Text Settings

Button Text Color Supports: Field Connections

Sets the text color of the button label.

Button Text Hover Color Supports: Field Connections

Sets the text color of the button label on hover.

Button Typography Supports: Responsive

The font settings for the button label.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Button Background

The Button Background section controls the button fill style, color, gradients, and hover animation.

Button Background Settings

Button Background Style Default: Flat

Selects the background rendering mode for the button.

• Flat: Uses a solid background color with an optional hover color and background animation.
• Auto Gradient: Automatically generates a gradient from the button background color.
• Advanced Gradient: Uses gradient pickers for full control over gradient colors, type, angle, and position.

Flat settings

Button Background Color Supports: Field Connections

Sets the button background color when Button Background Style is Flat.

Button Background Hover Color Supports: Field Connections

Sets the background color on hover when Button Background Style is Flat.

Button Background Animation Default: Disabled

Enables or disables the background color transition on hover when Button Background Style is Flat.

• Disabled: No transition between default and hover background colors.
• Enabled: Smoothly animates between the default and hover background colors.

Auto Gradient settings

Button Background Color Supports: Field Connections

Sets the button background color used to generate the gradient when Button Background Style is Auto Gradient.

Button Background Hover Color Supports: Field Connections

Sets the background color on hover used to generate the hover gradient when Button Background Style is Auto Gradient.

Advanced Gradient settings

Background Gradient (Advanced Gradient Only)

Configures the default gradient colors, type, angle, and position when Button Background Style is set to Advanced Gradient.

Background Hover Gradient (Advanced Gradient Only)

Configures the hover gradient colors, type, angle, and position when Button Background Style is set to Advanced Gradient.

Button Border

The Button Border section controls the border style, color, width, radius, and shadow for the button.

Button Border Settings

Button Border Supports: Responsive

Configures the button border style, color, width, radius, and box shadow.

Button Border Hover Color Supports: Field Connections

Sets the border color used when the button is hovered.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.