Xara Online Designer is an ultra-simple way to view, edit and update the content of your Xara document or website, using a web browser on any computer or tablet (including a Mac, iPad, Android tablet or Chromebook), from anywhere in the world, and to save or re-publish it. This is ideal for remotely updating content, images and doing simple edits (for example blogs, news and prices). What’s more, Xara Online Designer enables one-click sharing of your documents. This is perfect for working with colleagues on the same website or document at the same time, on a collaborative project where edits and editors’ comments can be seen live, as-they-happen, by everyone editing the document. In the case of websites, it allows web designers to give access to their clients, allowing them to edit text and replace images. Xara Online Designer is included with the current versions of Web Designer, Photo & Graphic Designer and Designer Pro X as part of the Update Service. The Xara Online Designer text editor

Getting Started

In order to edit any Xara document it must be stored in a cloud drive. Xara works with Dropbox (2GB free), Google Drive (15GB free) and OneDrive (5GB free) so if you are not already signed up with one of these, that is the first thing you need to do. Download the relevant desktop application for one of these, install it and set up your account (Note: OneDrive is pre-installed with Windows 8.1 and 10, but you will need to download it for Windows 7 and 8).  Each of these services creates a folder on your local hard disc that is mirrored online ‘in the cloud’, and it is that which Xara Online Designer accesses. Screenshot of a section of my Windows File Explorer showing Google Drive, Dropbox and OneDrive Now you can get started with Xara Online Designer. Whichever cloud solution you chose, create a folder in which to place your Xara files.  If you have an existing Xara document that you wish to edit then drag it into the folder. Note: Dragging the file from another folder into the OneDrive / Dropbox / Google Drive folder on your computer will move it into the new folder, out of the original. If you want to keep the original copy, then it’s better to copy / paste the file from the original folder to the OneDrive folder. Now go to cloud.ixara.com and click the Xara sign-in option and enter the username and password you used to purchase the 365 version of Web Designer Premium, Photo & Graphic Designer or Designer Pro X. (Select the Forgot Password option if you need us to send you a reminder). Online Designer will open at the File Picker, where you can open one of Xara’s templates. Pick one and give it a go - the first time you do so you’ll be able to follow our brief Intro Tour. 

Opening Your Document

Once you have followed the short tour you can return to the File Picker and open any Xara document that you have saved in Dropbox, Google Drive or OneDrive, or one of the templates. Single click on the Documents menu in the top left, and Select Open or Open in new tab.

The File Picker

The first time you use Online Designer you’ll need to select ‘Add cloud drive’ and connect to the cloud drive services you are using. The first time you access this you will be asked to grant permission to access your files, this is because you will be accessing and editing your cloud files. Note: One-click sign-in - Once you have connected a cloud drive, in future you can sign-in to Xara Online Designer using your Dropbox,
Google Drive or OneDrive username and password. The File Picker is divided into three sections: cloud drives at the top, templates in the middle and Recent Documents at the bottom. Tip: If you go into one of the folders you can return to this home page by selecting the cloud in the top left corner. File picker showing your connected Cloud Drives top, templates center and Recent Documents below. The templates include social media headings, presentations, letter designs, CVs, print documents such as flyers and even a simple one page website. At the moment this is just a small selection, but in time it will grow to include a wide range of ready-made documents that you can load, edit and publish. Read the tutorial and follow the steps to creating a Web Story based on one of these templates. Once you’ve found the file you want to edit simply click to open it in the Xara Online Designer editor.

Navigating your Document and Understanding the Work Space

On both touch and mouse systems, you can push pages around (scroll) by simply dragging anywhere on the page - even on non-selected objects. When over selected text (where a drag would normally select some text) you can press the mouse center button (the wheel) and drag. You can even ‘throw’ the page for rapid scrolling. There’s a shortcut of holding the Shift key and using the scroll wheel to zoom in and out. Try it on the introduction document. If you’re working on a multi-page document you will see the page thumbnails on the left; simply click a page to jump to that page. For longer documents, scroll the page thumbnail area using the mouse wheel or drag on the thumbnails. You can hide and show the thumbnail panel by sliding left / right on it, or just tapping the projecting ‘drag handle’. The simple to use key controls are in a bar at the top of the workspace. Xara Online Designer controls Here are a couple of short introductory movies that will tell you more: Introduction Part 1 Introduction Part 2

Editing Your Document

Editing the text and images in your website or document is very easy. Simply click an item to be able to edit it. Press Esc to clear any selection, or tap on the background. To edit the text simply click or tap on the text, which places a caret and displays a slide-in panel of text controls. The text controls side panel shown on the right appears automatically on wide screens. For narrow screens such as tablets, it’s necessary to click the Properties control button  on the top bar to show or hide it. You have access to the normal text editing functions like bold, italic, adding links, changing styles, alignment, lists and indents. There’s even a spell checker that works whilst you type. To change the language select the Properties control. The text editor supports a wide range of key shortcuts, a list of these can be found in the Settings menu  . Here’s a short movie on Editing Text for a more detailed explanation of all the options in the text control panel. Xara Online Designer showing a website being edited. Tip for editing websites:  If you are working on a responsive website design that has a main website and a mobile variant, editing the content in one variant will update it in the other variant. To see the mobile variant, select the Settings icon  and then select the Mobile variant. You can customize the size of images and the wrapping and position of floating items in each variant. See the tutorial on creating Responsive Web Designs.

