Other

Using Designer Pro 6 and Web Designer 6, 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 a Google map, a Skype button, a BBC news widget, a Reuters news widget and a currency converter from Google Gadgets.

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 Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

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. 

Designer Pro 6 or Web Designer 6 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, 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 Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

 

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

Designer Pro 6 or Web Designer 6 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 Designer Pro 6 or Web Designer 6 web page.

Google: Add This Gadget To Your Webpage opens in the Create New Widget: 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. 

Designer Pro 6 or Web Designer 6 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, 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 Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

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.

Designer Pro 6 or Web Designer 6 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 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 Designer Pro 6 or Web Designer 6 web page.

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.

Designer Pro 6 or Web Designer 6 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, reimport it specifying the size you want in the Display Settings.

Click Preview to view your gadget.