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
First you have to be an owner of Xara Web Designer Premium or Designer Pro, with a Xara account - you need the email address you registered with Xara.Go to cloud.ixara.comChoose the Xara option to sign-inORIf you have a Microsoft OneDrive, Drop-box or Google account you can use one of those sign-in options if the email ad-dress associated with those accounts matches your Xara registered email.If this is the first time you’ve signed into Xara Online Designer (even if you have a Xara account) you’ll be asked to confirm you want to create a new Online Designer account. No new username or password required.Once you’re signed-in you’re taken straight into the online editor, showing an introduction document that describes the basics of using Online Designer:The first time you sign-in you get this introduction document.To create your own document like this one, you have to pick the correct template.
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 to the file picker:There are three sections to the file picker:1.The top shows connected cloud drives - in this case I have not connected any so there’s none showing.2.The center part shows New Documents, split into categories. These are pre-designed templates - there are not that many in each category yet, but more will be added over time.3.The lower section shows the most recently saved files you’ve been working on - again until we save a file this is empty.
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:Note: if you add a cloud drive, such as Dropbox, Google Drive or OneDrive, you can open and edit any Xara file you have saved to those.
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 cropImages 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 textoption. Now as you move the photo over your text it pushes the text out of the way to flow around the picture.
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, any, 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’ll get an ‘authorize’ request from the cloud service to enable you to read and write files to your cloud drive. Once you’ve OKed 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.
Once you have connected a cloud drive, such as Google Drive, in future you do not need to sign-in using the Xara sign-in option or password. 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).
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, 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 + insert 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.
This template has preset test styles. These are selectable from the Text Style drop-down list on the right side Properties panel. ‘Normal text’ is this main text style, with four heading sizes, which you can see used throughout this document.