WebPlus X8
®
Quick Start Guide
Simple steps for designing your
site and getting it online.
In this guide, we will refer to specific tools, toolbars, tabs,
or options. Use this visual reference to help locate them on
the WebPlus workspace.
1
This Quick Start Guide will walk you through the key stages in
creating a website in WebPlus
X8, including some basic
editing techniques and a guide
to getting your site online.
To install WebPlus X8, insert
the WebPlus X8 program disc
into your disc drive. The
AutoRun feature starts the
setup process. Simply answer the on-screen questions to install
the program.
2
When you launch WebPlus, the
appears.
The assistant lets you create new websites from templates or
from scratch, open WebPlus files, and access articles (tutorials,
news, and more) from Serif's Learn and News feeds. All of the
resources you need to create an amazing website are right at
your fingertips!
For this Quick Start Guide, we'll concentrate on the
button from which we’ll be creating a science-focused website
using a professionally designed Theme Layout.
You can set up Serif Web Hosting from the initial page of
the Startup Assistant. Hover over the right-hand side
and click
until you see the Web Hosting screen, then
click
to begin.
3
You don't need to start from scratch with WebPlus. Instead, you
can create a complete website based entirely on a Theme Layout
(i.e., a set of pre-designed template pages with a similar look
and feel).
To pick your design, simply select a Theme Layout and colour
scheme to suit your taste.
1. On the left of the Startup Assistant, click
.
2. From the left, select
and then
, and choose a
theme from the Templates
pane on the right (e.g.,
Level).
3. (Optional) Next,
select a colour
scheme.
4. (Optional) Uncheck any pages you
don't want in your site.
5. Click
.
There are templates available for both Desktop and Mobile
websites, but we'll concentrate on creating a Desktop site in
this guide.
4
It's really easy to add, delete, rename and rearrange pages to
customize your website's structure.
1. To the right of the workspace,
tab.
click the
2. Double-click a page's name
(e.g., About Us) to display it in
the workspace.
1. On the
select
tab, click the arrow next to
.
2. In the
section of the
your new page a name (e.g., Research).
3. Click
Ÿ
, and
dialog, give
. The new page is added after the ‘About Us’ page.
Double-click a page (e.g., Gallery) in the
tab to select
it, 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
.
5
.
It’s possible to rearrange pages in the
Ÿ
tab.
Drag the Projects page to before the Research Page. When
the
cursor appears, release
the mouse button.
Some objects may be placed on the master page. Master pages
are useful for storing background elements that will appear on
more 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 is
displayed for editing.
2. Triple-click to select the text,
and type your new heading.
3. To navigate away from the master page, simply select a
tab.
different page on the
6
In WebPlus, there are a range of assets that you can use to build
up your site, including graphics, page content and layouts.
Let's add an under construction graphic to an unfinished page in
our site.
1. In the
tab, select an unfinished page (e.g., Research).
2. On the
tab to the left of the
.
workspace, click
3. In the
, type
“construct” into the Search
box in the top-right corner.
4. From the displayed search results, select a
thumbnail.
5. Click
.
6. From the
category on the
tab, drag your chosen
graphic onto the page.
Resize and reposition it as
required.
You can preview your website at any time. From the
flyout on the
toolbar, click
.
7
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 the
text 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 orange
heading text to select it.
3. Type your text.
Ÿ
Triple-click on a text frame to select a paragraph. Start
typing to replace the placeholder text with your own text.
menu at the top left of the
Save your work! From the
workspace, click
then choose a save location.
8
Your website is based on a Theme Layout, so empty picture
frames (shown as envelope-shaped placeholders) can be filled
with your pictures.
1. On the
category.
2. Click
tab, select the
at the bottom of the category.
3. Navigate to, and select your pictures (
multiple pictures) and then click
.
-click to select
The pictures are added to the
tab's category.
4. Drag your chosen
picture onto an empty
frame on your page.
5. (Optional) Zoom in to your pictures by clicking
on the toolbar underneath.
To position a picture inside the frame, select it and click
. Drag on the picture to move it around.
9
Sliders are animated panels which use a slide transition effect to
move from one slider panel to the next. Let’s look at customizing
one of the sliders on the About Us page.
1. On the
tab, double-click the About Us page to
display it in the workspace.
2. At the bottom of the page, select any object on the
page-wide slider, then click
slider can now
be edited
directly on the
page or in
.
. The selected
1. Your first panel is selected, so click on the text to replace
the placeholder content with your own content. You can also
add a picture
by dragging
directly from
the Assets tab.
under the panel, then the
2. Click
to jump to the next panel in the slider.
button
3. Repeat this process until all of the placeholder content on
each panel has been edited.
10
Slider Studio give you more control over your slider design. You
can add more panels, control how panels animate, and adjust
the animation speed – all in a purposely designed studio.
1. Select any panel object, then click
.
2. From the toolbar
under the slider,
select
. The
studio is
displayed.
3. Use the tabs
under the panel
to control your slider:
Ÿ
: change animation style and panel
animation speed.
Ÿ
Ÿ
: Add, delete, or rearrange panels.
: Set a time period in which a specific
panel will display.
4. Click
.
Don’t forget to save your work! From the
menu, click
, or hold down the
key and press .
11
On the Contact Us page, there is an embedded Google Map.
You can add markers to the map (i.e., a business's location) to
help 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/zoom
controls.
1. In the
section of the
. The
click
showing your specified location.
2. Click a location on the map to
add a marker at that point. The
marker will appear in green
(indicating selection).
3. Give your new marker a name
and then click
.
4. Click
.
You'll see the pin in red, as the web
visitor would see it.
12
dialog,
dialog will open,
When you're happy with your site, it's time to upload it to the web
using Serif Web Hosting or a different web hosting provider.
1. From the
click
flyout on the
toolbar,
.
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 to
create your WebPlus Hosting account. Click
.
3. You’ll be sent an activation email which contains a clickable
link to activate your account. Click the link.
4. From the launched Account Details web page, choose an
email address, password, and a domain prefix, i.e. the
name 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 be
changed once created.
5. Select any hosting options and make payment.
6. Click
For
or
choose a
to display your hosting details.
hosting, you can click
to
or
web address suffix instead of
. Choose the new domain name link to do this.
13
If you’ve already set up your hosting from the Startup
Assistant (see page 3) or
menu, click
in
the dialog instead of
.
You will need to add your account details to WebPlus via a popup dialog which will also have appeared when you clicked
Publish 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 the
dialog, click
to check that your details are valid. Note
that it can take up to 30 minutes for your hosting to activate.
4. Finally, click
and then click
. Your files
are uploaded to your website, and are now online!
5. Click
, and type your web address into your favourite
browser. Your website will be displayed.
14
:
Ÿ
Bonus sliders.
Ÿ
Inclusion in future promotions and discount offers.
To register WebPlus, run the software and, when
prompted by the registration screen, follow the on-screen
instructions. To manually start registration, click Help >
Registration Wizard from within the software.
Visit community.serif.com to have your questions answered
by the Serif community.
0845 345 6770
17776
800 489 6720