Widgets Home Photo & Content Slideshows Charts Forms E-commerce Audio / Video Social networking Other

Photo & Content Slideshows

Xara Web Designer and Designer Pro include Photo and Content Slideshow widgets, which offer a range of text and photo animation Widgets that can help to make your site more interactive and dynamic.

Find the Photo & Content Slideshows widgets in the Content Catalog under Components > Image Resources > Photo Hovers or Photo Slideshows & Galleries.

Hover Widget 4

Hover Widget 4 displays a single image which when moused over slides up a transparent panel containing text linked to a web address. The widget is resizable and allows customization of transition time, opacity and slide direction. You can also have the widget match the main theme color of your website.

More information coming soon.

Hover Widget 2

Hover Widget 2 allows you to display a single image which when moused over displays a transparent panel containing text linked to a web address. The widget is resizable and allows customization of transition time and opacity. You can also have the widget match the main theme color of your website.

More information coming soon.

Hover Widget 3

Hover Widget 3 allows you to present a single image which when moused over slides away to display a panel containing text linked to a web address. The widget is resizable and allows customization of transition time and slide direction. You can also have the widget match the main theme color of your website.

Import Hover Widget 3 from the Content Catalog.

When you drop the widget into your web page document the placeholder image is displayed. Double click the placeholder to open the widget and view the editing instructions.

Drag an image onto the placeholder to replace it with one of your own. The Fill Tool handles appear. Drag these to increase or reduce the size of the image or rotate it in the frame. Click and drag on the image to move it around in the frame.

Now use the Text tool to add your own message to the text panel. You can also change the font and font size. Switch to the Selector Tool and click on the panel to display the link options which will allow you to link through to a web address.

Looking at the editing instruction panel you will see that the widget allows you to match its color to the website's main theme color. You can also change the transition's duration, as well as the direction from which the main image slides to reveal the text box. Choose from one of the 8 options and use the Text Tool to enter numeric values into the check boxes.

When you have finished editing the widget, save and close the document.

Return to your website document and click Preview in the toolbar to view your widget.
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 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.

Nivo Slider

Nivo slider allows you to create a slideshow with captions as well as the ablility to choose from up to 16 different transitions between slides.

Import the Nivo Slideshow widget from the Content Catalog.

The placeholder is displayed in your web page document. Double click the placeholder to edit the widget. The program displays a new document which contains widget editing instructions and placeholder images. Drag and drop your own images from Windows Explorer to replace the placeholder images. You can also enter some caption text using the Text tool.

When you drop your own images over the placeholder pictures the Fill tool handles appear, allowing you to scale and reposition your image within the frame. Additionally the widget editing instructions give you some further options to control the image display by selecting a transition and changing the auto scroll delay.

Alternatively if you have lots of images to add, you can replace them all in one operation.

Drag and drop a selection of multiple images onto the first placeholder image and if you're importing more images than the placeholder has pages for - the program displays a warning.

Clicking Duplicate Page will create a new page for every image you're bringing in to the gallery.

Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.

When you have finished editing the widget, save and close the document.

Return to your website document and click Preview in the toolbar to view the finished slideshow.
You can edit and update the widget contents at any time by double clicking on the placeholder.

The widget preview will automatically regenerate displaying the resized widget.

All Effects Slideshow

All Effects Slideshow displays multiple slides with a different transition effect each time. You can access a particular slide in the sequence using the round navigation buttons at the bottom.

These navigation buttons give access to the first 31 slides in the slideshow, although the All Effects Slideshow widget supports as many images as you want.

Import the All Effects Slideshow widget from the Content Catalog.

A placeholder is displayed.

Double click to edit the placeholder.

The program displays a new document which contains widget editing instructions and five 'page' templates for each slide in the slideshow.

Alternatively if you have lots of slide images to add, you can replace all the images in one operation.

Drag and drop a selection of multiple images onto the first slide.

The program displays a message warning you that you're importing more images than current slides.

Click Duplicate Page to create a new slide for every image you're bringing in (Note: The first 5 images of your selection replace the 5 template images. The remainder of your selected images are automatically added as new slides, with one image per slide.)

Or click Add New Photos to add all selected images to the document. The program stacks these images on top of each other so that you can move them around or add to existing slides.

You can also add more slides one by one by right clicking on the gray pasteboard in the program and choosing Duplicate Page. You can then replace the duplicated image.

