Xara Online Designer is an ultra-simple way to view, edit and update the content of your Xara website or document using a web browser on any computer or tablet (including a Mac, iPad, Android tablet or Chromebook), from anywhere in the world, and to re-publish or save it. This is ideal for remotely updating content, images and doing simple edits (for example blogs, news and prices).

Fast & Easy Sharing

What’s more, Xara Online Designer now enables one-click sharing of your documents. This is a simple read-only version (like publishing, similar to a PDF) that can be shared with select people, or the whole world. Also, we’ve just introduced a new easier way to share editing of documents with others. This is perfect for working with colleagues on the same website, or document, at the same time on a collaborative project where edits can be seen live, as-they-happen, by everyone editing the document. And in the case of websites it allows for web designers to give limited editing rights to their clients, allowing them to edit text and replace images. The Xara Online Designer editor

Getting started

In order to edit any Xara document you have to have it 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!  You will need to 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 Online Designer accesses. Screenshot of part 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 and place your Xara file into it. 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 Web Designer Premium or Designer Pro X. (Select the Forgot Password option if you need us to send you a reminder). Note: Once you’ve signed in this way and given permission for access to OneDrive, Dropbox or Google Drive, then in future you can sign-in using your Dropbox, Google Drive or OneDrive credentials. Once you’ve signed in, Online Designer will open with an introductory document showing a few first-time tips on using the program.

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. Try it on the intro document. If you are working on a multi-page document you will see the page thumbnails on the left; simply click a page to scroll 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 key controls are in a bar at the top of the workspace and they’re very simple to use. Xara Online Designer controls Here are a couple of short introductory movies that will tell you more: Introduction Part 1 Introduction Part 2 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.

Opening your document

To open any Xara .web or .xar file that you have saved in Dropbox, Google Drive or OneDrive single click on the Documents menu, top left, and Select Open or Open in new tab.

Connect to your cloud drive

Click the ‘Add cloud drive’ and connect to the cloud drive service you are using. The first time you access these you will be asked to grant permission to access your files, this is because you will be accessing and editing your cloud files. One-click sign-in: Once you have connected a cloud drive, in future you can sign-in to Online Designer using the cloud drive link at the sign-in screen, and you will not have to enter your Xara username or password each time. Easy one-click sign-in.

The File Picker

When you select Open you’re presented with the File Picker screen, which is divided into three sections: File picker showing your connected cloud drives top, the New Documents section in the center and Recent Documents in lower area. You’ll notice that there is a selection of template documents such as CVs, social media headings, presentations 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. Last month’s tutorial followed 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.

Editing your document

Editing the text and images in your website or document is very easy. 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. 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.

Replacing images

You can replace images in three ways: Drag and drop an image file from your File Explorer onto the image, or click the image and select the ‘Replace’ menu where you can either select a file from your local disc, or pick the image from your cloud drive. See our movie about adding photos for more details. 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 can see the size of the whole image. If the image is clipped you also get a ‘hand’ control, bottom left, which allows you to re-position the clipped image within the frame. You will see a faint version of the whole image as you drag to show the extent of the full un-cropped image. When you select an image you get resize & crop controls around the outside, a resize/rotate in-frame, handle 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 Colors

Online Designer uses an amazingly powerful system of color control called Theme Colors, which will be familiar to users of Web Designer Premium and Designer Pro X.  For example the heading text in the intro 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 a simple matter to change it to another color, or create a new shade of that color (shades are indicated by the small s in the corner).  If you want 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 you can see here above the blue color, to change the Theme color throughout the document. Here’s a short summary movie of color editing. 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, the small color patch you see under it.  When you change the parent Theme Color 1, all linked shades will change also.

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 synced 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 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 this Documents menu. You will see this is called ‘homeless’ on the status line now, which means it hasn’t been saved to any cloud drive. So it’s like ‘unsaved’. A note on 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

A recent update to 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 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. Note: In earlier versions it was necessary for all recipients to own Designer Pro or Web Designer Premium or sign up for Client Access before they could edit a document - as of Feb 2017 this is no longer the case. If the recipient is a Designer Pro or Web Designer Premium owner they will have full editing access, if not they will have more limited ‘content editing’ rights.  See here for details. 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 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 you let them edit).

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 a full list of our current tutorial movies on our Xara Online Designer page, as of Feb 2017 these are: Introduction Part 1 and Part 2 Editing Text Adding Photos Resizing and Cropping Photos Aligning Text & Photos Color Editing Saving as a PDF Also don’t miss the January 2017 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 versions of Web Designer Premium 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 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 website or document using a web browser on any computer or tablet (including a Mac, iPad, Android tablet or Chromebook), from anywhere in the world, and to re-publish or save it. This is ideal for remotely updating content, images and doing simple edits (for example blogs, news and prices).