Replacing Images

You can replace images in four ways: Drag and drop an image file from your File Explorer onto an image, or click the image and select the ‘Replace’ menu option  where you can either select a file from your local disc, or pick an image from your cloud drive, or select from the range of nearly a million royalty free stock photos in Online Designer. See our movie about adding photos and using stock photos for more information. Note - When uploading an image from your local computer the image is resized before upload to be HD resolution (which is usually more than enough for any website). This speeds up the upload process. If your photos are stored in Google Drive, Dropbox or OneDrive, you can select to import it from your cloud drive which will only take a second or two even for full resolution images. When you select a simple image, in addition to the resize and crop handles on the sides, you get a ‘target’ like handle in the top right corner of the image. Dragging on this will resize and rotate the image within its frame. Drag diagonally outwards to resize or rotate - this clips the image, but while dragging you will see a faint version of the whole image that shows the extent of the full un-cropped image. If the image is clipped you also get a ‘hand’ control in the bottom left, which allows you to re-position the clipped image within the frame. When you select an image you get resize & crop controls around the outside, a resize/rotate in-frame handle in the top right, and a context menu. For further details on editing images check out our tutorial movies: Resizing and cropping photos Aligning photos and text

Editing Images

Select a photo and then choose Photo Enhance from the Properties panel. To enhance your photo you have controls for brightness, contrast, saturation, temperature (for warmth or coolness) and X-Process which you can use to alter the color channels for some dramatic contrast and saturation effects. The Compare option enables you to toggle between the original and current settings. Varying effects using the Photo enhance

Adding Objects

Xara Online Designer provides a range of content for you to add to your document or website. Objects include symbols, photo grids, shapes, buttons, arrows, charts and diagrams. Select the ‘plus’ on the top bar to open up the list of categories. See the video about adding symbols. The Add menu showing the available categories of objects There are a range of customizable SmartShapes, such as rectangles, ellipses, polygons, stars, arrows and flowlines,  as well as more complex text panels, photo text panels, speech bubbles and charts. What makes them so easy to use are the editing functions built into the shape. They have a set of control handles that can be dragged to adjust and customize the object. See the demonstration movies: SmartShape introduction SmartShape - arrows  SmartShape - pie charts An example SmartShape arrow showing the edit handles

Editing Colors

Xara Online Designer uses an amazingly powerful system of color control called Theme Colors, which will be familiar to users of the desktop versions of Xara Designer.  For example, the heading text in the introduction document uses a blue theme color. To change that color simply select some of the heading text, then tap the blue color patch in the properties panel on the right, to see a palette of all the colors in this document. The blue color of the selected heading text is shown in the text properties panel on the right The selected blue color is highlighted, and it’s simple to change it to another color, or create a new shade of that color (shades are indicated by the small ‘s’ in the corner). To create a completely new color click on the + symbol. This is the color palette. Just tap on one of the colors to apply, or select the Change menu (seen here above the blue color), to change the Theme color throughout the document. It’s generally regarded as good design to limit your color palette in a document, and to re-use colors or shades of the same color. This blue Theme Color 1 has a linked shade seen as the small color patch under it.  When you change the parent Theme Color 1, all linked shades will change also. There is also  a selection of ready-made  color schemes for you to choose from. With a single tap you can  instantly change the look of your websites and documents with an aesthetically pleasing refresh. Find the schemes in the Fill  color menu. See the movies about color editing and ready-made color schemes

Saving Your Edits

The document you are editing is on Xara servers in the cloud. When you click Save (Documents menu, top left) or type Ctrl+S, it saves the document back to your cloud drive, and then automatically syncs back to your cloud drive folder on your Windows computer (providing you have your cloud drive e.g. Dropbox, running on your desktop computer). If you have the file open in the desktop Xara Designer program, it will even be opened in the desktop version as soon as the update is synced. Similarly, if you have the same file open in the desktop version of Web Designer, Photo & Graphic Designer or Designer Pro on your Windows computer, do a Save operation to your cloud drive and it will be synced to the cloud, and from there to the Xara server and into the Xara Online Designer editor. So you can edit your document in the cloud or on the desktop, click Save in either and the other will be updated a few seconds later!   The Documents menu showing the Save and ‘Make a copy’ options. To save a copy (like ‘Save As’) first select ‘Make a copy’ from the Documents menu. It will be called ‘homeless’ on the status line, which means it hasn’t been saved to any cloud drive. Select to save it you can then give it a name. Note:  Edit clashes It’s important to realise that this means the same document can be edited in two places at the same time - on your desktop and in Xara Online Designer, and that saving from one will overwrite the file open in the other editor. In this case both the desktop Designer and Xara Online Designer will detect and alert you that the file has been modified and give you the option of discarding your changes, or keeping them in a new document.

Download as PDF

