Web Designer+

Photo & Graphic Designer+

Page & Layout Designer 11

Designer Pro+

3D Maker 7

Widget Guide : Version 9

Photo & Content Slideshows

(Pro & Premium Only)

Xara Web Designer 9 Premium and Designer Pro X9 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.

Access the Photo and Content Slideshow widgets from the Designs Gallery. The Content Slideshow widgets can be found in the Page Elements & Widgets section and you can find the Photo Slideshow widgets in Page Elements & Widgets > Photo Elements & Widgets > Photo Slideshows. 

Please note that some of the widgets below are only available with the purchase of additional widget packs (where this is the case, it is stated in the first sentence). Please check out our Design Packs for more information on the additional Widget Packs.
Mosaic SlideMosaic PanelMosaic FadeNivo SliderAll Effects SlideshowFade Effect SlideshowSliding SlideshowFade SlideshowTile Effect Slideshow 1Tile Effect Slideshow 2Gallery SlideshowEasy AccordionSlidorion AccordionCloud Standard ZoomCloud Soft Focus ZoomCloud Tint Zoom 1Cloud Tint Zoom 2Cloud Inner Zoom 1Cloud Inner Zoom 2Cloud Gallery 1Cloud Gallery 2Cloud Tint Zoom GalleryImage CarouselPhoto Cycle 1Photo Cycle 2Photo Cycle 3Photo Cycle 4Featured Content 1Featured Content 2

Mosaic Slide

The Hover Mosaic widgets are only available with Web Pack 2. Please view http://www.xara.com/packs/ to purchase Web Pack 2 and for further information. 

The Mosaic Slide widget 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. 
 

1
Drag the Mosaic Slide widget from the Hover Widgets folder in Web Pack 2 into your web document page. 
2
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. 
3
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.
4
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.
5
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.   
6

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

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.

 

Mosaic Panel

The Hover Mosaic widgets are only available with Web Pack 2. Please view http://www.xara.com/packs/ to purchase Web Pack 2 and for further information. 

The Mosaic Panel widget 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.

Mosaic Fade

The Hover Mosaic widgets are only available with Web Pack 2. Please view http://www.xara.com/packs/ to purchase Web Pack 2 and for further information. 

The Mosaic Fade widget 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. 

Nivo Slider

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

Open the Page Elements folder in the Design Gallery and from Photos > Photo Slideshows drag the Nivo slideshow widget into your web document page.
2
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. 
3
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.
 
4
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.
5
Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.
6

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

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.

 

All Effects Slideshow

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

Open the Page Elements folder in the Design Gallery and from Photos > Photo Slideshows drag the All Effects Slideshow widget into your web document page.

A placeholder is displayed.
2

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

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





5

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

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

Fade Effect Slideshow

Fade Effect Slideshow displays multiple slides that gradually fade from one to the next. Click on the navigation buttons at the bottom to go to a particular slide.

These navigation buttons give access to the first 20 slides in the slideshow, although the Fade Effect Slideshow widget supports as many images as you want.
1

Open the Page Elements folder in the Design Gallery and from Photos > Photo Slideshows drag the Fade Effect widget into your web document page.

A placeholder is displayed.

 

2
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.
3
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.
4

 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 Designer Pro/Web Designer MX Premium, only one image (the original one) will be visible when the slideshow is displayed in a browser.
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).
6

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

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

Double click to open Widgets, Forms and More in the Designs Gallery then double click to open the Eyecatcher folder. Drag the Sliding Slideshow widget on to your web document page.

A placeholder is displayed.
2

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

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

 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.
5
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.
6
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.
7
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).
8

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

Fade Slideshow

The Fade Slideshow widget displays 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. 
1
Open the Page Elements folder in the Design Gallery and from Photos > Photo Slideshows drag the Fade Slideshow widget into your web document page
2
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.
3
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. 
4

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.  
5
Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.
6

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

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.

 

Tile Effect Slideshow 1

Tile Effect Slideshow 1 displays 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 Effect Slideshow widgets support as many images as you want.


1

Open the Page Elements folder in the Design Gallery and from Photos > Photo Slideshows drag the Tile Effect Slideshow 1 widget into your web document page.

A placeholder is displayed.

2

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

 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.

4
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.
5
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.
6
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.
7

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

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

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.

Tile Effect Slideshow 2

Tile Effect 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 Effect Slideshow 2, follow the steps in Tile Effect Slideshow 1.

Gallery Slideshow

The Gallery slideshow displays 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. 
1

Open the Page Elements folder in the Design Gallery and from Photos > Photo Slideshows drag one of the Gallery slideshow widgets into your web document page.

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

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

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.  
5
Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.
6

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

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.

Easy Accordion

The Easy Accordion widget displays 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.
1

