Publish your story to the world
It’s becoming increasingly popular to create a website that is just an article, or story about a single subject, perhaps a journal, a report, or a product review. These are not really like a regular blog - but just a single page, single column of text, presented in a nicely designed layout designed to focus your attention on the content - with little superfluous clutter or advertising. This document is an example - a single page tutorial for our new Xara Online Designer product. No desktop software needed and using just a web browser, I’m going to show you how incredibly easy it is to produce your own article or story and share it with your friends, colleagues or the world. This is a step-by-step guide to those new to Xara Online Designer. You’re reading the finished published result. Notice the top photo is set to stretch to the browser width. Try scrolling the document up and down to see the parallax scrolling and ‘reveal’ animations on the heading and photos below.Sign-in to Online Designer
You can sign in with the credentials for the cloud drive where you plan to save your Xara Online documents - Google, Dropbox or OneDrive. Or if you prefer to use an email address and password simply click on Register and create a new Xara Online account. If you select one of the cloud drive services to sign in, you’ll be asked to give permission to access Xara with these credentials (first time only). For future sign ins you simply click the cloud drive icon. You can sign in / register at cloud.ixara.com Online Designer will open in the File Picker where you choose the document you want to work on. The first time you sign in you should pick one of the templates and follow our short Intro Tour. Once that is done you’re ready to go!Starting a New Document
Click the Documents menu, top left, and select Open. This is the option to create new documents and open existing saved ones (but we’ve not saved any yet).The File Picker
When you select Open, you’re taken back to the File Picker: 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.Pick the Web Story Template
Just tap the Web folder at the above screen and tap the Web Story file to open the template for this document.Customize this document
So now you have the Web Story template open and you can start to customize it. This will typically involve changing the header photo, adding your own text of course, adding additional graphics or photos, and then just sharing the result. I’ll show you how to do each of these things.Replace the header photo
Just click it and select the Replace option. You can select to upload a photo from your computer, or pick one from a cloud drive. Perhaps the easiest way to replace the photo with a local one, is to just drag a photo file from your file explorer onto the header photo: Tip: It’s best to use a wide or panoramic image as, on the version you share, the image is stretched to adapt to any browser width. You can drag and drop replace any photos on the page including the inline ones below.Adjust the picture:
You can adjust the horizon or rotation of the photo within its frame, as well as its size using this icon in the top right of the photo. If you have enlarged the image so some of it’s clipped, just drag on this hand icon to re-position within the frame.Change the Theme Color
A really great trick that makes your web story look more professional, is to re-use key colors or shades from your photo. All template documents have editable Theme Colors, and with a one click change you can re-color the whole document. So in this example you can see I’ve changed the Theme Color 1, which started as a reddish brown, to be blue to match my beach scene colors. So to change this color, select anything that’s using the color (e.g. place the text cursor in a heading, or select the colored stripe under the top photo) and click the color patch on the Properties Panel. This opens the color pal- ette (see left). In the template there are a few Theme Colors used, the red-ish Theme Color 1, Text Color, a white color called ‘Light text’ which is the shade used on the heading and the buttons at the top. Below the Theme Colors are a fixed (always available) black and white, and shades of gray. If you hold the mouse pointer over the color, a pop-up menu shows the name of the color and a option to change it. Select the Change option and you get a color picker where you can change this to any color of the spectrum. Note as you change this, the whole document is updated. If you want to create a completely new color, just click the + icon. in the color palette.Adding photos into the story
Using the + menu top right, you can add an image to the page (as a local file or from your cloud drive), or you can simply drag and drop an image file onto the document and it will be uploaded. Resize it as required by dragging the bottom right corner., or the side handles to adjust the crop Images added this way are floating - you can drag them to any position on the page, but you might want the picture to push the text out of the way. There are two ways to do this:Repel text around
Select the photo and use the Repel, Wrap, option on the right panel to select the Repel text option. Now as you move the photo over your text it pushes the text out of the way to flow around the picture.Or inline
But suppose you want to embed it inline, so it flows with the text. To do this cut the picture (Ctrl+X), place the text cursor where you want in the text and Paste (Ctrl+V). Now the image is inline. You can even wrap text around the left or right of an online picture. Use the same Repel, Wrap options and choose one of the ‘wrap text’ options. This picture on the right has the ‘wrap text left’ option selected, so text wraps around the left side.Share with friends, colleagues, the world
The point of a Web Story is to publish and share this with the world. This couldn’t be easier. Click the share icon, top right and select Share... You will get a URL link after a few seconds that is a read-only version. The is only visible to those you share the URL with - so it could be just your friends, or the whole world. So send it to your friends, link to it from your website or Facebook post. Update when you’re ready: Your readers see a read-only version that is only updated when you select the Share option again and select Update. This means you can carry on working on edits and only re-publish when you want.Saving your work
You can, and should, save the file so you can carry on working on it, and make updates later. Files are saved to a cloud drive of your choice: Google Drive, Dropbox, or OneDrive (these all provide Gigabytes of free space). Before you save you have to connect one of these cloud services to Xara Online. Click the Documents menu > Save, and you will see the option to add a cloud drive. Click this, select the drive you want to connect. You May get an ‘authorize’ request from the cloud service to enable you to read and write files to your cloud drive. Once you’ve OK’d this, you will be able to browse the drive and folder to save the file. Note: The file is saved as a .xar file, that if you have desktop Designer can be opened and edited using the Windows desktop application.Fast sign-in
Once you have connected a cloud drive, such as Google Drive, you can sign in with this in future. If you are typically logged into your Google account, for example to use your Gmail, then at the sign-in page just click the Google option and you’ll be straight into Xara Online Designer - no username or password required. Further, using the web version of Google Drive, it has a cool trick that you can just double click on a Xara file and it will jump to Xara Online Designer and open the file (welcome to the future where the cloud replaces the desktop).Photo animation
When you share the read-only version of this document, and you scroll down you’ll see that the photos fade-in as they are revealed. This is one of many scroll and reveal animations that are possible in the desktop Xara Designer. You can’t (yet) control the animations in Online Designer, but if you want your photos to fade in this way, just re-use one of these pictures. To do this copy it (from the template), and paste (or paste into the text), then replace the picture with your own, and adjust the size and crop as required. This photo also has a pop-up effect when you click it (on the published version).Adding links or buttons
At the top of the page are two buttons. The easiest way to add more buttons, is to simply copy one of these - click on the outer edge of one of the buttons at the top, and select the Duplicate menu option. Or you can add other button designs. Under the + Add menu there’s a Buttons category. To select the button (not the text inside) click on the edge of the button. You can then resize it (and copy, delete etc). To edit the button text just click on it - the button will adapt its size to the content. You can adjust the alignment by placing the text cursor and using the usual align text options from the right-side Text Properties panel. Adding a link to text is as easy as selecting the text, and using the link icon on the right.Text Styles
This template has preset test styles. These are selectable from the Text Style drop down in the Properties panel. ‘Normal text’ is this main text style, with four heading sizes, which you can see used throughout this document.Find out more…
There’s a great introductory tutorial for Online Designer in our February issue: Easy Online Editing of Xara Documents and a large selection of tutorial movies in our YouTube playlist including: Beginners Intro 1 and Beginners Intro 2 The Xara Online Designer home page at xara.com has links to news about the latest updates and the latest tutorials and movies. Enjoy - the Xara team We welcome all feedback - what works, or doesn’t, or what you’d like to see next.
