Virginia Tech®home

Dual CTA widget

My CTA title

This is a very long CTA description that I'm writing. I am trying to get it to wrap the max number of decks, so I can test it, again.

Jiangtao Cheng

Hokies and space

The Virginia Tech instruments placed on this nano-satellite will allow the researchers to understand how waves generated by weather systems in the lower atmosphere propagate and deliver energy and momentum into the mesosphere, lower thermosphere, and ionosphere.

This widget can be used within the One theme to replace the single, embedded Call To Action on home pages by adding it to the Featured Content drop zone at the top of the page, or in the body of any other page type.

Drag and drop a Container component into the desired drop zone

container component in page body
Container component in page body

Drag and drop two Call To Action components into the container

Two Call To Action components inside a Container component
Two Call To Action components inside a Container component

Click the Container component to view toolbar

Click the wrench (configure) icon

Container component toolbar, configure icon (wrench) first from left
Container component toolbar, configure icon (wrench) first from left

Copy the CSS class for the type of dual CTA you want into the CSS class field

  • There are two versions of the dual CTA, one with a separating gutter, one without
    • vt-dualCTA
    • vt-dualCTA-fullWidth

Click the checkmark in the top-right corner to save changes

Dual Call To Action Widget Container Configuration showing the vt-dualCTA class in the CSS Class field
Dual Call To Action Widget Container configuration showing the vt-dualCTA class in the CSS Class field

Click on the first Call To Action component and then click the wrench (configure) icon

In the Messages and Links tab:

  • Enter a title in the Title field; this can include limited HTML for formatting
    • <strong>, <em>, <i>, <b>, <br />
  • Enter a description in the Description field; this can include limited HTML for formatting
    • <strong>, <em>, <i>, <b>, <br />

In the Media and Presentation tab:

  • Set the Design pulldown to Popover

Click the checkmark in the top-right to save the changes

First Call To Action configuration, this one gets a title and description
First Call To Action configuration, this one gets a title and description
Media and Presentation settings for dual Call To Action showing the Popover design selected in the first pulldown
Media and Presentation settings for dual Call To Action showing the Popover design selected in the first pulldown

Click on the second Call To Action component and then click the wrench (configure) icon

In the Messages and Links tab:

  • Enter a title in the Title field; this can include limited HTML for formatting
    • <strong>, <em>, <i>, <b>, <br />

NOTE: The second Call To Action component does NOT have a description. If you add one the design will not work properly for all devices.

In the Media and Presentation tab:

  • Set the Design pulldown to Popover

Click the checkmark in the top-right to save the changes

Second Call To Action configuration, this one gets only a title
Second Call To Action configuration, this one gets only a title
Media and Presentation settings for dual Call To Action showing the Popover design selected in the first pulldown
Media and Presentation settings for dual Call To Action showing the Popover design selected in the first pulldown