The Documents menu also has a Download option that allows you to download the document as a high-quality PDF. Here’s a short movie on downloading PDFs.

Sharing & Publishing Your Document

Xara Online Designer has revolutionized document sharing. A couple of clicks and a couple of seconds will give you a shareable link that you can give to anyone you want to share the document with. Select the Share icon  to see the options. You can share a read-only version of the document, or you can share it for collaborative editing. The share menu The first option produces a private link you can share with anyone. This is a static read-only version. After a few seconds you’ll get a confirmation dialog shown below. The Copy option places the URL link on the system clipboard, or you can just click the link to open it in a new browser tab. This is basically like publishing a website - except you don’t need to worry about web space, FTP configuration or hosting, and it’s a lot quicker! If you make further changes to the document, these are not automatically shared until you do another Share.. operation. This allows you to continue working on draft changes, and only update the read-only shared version when you want to. If a document is already shared, you’ll get a simple ‘update’ option seen here to re- publish the latest updates. If the document is a website that you want to publish to your own web space and you have saved the web hosting FTP details in the document using Web Designer Premium or Designer Pro, then you will see a Re-publish option above the Share… option.  If you have not saved the password in the file, you will be prompted for it.

Share Editing

If you select the Share editing... option you will be able to enter the email address of anyone you want to share the editing of this document with. You can enter multiple email addresses, comma separated, and each will receive a email inviting them to share editing of your document. The recipients need to have an account with Dropbox, Google or OneDrive because when they click the ‘invite to edit link’, they’ll be asked to verify their email address through their chosen cloud provider. So when you send the share invite, it’s worth ensuring the recipient has used the email you’re sending to with one of the above providers. Status  line of users currently editing the document When the recipient joins the editing session, the status line shows a colored label with the initial of the users editing this document. So, in the above case, there are three people editing the document. You can tap the colored label to see the email address of each user. You see changes they make, as they make them. It’s important to understand that they are not editing a copy of the document - they are editing the exact same document you are. If they click Save, it will save back to your cloud drive (because it’s your document that you let them edit). See the movie about saving and sharing documents 

Backups

An additional benefit is that Dropbox and Google Drive maintain older versions of your files which provides an easy way of viewing and reverting back to earlier versions, so it’s a safe, easy and storage-saving way of maintaining multiple versions of your website files.

Find Out More About Xara Online Designer

You can find all our current Online Designer movies in our YouTube playlist,  as of July 2017, these are: Introduction Part 1 and Part 2 Editing Text Symbols Adding Photos Stock Photos Resizing and Cropping Photos Aligning Text & Photos Color Editing Ready Made Colour Schemes Multiple Selection and Grouping Introduction to SmartShapes SmartShapes - Arrows SmartShapes - Pie Charts Saving as a PDF Sharing & Saving Documents Also don’t miss the tutorial Creating a Simple Web Story Using Online Designer which shows you how to create a simple single page website using one of the Online Designer templates. And if you don’t already own the current version of Web Designer, Photo & Graphic Designer or Designer Pro X and you’d like to try the unique offline/online experience offered by Xara then why not download the free trial of Xara Web Designer or Photo & Graphic Designer or Xara Designer Pro X now!

Give us your feedback

We welcome all feedback on Online Designer, any suggestions you have for improvements and what features you’d like to see next.
Copyright © 2017 Xara Group Limited.
Page created with Xara Designer Pro
Xara Online Designer is an ultra-simple way to view, edit and update the content of your Xara document or website, using a web browser on any computer or tablet (including a Mac, iPad, Android tablet or Chromebook), from anywhere in the world, and to save or re-publish it. This is ideal for remotely updating content, images and doing simple edits (for example blogs, news and prices). What’s more, Xara Online Designer enables one-click sharing of your documents. This is perfect for working with colleagues on the same website or document at the same time, on a collaborative project where edits and editors’ comments can be seen live, as-they-happen, by everyone editing the document. In the case of websites, it allows web designers to give access to their clients, allowing them to edit text and replace images. Xara Online Designer is included with the current versions of Web Designer, Photo & Graphic Designer and Designer Pro X as part of the Update Service. The Xara Online Designer text editor

Getting Started

In order to edit any Xara document it must be stored in a cloud drive. Xara works with Dropbox (2GB free), Google Drive (15GB free) and OneDrive (5GB free) so if you are not already signed up with one of these, that is the first thing you need to do. Download the relevant desktop application for one of these, install it and set up your account (Note: OneDrive is pre-installed with Windows 8.1 and 10, but you will need to download it for Windows 7 and 8).  Each of these services creates a folder on your local hard disc that is mirrored online ‘in the cloud’, and it is that which Xara Online Designer accesses. Screenshot of a section of my Windows File Explorer showing Google Drive, Dropbox and OneDrive Now you can get started with Xara Online Designer. Whichever cloud solution you chose, create a folder in which to place your Xara files.  If you have an existing Xara document that you wish to edit then drag it into the folder. Note: Dragging the file from another folder into the OneDrive / Dropbox / Google Drive folder on your computer will move it into the new folder, out of the original. If you want to keep the original copy, then it’s better to copy / paste the file from the original folder to the OneDrive folder. Now go to cloud.ixara.com and click the Xara sign-in option and enter the username and password you used to purchase the 365 version of Web Designer Premium, Photo & Graphic Designer or Designer Pro X. (Select the Forgot Password option if you need us to send you a reminder). Online Designer will open at the File Picker, where you can open one of Xara’s templates. Pick one and give it a go - the first time you do so you’ll be able to follow our brief Intro Tour. 