Fast & Easy Sharing

What’s more, Xara Online Designer now enables one-click sharing of your documents. This is a simple read-only version (like publishing, similar to a PDF) that can be shared with select people, or the whole world. Also, we’ve just introduced a new easier way to share editing of documents with others. This is perfect for working with colleagues on the same website, or document, at the same time on a collaborative project where edits can be seen live, as-they-happen, by everyone editing the document. And in the case of websites it allows for web designers to give limited editing rights to their clients, allowing them to edit text and replace images. The Xara Online Designer editor

Getting started

In order to edit any Xara document you have to have it 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!  You will need to 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 Online Designer accesses. Screenshot of part 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 and place your Xara file into it. 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 Web Designer Premium or Designer Pro X. (Select the Forgot Password option if you need us to send you a reminder). Note: Once you’ve signed in this way and given permission for access to OneDrive, Dropbox or Google Drive, then in future you can sign-in using your Dropbox, Google Drive or OneDrive credentials. Once you’ve signed in, Online Designer will open with an introductory document showing a few first-time tips on using the program.

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. Try it on the intro document. If you are working on a multi-page document you will see the page thumbnails on the left; simply click a page to scroll 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 key controls are in a bar at the top of the workspace and they’re very simple to use. Xara Online Designer controls Here are a couple of short introductory movies that will tell you more: Introduction Part 1 Introduction Part 2 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.

Opening your document

To open any Xara .web or .xar file that you have saved in Dropbox, Google Drive or OneDrive single click on the Documents menu, top left, and Select Open or Open in new tab.

Connect to your cloud drive

Click the ‘Add cloud drive’ and connect to the cloud drive service you are using. The first time you access these you will be asked to grant permission to access your files, this is because you will be accessing and editing your cloud files. One-click sign-in: Once you have connected a cloud drive, in future you can sign-in to Online Designer using the cloud drive link at the sign-in screen, and you will not have to enter your Xara username or password each time. Easy one-click sign-in.

The File Picker

When you select Open you’re presented with the File Picker screen, which is divided into three sections: File picker showing your connected cloud drives top, the New Documents section in the center and Recent Documents in lower area. You’ll notice that there is a selection of template documents such as CVs, social media headings, presentations 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. Last month’s tutorial followed 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.

Editing your document

Editing the text and images in your website or document is very easy. 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. 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.

Replacing images

You can replace images in three ways: Drag and drop an image file from your File Explorer onto the image, or click the image and select the ‘Replace’ menu where you can either select a file from your local disc, or pick the image from your cloud drive. See our movie about adding photos for more details. 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 can see the size of the whole image. If the image is clipped you also get a ‘hand’ control, bottom left, which allows you to re-position the clipped image within the frame. You will see a faint version of the whole image as you drag to show the extent of the full un-cropped image. When you select an image you get resize & crop controls around the outside, a resize/rotate in-frame, handle 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 Colors

Online Designer uses an amazingly powerful system of color control called Theme Colors, which will be familiar to users of Web Designer Premium and Designer Pro X.  For example the heading text in the intro 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 a simple matter to change it to another color, or create a new shade of that color (shades are indicated by the small s in the corner).  If you want 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 you can see here above the blue color, to change the Theme color throughout the document. Here’s a short summary movie of color editing. 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, the small color patch you see under it.  When you change the parent Theme Color 1, all linked shades will change also.

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 synced 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 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 this Documents menu. You will see this is called ‘homeless’ on the status line now, which means it hasn’t been saved to any cloud drive. So it’s like ‘unsaved’. A note on 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

A recent update to 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 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. Note: In earlier versions it was necessary for all recipients to own Designer Pro or Web Designer Premium or sign up for Client Access before they could edit a document - as of Feb 2017 this is no longer the case. If the recipient is a Designer Pro or Web Designer Premium owner they will have full editing access, if not they will have more limited ‘content editing’ rights.  See here for details. 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 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 you let them edit).

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 a full list of our current tutorial movies on our Xara Online Designer page, as of Feb 2017 these are: Introduction Part 1 and Part 2 Editing Text Adding Photos Resizing and Cropping Photos Aligning Text & Photos Color Editing Saving as a PDF Also don’t miss the January 2017 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 versions of Web Designer Premium 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 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 website or document using a web browser on any computer or tablet (including a Mac, iPad, Android tablet or Chromebook), from anywhere in the world, and to re-publish or save it. This is ideal for remotely updating content, images and doing simple edits (for example blogs, news and prices).

