Web Designer+

Photo & Graphic Designer+

Page & Layout Designer 11

Designer Pro+

3D Maker 7

Widget Guide : Version 7

Other

Using Xara Designer Pro 7, Web Designer 7 Premium and Web Designer 7, 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 (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.

Embed a Website (Pro & Premium only)SkypeBBC 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 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.

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 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 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.

 

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.

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.

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 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 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..