Note: If you add more than one image to a slide in the program, only one image (the original one) will be visible when the slideshow is displayed in a browser.

To add a URL or email address to any of the slide images, click the image then click the Link Properties icon in the standard toolbar.

In the Link tab of the Web Properties dialog, click the Link to Web or Email Address radio button and type the URL or email address of the link you want to apply then click OK.

If you want less than 5 slides in your slideshow, right click the page(s) you want to delete in the Page & Layer Gallery and choose Delete (or select the page(s) and click the Delete button).

When you have finished editing all the slides, save and close the document.

Return to your website document and click Preview in the toolbar to view your slideshow.
You can edit and update the widget contents at any time by double clicking on the placeholder.

To resize a widget, close the edit view and click on the widget 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.

Sliding Slideshow

The Sliding Slideshow widget allows you to scroll through multiple images with a slide-on effect. Square numbered navigation buttons at the bottom give access to a particular slide in the first 17 images of the sequence.

Import the Sliding Slideshow widget from the Content Catalog.

A placeholder is displayed.

Double click to edit the placeholder.

The program displays a new document which contains widget editing instructions and five 'page' templates for each slide in the slideshow.

Alternatively if you have lots of slide images to add, you can replace all the images in one operation.

Drag and drop a selection of multiple images onto the first slide.

The program displays a message warning you that you're importing more images than current slides.

Click Duplicate Page to create a new slide for every image you're bringing in (Note: The first 5 images of your selection replace the 5 template images. The remainder of your selected images are automatically added as new slides, with one image per slide.)

Or click Add New Photos to add all selected images to the document. The program stacks these images on top of each other so that you can move them around or add to existing slides.

You can also add more slides one by one by right clicking on the gray pasteboard in the program and choosing Duplicate Page. You can then replace the duplicated image.

Note: If you add more than one image to a slide, only one image (the original one) will be visible when the slideshow is displayed in a browser.

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 the resized widget.

To add an image caption to an image, click the image then click the Website Properties icon in the standard toolbar.

In the Image tab of the Web Properties dialog, type the caption you want to apply in the Image Caption (Alt Text) box then click OK.

If you want less than 5 slides in your slideshow, right click the page(s) you want to delete in the Page & Layer Gallery and choose Delete (or select the page(s) and click the Delete button).

Fade Slideshow

The Fade Slideshow widget allows you to display clickable thumbnails above a main image. You can select a thumbnail, navigate through the display with a mouse click, or leave the slideshow to auto scroll.

The slideshow comes in 4 versions with the thumbnail images displayed either at the top, bottom or each side of a main image.

Import the Fade Slideshow widget from the Content Catalog.

When you drop your own images over the placeholder pictures the Fill tool handles appear, allowing you to scale and reposition your image within the frame.

Alternatively if you have lots of images to add, you can replace them all in one operation.

Drag and drop a selection of multiple images onto the first placeholder image.

If you drop more than 6 photos, new pages will be added for you if you choose the Duplicate Page option when prompted.

Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.

The widget preview will automatically regenerate displaying the resized widget.

Tile Slideshow 1

The Tile Slideshow 1 widget allows you to display multiple slides with captions, which gradually appear in squares or 'tiles'. Scroll through the slides in sequence with next and previous buttons that are displayed when you pass the mouse cursor over a slide, or click on the small squares beneath the slide show to go to a particular slide.

Moving the mouse pointer over the slideshow pauses it at the current image.

These navigation squares give access to the first 32 slides in the slideshow, although the Tile Slideshow 1 widgets support as many images as you want.

Import the Tile Effect Slideshow 1 widget from the Content Catalog.

A placeholder is displayed.

Double click to edit the placeholder.

The program displays a new document which contains widget editing instructions and five 'page' templates for each slide in the slideshow.

Alternatively if you have lots of slide images to add, you can replace all the images in one operation.

Drag and drop a selection of multiple images onto the first slide.

The program displays a message warning you that you're importing more images than current slides.

Click Duplicate Page to create a new slide for every image you're bringing in (Note: The first 5 images of your selection replace the 5 template images. The remainder of your selected images are automatically added to new slides, with one image per slide.)

Or click Add New Photos to add all selected images to the document. The program stacks these images on top of each other on the first slide.

You can also add more slides one by one by right clicking on the gray pasteboard in the program and choosing Duplicate Page. You can then replace the duplicated image.