Fast & Easy Sharing

What’s more, Xara Online Designer now enables one-click sharing of your documents. This is a simple read-only version (like publishing, similar to a PDF) that can be shared with select people, or the whole world. Also, we’ve just introduced a new easier way to share editing of documents with others. This is perfect for working with colleagues on the same website, or document, at the same time on a collaborative project where edits can be seen live, as-they-happen, by everyone editing the document. And in the case of websites it allows for web designers to give limited editing rights to their clients, allowing them to edit text and replace images. The Xara Online Designer editor

Getting started

In order to edit any Xara document you have to have it 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!  You will need to 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 Online Designer accesses. Screenshot of part 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 and place your Xara file into it. 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 Web Designer Premium or Designer Pro X. (Select the Forgot Password option if you need us to send you a reminder). Note: Once you’ve signed in this way and given permission for access to OneDrive, Dropbox or Google Drive, then in future you can sign-in using your Dropbox, Google Drive or OneDrive credentials. Once you’ve signed in, Online Designer will open with an introductory document showing a few first-time tips on using the program.

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. Try it on the intro document. If you are working on a multi-page document you will see the page thumbnails on the left; simply click a page to scroll 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 key controls are in a bar at the top of the workspace and they’re very simple to use. Xara Online Designer controls Here are a couple of short introductory movies that will tell you more: Introduction Part 1 Introduction Part 2 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.

Opening your document

To open any Xara .web or .xar file that you have saved in Dropbox, Google Drive or OneDrive single click on the Documents menu, top left, and Select Open or Open in new tab.

Connect to your cloud drive

Click the ‘Add cloud drive’ and connect to the cloud drive service you are using. The first time you access these you will be asked to grant permission to access your files, this is because you will be accessing and editing your cloud files. One-click sign-in: Once you have connected a cloud drive, in future you can sign-in to Online Designer using the cloud drive link at the sign-in screen, and you will not have to enter your Xara username or password each time. Easy one-click sign-in.

The File Picker

When you select Open you’re presented with the File Picker screen, which is divided into three sections: File picker showing your connected cloud drives top, the New Documents section in the center and Recent Documents in lower area. You’ll notice that there is a selection of template documents such as CVs, social media headings, presentations 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. Last month’s tutorial followed 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.

Editing your document

Editing the text and images in your website or document is very easy. 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. 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.

Replacing images

You can replace images in three ways: Drag and drop an image file from your File Explorer onto the image, or click the image and select the ‘Replace’ menu where you can either select a file from your local disc, or pick the image from your cloud drive. See our movie about adding photos for more details. 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 can see the size of the whole image. If the image is clipped you also get a ‘hand’ control, bottom left, which allows you to re-position the clipped image within the frame. You will see a faint version of the whole image as you drag to show the extent of the full un-cropped image. When you select an image you get resize & crop controls around the outside, a resize/rotate in-frame, handle 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 Colors

Online Designer uses an amazingly powerful system of color control called Theme Colors, which will be familiar to users of Web Designer Premium and Designer Pro X.  For example the heading text in the intro 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 a simple matter to change it to another color, or create a new shade of that color (shades are indicated by the small s in the corner).  If you want 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 you can see here above the blue color, to change the Theme color throughout the document. Here’s a short summary movie of color editing. 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, the small color patch you see under it.  When you change the parent Theme Color 1, all linked shades will change also.

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 synced 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 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 this Documents menu. You will see this is called ‘homeless’ on the status line now, which means it hasn’t been saved to any cloud drive. So it’s like ‘unsaved’. A note on 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

A recent update to 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 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. Note: In earlier versions it was necessary for all recipients to own Designer Pro or Web Designer Premium or sign up for Client Access before they could edit a document - as of Feb 2017 this is no longer the case. If the recipient is a Designer Pro or Web Designer Premium owner they will have full editing access, if not they will have more limited ‘content editing’ rights.  See here for details. 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 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 you let them edit).

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 a full list of our current tutorial movies on our Xara Online Designer page, as of Feb 2017 these are: Introduction Part 1 and Part 2 Editing Text Adding Photos Resizing and Cropping Photos Aligning Text & Photos Color Editing Saving as a PDF Also don’t miss the January 2017 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 versions of Web Designer Premium 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 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