Opening Your Document

Once you have followed the short tour you can return to the File Picker and open any Xara document that you have saved in Dropbox, Google Drive or OneDrive, or one of the templates. Single click on the Documents menu in the top left, and Select Open or Open in new tab.

The File Picker

The first time you use Online Designer you’ll need to select ‘Add cloud drive’ and connect to the cloud drive services you are using. The first time you access this you will be asked to grant permission to access your files, this is because you will be accessing and editing your cloud files. Note: One-click sign-in - Once you have connected a cloud drive, in future you can sign-in to Xara Online Designer using your Dropbox, Google Drive or OneDrive username and password. The File Picker is divided into three sections: cloud drives at the top, templates in the middle and Recent Documents at the bottom. Tip: If you go into one of the folders you can return to this home page by selecting the cloud in the top left corner. File picker showing your connected Cloud Drives top, templates center and Recent Documents below. The templates include social media headings, presentations, letter designs, CVs, print documents such as flyers and even a simple one page website. At the moment this is just a small selection, but in time it will grow to include a wide range of ready-made documents that you can load, edit and publish. Read the tutorial and follow the steps to creating a Web Story based on one of these templates. Once you’ve found the file you want to edit simply click to open it in the Xara Online Designer editor.

Navigating your Document and Understanding the Work Space

On both touch and mouse systems, you can push pages around (scroll) by simply dragging anywhere on the page - even on non-selected objects. When over selected text (where a drag would normally select some text) you can press the mouse center button (the wheel) and drag. You can even ‘throw’ the page for rapid scrolling. There’s a shortcut of holding the Shift key and using the scroll wheel to zoom in and out. Try it on the introduction document. If you’re working on a multi-page document you will see the page thumbnails on the left; simply click a page to jump to that page. For longer documents, scroll the page thumbnail area using the mouse wheel or drag on the thumbnails. You can hide and show the thumbnail panel by sliding left / right on it, or just tapping the projecting ‘drag handle’. The simple to use key controls are in a bar at the top of the workspace. Xara Online Designer controls Here are a couple of short introductory movies that will tell you more: Introduction Part 1 Introduction Part 2

Editing Your Document

Editing the text and images in your website or document is very easy. Simply click an item to be able to edit it. Press Esc to clear any selection, or tap on the background. To edit the text simply click or tap on the text, which places a caret and displays a slide-in panel of text controls. The text controls side panel shown on the right appears automatically on wide screens. For narrow screens such as tablets, it’s necessary to click the Properties control button  on the top bar to show or hide it. You have access to the normal text editing functions like bold, italic, adding links, changing styles, alignment, lists and indents. There’s even a spell checker that works whilst you type. To change the language select the Properties control. The text editor supports a wide range of key shortcuts, a list of these can be found in the Settings menu  . Here’s a short movie on Editing Text for a more detailed explanation of all the options in the text control panel. Xara Online Designer showing a website being edited. Tip for editing websites:  If you are working on a responsive website design that has a main website and a mobile variant, editing the content in one variant will update it in the other variant. To see the mobile variant, select the Settings icon  and then select the Mobile variant. You can customize the size of images and the wrapping and position of floating items in each variant. See the tutorial on creating Responsive Web Designs.

Replacing Images

You can replace images in four ways: Drag and drop an image file from your File Explorer onto an image, or click the image and select the ‘Replace’ menu option  where you can either select a file from your local disc, or pick an image from your cloud drive, or select from the range of nearly a million royalty free stock photos in Online Designer. See our movie about adding photos and using stock photos for more information. Note - When uploading an image from your local computer the image is resized before upload to be HD resolution (which is usually more than enough for any website). This speeds up the upload process. If your photos are stored in Google Drive, Dropbox or OneDrive, you can select to import it from your cloud drive which will only take a second or two even for full resolution images. When you select a simple image, in addition to the resize and crop handles on the sides, you get a ‘target’ like handle in the top right corner of the image. Dragging on this will resize and rotate the image within its frame. Drag diagonally outwards to resize or rotate - this clips the image, but while dragging you will see a faint version of the whole image that shows the extent of the full un-cropped image. If the image is clipped you also get a ‘hand’ control in the bottom left, which allows you to re-position the clipped image within the frame. When you select an image you get resize & crop controls around the outside, a resize/rotate in-frame handle in the top right, and a context menu. For further details on editing images check out our tutorial movies: Resizing and cropping photos Aligning photos and text

Editing Images

Select a photo and then choose Photo Enhance from the Properties panel. To enhance your photo you have controls for brightness, contrast, saturation, temperature (for warmth or coolness) and X-Process which you can use to alter the color channels for some dramatic contrast and saturation effects. The Compare option enables you to toggle between the original and current settings. Varying effects using the Photo enhance

