Publish your story to the

world

It’s becoming increasingly popular to create a web- site that is just an article, or story about a single sub- ject, 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. Using Xara Online Designer, and this template, I’m going to show you how incredibly easy it is to cre- ate, customize and share such as article with the world at large (or just your friends). To view the finished published result, see here. The photo is set to stretch to the browser width. Try scrolling the document up and down to see the par- allax scrolling and ‘reveal’ animations on the head- ing and photos below.

Customize this document

To create your own Web Story document, just cus- tomize the header photo, and your text, add addi- tional graphics or photos, and then just Share 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 easi- est 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 fit whatever browser width you have. 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, more ‘designed’, is to re-use key colors or shades from your photo. So in this docu- ment I’ve used redish-brown color that fits well with the image. Xara Designer uses document- wide Theme Colors, which if you change, affect the whole docu- ment. So to change this color, se- lect anything that’s using the color (e.g. place the text cursor in a heading, or se- lect the colored stripe under the photo) and click the color patch on the Properties Panel. This opens the color palette (see left). In this document there are just two main colors used, the redish Theme Color 1, and a white color called ‘Light text’ which is the shade used on the heading and the buttons at the top. Below the named color are a fixed (always available) black and white, and shades of gray. If you hold the mouse pointer over the color a pop- up menus 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. To customize this font (or create your own tem- plates), use Xara Designer desktop software.