Note: If you add more than one image to a slide in Designer Pro/Web Designer MX Premium, only one image (the original one) will be visible when the slideshow is displayed in a browser.

In the Text Tool, click the caption on each slide to edit it.

Note: Any edits you make to the 'prev' and 'next' button text will not be displayed in a browser, so these cannot be changed.

If you want less than 5 slides in your slideshow, right click the page(s) you want to delete in the Page & Layer Gallery and choose Delete (or select the page(s) and click the Delete button).

The widget preview will automatically regenerate displaying the resized widget.

Gallery Slideshow

The Gallery Slideshow widget allows you to display thumbnail images in a grid. Click on an image to expand it and use the direction keys to navigate through the gallery.

You can choose from either 3, 5, or 8 column versions.

Import the Gallery Slideshow widget from the Content Catalog.

When you drop your own images over the placeholder pictures the Fill tool handles appear, allowing you to scale and reposition your image within the frame. Additionally the widget editing instructions give you a couple of further options to control the image display, allowing a drop-shadow to be added behind the popup image or to dim the background while a popup is open.

Alternatively if you have lots of images to add, you can replace them all in one operation.

Drag and drop a selection of multiple images onto the first placeholder image.

If you drop more than 8 photos, new pages will be added for you if you choose the Duplicate Page option when prompted.

Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.

When you have finished editing the widget, save and close the document.

Return to your website document and click Preview in the toolbar to view your Gallery slideshow.
You can edit and update the widget contents at any time by double clicking on the placeholder.

The widget preview will automatically regenerate displaying the resized widget.

Tile Slideshow 2

Tile Slideshow 2 is the same as Tile Effect Slideshow 1, with multiple slides gradually appearing in squares or 'tiles'. But the viewer cannot control slide display as this widget doesn't have previous/next buttons, or navigational squares at the bottom.

Moving the mouse pointer over the slideshow pauses it at the current image.

To create a Tile Slideshow 2, follow the steps in Tile Slideshow 2.

Easy Accordion

The Easy Accordion widget allows you to display text and images as a maximum of 5 tabbed slides. When you click a tab, the slide contents are displayed, while all other slide tabs remain visible for easy selection.

Import the Easy Accordion widget from the Content Catalog.

A placeholder is displayed.

Double click to edit the placeholder.

The program displays a new document which contains widget editing instructions and five 'page' templates for each slide in the slideshow (maximum of 5).

If you want less than 5 slides in your slideshow, right click the page(s) you want to delete in the Page & Layer Gallery and choose Delete (or select the page(s) and click the Delete button).

In the Text Tool, click the vertical 'Title Text' on the left of each slide (with a gray background) to edit the slide title.

Note: The 'Title Text' with a white background is not editable. This will update to show each slide's title when the widget is viewed in a browser.

Using the Text Tool, edit the heading text, main text and URL text of the slide.
To change the URL itself, select the URL text with either the Text Tool or Selector Tool then click Link Properties in the standard toolbar.

In the Link tab of the Web Properties dialog, click the Link to Web or Email Address radio button and type the URL or email address of the link you want to apply then click OK.

When you have finished editing all the slides, save and close the document.

Note: The EasyAccordion widget is always displayed as a standard size and you cannot resize it by increasing the page or placeholder size in the program. You also cannot resize the components within the slides, such as title, heading and main text font and size, the image frame and title bar.

Return to your website document and click Preview in the toolbar to view your slideshow.

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

Accordian 1

The Accordian 1 widget allows you to present text and images side by side in a sliding accordion-style presentation for collections of up to 6 slides.

You can choose from 12 transition effects and the widget comes in 2 different varieties.

Import the Accordion 1 widget from the Content Catalog.

The placeholder is displayed in your web page document. Double click the placeholder to edit the widget. The program displays a new document which contains widget editing instructions and 6 placeholder images. Drag and drop your own images from Windows Explorer to replace the placeholder images.

When you drop your own images over the placeholder pictures the Fill tool handles appear, allowing you to scale and reposition your image within the frame. You can also use the text tool to edit the content of each slide although you cannot change the style of the text.

Additionally the widget editing instructions give you some further options to control the image display by selecting a transition and changing the auto scroll delay.

Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images. The widget will display up to six images although you can have less if you wish.

The widget preview will automatically regenerate displaying the resized widget.

Zoom Gallery 1