Adding Objects

Xara Online Designer provides a range of content for you to add to your document or website. Objects include symbols, photo grids, shapes, buttons, arrows, charts and diagrams. Select the ‘plus’ on the top bar to open up the list of categories. See the video about adding symbols. The Add menu showing the available categories of objects There are a range of customizable SmartShapes, such as rectangles, ellipses, polygons, stars, arrows and flowlines,  as well as more complex text panels, photo text panels, speech bubbles and charts. What makes them so easy to use are the editing functions built into the shape. They have a set of control handles that can be dragged to adjust and customize the object. See the demonstration movies: SmartShape introduction SmartShape - arrows  SmartShape - pie charts An example SmartShape arrow showing the edit handles

Editing Colors

Xara Online Designer uses an amazingly powerful system of color control called Theme Colors, which will be familiar to users of the desktop versions of Xara Designer.  For example, the heading text in the introduction document uses a blue theme color. To change that color simply select some of the heading text, then tap the blue color patch in the properties panel on the right, to see a palette of all the colors in this document. The blue color of the selected heading text is shown in the text properties panel on the right The selected blue color is highlighted, and it’s simple to change it to another color, or create a new shade of that color (shades are indicated by the small ‘s’ in the corner). To create a completely new color click on the + symbol. This is the color palette. Just tap on one of the colors to apply, or select the Change menu (seen here above the blue color), to change the Theme color throughout the document. It’s generally regarded as good design to limit your color palette in a document, and to re-use colors or shades of the same color. This blue Theme Color 1 has a linked shade seen as the small color patch under it.  When you change the parent Theme Color 1, all linked shades will change also. There is also  a selection of ready-made  color schemes for you to choose from. With a single tap you can  instantly change the look of your websites and documents with an aesthetically pleasing refresh. Find the schemes in the Fill  color menu. See the movies about color editing and ready-made color schemes

Saving Your Edits

The document you are editing is on Xara servers in the cloud. When you click Save (Documents menu, top left) or type Ctrl+S, it saves the document back to your cloud drive, and then automatically syncs back to your cloud drive folder on your Windows computer (providing you have your cloud drive e.g. Dropbox, running on your desktop computer). If you have the file open in the desktop Xara Designer program, it will even be opened in the desktop version as soon as the update is synced. Similarly, if you have the same file open in the desktop version of Web Designer, Photo & Graphic Designer or Designer Pro on your Windows computer, do a Save operation to your cloud drive and it will be synced to the cloud, and from there to the Xara server and into the Xara Online Designer editor. So you can edit your document in the cloud or on the desktop, click Save in either and the other will be updated a few seconds later!   The Documents menu showing the Save and ‘Make a copy’ options. To save a copy (like ‘Save As’) first select ‘Make a copy’ from the Documents menu. It will be called ‘homeless’ on the status line, which means it hasn’t been saved to any cloud drive. Select to save it you can then give it a name. Note:  Edit clashes It’s important to realise that this means the same document can be edited in two places at the same time - on your desktop and in Xara Online Designer, and that saving from one will overwrite the file open in the other editor. In this case both the desktop Designer and Xara Online Designer will detect and alert you that the file has been modified and give you the option of discarding your changes, or keeping them in a new document.

Download as PDF

The Documents menu also has a Download option that allows you to download the document as a high- quality PDF. Here’s a short movie on downloading PDFs.

Sharing & Publishing Your Document

Xara Online Designer has revolutionized document sharing. A couple of clicks and a couple of seconds will give you a shareable link that you can give to anyone you want to share the document with. Select the Share icon  to see the options. You can share a read-only version of the document, or you can share it for collaborative editing. The share menu The first option produces a private link you can share with anyone. This is a static read-only version. After a few seconds you’ll get a confirmation dialog shown below. The Copy option places the URL link on the system clipboard, or you can just click the link to open it in a new browser tab. This is basically like publishing a website - except you don’t need to worry about web space, FTP configuration or hosting, and it’s a lot quicker! If you make further changes to the document, these are not automatically shared until you do another Share.. operation. This allows you to continue working on draft changes, and only update the read-only shared version when you want to. If a document is already shared, you’ll get a simple ‘update’ option seen here to re-publish the latest updates. If the document is a website that you want to publish to your own web space and you have saved the web hosting FTP details in the document using Web Designer Premium or Designer Pro, then you will see a Re-publish option above the Share… option.  If you have not saved the password in the file, you will be prompted for it.

Share Editing

If you select the Share editing... option you will be able to enter the email address of anyone you want to share the editing of this document with. You can enter multiple email addresses, comma separated, and each will receive a email inviting them to share editing of your document. The recipients need to have an account with Dropbox, Google or OneDrive because when they click the ‘invite to edit link’, they’ll be asked to verify their email address through their chosen cloud provider. So when you send the share invite, it’s worth ensuring the recipient has used the email you’re sending to with one of the above providers. Status  line of users currently editing the document When the recipient joins the editing session, the status line shows a colored label with the initial of the users editing this document. So, in the above case, there are three people editing the document. You can tap the colored label to see the email address of each user. You see changes they make, as they make them. It’s important to understand that they are not editing a copy of the document - they are editing the exact same document you are. If they click Save, it will save back to your cloud drive (because it’s your document that you let them edit). See the movie about saving and sharing documents 

