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.