Zoom Gallery 1 has the same appearance as Standard Zoom, but also allows your website visitors to choose from one of four thumbnail images to zoom in on.

This widget works best with portrait images. Two instances of each image are created when exporting the widget. The image shown within the zoom window is exported at 768px * 1024px.

Import the Zoom Gallery 1 widget from the Content Catalog.

A placeholder is displayed.

Double click to edit the placeholder.

The program displays a new document which contains widget editing instructions and four 'page' templates showing a main image and four thumbnail images beneath each.

To replace the template images with your own photos, click and drag a photo from your Windows Explorer on top of the existing image.

The Fill Tool handles appear. Drag these to increase or reduce the size of the image or rotate it in the frame. Click and drag on the image to move it around in the frame. You'll notice that the thumbnail images displaying this image also update on the other template pages.

Note: You can also drag individual images on to a thumbnail to replace the main image on another page. The program asks you if you want to add the image to the document or replace the existing photo. If you choose to replace the photo, the thumbnail and its main image on another page are both replaced.

Alternatively you can replace all four images in one operation.

Drag and drop four selected images onto the first slide.

The program displays a message warning you that you're importing more images than there are unreplaced photos on the current page.

Click Duplicate Page to replace the existing images with your four selected new photos.

Note: If you add more than one image to a page, only one image (the original one) per page will be visible when the widget is displayed in a browser. The same applies if you create more than four pages: only the images on the first four pages will be visible.

In the Text Tool, click the Zoom Viewer label to edit it.

The same Zoom Viewer label is displayed for all four images.

When you have finished editing the widget, save and close the document.

Return to your website document and click Preview in the toolbar to view and zoom in on your image.

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

Zoom Gallery 2

Zoom Gallery 2 is the same as Zoom Gallery 1, allowing your website visitors to choose from one of four thumbnail images to zoom in on. The only difference is that Zoom Gallery 2 covers the image area that is not currently being zoomed in on with a dark transparent tint (and so has the same appearance as Tint Zoom 1 and 2).

This widget works best with portrait images. Two instances of each image are created when exporting the widget. The image shown within the zoom window is exported at 768px * 1024px.

To create a Zoom Gallery 2, follow the steps in Zoom Gallery 1.

Tint Zoom Gallery

Tint Zoom Gallery has the same appearance as Tint Zoom 1 and 2, but also allows your website visitors to choose from a gallery of thumbnail images to zoom in on.

Import the Tint Zoom Gallery widget from the Content Catalog.

A placeholder is displayed.

Double click to edit the placeholder.

Designer Pro/Web Designer Premium displays a new document which contains widget editing instructions and 20 'page' templates for each image in the gallery. Each page also shows 20 thumbnail images representing the 20 images.

To replace the template images with your own photos, click and drag a photo from your Windows Explorer on top of the existing image.

Alternatively you can replace all 20 images in one operation.

In your Windows Explorer, select 20 images then drag and drop them onto the first slide.

The program replaces the existing images with your 20 new selected images.

The thumbnail images, however, are locked and not selectable. When you update a large image, its corresponding thumbnail is automatically updated.

Note: If you have more than 20 images in your gallery, the thumbnail section will be scrollable to show additional thumbnails when you preview the widget.

Click the Fill Tool then click an image to display the fill handles. Drag these to increase or reduce the size of the image or rotate it in the frame. Click and drag on the image to move it around in the frame. You'll notice that the thumbnail images displaying this image also update on the other template pages.

If you want less than 20 images in your gallery, right click the page(s) you want to delete in the Page & Layer Gallery and choose Delete Current Page (or select the page(s) by clicking on them in the Page & Layer Gallery and clicking the Delete button).

You can also add more images by right clicking on the gray pasteboard in the program and choosing Duplicate Page, or clicking Duplicate in the Page & Layer Gallery.

The duplicated page is added after the currently selected page.

You can then drag a new image from your Windows Explorer on to the duplicated new page.

To change the order of the images, click and drag an image to the desired position in the Page & Layer Gallery. The image/page numbering will adjust automatically.

Although the thumbnails do not appear to update, they will be displayed in the correct order when you preview the widget.

In the Text Tool, click the text 'Zoom Viewer label' in the instructions text (page one) to edit the label. The label text automatically updates on the first image page (page two).

