Web Designer+

Photo & Graphic Designer+

Page & Layout Designer 11

Designer Pro+

3D Maker 7

Widget Guide : Version 8

Other

Using Xara Designer Pro X, Web Designer MX Premium and Web Designer MX, you can place a large assortment of useful, informative and fun widgets on your website, such as maps, news widgets, a Google search bar, clocks, event countdown widgets, daily quotes and jokes.

Here we show you how to add an Embed a website widget (Pro and Premium only), a Google map, a Skype button, a BBC news widget, a Reuters news widget, a custom Google search bar and a currency converter from Google Gadgets.

Find these widgets in the Other Widgets folder of the Page Elements section in the Designs Gallery.  

Embed a Website (Pro & Premium only)QR CodeGoogle MapSkypeBBC NewsReuters NewsGoogle Custom SearchGoogle Gadgets

Embed a Website (Pro & Premium only)

This widget is available in Designer Pro and Web Designer Premium only

The Embed a Website widget allows you to insert a frame on your web page that displays another website within it.
1

Drag the Embed a Website widget from the Other Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.
2

Embed a Website Widget opens in the Create New Widget: Embed a Website window, displaying instructions on how to use the widget.
3
In the URL box enter the URL address of the website you want to show embedded in your website (or copy it from your browser and paste).

Click the Generate Code button.

The HTML code for the widget is displayed in the box below.
4

Click Insert in the Create New Widget window.

The program displays a placeholder for the widget.

5

Click and drag the placeholder to the location on the web page where you want it to appear.

Resize the widget placeholder to the size you want.

You can do this either by:
  • Clicking the placeholder and dragging on its corners with the Selector Tool
  • Editing the widget dimensions in the widget code.
    Click the Website Properties icon in the standard toolbar and in the Web Properties dialog, click the Placeholder tab.
    Click the HTML code (body) button to display the widget placeholder code.
    Enter new values for the 'width' and 'height' parameters as either a percentage, e.g.,80% or in pixel units, e.g.,300px.
    Click OK then click Apply in the Web Properties dialog.

 
6
Click Preview to view your widget.

You can edit and update the widget contents at any time by double clicking on the placeholder.

QR Code

The QR Code widget allows you to either create your own QR Code from a line of text, whether that's a message or a web address, or relay the address of the web page on which it is placed. 
1
Drag the widget from the Other Widgets folder in the Page Elements section of the Design Gallery on to your web page document.  
2
Double-click on the placeholder to open the editing instructions.
 
3
Use the Text Tool to enter the message you want to encode as a QR code, or if you want the QR code to display the address of the host website, then leave the field blank.
4

 You can preview your QR Code at any time by clicking the Preview Page button. When you have finished editing the widget, go to 'File' > 'Save and Close' to save the widget. 
5
You can edit and update the widget contents at any time by double clicking on the placeholder. You can also resize the widget by clicking on the placeholder with the Selector Tool - then hold down your left mouse button on one of the selection handles and drag to resize the widget as required.

Google Map

It's easy to add a map of your location, or anywhere in the world, with the Google Map widget. Your website visitor will see your default location and then be able to click and drag the map around, and zoom in or out in Map, Satellite or Terrain mode.


View Larger Map
1

Drag the Google Map widget from the Other Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.

The Google Maps page opens in the Create New Widget: Google Maps window.

 

2

To set a default location for your Google map, do one of the following:

  • Type a location in the form of a town or postcode into the box at the top of the window and click the Search Maps button.
  • Click the Set Default Location link and type in your preferred location, then click the Save button below the box.

The map preview on the right of the Create New Widget window zooms in to the location you entered.

3

Click the Link icon to the upper right of the map.

Google Maps displays two boxes of code.

Do one of the following:

  • If you're happy with the map's size, click in the lower box (titled Paste HTML to embed in website) to select the code then copy it by pressing Ctrl + C on your keyboard.
  • If you would like to customize the map's size, click the Customize and Preview Embedded Map link. 
    The Google Maps Customize and Preview page opens in a separate window. 
    Click on the buttons to choose a map size or type in a width and height. 
    Adjust the default location using the arrows and zoom in/out buttons, if required. The preview pane updates to show your changes.
    Click and drag in the bottom box to select the HTML code and press Ctrl + C on your keyboard to copy it.
4

Click Insert in the Create New Widget window. 

The program displays a placeholder for the map. 

Click and drag the placeholder to the location on the web page where you want it to appear.

However, you cannot resize the placeholder by dragging on its selection handles, because making it smaller than its actual size will truncate it, and enlarging it will create excess surrounding white space.

To resize your map, double click the placeholder and follow steps 2 - 4. reimport it after specifying your preferred size in the Google Customize and Preview page.

The Google Maps code, however, automatically provides a View Larger Map link when the map is displayed on your web page. Your web site visitor can also click and drag the map around to view areas surrounding your default location, and can zoom in and out of the Google map.

Click Preview to view your Google map in action.

Skype

You can instantly add a Skype button to your web page, allowing your visitors to chat to you instantaneously.

Skype Me™!
1