Backups

An additional benefit is that Dropbox and Google Drive maintain older versions of your files which provides an easy way of viewing and reverting back to earlier versions, so it’s a safe, easy and storage-saving way of maintaining multiple versions of your website files.

Find Out More About Xara Online Designer

You can find all our current Online Designer movies in our YouTube playlist,  as of July 2017, these are: Introduction Part 1 and Part 2 Editing Text Symbols Adding Photos Stock Photos Resizing and Cropping Photos Aligning Text & Photos Color Editing Ready Made Colour Schemes Multiple Selection and Grouping Introduction to SmartShapes SmartShapes - Arrows SmartShapes - Pie Charts Saving as a PDF Sharing & Saving Documents Also don’t miss the tutorial Creating a Simple Web Story Using Online Designer which shows you how to create a simple single page website using one of the Online Designer templates. And if you don’t already own the current version of Web Designer, Photo & Graphic Designer or Designer Pro X and you’d like to try the unique offline/online experience offered by Xara then why not download the free trial of Xara Web Designer or Photo & Graphic Designer or Xara Designer Pro X now!

Give us your feedback

We welcome all feedback on Online Designer, any suggestions you have for improvements and what features you’d like to see next.
Copyright © 2017 Xara Group Limited.
Page created with Xara Designer Pro
Xara Online Designer is an ultra-simple way to view, edit and update the content of your Xara document or website, using a web browser on any computer or tablet (including a Mac, iPad, Android tablet or Chromebook), from anywhere in the world, and to save or re-publish it. This is ideal for remotely updating content, images and doing simple edits (for example blogs, news and prices). What’s more, Xara Online Designer enables one-click sharing of your documents. This is perfect for working with colleagues on the same website or document at the same time, on a collaborative project where edits and editors’ comments can be seen live, as-they-happen, by everyone editing the document. In the case of websites, it allows web designers to give access to their clients, allowing them to edit text and replace images. Xara Online Designer is included with the current versions of Web Designer, Photo & Graphic Designer and Designer Pro X as part of the Update Service. The Xara Online Designer text editor

Getting Started

In order to edit any Xara document it must be stored in a cloud drive. Xara works with Dropbox (2GB free), Google Drive (15GB free) and OneDrive (5GB free) so if you are not already signed up with one of these, that is the first thing you need to do. Download the relevant desktop application for one of these, install it and set up your account (Note: OneDrive is pre-installed with Windows 8.1 and 10, but you will need to download it for Windows 7 and 8).  Each of these services creates a folder on your local hard disc that is mirrored online ‘in the cloud’, and it is that which Xara Online Designer accesses. Screenshot of a section of my Windows File Explorer showing Google Drive, Dropbox and OneDrive Now you can get started with Xara Online Designer. Whichever cloud solution you chose, create a folder in which to place your Xara files.  If you have an existing Xara document that you wish to edit then drag it into the folder. Note: Dragging the file from another folder into the OneDrive / Dropbox / Google Drive folder on your computer will move it into the new folder, out of the original. If you want to keep the original copy, then it’s better to copy / paste the file from the original folder to the OneDrive folder. Now go to cloud.ixara.com and click the Xara sign-in option and enter the username and password you used to purchase the 365 version of Web Designer Premium, Photo & Graphic Designer or Designer Pro X. (Select the Forgot Password option if you need us to send you a reminder). Online Designer will open at the File Picker, where you can open one of Xara’s templates. Pick one and give it a go - the first time you do so you’ll be able to follow our brief Intro Tour. 

Opening Your Document

Once you have followed the short tour you can return to the File Picker and open any Xara document that you have saved in Dropbox, Google Drive or OneDrive, or one of the templates. Single click on the Documents menu in the top left, and Select Open or Open in new tab.

The File Picker

The first time you use Online Designer you’ll need to select ‘Add cloud drive’ and connect to the cloud drive services you are using. The first time you access this you will be asked to grant permission to access your files, this is because you will be accessing and editing your cloud files. Note: One-click sign-in - Once you have connected a cloud drive, in future you can sign-in to Xara Online Designer using your Dropbox, Google Drive or OneDrive
username and password. The File Picker is divided into three sections: cloud drives at the top, templates in the middle and Recent Documents at the bottom. Tip: If you go into one of the folders you can return to this home page by selecting the cloud in the top left corner. File picker showing your connected Cloud Drives top, templates center and Recent Documents below. The templates include social media headings, presentations, letter designs, CVs, print documents such as flyers and even a simple one page website. At the moment this is just a small selection, but in time it will grow to include a wide range of ready-made documents that you can load, edit and publish. Read the tutorial and follow the steps to creating a Web Story based on one of these templates. Once you’ve found the file you want to edit simply click to open it in the Xara Online Designer editor.

Navigating your Document and Understanding the

Work Space

