Repeating Items

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 objects’. A small flower symbol like this is 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 -> Repeating object -> Repeat on all pages. Using the Page & Layer Gallery you can see the item is now repeated at the same position on all pages. If you change it or move it, all copies are updated. 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 object and use Arrange -> Repeating object -> Stop repeating.

Responsive Web Design

With Web Designer you can create mobile optimized websites which dynamically adjust to different width devices. So you can create a version of your website that is tailored to narrow screen phones and at the same time offers a different layout and text sizes more suited to wider screen devices such as tablets and desktop browsers. Here is an example, that provides three layout variants for mobile, tablet and normal desktop browsers. All of the web themes in Web Designer include mobile variants, but if you have based your site on an older theme or created your own design, then you can add variants to your own design. Start by right clicking on the page background and selecting Website Variants > Website Variants > Create. Read this popular online intro to get you started.

Supersites (Web Designer Premium only)

Supersites are an advanced feature of Web Designer Premium. They can be single scrolling pages or have eye-catching page transitions to help make your website stand-out from the crowd. Supersite example 1 : A responsive restaurant menu aimed at tablets and desktop browsers. Rotate your device (or change browser width) to see a different layout for landscape and portrait (this is not aimed at mobile) with an automatic fit-to-screen effect. Supersite example 2 : A simple photo slideshow with fit-to-screen, orientation detection, and Retina resolution images. Note this contains large hi-res photos so is best on fast connections. Both these examples support swipe gestures on touch devices to navigate from page to page. To export your site as a Supersite right click on your page and select Web Properties, in the Website tab select Web Export Options and check the Supersite option. Now you can choose between the scrolling and transitions styles.

Presentations (Web Designer Premium only)

If you’re using the Premium version of Web Designer you can create web-based presentations, which are a web-based PowerPoint-like slideshows which your visitors can step through. Here’s an example web presentation.

Sticky Objects & Stretchy Backgrounds (Web Designer Premium only)

Two very common features of contemporary web designs are Sticky Objects (objects which ‘stick’ in place as you scroll up and down the page, typically NavBars or social network buttons) and backgrounds that stretch across the whole width of the browser window. Here’s an example website with both sticky objects and stretchy backgrounds. Creating them is easy, right click on the object and select Web Sticky/Stretchy to define what you want to stick or stretch and where.

Google Fonts (Web Designer Premium only)

This text uses a font called Open Sans, a clear, modern family of fonts that are bundled with Web Designer. But you now have a choice of over 600 fonts, thanks to Google Fonts. Web Designer includes a great font picker, and will automatically download and install any font you choose. Better still, these are normal Windows fonts that, once installed, will work with any Windows application. When used in web documents these fonts are served from Google’s servers (saving you bandwidth) and are compatible with all modern web browsers. To view and install a Google Font, from the font drop down menu (Text Tool), just click the Add link shown here.

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.

Page adjustments

If you add or remove text here, the page resizes to accommodate the text changes, all the items lower down the page shuffle up or down as required, including the graphics and the footer. Even the flower graphic at the bottom of the page remains in the correct place. These are controlled from the Position on Page context menu (right click in the Selector Tool). Items with Push set (such as this column of text) will push the page footer all other items marked with ‘push’. You can paste graphics or photos to inline in the text, or you can anchor floating graphics to a point in the text. This means that the graphic can move with the surrounding text as you edit. The two images immediately below are examples - add a few empty lines into the text here to see them move.

Page selection and view

The Page & Layer Gallery is shown on the right side of the window. Just click a