After clicking the add widget icon and selecting Content widgets, you will be presented with the available widgets. Select the widget you want to add to begin customizing it.




Search


What It Does

The search widget will display a basic text input with a search button that shows a magnifying glass icon.  The results will display on a page using the 'default' layout.


Settings

The only option available for this widget is to display a custom headline.


Styles

All basic widget styles are available.


Form


What It Does

The form widget can display a variety of forms for things like newsletter sign-ups, contact forms, client testimonials, etc.  Because there is an entire dashboard section devoted to setting up forms, using the widget is pretty straight forward. Select Content > Form and select the following: 


  • Display Title to show the form's title
  • Title Size to determine what headline size to use
  • Title alignment to add custom alignment if needed
  • and lastly, Form to control what form displays.





Learn More About Forms »




Settings


Display Title:
Choose whether to display the form's title 

Title Font: Select which font style to use to display the title (Header, Sub-header, or body) 

Title Size: Select which font-size to use to display the title. (H1 - H6) 

Title Alignment: Select the text-alignment for the title. (Left, Center, Right) 

Select Form: Select which form to display.

Styles

All basic widget styles are available as well as specific sections for the Form Text and Form Inputs. 

Form Text: Select font size, background, margin, padding, and borders for the form labels and text. Form labels are styled in the 'Form Area' section and titles are styled in the 'Form Title' section. 

Form Inputs: Select font size, background, margin, padding, and borders for the form inputs.  


Address


What It Does

The address widget is a convenient way to display the client's company name, business hours, contact information, and location. To add the required information, click UXi® Settings > Company info from the dashboard menu. 


Company Category: Select a business vertical from the list. Adding this information helps search engines correctly identify the type of business, increasing overall SEO efforts.

Company Name: Displays the company's name as the title of the address widget. 

Address: Displays the company's address in the address widget. 

Phone: Displays the company's phone number in the address widget. 

Fax: Displays the company's fax number in the address widget. 

Email:  Displays the e-mail address as a link in the address widget. 

Offered Payment Options:  Displays any payment options like Visa, MasterCard, PayPal, etc in the address widget. *Note, these are not meant to represent payment types available on the website. 

Business Hours: Displays the company's hours of business for all seven days; highlighting the current day of the week. 

See screenshot below to view the widget display with all options.

​​​Settings

The widget includes settings to show the company name, phone number, fax, email address, map link, payment types, and business hours. The 'Make Tow Columns' option will move the business hours into a second column to the right of the address and contact information.



Styles

All basic widget styles are available.  



Breadcrumbs


What It Does

The breadcrumb widget shows users where they are on the website. For example, if a user was viewing a post titled "Open house on Thursday" that's listed in the "News" category, the breadcrumbs would look like this: Home > News > Open House on Thursday, with the option to go 'back' to the News section from a link.


 

Settings

The only setting available is an option to select the separator that displays between each breadcrumb item. 

Vertical Divider 
Home | News | Open House on Thursday 

Double Arrow 
Home » News » Open House on Thursday 

Single Arrow 
Home > News > Open House on Thursday 

Bullet 
HomeNews • Open House on Thursday


Styles

All basic widget styles are available.

Button

What It Does

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


Settings

Primary Text:

Enter text and select font size, mobile font size, and font for the top line of text of the button.


Secondary Text:

Enter text and select font size, mobile font size, and font for the bottom text of the button.


Icon:

Select an icon from the list and select it's alignment, size, and mobile size.


Button:

Enter a link and button style

Note: Secondary text is not required, if it is not entered, the button will display one line of text.


For links to pages on the same UXi site, enter only the page's slug, like so: /contact-us/ 


For links to other sites, include the full URL, like so: http://www.marketing360.com/contact-us/ 


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. 


Block Button: Make the button the entire width of it's container, regardless of it's text size. 


Link the button to an e-mail address: Simply add the following to the Link section: mailto:it@madwiremedia.com 


Include a custom subject in the email: Take it a step further and include: mailto:it@madwiremedia.com?subject=Thanks for the help 


Include custom text in the body of the email: include: mailto:it@madwiremedia.com?subject=Thanks for the help&body=I learned a lot about buttons today!


Styles

All styles for the button itself are added through the Widget Settings as outlined above; The basic widget styles menu will add styles to the widget's container.


Button Examples


Button Style: Blue (button-34) when aligned right or left:


Button Style: Blue (button-34) when aligned top:



Button Style: Orange (button-35) 

  Block Button: Yes

  Open Link in New Tab: Yes

  

  


Button Style: Orange (button-35) 

  Block Button: Yes

  Telephone Link: Yes

 

  


Button Style: Orange (button-35) 

  Block Button: Yes

  Email Link: Yes



Call to Action

What It Does

Under the Call TO ACTION SETTINGS tab you can create and style heading and paragraph text, link details, and image settings.




Settings


Call to Action Button Settings


Heading:

Enter Heading text and select Heading Position, Heading Alignment, and Header Font.


Paragraph:

Enter text that will go below the call to action button.


Link:

Enter a link.

Wrap Link Around Image and Heading to include the heading in the clickable area.

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

Choose Image. Either upload an image or select from the Media Library.

Select Image size, Image Style, and Image Alignment. You must select Use Image. Select Make Image Fill Container to fill the container holding the widget with the image.


Call to Action Button Settings


Enter Primary Text:

Enter Font Size, Mobile Font Size, and Font type (Under Select Font).


Enter Secondary Text:

Enter Font Size, Mobile Font Size, and Font type (Under Select Font).


Icon:

Select an icon from the list and select it's alignment, size, and mobile size.

Slect Button Style. You can add a class or classes to further style the button.

Choose button alignment.


Styles

All styles for the Call to Action are added through the Widget Settings as outlined above; The basic widget styles menu will add styles to the widget's container.


Menu

What It Does

Allows you to place a custom menu on your page with options for styling. The menu items are based on the settings from the Appearance tab on the Dashboard. For more information on Navigation and Menus click here.


  

Settings

Title:

Choose a title for your custom menu. Set options for Title Alignment, Select Menu, Menu Type and Text Alignment.



Styles

All basic widget styles are available.


Embed

coming soon!


Map

coming soon!


Navigation

coming soon!


Recent Post

coming soon!


Sitemap

coming soon!


Social

coming soon!


Testimonials

coming soon!


Text Area

coming soon!


Page Content

coming soon!


WYSIWYG Text Area

 coming soon!