Quick Start GuideSimple steps for designing your

site and getting it online.

WebPlus X8®

1

In this guide, we will refer to specific tools, toolbars, tabs,or options. Use this visual reference to help locate them onthe WebPlus workspace.

2

This Quick Start Guide will walk you through the key stages increating a website in WebPlusX8, including some basicediting techniques and a guideto getting your site online.

To install WebPlus X8, insertthe WebPlus X8 program discinto your disc drive. TheAutoRun feature starts thesetup process. Simply answer the on-screen questions to installthe program.

3

 When you launch WebPlus, the appears.

The assistant lets you create new websites from templates orfrom scratch, open WebPlus files, and access articles (tutorials,news, and more) from Serif's Learn and News feeds. All of theresources you need to create an amazing website are right atyour fingertips!

For this Quick Start Guide, we'll concentrate on thebutton from which we’ll be creating a science-focused websiteusing a professionally designed Theme Layout.

You can set up Serif Web Hosting from the initial page ofthe Startup Assistant. Hover over the right-hand sideand click  until you see the Web Hosting screen, then

click   to begin.

4

You don't need to start from scratch with WebPlus. Instead, youcan create a complete website based entirely on a Theme Layout(i.e., a set of pre-designed template pages with a similar lookand feel).

To pick your design, simply select a Theme Layout and colourscheme to suit your taste.

1. On the left of the Startup Assistant, click.

2. From the left, select and then

, and choose atheme from the Templatespane on the right (e.g.,Level).

3. (Optional) Next,select a colourscheme.

4. (Optional) Uncheck any pages youdon't want in your site.

5. Click .

There are templates available for both Desktop and Mobilewebsites, but we'll concentrate on creating a Desktop site inthis guide.

5

It's really easy to add, delete, rename and rearrange pages tocustomize your website's structure.

1. To the right of the workspace,click the tab.

2. Double-click a page's name(e.g., About Us) to display it inthe workspace.

1. On the tab, click the arrow next to , andselect .

2. In the section of the dialog, giveyour new page a name (e.g., Research).

3. Click . The new page is added after the ‘About Us’ page.

� Double-click a page (e.g., Gallery) in the tab to selectit, and then click . In the dialog, click .

1. Right-click a page (e.g., Products) and click .

2. In the section, type the new name of your page(e.g., Projects) and file name and click .

6

It’s possible to rearrange pages in the tab.

� Drag the Projects page to before the Research Page. Whenthe cursor appears, releasethe mouse button.

Some objects may be placed on the master page. Master pagesare useful for storing background elements that will appear onmore than one page. We'll look at editing the main heading.

1. Select the main heading at the very top of your home page,and click . The master page isdisplayed for editing.

2. Triple-click to select the text,and type your new heading.

3. To navigate away from the master page, simply select adifferent page on the tab.

7

In WebPlus, there are a range of assets that you can use to buildup your site, including graphics, page content and layouts.Let's add an under construction graphic to an unfinished page inour site.

1. In the tab, select an unfinished page (e.g., Research).

2. On the tab to the left of theworkspace, click .

3. In the , type“construct” into the Searchbox in the top-right corner.

4. From the displayed search results, select athumbnail.

5. Click .

6. From thecategory on thetab, drag your chosengraphic onto the page.

Resize and reposition it asrequired.

You can preview your website at any time. From the flyout on the toolbar, click

.

8

It’s really easy to overwrite the placeholder text in a template.We’ll look at editing some text on the Home page, but all of thetext in the template can be edited in the same way.

1. Double-click the Home page to display it in the workspace.

2. Triple-click the orangeheading text to select it.

3. Type your text.

� Triple-click on a text frame to select a paragraph. Starttyping to replace the placeholder text with your own text.

Save your work! From the menu at the top left of theworkspace, click then choose a save location.

9

Your website is based on a Theme Layout, so empty pictureframes (shown as envelope-shaped placeholders) can be filledwith your pictures.

1. On the tab, select thecategory.

2. Click at the bottom of the category.