Open the Content Slideshows folder in the Page Elements section of the Design Gallery and drag the Easy Accordion widget into your web document page.

A placeholder is displayed.

 

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

 

3
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).
4
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.
5
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.
6
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.

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

Slidorion Accordion

The Slidorian Accordian 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. 
1
Open the Page Elements folder in the Design Gallery and drag one of the Slidorion Accordion widgets from the Content Slideshows section into your web document page.
2
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.
3
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. 
4
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.

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

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

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.

 

Cloud Standard Zoom

The Cloud Standard Zoom allows your website visitors to zoom in to an image as they pass the mouse pointer over it. The mouse pointer becomes an upright rectangle that acts as a 'magnifying glass' that the viewer moves over the image.

Designer Pro/Web Designer Premium displays the zoomed-in area of the image under the rectangular 'magnifying glass' in a frame next to the image, which changes constantly as the mouse pointer is passed over the image.

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

Double click to open Widgets, Forms and More in the Designs Gallery then double click to open the Eyecatcher folder. Drag the Cloud Standard Zoom widget on to your web document page.

A placeholder is displayed.

2
Double click to edit the placeholder.

The program displays a new document which contains widget editing instructions and one 'page' template for the image to be zoomed in on.
3
To replace the template image with your own photo, 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.

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

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



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

Cloud Soft Focus Zoom

Cloud Soft Focus Zoom is the same as Cloud Standard Zoom, allowing your website visitors to zoom in on any part of an image as they move the mouse pointer over the image. The only difference is that the area not currently under the mouse pointer 'rectangle' is in soft focus.

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

To create a Cloud Soft Focus Zoom, follow the steps in Cloud Standard Zoom.

Cloud Tint Zoom 1

Cloud Tint Zoom 1 is the same as Cloud Standard Zoom, allowing your website visitors to zoom in on any part of an image as they move the mouse pointer over the image. The only differences are:
  • The area not currently under the mouse pointer 'rectangle' is covered by a dark transparent tint.
  • The mouse pointer 'rectangle' and adjacent frame showing the zoomed in area are both landscaped-shaped, rather than portrait.

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

To create a Cloud Tint Zoom 1, follow the steps in Cloud Standard Zoom.

Cloud Tint Zoom 2

Cloud Tint Zoom 2 is the same as Cloud Tint Zoom 1, allowing your website visitors to zoom in on any part of an image as they move the mouse pointer over the image. The only difference is the mouse pointer 'rectangle' and adjacent frame showing the zoomed in area are both portait-shaped.

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

To create a Cloud Tint Zoom 2, follow the steps in Cloud Standard Zoom.

Cloud Inner Zoom 1

Cloud Inner Zoom 1 is essentially the same as Cloud Standard Zoom, allowing your website visitors to zoom in on any part of an image as they move the mouse pointer over the image. The only differences are:
  • The zoomed-in area is displayed in the original image frame rather than one next to the image
  • The image frame is landscape-shaped rather than portrait
  • The mouse pointer becomes a cross as it is moved over the image, rather than a rectangle.
This widget works best with landscape images. Two instances of the image are created when exporting the widget. The image shown within the zoom window is exported at 768px * 576px.

To create a Cloud Inner Zoom 1, follow the steps in Cloud Standard Zoom.

Cloud Inner Zoom 2

Cloud Inner Zoom 2 is the same as Cloud Inner Zoom 1, allowing your website visitors to zoom in on any part of an image as they move the mouse pointer over the image. The only difference is that the image frame is portrait-shaped.
This widget works best with portrait images. Two instances of the image are created when exporting the widget. The image shown within the zoom window is exported at 768px * 1024px.

To create a Cloud Inner Zoom 2, follow the steps in Cloud Standard Zoom.

Cloud Gallery 1

Cloud Gallery 1 has the same appearance as Cloud 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.
1

Double click to open Widgets, Forms and More in the Designs Gallery then double click to open the Eyecatcher folder. Drag the Cloud Gallery 1 widget on to your web document page.

A placeholder is displayed.
2
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.
3

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

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

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

6

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

Cloud Gallery 2

Cloud Gallery 2 is the same as Cloud Gallery 1, allowing your website visitors to choose from one of four thumbnail images to zoom in on. The only difference is that Cloud 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 Cloud 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 Cloud Gallery 2, follow the steps in Cloud Gallery 1.

Cloud Tint Zoom Gallery

The Cloud Tint Zoom Gallery widget is included with Widget Pack 1. You can purchase Widget Pack 1 from http://www.xara.com/products. For instructions on how to install Widget Pack 1, see this support article.

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


1

Once you have installed Widget Pack 1, in the Designs Gallery double click the Widget Pack 1 folder then drag the Tint Zoom Gallery widget of the desired size on to your web document page.