On both touch and mouse systems, you can push pages around (scroll) by simply dragging anywhere on the page - even on non-selected objects. When over selected text (where a drag would normally select some text) you can press the mouse center button (the wheel) and drag. You can even ‘throw’ the page for rapid scrolling. There’s a shortcut of holding the Shift key and using the scroll wheel to zoom in and out. Try it on the introduction document. If you’re working on a multi-page document you will see the page thumbnails on the left; simply click a page to jump to that page. For longer documents, scroll the page thumbnail area using the mouse wheel or drag on the thumbnails. You can hide and show the thumbnail panel by sliding left / right on it, or just tapping the projecting ‘drag handle’. The simple to use key controls are in a bar at the top of the workspace. Xara Online Designer controls Here are a couple of short introductory movies that will tell you more: Introduction Part 1 Introduction Part 2

Editing Your Document

Editing the text and images in your website or document is very easy. Simply click an item to be able to edit it. Press Esc to clear any selection, or tap on the background. To edit the text simply click or tap on the text, which places a caret and displays a slide-in panel of text controls. The text controls side panel shown on the right appears automatically on wide screens. For narrow screens such as tablets, it’s necessary to click the Properties control button  on the top bar to show or hide it. You have access to the normal text editing functions like bold, italic, adding links, changing styles, alignment, lists and indents. There’s even a spell checker that works whilst you type. To change the language select the Properties control. The text editor supports a wide range of key shortcuts, a list of these can be found in the Settings menu  . Here’s a short movie on Editing Text for a more detailed explanation of all the options in the text control panel. Xara Online Designer showing a website being edited. Tip for editing websites:  If you are working on a responsive website design that has a main website and a mobile variant, editing the content in one variant will update it in the other variant. To see the mobile variant, select the Settings icon  and then select the Mobile variant. You can customize the size of images and the wrapping and position of floating items in each variant. See the tutorial on creating Responsive Web Designs.

Replacing Images

You can replace images in four ways: Drag and drop an image file from your File Explorer onto an image, or click the image and select the ‘Replace’ menu option  where you can either select a file from your local disc, or pick an image from your cloud drive, or select from the range of nearly a million royalty free stock photos in Online Designer. See our movie about adding photos and using stock photos  for more information. Note - When uploading an image from your local computer the image is resized before upload to be HD resolution (which is usually more than enough for any website). This speeds up the upload process. If your photos are stored in Google Drive, Dropbox or OneDrive, you can select to import it from your cloud drive which will only take a second or two even for full resolution images. When you select a simple image, in addition to the resize and crop handles on the sides, you get a ‘target’ like handle in the top right corner of the image. Dragging on this will resize and rotate the image within its frame. Drag diagonally outwards to resize or rotate - this clips the image, but while dragging you will see a faint version of the whole image that shows the extent of the full un-cropped image. If the image is clipped you also get a ‘hand’ control in the bottom left, which allows you to re-position the clipped image within the frame. When you select an image you get resize & crop controls around the outside, a resize/rotate in-frame handle in the top right, and a context menu. For further details on editing images check out our tutorial movies: Resizing and cropping photos Aligning photos and text

Editing Images

Select a photo and then choose Photo Enhance from the Properties panel. To enhance your photo you have controls for brightness, contrast, saturation, temperature (for warmth or coolness) and X- Process which you can use to alter the color channels for some dramatic contrast and saturation effects. The Compare option enables you to toggle between the original and current settings. Varying effects using the Photo enhance

Adding Objects

Xara Online Designer provides a range of content for you to add to your document or website. Objects include symbols, photo grids, shapes, buttons, arrows, charts and diagrams. Select the ‘plus’ on the top bar to open up the list of categories. See the video about adding symbols. The Add menu showing the available categories of objects There are a range of customizable SmartShapes, such as rectangles, ellipses, polygons, stars, arrows and flowlines,  as well as more complex text panels, photo text panels, speech bubbles and charts. What makes them so easy to use are the editing functions built into the shape. They have a set of control handles that can be dragged to adjust and customize the object. See the demonstration movies: SmartShape introduction SmartShape - arrows  SmartShape - pie charts An example SmartShape arrow showing the edit handles

Editing Colors

Xara Online Designer uses an amazingly powerful system of color control called Theme Colors, which will be familiar to users of the desktop versions of Xara Designer.  For example, the heading text in the introduction document uses a blue theme color. To change that color simply select some of the heading text, then tap the blue color patch in the properties panel on the right, to see a palette of all the colors in this document. The blue color of the selected heading text is shown in the text properties panel on the right The selected blue color is highlighted, and it’s simple to change it to another color, or create a new shade of that color (shades are indicated by the small ‘s’ in the corner). To create a completely new color click on the + symbol. This is the color palette. Just tap on one of the colors to apply, or select the Change menu (seen here above the blue color), to change the Theme color throughout the document. It’s generally regarded as good design to limit your color palette in a document, and to re-use colors or shades of the same color. This blue Theme Color 1 has a linked shade seen as the small color patch under it.  When you change the parent Theme Color 1, all linked shades will change also. There is also  a selection of ready-made  color schemes for you to choose from. With a single tap you can  instantly change the look of your websites and documents with an aesthetically pleasing refresh. Find the schemes in the Fill  color menu. See the movies about color editing and ready-made color schemes

