Welcome to the Xara Widget Guide for Designer Pro X (v8) Web Designer MX (v8) and Web Designer MX Premium (v8)

This Widget Guide applies to version 8 only. If you are using earlier versions of Xtreme, Xtreme Pro, Designer Pro, Photo & Graphic Designer or Web Designer, please select your version from the button bar above:

• Xtreme 5 & Web Designer 5 if you are using Xtreme 5, Xtreme Pro 5, Web Designer 5 or Photo & Graphic Designer 6.
• Designer Pro 6 and Web Designer 6 if you are using Designer Pro 6 or Web Designer 6.
• Designer Pro 7, Web Designer 7 and Web Designer 7 Premium if you are using Designer Pro 7, Web Designer 7 or Web Designer 7 Premium.

On this page we have some brief info on the new widgets in version 8, followed by a general introduction to adding widgets to a page.  Click the buttons at the top of this page and you'll find information on specific types of widgets.

'Widgets' is a collective term used to describe a third party service which can be inserted into your web page (another popular term for the same service is 'gadgets'). Widgets are now easier to use than ever before, allowing you to choose from hundreds of useful, fun, entertaining and informative widgets which you can add to your site by simply dragging them on to your web page within Web Designer or Designer Pro.

What's New in Version 8

• New Chart widgets - create interactive charts and graphs for your website.  
• New content and slideshow widgets.
• New QR code widgets.
• Resizable widgets - the majority of the photo and content slideshow widgets are now resizable along with the chart widgets, the embed a website, and QR code widget.

As part of the improvements to the Designs Gallery, the folder structure has been updated to improve the organization of sub-folders. The widgets are now located under Page Elements and divided in to the following folders:

Photo Slideshows – Page elements > Photos > Photo Slideshows (widgets)  - including a wide range of animated photo slideshow widgets.  (Designer Pro and Web Designer Premium only)
Content Slideshows - Page elements > Content Slideshows (widgets) - including a wide range of animated content slideshow widgets (Designer Pro and Web Designer Premium only)
Charts - Page elements > Charts (widgets) - interactive charts and graphs for your website (Designer Pro and Web Designer Premium only)
Forms - Page elements > Forms (widgets) - ready-made and customizable forms including JotForm, Wufoo and Widgetbox.
E-commerce - Page elements > E-commerce (widgets) - including PayPal, eBay To Go, Amazon shopping cart and storefronts. (Designer Pro and Web Designer Premium only)
Audio / Video - Page elements > Audio / Video (widgets) – including YouTube videos, Flickr and Picasa slideshows and web albums
Social Networking - Page elements > Social Networking (widgets) - including Facebook badges, Twitter and AddThis widgets.
Other Widgets  - Page elements > Other Widgets - a range of indispensible widgets ranging from Embed a website widget, QR Code widget, Google maps, news widgets from Reuters, BBC and the New York Times, search tools, event countdowns, clocks and a currency converter.

And you’re not just limited to the huge selection of widgets in the Designs Gallery - we support many more widget types available on the Internet – just copy the widget’s code and paste it on to your web page.

Note: Many widgets won’t work properly if they are used on pop-up layers or layers that appear with an animated transition effect. Some simple widgets will work fine in these circumstances, but many of the more complex widgets, like the slideshow widgets, will not. Results will vary with different widgets and even with different browsers.

How to Use Widgets in Xara Designer Pro X, Web Designer MX (v8) or Web Designer MX (v8) Premium

It's a simple process to insert your favorite video from YouTube into your own web page, or display the latest news from Reuters or the BBC. Likewise, it's equally easy to insert a slideshow widget that displays an animated transition between each photo or a pie chart widget.

How to insert a widget

1. Open the Designs Gallery by clicking it in the Galleries bar.
2. Click the Page Elements folder.
3. Find the widget category folder you want and click to open it.
4. Click on the widget and drag it to your web page. One of two things happens:
• For some widgets, such as the slideshow widgets, the program displays a placeholder on the page – just double click on the placeholder to start editing your widget. A new document opens. Make your changes in this new document then save and close it to return to the original widget document. Then you can preview your widget by clicking the Preview button in the toolbar.
• Other widgets display a Create New Widget window when you drag them on to a page. You can customize and preview your widget in this window. When you’re done, click Insert and the program displays a placeholder for the widget. Click the Preview button to see it in action.

Editing widgets

To edit the widget double-click the widget placeholder at any time from within the program. Alternatively, single click on the widget to open the link dialog box and then click Edit. One of two things happens. 

• A second document opens, which you can edit, update and save your widget contents.
• You are returned to the widget provider’s website in the Create New Widget window, where you can update your widget contents quickly and easily.

Resizing widgets

To resize a widget, click on it to display its selection handles. Click and hold down your left mouse button on one of the selection handles and drag to resize the widget as required.

The widget preview will automatically regenerate displaying the resized widget.

Note: not all widgets are resizeable.

It’s that easy!