The Jumbotron widget can be used to create an engaging widget containing a headline, a sub-heading, paragraph, and button that links users to external URLs or pages within the UXi site.


Jumbotron Settings


Heading Settings

Heading : Enter a main headline to display in the widget.

Enable Multiple Headings : Select this option to allow the widget to cycle through multiple headlines.

Show Headings : Select this option to display / hide the settings for multiple headlines.

Heading 2, 3, 4, and 5 : If needed, enter multiple headlines here.

Heading Font : Select a font style to display the heading(s) in the widget.

Text Align : Select a text alignment for the headings.

Mobile Text Align : Select a text alignment for the headings when viewed on a mobile device.

Heading Animation : If multiple headings are used, select an animation style to cycle through them.

  • Typed : This animation style creates some new options in the widget. The original heading becomes the Static Portion of the Heading. The rest of the headings become the Animation Portion of the Heading. Each animated heading will be 'typed' by a cursor, then sequentially backspaced.
  • Fade : This animation style will fade in each heading, then fade out to display the next one. 
  • Slide : This animation style will slide in each heading in from the right, then slide out to the left to display the next one.

Loop : Select this option to continuously loop through all the headlines entered.

Duration : Set the amount of time each slide should display. This is set in milliseconds, so 5000 = 5 seconds.

Display Cursor : Select this option to display a cursor while each headline is typed. (This option is only available with the Typed Heading Animation)

Cursor Blink : Select this option to make the cursor blink while typing the headings. (This option is only available with the Typed Heading Animation)


Sub-Heading Settings

Sub-Heading : Enter a secondary headline to display in the widget.

Sub-Heading Font : Select a font style to display the sub-heading in the widget.

Text Align : Select a text alignment for the sub-headings.

Mobile Text Align : Select a text alignment for the sub-headings when viewed on a mobile device.


Paragraph Settings

Paragraph : Enter additional text to display in the widget. 

Paragraph Font : Select a font style to display the heading(s) in the widget.

Text Align : Select a text alignment for the paragraph.

Mobile Text Align : Select a text alignment for the paragraph when viewed on a mobile device.


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


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.