The Call to Action widget is used to display a headline, image, and button to link users to different pages.


Call To Action Settings


Heading Settings


Heading : Enter the headline to display.


Heading Position : Select where to display the heading

  • Above Image : Display the headline above the image
  • Below Image : Display the headline below the image
  • Over Image On Top : Display the headline in front of the selected image, aligned to the top.
  • Over Image On Bottom : Display the headline in front of the selected image, aligned to the bottom.

These very basic Call to Action widgets below illustrate the different headline position options.




Heading Alignment : Select the text alignment for the headline.


Header Font : Select a font style from the UXi Front End Editor to use to display the headline.

 

Paragraph : Enter additional text to display.


Page Link : Select a page within the site to link users to.


Custom Link : Use this option to link users off-site by entering the full URL of the page or website.
Adding a link here will overwrite the Page Link option above.


Wrap Link Around Image and Heading : Use this option to make the entire widget clickable. When this option is not selected, only the button will be clickable.


Open Link In New Window : Open the link in a new window/tab. Use this for any off-site links to keep users from completely leaving the site.


Link a telephone : Allow the button to dial a phone number if the user is on a mobile device.
If this option is selected, enter ONLY a phone number with no parenthesis or dashes. IE: 9706637635 instead of (970) 663-7635.



Image Settings

Use Image : Select this option to display an image in the widget.


Choose Image : Upload or select an image from the media library to display.


Select Image Size : Select one of the image sizes set on UXi General Settings > Media.


Image Style : Select one of the image styles.

  • None : Display the image with no additional styles
  • Rounded : Display the image with rounded corners
  • Circle : Display the image with a circular border radius. This option works best on square images.
  • Thumbnail : Display the image using the Thumbnail styles: a subtle white outline and grey border.


Image Alignment : If an image and image size is used that does not fill the full width of the widget, select an option here to display the image along the left or right edge of the widget, center it, or rely on the text-alignment settings with the inherit option.


Make Image Fill Container : Use this option to force the selected image to fill the full-width of the widget.



Button Settings


Primary & Secondary Text Settings

Primary Text : Enter text to display in the button. The primary text should be used to display the most important text in the button.

Secondary Text : Optionally, Enter another line of text to display below the primary text in the button.


Font Size : Set a custom pixel size for the text displayed in the button.

Mobile Font Size : Set a custom pixel size for the text of the button when viewed from a mobile device.

Select Font : Select a font style from the UXi Front End Editor to use to display the headline.


Icon Settings

Icon : Select an icon from the list to display in the button.

Alignment : Select an alignment for the icon in relation to the text.

Size : Select a custom pixel size for the icon displayed in the button.

Mobile Size : Select a custom pixel size for the icon when viewed on a mobile device.


Button Settings

Add Class / Classes : Use this option to add additional custom CSS classes to the button. Styles for the custom CSS class are applied via the Custom CSS dashboard.

Style : Select a button style set in the Buttons section of the UXi Front End Editor.

Padding Y : Set custom padding for the left & right of the button

Padding X : Set custom padding for the top & bottom of the button.

Button Alignment : Set a value here to align the button within the widget.
  • Inherit : Use the text alignment set in the widget styles.
  • Left : Align the button to the left edge of the widget.
  • Right : Align the button to the right edge of the widget.
  • Center : Center the button in the middle of the widget.

Use Block Button? : Make the button fill the full width of the widget.

Use Mobile Block Button? : Make the button fill the full width of the widget while viewed on a mobile device.