A placeholder is displayed.
2
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.
3
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.
4
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).
5

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

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


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



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



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

Image Carousel

The Image Carousel widget is included with Widget Pack 1. You can purchase Widget Pack 1 from http://www.xara.com/products. For instructions on how to install Widget Pack 1, see this support article.

The Image Carousel widget displays your pictures in a spinning carousel, where you can control the rotation speed and the pause duration of the images at the front.

Because this is a Flash-based widget, you can resize it in your web document.
1

Once you have installed Widget Pack 1, in the Designs Gallery double click the Widget Pack 1 folder then drag the Image Carousel widget on to your web document page.

A placeholder is displayed.
2
Double click to edit the placeholder.

The program displays a new document which contains widget editing instructions and six 'page' templates for each image in the carousel.
3
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 6 images in one operation.

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

The program replaces the existing images with your 6 selected new 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.
4

 The Image Carousel always displays a minimum of 6 images.

While you can delete an image - by right clicking the page you want to delete in the Page & Layer Gallery and choosing Delete Current Page (or selecting the page(s) and clicking the Delete button), the program will compensate by duplicating a remaining image.

If you delete all but one image, the remaining image is shown 6 times.
5
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.
6
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.
7
To change the timing of the pause when displaying the images at the front of the carousel, select the Text Tool then enter the pause duration in seconds at the bottom right of the instruction (first) page.

The lower the value, the shorter the pause. For example, pause 0 means there is a very short pause and 10 is a very long pause.

Repeat to change the speed of the carousel spin.

The lower the value, the faster the spin speed. For example, speed 0 is very fast and 10 very slow. 
8
You can add the same link to all images or a different link to each individual image. When you add individual links, if there are any images to which you do not apply links, the default link (if you have specified one) will still apply.

To apply the same link to all images and to apply a default link:
  • In the Selector Tool, click to select the text 'Use link properties to assign the default link' at the bottom right of the instructions (first) page
  • 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 all the images to link to and click OK.

To apply individual links to each image:
  • Click the image
  • 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 that individual image to link to and click OK.

9
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.
10
When you have finished editing the widget, save and close the editing document to return to the parent web document.

You can resize the widget by clicking on its placeholder and dragging the corners with the Selector Tool.

Click Preview in the toolbar to view your image carousel.

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

Photo Cycle 1

The Slider Photo Cycle widgets are only available with Web Pack 1. Please view http://www.xara.com/packs/ to purchase Web Pack 1 and for further information. 


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.

Photo Cycle 1 displayed below, also lets you to change the opacity of the widget's text panel.
1

Drag the Photo Cycle 1 Slider widget into your web document page from the Web Pack 1 folder in the Designs gallery.

 

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

4
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.
5
Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.
6
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. 
7
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. 
8
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.
9
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. 
10
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.
11
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.

Photo Cycle 2

The Slider Photo Cycle widgets are only available with Web Pack 1. Please view http://www.xara.com/packs/ to purchase Web Pack 1 and for further information. 

The Slider Photo 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.

1
Drag the Photo Cycle 2 Slider widget into your web document page from the Web Pack 1 folder in the Designs gallery.
2
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.
3
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. 
4
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.
5
Right click on an image in the Page and Layer Gallery to re-order, duplicate and delete images.
6
Use the Text Tool to edit the content of each slide. You can also change fonts and resize the text if you wish. 
7
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. 
8
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.
9
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. 
10
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.
11
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.

Photo Cycle 3

The Slider Photo Cycle widgets are only available with Web Pack 1. Please view http://www.xara.com/packs/ to purchase Web Pack 1 and for further information. 

The Slider Photo 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 Photo Cycle 2  (see above) to create a slideshow for this widget.  

Photo Cycle 4

The Slider Photo Cycle widgets are only available with Web Pack 1. Please view http://www.xara.com/packs/ to purchase Web Pack 1 and for further information. 

The Slider Photo 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 Photo Cycle 2 (see above) to create a slideshow for this widget.  

Featured Content 1

The Featured Content 1 widget is included with Widget Pack 1. You can purchase Widget Pack 1 from http://www.xara.com/products. For instructions on how to install Widget Pack 1, see this support article.

The Featured Content 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.
1

Once you have installed Widget Pack 1, in the Designs Gallery double click the Widget Pack 1 folder then drag the Featured Content 1 widget of the desired size on to your web document page.

A placeholder is displayed.

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

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

 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.
5
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.
6
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.
7
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.
8
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.
9
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.
10
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.
11
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.

Featured Content 2

The Featured Content 2 widget is included with Widget Pack 1. You can purchase Widget Pack 1 from http://www.xara.com/products. For instructions on how to install Widget Pack 1, see this support article.

Featured Content 2 is the same as Featured Content 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 Content 2 widget, follow the steps in Featured Content 1.
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..