The button widget is used to display links using the customized styles created in the ‘Button’ section of the UXi® Design Styles menu.


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

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.

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.


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.

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.

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 Examples