Drag the Skype widget from the Other Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.

 

2

In the Create New Widget: Skype Button window, type in your Skype name and click the round button next to the button style you want.

3

Scroll to the bottom of the Create New Widget window and click in the Copy & Paste This Code box to select the code.

Click Insert in the Create New Widget window.

4

The program displays a placeholder for your Skype button. 

Click and drag the placeholder to the location on the web page where you want it to appear.

However you cannot resize the placeholder using the selection handles as this will only truncate the gadget (if you decrease it) or create empty white space to two sides of it (if you enlarge it).

Click Preview to view your gadget.

BBC News

There are many news-related widgets to keep you updated on the latest business, global and local events - below we give a step-by-step guide to inserting one of the most popular from BBC News.

1

Drag the News - BBC widget from the Other Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.

BBC News window, displaying a preview of the widget.

 

2

In the Display Settings section below the widget preview, type in the following:

  • A widget name
  • A width and height for your widget (Alternatively, you can hover the mouse pointer over the bottom right of the widget and click and drag to increase or decrease the widget's size)

Click a color if you would like to add a colored border to your widget.

3

In the Gadget Settings section below the widget preview, choose a topic from the Option Category drop-down list to display as an additional tab that the user can scroll to at the top of the widget.

Type in a title for the additional topic tab.

Type in a title for your widget.

Type in a gadget title. (This can be different from the display title, which will be the widget name displayed on your web page.)

Choose the number of tabs you would like displayed in your widget from the # of Entries drop-down list.

Choose whether to display a summary description of each link displayed in your gadget, and the length of the summary, from the Summary Length drop-down list.

 

4

Click the Preview Changes button to view your widget edits. 

When you're happy with the widget, click the Get The Code button.

The HTML code for the widget is displayed in the box below.

Click and drag in the box to select the code and press Ctrl + C on your keyboard to copy the code.

 

5

Click Insert in the Create New Widget window. 

The program displays a placeholder for your BBC News widget. 

Click and drag the placeholder to the location on the web page where you want it to appear.

However you cannot resize the placeholder using the selection handles as this will only truncate the widget (if you decrease it) or create empty white space to two sides of it (if you enlarge it).

To resize the widget, double click the placeholder and follow steps 2 - 4.  Reimport it specifying the size you want in the Display Settings.

Click Preview to view your widget.

Clicking on a news link takes you to the relevant page in the BBC News website.

 

Reuters News

There are many news-related widgets to keep you updated on the latest business, global and local events - below we give a step-by-step guide to inserting one of the most popular from Reuters.

1

Drag the Reuters widget from the Other Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.

The Reuters Widget page opens in the Create New Widget: Reuters Widgets window.

Scroll down to view a Latest News widget preview and a box displaying HTML code below it.

 

2

Click any other topic in the Pick a Widget section, or any Recommended Widgets.

The widget preview on the right of the Create New Widget window updates.

3

When you have chosen the widget you want, click in the Embed Code box below the preview widget to select the code and press Ctrl + C on your keyboard to copy the code.

Click Insert in the Create New Widget window.

The program displays a placeholder for your Reuters News widget. 

Click and drag the placeholder to the location on the web page where you want it to appear.

To resize the widget, click on the placeholder to select it and using the Select tool drag to increase the widget's width.

Click Preview to view your widget.

Clicking on a news link takes you to the relevant page in the Reuters website.

 

Google Custom Search

Google Custom Search allows you to create a custom search engine so that your website users get relevant results from the websites and web pages that you choose. You host the search engine and display its results on your website. You can also customize the search bar's display to coordinate it with your website's look and feel.

You must have a Google Account to use Google Custom Search.

The example Google Custom Search bar below searches www.xara.com for any search query you type in.
Loading
1
Drag the Google Custom Search widget from the Other Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.
2
Click Sign In in the top right of the Create New Widget: Google Custom Search window. Then when prompted enter your Google account log in details and click Sign In. Or click the Create an Account Now link if you don't already have a Google account.
3
Click Create a Custom Search Engine.
4
The Google Custom Search setup wizard opens in the Create New Widget: Google Custom Search window. In step 1: Set up Your Google Search, enter a name and description for your search engine, and choose a language in the Describe Your Search Engine section.
5
In the Define Your Search Engine section, you can click the 'Learn more about formatting' link before adding any URLs to the 'Sites to Search' list. This tells you how to add website information to the 'Sites to Search' list to carry out the following search types:
  • Search the entire website - e.g., add www.mysite.com/* to include all the pages on www.mysite.com
  • Search an individual page on the site - e.g., add www.mysite.com/mypage.html to include the mypage.html page on www.mysite.com
  • Search parts of a website - e.g., add www.mysite.com/*about* to include only files on www.mysite.com that have about in their name
  • Search an entire domain - e.g., add *.mydomain.com to include an entire domain.
The example shown below searches all the pages in www.xara.com.
6
In the Select an Edition section, make sure Standard Edition is selected if you want to use a free Google Custom Search. A standard edition custom search engine will also display Google ads.

Click the Terms of Service checkbox then click Next.
7
In the Choose or Customize a style section of step 2: Try it out, click a display style for your custom search engine.

In the example below, we've chosen the 'Shiny' display style. 
8
Click the Customize button below each display style to change individual aspects of the display.

Four tabs are displayed, allow you to change:

  • Global settings - the font, and the search bar border color and background color
  • Search controls - the outline color of the search term input box, the outline and background color of the Search button, search results refinement tab unselected and selected color
  • Results - the text color for the search results titles, URLs and snippets; the border and background color of the results box; URL or domain name only display
  • Promotions - the text color for the promotion titles, URLs and snippets; the border and background color of the promotions box.

A preview is shown at the bottom of the window as you edit display settings. The example below shows a customized border color for the search input box and the Search button.

Note: You can further customize your custom search engine display, and configure other settings such as keywords and sites to search, using its Control Panel, which is available once you have built the search engine. See step 11 for more information.

Click Next.
9
In the Custom Search element code section of step 3: Get the code, click Insert at the bottom of the Create New Widget window.

The code is copied and inserted into your document and the program displays a placeholder for your Google Custom Search widget.

 

10

Click and drag the placeholder to the location on the web page where you want it to appear.

To resize the width of the search bar widget, click on the widget placeholder to select it and, using the Selector tool, drag to increase or decrease the widget's width. To define the size of the area that the search results will be displayed in, drag the placeholder from the top or bottom to increase its depth.

Click Preview to view your widget. Type a search term in the search bar.

The example below shows the results returned by searching the website www.xara.com for the search term 'offer'.

Note: By default a Google Custom Search displays 10 items of search results, with additional results accessible via a navigation menu at the bottom of the 10th result. We recommend you make the widget placeholder deep enough to make sure the navigation menu is displayed. When you preview the widget, if you can't see the menu, close the preview and increase the placeholder depth.

 

11
Now that you've built your Google Custom Search engine, you can return to your Google account and refine its display.

In the program, double click the placeholder, and in the Create New Widget: Google Custom Search window, click Sign In to sign in to Google. Then click the 'Manage your existing search engines' link.
12
All Google Custom Search engines that you have previously created are displayed. 

Click the 'control panel' link for the search engine that you want to edit. 
13
The Control Panel opens in the Basics section, where you can edit the search engine's name and description, and add search engine keywords.

Use the menu on the left to navigate to other sections in the Control Panel, including:
  • Sites, where you can define a filter to add new and edit existing websites and exclude websites
  • Refinements, where you can enable advanced search operators
  • Promotions, which can be triggered by a defined search query
  • Look and Feel, where you can change the search engine's bar and results layout on your page and edit the display settings you set earlier when you created the search engine
  • Get Code, which gives you easy access to the search engine's code whenever you make a change
  • Make Money, where you associate your search engine with a Google AdSense account so that you make money when users click an ad they see in your search results
  • Statistics, where you can view Google Analytics site search reporting.
There are many more settings you can configure for your search engine from the Control Panel - scroll down the menu on the left to view them all, and to access resources such as Google documentation, forums and blogs. You can also access all your other custom search engines from the Select Search Engine drop-down list in the upper left of the Control Panel. 

When you have finished making changes in the Control Panel, either click the Save & Get Code button (if you have only made changes to one Control Panel section) or the Save button then the Get Code menu item on the left (for edits to multiple Control Panel sections).

Google Gadgets

Google offers a whole host of gadgets catering for a range of everyday uses such as a calendar and currency calculator, to entertainment such as games, jokes, daily quotes, TV and restaurant guides, and recipe suggestions.

Here we show you how to add a currency calculator to your web page. The process is the same for all other Google gadgets.

1

Drag the Google Gadgets widget from the Other Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.

2

Google Gadgets For Your Webpage opens in the Create New Widget: Google Gadgets window, displaying thumbnails for a wide selection of Google gadgets.

3

Click on any gadget to see a larger image.

Click the Add To Your Webpage button to see a preview.

4

In the Display Settings section below the widget preview, type in the following:

  • A widget title
  • A width and height for your widget (Alternatively, you can hover the mouse pointer over the bottom right of the widget and click and drag to increase or decrease the widget's size)

Click a color if you would like to add a colored border to your widget.

 

5

Click the Preview Changes button to view your widget edits. 

When you're happy with the widget, click the Get The Code button.

The HTML code for the widget is displayed in the box below.

Click Insert in the Create New Widget window.

The program displays a placeholder for your Google gadget. 

 

 

6

Click and drag the placeholder to the location on the web page where you want it to appear.

However you cannot resize the placeholder using the selection handles as this will only truncate the gadget (if you decrease it) or create empty white space to two sides of it (if you enlarge it).

To resize the gadget, double click the placeholder and follow steps 2 - 5. Reimport it specifying the size you want in the Display Settings.

Click Preview to view your gadget.

About Xara | Press | News | Logos & Graphics | Resellers | Jobs at Xara | Contact Xara | Imprint | Privacy & Cookie Statement | EULA

Copyright © 2024 XARA GmbH. Xara® is a registered Trademark of Xara GmbH..