Tool Panel

Call To Action Widget

Call To Action Widget

The Call To Action Widget displays a centered headline, brief description, and a prominent button. Use this widget to encourage visitors to take a specific action such as signing up, learning more, or making a purchase.

Common Tasks

Adding the Widget to a Page

  1. Navigate to the page in the Contensive page editor.
  2. Click the widget tool to open the widget panel.
  3. Find the Call To Action Widget in the Design Blocks category.
  4. Drag the widget onto the page at the desired location.
  5. The widget will appear with default settings ready to configure.

Editing Widget Content

  1. Click the edit icon on the Call To Action Widget.
  2. Enter a heading in the Headline field.
  3. Enter supporting text in the Brief field using the WYSIWYG editor.

Configuring the Button

  1. Click the edit icon on the widget.
  2. Enter a label in the Button Text field (e.g., "Learn More", "Sign Up").
  3. Enter the destination URL in the Link field.
  4. Adjust the Button Style to change the button appearance (default: "btn btn-primary").

Styling the Widget

  • Open the advanced editor to access the Styles tab.
  • Set padding (top, right, bottom, left) to control spacing.
  • Choose a Theme Style to apply a predefined look.
  • Set a Background Image on the Background tab.
  • Enable As Full Bleed for edge-to-edge rendering.
  • Set a specific Height if needed.

Removing the Widget

  • Click the edit icon on the widget and open the advanced editor.
  • Set the Active field to "No" on the Control Info tab to hide it, or delete the record to remove it permanently.

Edit Dialog Fields

Field Description
Name Internal name for this widget
Headline The main heading text
Brief Body content displayed below the headline (HTML)
Sort Order Controls the display order when multiple widgets are on the page
Button Text Label for the call-to-action button
Link URL the button links to
Button Style CSS class for the button (default: "btn btn-primary")

Advanced Edit Fields

Field Tab Description
Pad Top Styles Add top padding to the widget
Pad Right Styles Add right padding to the widget
Pad Bottom Styles Add bottom padding to the widget
Pad Left Styles Add left padding to the widget
As Full Bleed Styles Include margins for content
Height Styles Set a specific height with units
Theme Style Styles Select a layout wrapper class from Design Block Themes
Background Image Background Set a background image for the widget