Web Designer+

Photo & Graphic Designer+

Page & Layout Designer 11

Designer Pro+

3D Maker 7

Widget Guide : Version 10

Other

You can place a large assortment of useful and informative widgets on your website, such as maps, banner ads, custom searches, tables and RSS feeds.

Here we show you how to add an Embed a website widget (Designer Pro and Web Designer Premium only), a Google map, and a Skype button.

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

Google AdSenseTable widgetEmbed a Website (Pro & Premium only)Google MapQR CodeSkypeGoogle Custom Search

Google AdSense

Google AdSense is a free, simple way to earn money by displaying targeted ads next to your online content. With AdSense, you can show relevant and engaging ads to your site visitors and even customize the look and feel of ads to match your website. There are three different sizes to choose from enabling you to locate the ads either as a banner, a rectangle, or else as a wide 'skyscraper' ad. 
1
Drag the an AdSense widget from the Other Widgets section of the Page Elements & Widgets folder in the Designs Gallery on to your web page document.
2
The AdSense Widget opens in the Create New Widget window, displaying instructions on how to use the widget. You'll need to have a Google account which you will have to sign into before you can start displaying ad content on your site. 
3
Once you've signed into your Google account - follow the instructions from Google to create AdSense ads on your webpages.

Table widget

The table widget allows you to create interactive mouseover tables using CSV's - comma separated values, to populate the rows and columns of the table. You can match the table's color to the main theme color of your webpage and you can also sort the table contents too. 
1
Drag the Table widget from the Other Widgets section of the Page Elements & Widgets folder in the Designs
Gallery on to your web page document.
2
Double click on the placeholder to edit the widget, or else single click and choose "Edit". A new tab opens with instructions on how to edit the widget.
3
You will need to switch to the Text tool to edit the widget. Follow the instructions on the right panel and enter your values using the Text tool in the left panel. 
4
When you have finished editing the widget you can review your changes by clicking on the Preview button. 
5
When you're all done Ctrl+S to save your changes or else click on the Save icon. The instruction tab will close.
6
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.

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.

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.

Note these instructions refer to the new style of Google maps UI. You should be prompted to switch to the new style Google map if you are still seeing the old style (without the settings cog button referred to in step 3 below).  


View Larger Map
1

Drag the Google Map widget from the Other Widgets section of the Page Elements and Widgets 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 location for your Google map, choose from the following options:

  • Type a location in the form of a town or postcode into the box at the top of the window and click the Search icon
  • Click on the button labelled Directions and then enter a start address or postcode if you require a map displaying directions.

The map preview zooms in to the location you entered. You can adjust the map to the desired centre and zoom level. 

 

3

Click on the cog icon located on the bottom right side of the window. Then choose Share and embed map and then Embed map

Copy the HTML code provided by selecting the code and then pressing Ctrl + C on your keyboard.


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 and resize the placeholder by dragging on its selection handles.

Click Preview to view your Google map in action.

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.

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.

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