The Zoom Viewer label is displayed at the top of the zoom window when the mouse pointer is passed over the image. The same label is displayed for all 20 images.

You can edit the tooltip that is displayed when the mouse pointer moves over each thumbnail image (by default it displays 'image1, image2, etc').

Click the large image on the left of a page and choose the Image Properties icon from the Web Properties flyout toolbar. The Image tab of the Web Properties dialog is displayed.

Type the text for the image's tooltip in the Image Caption box and click OK.

Repeat on each page for each image.

We recommend that you optimize your images to reduce the file size. Choose Optimize all JPEGs from the Utilities menu then click the Optimize button.

When you have finished editing the widget, save and close the document to return to your website document.

Click Preview in the toolbar to view your gallery.

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

Cycle 1

The widgets allow you to display multiple photos. All are resizable and support a wide range of transitions. You can choose to match the color of a widget to that of your website, and the slideshow pauses as you hover over an image. It is also possible to add an object on top of the widget so for example, you could place a logo or some promotional text on the widget.

Additionally, the widgets allow you to swipe between images when viewing on iOS and Android devices.
Cycle 1 displayed below, also lets you to change the opacity of the widget's text panel.

Import the Cycle 1 widget from the Content Catalog.

A placeholder is displayed in your web document page. Double click the placeholder to edit the widget - you'll see some editing instructions and 5 placeholder images. Drag and drop your own images from Windows Explorer to replace the placeholder images.

When you drop your own images over the placeholder pictures the Fill tool handles appear, allowing you to scale and reposition your image within the frame.

If you have lots of images to add, you can replace them all in one operation. Drag and drop a selection of multiple images onto the first placeholder image. If you drop more than 5 photos, new pages will be added for you if you choose the Duplicate Page option when prompted.

Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.

Use the Text Tool to edit the content of each slide. You can also change fonts and resize the text if you wish.
It is possible to change the opacity of the text panel by changing the value in the editing instructions that are displayed with the widget - enter a value between 0.0 and 1.0. The lower the value the more transparent are the text and panel.

Change the URL each image links to by clicking on the image and choosing "Change" from the popup menu. This will bring up the Web Properties menu dialog allowing you enter an address in the "Link to Web or Email Address" box.

If you insert your widget into a website template, it's easy to have the widget match the theme colors of the template. In the widget instructions simply change the "0" value to a "1" in the "Match Color" field and the widget will use the template's theme color 1.

As well as allowing you to match the template color theme, the widget also lets you adjust the pause between slides as well as the transition type and duration. There are a wide variety of transitions to choose from - see the widget instructions for more details.

When you have finished editing the widget, save and close (Ctl+S) the widget to return to your website document.

Click Preview in the toolbar to view your widget - you'll notice that if you hover over the image it will pause the slideshow - and also that you can navigate manually through the slideshow by using the numbered butttons at the top right of the widget.

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

Cycle 2

Cycle 2 widget allows you to display multiple photos. All are resizable and support a wide range of transitions. You can choose to match the color of a widget to that of your website, and the slideshow pauses as you hover over an image.

It is also possible to add an object on top of the widget so for example, you could place a logo or some promotional text on the widget - see the example below which has a rosette positioned on the main placeholder image.

Additionally, the widget allows you to swipe between images when viewing on iOS and Android devices.

Import the Cycle 2 widget from the Content Catalog.

When you drop your own images over the placeholder pictures the Fill tool handles appear, allowing you to scale and reposition your image within the frame.

Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.

Use the Text Tool to edit the content of each slide. You can also change fonts and resize the text if you wish.

Cycle 3

Cycle 3 widget allows you to display multiple photos. All are resizable and support a wide range of transitions. You can choose to match the color of a widget to that of your website, and the slideshow pauses as you hover over an image.

It is also possible to add an object on top of the widget so for example, you could place a logo or some promotional text on the widget.

Additionally, the widget allows you to swipe between images when viewing on iOS and Android devices.

Follow the instructions for Cycle 2 (see above) to create a slideshow for this widget.

Cycle 4

Cycle 4 widget allows you to display multiple photos. All are resizable and support a wide range of transitions. You can choose to match the color of a widget to that of your website, and the slideshow pauses as you hover over an image.

It is also possible to add an object on top of the widget so for example, you could place a logo or some promotional text on the widget.

Additionally, the widget allows you to swipe between images when viewing on iOS and Android devices.