3. Navigate to, and select your pictures ( -click to selectmultiple pictures) and then click

.

The pictures are added to thetab's category.

4. Drag your chosenpicture onto an emptyframe on your page.

5. (Optional) Zoom in to your pictures by clickingon the toolbar underneath.

To position a picture inside the frame, select it and click. Drag on the picture to move it around.

10

Sliders are animated panels which use a slide transition effect tomove from one slider panel to the next. Let’s look at customizingone of the sliders on the About Us page.

1. On the tab, double-click the About Us page todisplay it in the workspace.

2. At the bottom of the page, select any object on the

page-wide slider, then click . The selectedslider can nowbe editeddirectly on thepage or in

.

1. Your first panel is selected, so click on the text to replacethe placeholder content with your own content. You can alsoadd a pictureby draggingdirectly fromthe Assets tab.

2. Click under the panel, then the buttonto jump to the next panel in the slider.

3. Repeat this process until all of the placeholder content oneach panel has been edited.

11

Slider Studio give you more control over your slider design. Youcan add more panels, control how panels animate, and adjustthe animation speed – all in a purposely designed studio.

1. Select any panel object, then click .

2. From the toolbarunder the slider,

select. The

studio isdisplayed.

3. Use the tabsunder the panelto control your slider:

� : change animation style and panelanimation speed.

� : Add, delete, or rearrange panels.

� : Set a time period in which a specificpanel will display.

4. Click .

Don’t forget to save your work! From the menu, click, or hold down the key and press .

12

On the Contact Us page, there is an embedded Google Map.You can add markers to the map (i.e., a business's location) tohelp people to find you and also show where you are based.

1. Double-click the on the Contact Us page.

2. At the top left of the dialog, type

your post code (zip code)or address in the

field, then click.

3. Fine tune the location shown on the map using pan/zoomcontrols.

1. In the section of the dialog,click . The dialog will open,showing your specified location.

2. Click a location on the map toadd a marker at that point. Themarker will appear in green(indicating selection).

3. Give your new marker a nameand then click .

4. Click .

You'll see the pin in red, as the webvisitor would see it.

13

When you're happy with your site, it's time to upload it to the webusing Serif Web Hosting or a different web hosting provider.

1. From the flyout on the toolbar,click .

2. From the dialog, click. You'll be directed to a web hosting page on Serif.com.

1. Click next to your chosen hosting package.

2. For new and existing customers, enter your email address.For new customers, follow the on-screen instructions tocreate your WebPlus Hosting account. Click .

3. You’ll be sent an activation email which contains a clickablelink to activate your account. Click the link.

4. From the launched Account Details web page, choose anemail address, password, and a domain prefix, i.e. thename of your website (i.e., <prefix>.webplus.net,<prefix>.co.uk, or <prefix>.com depending on package).

Be 100% sure of your chosen domain name, as it can't bechanged once created.

5. Select any hosting options and make payment.

6. Click to display your hosting details.

For or hosting, you can click tochoose a or web address suffix instead of

. Choose the new domain name link to do this.

14

If you’ve already set up your hosting from the Startup Assistant (see page 3) or menu, click inthe dialog instead of .

You will need to add your account details to WebPlus via a pop-up dialog which will also have appeared when you clickedPublish to Web.

1. Display your hosting account details on the page on Serif.com.

2. Copy and paste your details from the page into the dialog.

3. When you’re happy, click . In thedialog, click to check that your details are valid. Notethat it can take up to 30 minutes for your hosting to activate.

4. Finally, click and then click . Your filesare uploaded to your website, and are now online!

5. Click , and type your web address into your favouritebrowser. Your website will be displayed.

:

� Bonus sliders.

� Inclusion in future promotions and discount offers.

To register WebPlus, run the software and, whenprompted by the registration screen, follow the on-screeninstructions. To manually start registration, click Help >Registration Wizard from within the software.

Visit community.serif.com to have your questions answeredby the Serif community.

1777

6

0845 345 6770

800 489 6720