Sign in | RegisterSign in | Register

Xara Designer Pro 6 and Web Designer 6 now make it easier than ever to add media widgets to your web pages. Choose from a range that includes YouTube and Yahoo! videos, Flickr slideshows and Flashwidgetz.

Here are a few examples from YouTube, MAGIX and Dailymotion showing how you can 'drag and drop' dynamic content from media sharing websites into your web pages with the minimum of effort.

YouTube TOP  

Display any YouTube video on your web page and customize its border color and size. The example below shows a Xara Web Designer 6 intro movie currently on YouTube.





1

Drag the YouTube widget from the Media Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

YouTube opens in the Create New Widget: YouTube window.



2

Locate the video you wish to embed in your web page and click the <Embed> button below it.

YouTube displays highlighted code in a text box below the video. 



3

In the area below the code box, you can customize properties for the video, such as changing the color of the play bar, adding a colored border, enabling privacy mode or specifying a size for the movie.

The code updates to incorporate your changes. 

Click in the box containing the code to select it, then press Ctrl + C on your keyboard to copy the code.

Click Insert at the bottom of the Create New Widget: YouTube window to add the movie to your web page.



4

The Create New Widget: YouTube window closes and Designer Pro 6/Web Designer 6 displays a placeholder representing the movie. 

Click and drag the placeholder to the location on the web page where you want it to appear. But resizing the placeholder using the selection handles will only truncate the video itself, so that only part of the screen will be visible (if you reduce it) or create empty white space to two sides of it (if you enlarge it). 

To resize the movie, reimport it from YouTube, this time making sure you have specified the movie dimensions that you want in the customization controls.

 



5

Click Preview in the toolbar to view your movie in action. 


Magix Download Box TOP  

The MAGIX Download Box lets you share your data securely with your website visitors, with the ability to password-protect any files and folders so that only authorized users can download information via your website.

Click on the example below to download image and video files.

Note: You have to first create a MAGIX online account at https://www.magix-online.com before inserting the MAGIX Online Album widget into your web page.





1

In Designer Pro 6 or Web Designer 6, drag the MAGIX Download Box widget from the Media Widgets section of the Designs Gallery on to your web page.

 



2

In the Create New Widget: MAGIX Widget Wizard window, log in to your MAGIX Online World account.

The first 'Select a Wizard' step of the widget wizard is displayed.



3

Do one of the following:

  • Click Open Widget to open an existing wizard that you've saved previously

  • Click a template design for your download box in the Select a Template display then click the Forward button at the bottom of the window to create a new widget

The second 'Customize' step of the widget wizard is displayed.



4

Do one of the following:

  • Click on an existing widget to customize it

  • Click Upload to select any image, music, video or other file of your own to insert and customize

Uploaded media is displayed at the bottom of the Create New Widget window.

Click the Add button to add uploaded media to the preview pane.

Change the widget's font, background and frame color and add password protection as required in the customization settings to the left of the window.

When you're finished customizing, click Forward to display the third 'Insert' stage of the wizard.



5

Click Save and then Insert to add the widget to your web page. 

Designer Pro 6 or Web Designer 6 displays a placeholder for your widget. 

Click Preview in the toolbar to view your widget in action. 


Magix Online Album TOP  

Pick your favorite pics and using Magix Online Album, display them in an automated slideshow on your website.

Below is an example slideshow.

Note: You have to first create a MAGIX online account at https://www.magix-online.com before inserting the MAGIX Online Album widget into your web page.





1

In Designer Pro 6 or Web Designer 6, drag the MAGIX Online Album widget from the Media Widgets section of the Designs Gallery on to your web page.

 



2

In the Create New Widget: MAGIX Online Album Wizard window, log in to your MAGIX Online World account.

The Create New Widget: Magix Online Album window is displayed.

If you have existing photo albums, these are listed on the left of the window. Click on the one you want. It displays in the preview box on the right. Go to step 4 to see how to import your albums into Web Designer 6.

If you don't have any existing photo albums, go to step 3 to see how to create new content.



3

However if you want to upload content for a new MAGIX online album, click Upload Content to add new photos, audio files and videos.

In the Upload Media window, click Select File to search your computer for photos, videos and music.

Using the controls in the Upload Media window, you can put these in an existing or new folder, which groups the files to be inserted into your web page, and you can also password-control access to this content on your website.

Then click Upload.

In the MAGIX Online Media Manager, click on the album you want on the left to highlight it, then click the 'options' icon to the immediate right of the folder name to display a drop-down list. 

These list options let you select background music for your slideshow, as well as allowing you to control who sees it when it's on your website. To add more content, you can click Upload in the list or in the Online Media Manager toolbar.

When you're happy with the slideshow, close the MAGIX Online Media Manager. 

Click Update Album List in the Create New Widget: MAGIX Online Album Widget to view the new album folder in the My Albums list. 

Click the album, which is displayed in the preview box on the right.



4

Choose size and background color options in the Create New Widget: MAGIX Online Album Widget. Then click Insert to add the photo album to your web page.

Designer Pro 6 or Web Designer 6 displays a placeholder for your photo album. Click and drag the placeholder to the location on the web page where you want it to appear. However you cannot resize the placeholder using the selection handles as this will only truncate the slideshow (if you reduce it) or create empty white space to two sides of it (if you enlarge it).

To resize the slideshow, reimport it from MAGIX, this time making sure you have specified the slideshow dimensions that you want in the Create New Widget window's customization controls.

Click Preview to play your slideshow and its soundtrack, if you added one.

 



Dailymotion Wall TOP  

The Dailymotion Wall allows you to view dynamic thumbnails that link directly to host websites with the latest videos and news on a huge variety of topics.

Here we show a News and Politics Dailymotion Wall.





1

Drag the Dailymotion Wall widget from the Media Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

Dailymotion opens in the Create New Widget: Dailymotion window.

 

 



2

Select a list of videos to make up your videowall from a list of videowalls in the drop-down list to the right of the Create New Widget: Dailymotion window. 

Alternatively you can enter a URL to a Dailymotion channel to create a videowall out of the channel's first 23 listed videos. 

 

 



3

Once you've selected your videowall, customize its display options such as size, position of the Dailymotion logo and animation and pop-up options for the video thumbnails within the videowall.

When you're done customizing, click Generate Code to create the corresponding HTML code in the text box below the customization options. A preview of the videowall is also displayed. 



4

Click Insert.

Designer Pro 6 or Web Designer 6 displays a placeholder for your videowall. 

Click and drag the placeholder to the location on the web page where you want it to appear.

However you cannot resize the placeholder using the selection handles as this will only truncate the videowall (if you reduce it) or create empty white space to two sides of it (if you enlarge it).

To resize the videowall, reimport it specifying the size you want in the Create New Widget window's customization controls.

Click Preview to play your videowall.

Clicking on a video thumbnail takes you to the hosting website which automatically plays the video.