Saving Your Edits

The document you are editing is on Xara servers in the cloud. When you click Save (Documents menu, top left) or type Ctrl+S, it saves the document back to your cloud drive, and then automatically syncs back to your cloud drive folder on your Windows computer (providing you have your cloud drive e.g. Dropbox, running on your desktop computer). If you have the file open in the desktop Xara Designer program, it will even be opened in the desktop version as soon as the update is synced. Similarly, if you have the same file open in the desktop version of Web Designer, Photo & Graphic Designer or Designer Pro on your Windows computer, do a Save operation to your cloud drive and it will be synced to the cloud, and from there to the Xara server and into the Xara Online Designer editor. So you can edit your document in the cloud or on the desktop, click Save in either and the other will be updated a few seconds later!   The Documents menu showing the Save and ‘Make a copy’ options. To save a copy (like ‘Save As’) first select ‘Make a copy’ from the Documents menu. It will be called ‘homeless’ on the status line, which means it hasn’t been saved to any cloud drive. Select to save it you can then give it a name. Note:  Edit clashes It’s important to realise that this means the same document can be edited in two places at the same time - on your desktop and in Xara Online Designer, and that saving from one will overwrite the file open in the other editor. In this case both the desktop Designer and Xara Online Designer will detect and alert you that the file has been modified and give you the option of discarding your changes, or keeping them in a new document.

Download as PDF

The Documents menu also has a Download option that allows you to download the document as a high-quality PDF. Here’s a short movie on downloading PDFs.

Sharing & Publishing Your Document

Xara Online Designer has revolutionized document sharing. A couple of clicks and a couple of seconds will give you a shareable link that you can give to anyone you want to share the document with. Select the Share icon  to see the options. You can share a read-only version of the document, or you can share it for collaborative editing. The share menu The first option produces a private link you can share with anyone. This is a static read-only version. After a few seconds you’ll get a confirmation dialog shown below. The Copy option places the URL link on the system clipboard, or you can just click the link to open it in a new browser tab. This is basically like publishing a website - except you don’t need to worry about web space, FTP configuration or hosting, and it’s a lot quicker! If you make further changes to the document, these are not automatically shared until you do another Share.. operation. This allows you to continue working on draft changes, and only update the read-only shared version when you want to. If a document is already shared, you’ll get a simple ‘update’ option seen here to re-publish the latest updates. If the document is a website that you want to publish to your own web space and you have saved the web hosting FTP details in the document using Web Designer Premium or Designer Pro, then you will see a Re-publish option above the Share… option.  If you have not saved the password in the file, you will be prompted for it.

Share Editing

If you select the Share editing... option you will be able to enter the email address of anyone you want to share the editing of this document with. You can enter multiple email addresses, comma separated, and each will receive a email inviting them to share editing of your document. The recipients need to have an account with Dropbox, Google or OneDrive because when they click the ‘invite to edit link’, they’ll be asked to verify their email address through their chosen cloud provider. So when you send the share invite, it’s worth ensuring the recipient has used the email you’re sending to with one of the above providers. Status  line of users currently editing the document When the recipient joins the editing session, the status line shows a colored label with the initial of the users editing this document. So, in the above case, there are three people editing the document. You can tap the colored label to see the email address of each user. You see changes they make, as they make them. It’s important to understand that they are not editing a copy of the document - they are editing the exact same document you are. If they click Save, it will save back to your cloud drive (because it’s your document that you let them edit). See the movie about saving and sharing documents 

Backups

An additional benefit is that Dropbox and Google Drive maintain older versions of your files which provides an easy way of viewing and reverting back to earlier versions, so it’s a safe, easy and storage-saving way of maintaining multiple versions of your website files.

Find Out More About Xara Online Designer

You can find all our current Online Designer movies in our YouTube playlist,  as of July 2017, these are: Introduction Part 1 and Part 2 Editing Text Symbols Adding Photos Stock Photos Resizing and Cropping Photos Aligning Text & Photos Color Editing Ready Made Colour Schemes Multiple Selection and Grouping Introduction to SmartShapes SmartShapes - Arrows SmartShapes - Pie Charts Saving as a PDF Sharing & Saving Documents Also don’t miss the tutorial Creating a Simple Web Story Using Online Designer which shows you how to create a simple single page website using one of the Online Designer templates. And if you don’t already own the current version of Web Designer, Photo & Graphic Designer or Designer Pro X and you’d like to try the unique offline/online experience offered by Xara then why not download the free trial of Xara Web Designer or Photo & Graphic Designer or Xara Designer Pro X now!

Give us your feedback

We welcome all feedback on Online Designer, any suggestions you have for improvements and what features you’d like to see next.
Copyright © 2017 Xara Group Limited.
Page created with Xara Designer Pro
EASY ONLINE EDITING OF XARA DOCUMENTS
EASY ONLINE EDITING OF XARA DOCUMENTS
EASY ONLINE EDITING OF XARA DOCUMENTS