Follow the instructions for Cycle 2 (see above) to create a slideshow for this widget.

Featured 1

The Featured 1 widget displays up to 4 images that fade from one to the next in a 'slideshow' style. You can also display each image by clicking on its titled and captioned tab on the left of the 'slideshow'. You can add a link to the bottom panel of each 'slide' image.

Three instances of the widget are provided, sized at 600 pixels wide, 740 pixels wide and 800 pixels wide. We used the 800 pixel version in the following steps.

Import the Featured Content 1 widget from the Content Catalog.

A placeholder is displayed.

Double click to edit the placeholder.

Designer Pro/Web Designer Premium displays a new document which contains widget editing instructions and 4 'page' templates with default images, image captions and tab text.

To replace the template images with your own photos, click and drag a photo from your Windows Explorer on top of the existing image.

Alternatively you can replace all 4 images in one operation.

In your Windows Explorer, select 4 images then drag and drop them onto the first slide. The program replaces the existing images with your 4 new selected images.

Click the Fill Tool then click an image to display the fill handles. Drag these to increase or reduce the size of the image or rotate it in the frame. Click and drag on the image to move it around in the frame. You'll notice that the thumbnail images on each tab also update on the other template pages.

If you want less than 4 images in your widget, right click the page(s) you want to delete in the Page & Layer Gallery and choose Delete Current Page (or select the page(s) by clicking on them in the Page & Layer Gallery and clicking the Delete button).

The widget will display the corresponding number of tabs as there are images in the Featured Content 1 widget.

However, adding more than 4 images to the widget is not recommended. If you add more than 4 images, the additional images will display in the 'slideshow' but only 4 tabs are displayed. Because the thumbnail images in the tab will now be out of sync, clicking a tab will not show the corresponding image.

To change the order of the images, click and drag an image to the desired position in the Page & Layer Gallery. The image/page numbering will adjust automatically.

Although the thumbnail images on the tabs do not appear to update, they will be displayed in the correct order when you preview the widget.

In the Text Tool, click in any text in each tab to edit it. The text for that tab updates in all the pages.

Click in the panel text at the bottom of each large image to edit the text.

Note: Because text in the Featured Content widgets is exported as a graphic, you can change font properties for both the tab and panel text. So for example you can select the text in the Text Tool and change its font, size and style.

You can add a link to the text in the panel at the bottom of each image:

In the Selector Tool, click the text to select it.

Click the Link Properties icon to open the Link tab of the Web Properties dialog

In the Link to Web or Email address box, type the web address you want the image to link to and click OK.

You can edit two template colors by replacing them with another color, similar to changing a theme color in a website template:

Right click on the black or white square on the left end of the Color Line and select Edit Color (or in Web Designer Premium just click on one of the squares).
The Color Editor opens. Drag in the hue selector bar and the color panel to choose a new template color.

We recommend that you optimize your images to reduce the file size. Choose Optimize all JPEGs from the Utilities menu then click the Optimize button.

When you have finished editing the widget, save and close the document to return to your website document.

If you have changed template colors, Designer Pro/Web Designer Premium asks you if want to match colors. Click 'Don't Match' to keep your new color scheme.

Click Preview in the toolbar to view your widget.

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

Featured 2

Featured 2 is the same as Featured 1, displaying up to 4 images that fade from one to the next in a 'slideshow' style. However, the tabs that your website visitors can click on to display each image are on the right side of the 'slideshow', instead of the left.

Three instances of the widget are provided, sized at 600 pixels wide, 740 pixels wide and 800 pixels wide.

To create a Featured 2 widget, follow the steps in Featured 1.

Xara Products

Used for

Xara Free Trials

Xara Cloud Free Trial

Product Support

Community

Xara Cloud

The Outsider

News

Web Designer+

Photo & Graphic Designer+

Page & Layout Designer 11

Designer Pro+

3D Maker 7

Widget Guide : 365

Photo & Content Slideshows

Hover Widget 4

Hover Widget 2

Hover Widget 3

Nivo Slider

All Effects Slideshow

Sliding Slideshow

Fade Slideshow

Tile Slideshow 1

Gallery Slideshow

Tile Slideshow 2

Easy Accordion

Accordian 1

Zoom Gallery 1

Zoom Gallery 2

Tint Zoom Gallery

Cycle 1

Cycle 2

Cycle 3

Cycle 4

Featured 1

Featured 2