Add a New Widget to a Layout - UXi® Websites

Adding a new widget to a UXi layout is quite simple.  However, there are a couple questions you should ask before getting started.

Question 1: What layout does this page or post use?

A: Find out by looking in any of these three places.

1. On the Pages or Posts dashboard, the layout for each page or post is listed in the far-right column.
2. On the Edit Page or Edit Post dashboard, the layout is displayed at the top-right corner of the page, in the Layout Selection section.
3. When viewing a page or post on the front-end editor, click the top icon in the list (circled in screenshot below) to view the layout, as well as edit it's rows or styles.
   

Question 2: What other pages / posts use the same layout?

A: The Pages and Posts lists mentioned above are the best tools for comparing page and post layouts.

Note: This is important because when you edit a layout, all other pages or posts that use it will also be updated.

If changes are needed on a layout that's shared by other pages or posts, then you will need to create a new layout.

How to Add a New Widget to a Page Layout

You will want to open the front-end editor within your website dashboard. For this example, the layout used by all blog posts will be edited. As noted above, the changes made to this layout will affect all posts. 

Part 1: Add a new row

Each widget added needs a row to be displayed in.  First, find the area that the new widget will be added to and add a new row, in many cases, this will be a nested row. Click the icon to add a new row and select how many columns the new row should contain.  In this case, we want the new widget to take up the entire sidebar, so 100% will be selected.

1. Click the Add Nested Row icon (circled in screenshot below).
   
2. Select Add Child Row. 
   
3. Click New Row to expand the menu. Choose a width to determine how many columns the new row should contain. For example, if you want the widget to take up the entire width of the row, select the 100% option. 
   
4. Click Save.

Part 2: Add the New Widget

Hover your cursor over the new empty row that you created. In the top right corner of the new column, click the + icon to add a new widget.  From that list, select the type of widget to add.

Once the widget is placed, hover your cursor over the widget, click on the "pencil" icon, and select Edit Settings from the dropdown menu to add the required settings for the widget. Each widget has a different option set that you can modify.