Website made using only Xara Web Designer, and no other graphics or software tools.
It’s common to have some items which are the same on all pages of your website. The heading text, the header
design, the top navigation buttons and the page footer on this website are good examples. In Web Designer these
are called ‘Repeating Items’. Repeating items have a small flower symbol like this shown in the top right corner
when they are selected.
It’s easy to create your own repeating item. Try adding an object to this page, say a photo, or draw a rectangle, or
perhaps some clipart. Using the Selector Tool select the item and the menu:
Arrange -> Repeat on all pages
Using the Page Gallery you can see the item is now repeated at the same position on all pages. If you change it,
all copies are updated.
Another repeating item is the footer text at the bottom of each page. Using the Text Tool you can just click on the
footer and edit the text as usual. The Edits are reflected across all pages. (Tip: If you don’t want the item on one
page, just delete it off that page. If you want one copy not to be updated automatically just select the Arrange ->
Stop updating menu option.)
If you’re using the premium version of Web Designer you can now also create web-based presentations, such as this
example. And like PowerPoint presentations you use the keyboard right arrow to step through it.
Text flow around
To make any object repel text right-click on it and select ‘Repel text under’. Now, as you move the object around
the page, it repels text around it. This will of course re-arrange everything on your page, and may require you to
re-position items or change the page size to accommodate the overflowing text.
New in Version 7 you can now also anchor graphics to text. This means that the graphic can move with the
surrounding text as you edit the text. The two images immediately below are examples - add a few empty lines
into the text here to see them move.
Page selection and view
A new Page & Layer Gallery, shown on the right side of the window is part of this latest version
7 release. Just click a thumbnail to move to the required page. Click the small triangle next to
each page thumbnail to expand the Gallery to show the layers on the page. If you prefer the
scrolling document view where all pages are shown one below another ‘word processor style’,
right click on the page background and select ‘Multiple Page View’.
Re-ordering and renaming pages
Just drag the page thumbnail in the Page & Layer Gallery to re-order. To rename a page, first
select the page by clicking on it, and then perform a second click on the small page name
shown on the bottom of each page thumbnail. (The first page of your website should always be
Adding or removing pages
If you want to create a new page similar to the current one, just click this icon on the top bar.
(Or the Edit -> Pages menu.) If you want to add a new page from the templates. e.g. in the
style of this one, open the Designs Gallery and from the Examples -> Example Web Templates
section just drag any page design onto this document. See how easy it is to make all the colors
match! The main set of installed page templates are under Website Themes - there are lots of
Let’s explore some of the other tools and features of Web Designer. You can try these things on the semi-
transparent ‘speech bubble’ graphic below. Remember for most operations you must select the item first (click on
it using the Selector Tool).
Change its color: Drag a color from the Color Line below onto the shape. Or try the Color Editor (Ctrl+E).
Change its size, position, angle: Using the Selector Tool just drag on the 4 control points around the shape.
Give it a soft shadow: Select the Shadow Tool, left, and drag on the bubble shape. Adjust the controls at the top.
Give it a graduated color fill: Select the Fill Tool (paint tin icon), and drag across your shape. Drag the ends of the
arrows to adjust. Try dropping a color on the ends of the fill arrow. Or select an arrow end and try the Color Editor
Make it semi-transparent: Select the Transparency Tool (wine glass) and adjust the transparency value using the
slider at the top. Drag the shape over the page to see the transparency effect.
Better still: In the Transparency tool, drag across the object. You’ve just given it a graduated transparency.
Edit Shape: This is a little more advanced. Select the shape, go into the Shape Editor Tool (2nd down on the left),
and drag on one edge of the shape, or on one of the small control points. If you’ve used vector ‘bezier’ editing
tools you’ll be familiar with this.
Finally: Preview any of your changes - everything you do ‘just works’ in the web browser!
(If you’ve used other web authoring, HTML editors or graphics software you’ll realize just how much of an advance Web
Designer is. The ability to re-position anything with complete freedom, along with the graphics tools, and accurate WYSIWYG
results make Web Designer unique amongst web authoring tools.)