WebsPlanet Designer`s Guide

Transcription

WebsPlanet Designer`s Guide
DIY Editor
User Guide
Copyright © WebsPlanet Ltd. – All rights reserved.
WebsPlanet Ltd. retains the sole proprietary rights to all information contained in this
document. No part of this document may be reproduced, stored in a retrieval system, or
transmitted in any form or by any means, including but not limited to: electronic, mechani cal,
magnetic, photocopy, recording, or otherwise, in use now or in the future, without the prior
written consent of WebsPlanet Ltd.
Table of Contents ● 1
Table of Contents
Getting Started ....................................................................................................... 4
Accessing Hostway and Selecting a Template ................................................................4
Help .......................................................................................................................................5
The Site Content Area .........................................................................................................6
Accessing Content ................................................................................... 6
Deleting Content ..................................................................................... 6
Editing Content ...................................................................................... 6
Moving and Positioning Content in Your Webpage ............................................. 7
Left Panel ..............................................................................................................................7
Popular, Basic, Social, Media and Advanced Tabs ............................................. 7
Settings, Design, Pages and Statistic Menus .................................................... 8
The Upper Panel ..................................................................................................................9
Building a Site ...................................................................................................... 11
Header Area .......................................................................................................................12
Adding a Logo .......................................................................................12
Adding a Header Image ............................................................................13
Basic Tab .............................................................................................................................14
Adding a New Text Widget (Content Block)....................................................14
Adding an Image Widget ...........................................................................15
Adding a Text and Image Widget ................................................................16
Arranging Content in Columns (Columns Widget) .............................................17
Social Tab ............................................................................................................................18
Adding a Facebook link (Facebook Widget) ....................................................18
Adding a Facebook Like Widget ..................................................................18
Adding a Twitter Follow Us Widget ..............................................................19
Adding a Twitter Widget ..........................................................................19
More Social Widgets (The AddThis Widget) ....................................................19
Media Tab ...........................................................................................................................20
Image Gallery Widget ..............................................................................20
YouTube Widget ....................................................................................21
Flash Widget .........................................................................................22
RSS ....................................................................................................23
Advanced Tab ....................................................................................................................24
Contact Form Widget ..............................................................................24
Google Map Widget .................................................................................25
Table of Contents ● 2
HTML Code Widget .................................................................................25
Opening Hours Widget .............................................................................26
Payment Methods Widget .........................................................................27
QR Code Widget .....................................................................................28
World Clock Widget ................................................................................29
Calculator Widget ..................................................................................30
Footer Area .........................................................................................................................31
Site Settings ........................................................................................................................32
General Settings ....................................................................................32
Languages Settings .................................................................................32
Contact Info .........................................................................................33
SEO (Search Engine Optimization) ...............................................................33
Statistics .............................................................................................33
Page Management .............................................................................................................34
Adding a page .......................................................................................34
Page Type: ...........................................................................................35
Deleting a Page .....................................................................................37
Hiding a Page ........................................................................................37
Editing a Page .......................................................................................37
Optimize Page/Category Page for Search and Browser ......................................37
Publishing the Site .............................................................................................................38
Appendix A: Using the Design Menu ............................................................. 39
Themes ...............................................................................................39
Text ...................................................................................................39
More ...................................................................................................40
Table of Contents ● 3
Getting Started
This user guide explains how to build a website using the Hostway system.
Accessing Hostway and Selecting a Template
To create a new website, follow these steps:
1
In the Website Title field enter the name of your site (such as the name of your
business).
2
In Website Category, select the general subject that best suits your site.
3
The Website Theme offers you a rich array of site templates to choose from.
Getting Started - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 4
4
Your primary website will be created based on the template you choose.
5
After choosing the template you want, scroll down, check the Terms and Conditions
box, and click Submit.
6
The default site's home page will appear. This is your starting point to
designing your very own website.
As you continue reading this User Guide, you will become familiar with all the aspects of
website design using the Hostway system and you will discover how easy it is to create a
professional looking website all by yourself. We recommend you use this guide as an
exercise to create your first website with the system.
Help
The system provides assistance and guidance while you work.
1
The first time you log in, you will be shown the new user pop-up guide of the
three system panels.
2
You can access the system's FAQs (Frequently Asked Questions) by clicking the
Help button in the upper panel. In it, you can read questions and answers
about all the aspects of the system.
3
Every time you see a question mark tooltip
next to a textbox field, you
can hover over it with the mouse pointer to view a short description of it.
Getting Started - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 5
The Site Content Area
When you view the site content area, it will already have a template loaded. This is
the template you chose when you created the new site (in the previous chapter of
this User Guide). The screen will contain widgets, which are content blocks,
containing texts, images, maps, etc., which can be easily placed throughout your
site. The template you selected was predefined with default widgets and generic
content. You can use these widgets if they suit your purposes, or remove them
and replace them with your own choice of content.
This section explains how to delete, edit and move the default widgets.
Accessing Content
As your mouse hovers over a content block, such as a text or a picture, a blue
toolbar appears. The toolbar gives you accces to the basic operations you can
perform with the content block (i.e. move, delete, edit).
Deleting Content
To delete a widget, click the close
button on the widget’s blue toolbar.
Editing Content
To edit text, either click the edit
button on the widget's toolbar or click on the
text itself and start editing it. The text editing toolbar will appear and give you
standard word processing functions.
Getting Started - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 6
Moving and Positioning Content in Your Webpage
1
Hover over the widget.
2
Click and hold the move
button and drag the widget to its desired
location. Drop it where you would like it to appear.
Widgets can be positioned in specific areas. If the area to which you move
the widget is available, a bordered section will appear to indicate where you
can place the widget (release the mouse button).
Left Panel
The left panel contains all the elements that allow you to add content to your
website. These include all the options and functions for website designing.
Popular, Basic, Social, Media and Advanced Tabs
These are tabs for all the widgets, or blocks of content, that you will use to create
content on your website.
A widget is a block of content. Each widget can contain text, image, map,
calculator, form, payment methods and more.
The Popular tab includes the most frequently used widgets. All of them
are included in the other menus described below.
The Basic tab contains all the building blocks of the website including
Picture and Text widgets.
The Social tab includes the social media widgets, including Facebook and
Twitter buttons, the Twitter follow us button and a Facebook like button.
The Media tab has many widgets to load media content, including adding
Flash content, adding a Gallery of images, RSS (web feeds to publish blogs,
headlines and video from the internet) and a YouTube widget to show
videos directly from YouTube.Com.
The Advanced menu has important widgets that you will want to have on
your site, including a Contact Form for prospective customers, a Google
Map to show the location of your business, an Opening Hours widget, a QR
Getting Started - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 7
Code to allow your website visitors to scan the QR code with their smartphone, A
widget that lists the business' payment options, A world clock widget and a
calculator widget. If you are savvy with HTML code, you can add your own code to
areas on the website, using the HTML widget.
We will take an in-depth look at each of the widgets in these menus over the
next few chapters of the user guide.
Settings, Design, Pages and Statistic Menus
The Settings menu is used to define basic and advanced options on your website,
including date and time definitions, choosing your site language, adding your
business contact details that will be used throughout the website, SEO (Search
Engine Optimization) to improve visibility of the website to search
engines, statistics definitions and more.
The Design menu will be used to choose the website's theme (you can
change the original template you chose when first creating the site
without losing any of the content of the site), text style, background
graphics and more. For more details, see Appendix A: Using The Design
Menu.
The Pages menu will let you add, edit or remove pages on your web and
also decide if you want to show a page or keep it hidden.
The Statistics menu will give you statistical information of site visits and
use, received from Google Analytics, after you publish your website and define
your Google analytics account in the Settings tab.
Getting Started - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 8
The Upper Panel
In this part of the editing screen you can choose to preview, save or publish the
site you are designing. You can also view FAQ (Frequently Asked Questions) on
how to use the system.
Previewing the Site
To see what your website looks like after making changes, click Preview. The
preview screen will show you what the website will look like once you publish it.
To preview other pages on the site, simply click on them from the menu in the
preview screen.
You can publish the website from the preview screen by clicking the Publish
button.
To close the preview screen and return to the editing screen, click the close
button.
Previewing your Mobile and Facebook Sites
In the preview screen, you can also preview what your website will look like in a
Mobile site or a Facebook site format, by clicking on the View your Mobile site
button or View your Facebook site respectively.
Getting Started - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 9
The Mobile and Facebook previews are available, even if they are not included in
your site package. These sites are generated automatically from the website
content and are very useful tools to promote your business.
You can upgrade the site package to include the mobile or Facebook sites in their
preview screens.
When you are done previewing these sites, click on Back to Site preview and then
close the preview screen by clicking the close button.
Getting Started - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 10
Building a Site
This chapter explains how to fill the webpages with your content, using the side
menus.
The page consists of 3 main parts:
1
Header area – Located at the top of all the pages on the website, and includes
the business logo image and text, the header image and the menu.
This area will display the same content for all the pages on the website.
Widgets cannot be added to this area.
2
Main Content area – This is where most of the work of your website will be
done. In this area you will add widgets and content using the left panel tabs.
Some templates include a repeated area, which displays its content (graphics,
text, etc.) in all the pages on the website (Useful for displaying business
opening hours, images and business contact details).
If you selected a multi-page template, you can move from one page to
another by clicking the relevant page link in the menu, located in the header
and footer areas.
3
Footer area – Located at the bottom of all pages and, like the Header area, it
also contains the pages menu. You can add social media buttons to the footer
(Facebook, Twitter, LinkedIn and Google+) and you can also add text that you
want to be displayed in the footer of all the pages.
This area will display the same content for all the pages on the website.
Widgets cannot be added to this area.
Let's take a look at how to design a page from top to bottom.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 11
Header Area
Adding a Logo
The logo is located in the Header area, at the top of the screen. By default, the
logo displays the site's name.
To change the logo settings, hover with the mouse over the website logo and click
on the Edit Logo button that appears.
In the Edit Logo menu you can:
1
Change the Logo Text – Simply select it and add text to the text box.
2
Hide the logo by choosing No Logo.
3
Add a logo image.
To add a logo image:
1
Choose Logo Image, and Click Upload.
2
Select a logo image from the Public Gallery or from your files or click the
Upload button to get a logo image from your computer.
3
After you select the image, click Submit.
4
The image will appear in the logo location in the Header Area.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 12
Adding a Header Image
When you first create a site, a default header image is provided as part of the
default site template. You can edit or change the header image by hovering over it
and clicking on the Edit button that appears.
In the Edit screen you can:
1
Crop the image – Click and hold one of the handle corners appearing on the
image. Move the mouse to select the area you want to use from the image.
The section you crop will be automatically re-sized and spread over the
space set for the Header Image on the page.
2
To change the image, Click Get Image and select the desired image from the
database or upload an image from your computer.
3
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 13
Basic Tab
Adding a New Text Widget (Content Block)
You can add new text content anywhere you'd like in your webpage.
1
From the Basic tab, drag the Text widget to a selected area on the
page, and release the mouse button.
Any widget can be positioned only in an area designed for it. If you drag it to
an area of a different type, the widget icon turns to a "not allowed" sign and
returns to its place when the mouse button is released.
2
In the section that opens now, type or paste the text.
3
You can use the toolbar to design the font in the text area you created.
4
When you are done, simply leave the text area you created.
5
Don't forget to save…
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 14
Adding an Image Widget
Pictures you would like to use on your site must be pre-prepared in .jpg, .gif or
.png format.
1
From the Basic tab, drag the Picture widget to an area on the page, and
release the mouse button. An Edit screen will automatically appear.
2
Click Upload and select the image from your image database or from your
computer.
3
In the Alt field, you may enter a tooltip for the image. When added, the
tooltip will appear whenever the site visitor hovers over the image (optional).
4
In Description, type the image's description (optional). The description will
appear in the caption below the image.
5
The Align options let you select the image's desired alignment in the
designated area. The alignment will be visible if the image is smaller than the
allocated area.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 15
6
7
Adding a link to an image: When a site visitor clicks the image, it will move
them to the URL. Follow these steps to add a link to the image:
a.
Click the chain button located under Edit Link.
b.
If you want the link to open another page on the web,
click URL and type the address of the page.
Check the Open in new window checkbox if you want the link
attached to the image to open in a new window.
c.
If you want the link to enable the customer to send the site owner an email, click Email and enter the destination e-mail address.
d.
Click Save.
Click Submit.
Adding a Text and Image Widget
1
From the Basic tab, drag the Text & Picture widget to a text area
on the page, and release the mouse button.
2
Add text and a picture using the drag and drop functionality and
edit the widget as explained earlier in this chapter.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 16
Arranging Content in Columns (Columns Widget)
You can divide a section into columns and fill each column with a widget.
1
From the Basic tab, drag the Columns widget to an area on the page you
want to split into columns, and release the mouse button.
2
Click on the area that was split and choose the number of columns you
want it to contain.
3
Drag widgets into the columns and build them as explained in the relevant
sections of this user guide.
4
To edit or remove a widget in one of the columns, hover over the widget and
select its close, move or edit buttons. You can also move widgets between
columns or to other areas of the page.
5
To remove the columned area, first empty all its columns from any content
and then hover over it and click the columns close button located in its
toolbar.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 17
Social Tab
Adding a Facebook link (Facebook Widget)
This widget inserts a "Find us on Facebook" link, with a Like button that leads to
your Facebook business page (it must be defined as a Page and not a profile).
In the URL field, paste the Facebook business page URL and select the Color of the
elements included in the block. The checkable options on the right are Show Faces
(Show/hide your fans' Facebook profile picture), Show Stream (Show/hide your
Facebook Page Content), Show Header (Display the 'Find Us On Facebook' Header
at the top of the widget).
Adding a Facebook Like Widget
1
From the Social tab, drag the Facebook Like widget to the page.
2
In the Edit: Facebook Like screen you can decide how you want the
widget to be displayed (Show Send, Show Faces, Layout, Color
Scheme, Button Title).
3
The widget will appear on the screen as shown:
4
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 18
Adding a Twitter Follow Us Widget
This widget adds the Follow Us On Twitter button (See below).
Drag the widget from the Social tab to an area on the page.
In the Edit screen, enter the business' Twitter username and click
Submit.
Adding a Twitter Widget
This widget shows a live stream of tweets from the business' Twitter
account.
Drag the widget from the Social tab to an area on the page.
In the Edit screen, enter the business' Twitter username and click
Submit.
More Social Widgets (The AddThis Widget)
Add even more social widgets!
Drag the AddThis widget from the Social tab to an area on the page.
In the Edit screen that opens, choose the look of the sharing buttons you
want to display on the screen.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 19
Media Tab
Image Gallery Widget
A gallery consists of multiple images arranged in rows and columns as
shown below:
1
To add a gallery to your website, click on the Media tab and drag the Gallery
widget to the page. The edit screen will appear.
2
Images from your website will be displayed on the right side automatically.
You can decide if you want to delete them or add a description to them.
3
Add more images by clicking the Upload button and choosing images from the
system's database or by uploading more images from your computer and
selecting them to be shown in the gallery.
4
To define the location of a picture within the gallery grid, click its up
down button. Each click moves the picture by one spot.
5
In Thumbnail option, you can decide whether to keep the images in their
original size (Fill thumbnail) or fit them into the gallery's cells (Fit image to
thumbnail).
6
Choose the Columns and Rows structure of the gallery and decide the
thickness of the borders that separate the cells.
7
Click Submit.
or
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 20
YouTube Widget
This widget inserts a link to a YouTube entry.
1
From the Media tab, drag the YouTube widget to the page.
The Edit screen will appear (See below).
2
In Search YouTube, enter one or more keywords and click Search to find the
clip you want from YouTube. Top search result will appear on the right.
3
Click a link in the search results. The address will appear in YouTube URL.
4
Enter a Description. It will appear below the YouTube widget in your site.
5
Select the desired Align option to determine where the video clip box will
appear within the widget area.
6
Check Auto Play to start the clip automatically when visitors open this page.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 21
7
Check Loop if you want the clip to play in a loop (repeatedly).
8
Click Submit.
Flash Widget
This widget adds a Flash runtime file (.swf) to the page.
The flash is used for animated vector graphics, online game and programs.
1
From the Media tab, drag the Flash widget to the page.
The edit screen will appear (See below).
2
Click Upload and select the swf file.
3
In the Alt field enter text that will appear when the mouse pointer hovers
over the section that contains the flash file.
4
Select the desired Align option of the Flash content in the area reserved for it.
The alignment is visible if the size of the content is smaller than the allocated
area.
5
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 22
RSS
This widget adds an RSS feed to your page.
1
From the Media tab, drag the RSS widget to the page. The edit
screen will appear (See below).
2
In RSS Feed URL, enter the address of the source that provides the feed.
3
In Amount of Items, enter the number of feed items to show in the RSS block
on the page.
4
In Transition Effect, select how the stream will flow in the RSS block.
5
Check the boxes you want shown in the RSS area.
6
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 23
Advanced Tab
Contact Form Widget
1
From the Advanced tab, drag the Contact Form widget to the
page.
2
Select the format of the form you want to use on the page.
3
Click Settings and enter the following details:
Form name and Description - Enter a name and a description for this form.
Button Title - Enter the caption of the "Send" button in the form (i.e. Be in
Touch!)
Recipient Email - Enter the email address of the recipient of the form (usually,
the business' address). By default this will be the email first entered to create
the website.
Email Subject and Message - Enter the Subject and body of the e-mail
message that will be sent to the business email address (Example: Contact
form submission, a form on your site was submitted with this info).
Thank you message - Enter the text of the message that will be displayed
after the site visitor clicks the "send" button in the Contact Form.
4
Use anti-spam security code - Check this button to add a "Captcha" to the
form.
5
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 24
Google Map Widget
1
From the Advanced tab, drag the Google Map widget to the page.
2
In Location, enter the address of the location you want to show on the map
and click Add.
3
You can repeat this step to add multiple locations. As you add them, the map
expands to contain them all.
4
Remove a location by clicking its delete button.
5
Click Submit.
HTML Code Widget
This widget lets you embed your own HTML code into a page, letting you further
customize the look and feel of the website.
1
From the Advanced tab, drag the HTML widget to the page.
2
In the Edit screen, type in or paste the HTML code into the text area.
3
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 25
Opening Hours Widget
1
From the Advanced tab, drag the Opening Hours widget to the page.
2
In the editor screen, choose the Time format and enter the opening hours of
the business.
Note: You can click on Always open to define the business as such, or add
more time-frames by clicking the Add button located in the right side.
3
Add Comments you want to appear below the time table.
4
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 26
Payment Methods Widget
This widget enables you to display the payment methods accepted by the business
on your website.
1
From the Advanced tab, drag the Payment Methods widget to the page. The
edit screen will appear (See below).
2
Select the payment methods the business accepts by clicking on them.
3
Add text that you wish to display below the payment methods in the More
Information text field.
4
The payment methods that you check will be displayed on the screen after
you click Submit (see example below).
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 27
QR Code Widget
This widget allows you to embed a QR Code on the page that displays
your business contact details, as defined in the widget's editor. This QR
Code can be scanned by a mobile device and will display the information
on the user's phone, or even direct them to your website.
1
From the Advanced tab, drag the QR Code widget to the page.
2
In the editor screen, enter the details you want to appear when a site visitor
scans the QR Code with their mobile device.
3
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 28
World Clock Widget
Use this widget to display your local time zone as well as other time
zones from around the world.
1
From the Advanced tab, drag the World Clock widget to the page.
2
In the editor screen, define the location title and the local time zone for the
world clock.
3
Check the Daylight Saving checkbox to enable daylight savings time.
4
Click the Add button to define more clocks in the widget that the site visitors
can choose from.
5
Choose to display a background image for the clock that changes with the
time of day.
6
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 29
Calculator Widget
This widget lets you add various calculators to the page.
1
From the Advanced tab, drag the Calculators widget to the page.
2
Choose one of the calculators from the Edit screen that appears:
Unit Calculator – Lets site visitors convert unit measurements
(meters, inches, area, length, volume, weight, etc.)
Tax Calculator – Lets site visitors calculate tax price and total price of
purchases.
Calorie Calculator – Lets the site visitor calculate their recommended daily
calorie intake based on Age, Gender, Height (in foot or cm), Weight (in Kg or
Lbs) and Activeness information.
Mortgage Calculator – Lets the site visitor calculate the number of payments
and monthly payment for a loan.
Pregnancy Calculator – Lets the site visitor calculate when the baby was
conceived, when he is expected and he's current fetal age.
3
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 30
Footer Area
The footer content will appear in all the pages on the website.
The footer area includes:
Menu – Displaying the website's menu items.
Footer Content –
Add text content and social media links to the footer area:
1
Hover over the footer area and click the Edit Footer button that appears.
2
In the Footer Editor, add content into the text area and use the toolbar to design the
content (Align, bold, change font size, add hyperlinks and more).
3
Add the sharing button to the site footer by adding the business' social media links
(Facebook, Twitter, LinkedIn and Google+) to the empty textbox next to each icon.
To add footer content to a specific page in the website using HTML code, see the Page
Management section.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 31
Site Settings
Site Settings are a very important part of website creation as they define global details
and settings for the website. To enter the Site Settings screen, click on Settings located in
the left panel.
General Settings
In the Site Settings screen, click on General.
1
Website Address – The website's address will be written here. You can click on the
link to view the published website.
2
Website Title – The title will appear on the browser's tab or window bar.
3
Favicon – Upload an image that will appear in the browser tab and address bar (.ico
is recommended).
4
Date Style – Define the date style on the website (Example: mm.dd.yyyy or
dd.mm.yyyy). This is a global setting for the website and will affect all relevant
content using a date style.
5
Time Zone – Define the website time zone. This is a global setting for the website and
will affect all relevant content using a date style.
6
Header and Footer code – Add HTML code to the header and footer area.
This is a global setting for the website and will affect all relevant pages.
7
Site Under Construction – Check the checkbox if you want the website to be offsite.
When checked, visitors to the website will see a "Site Under Construction" notice.
Note that the site will go online only after you publish it.
8
Current Package – Indicates the current package deal the website is on.
Languages Settings
In the Site Settings screen, click on Languages.
1
Site Languages – Select the Site Default Language. If the website has a package that
includes multiple languages, you can add more languages using the Add button.
Note that the website is defined separately for each language. A link for each
language will be displayed in the content area of the website.
2
Editor Language – Defines the language of the menu, tools and widgets in the editor.
3
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 32
Contact Info
In this menu, all the contact details of the business are stored. These details will be used
for relevant widgets and forms throughout the website.
1
In the Site Settings screen, click on Contact Info.
2
Enter all relevant business contact details (Email address, Phone Number, Mobile
number, Fax number, Address, City, Zip Code, Country and State).
3
Click Submit.
SEO (Search Engine Optimization)
This menu is used to optimize search engine access to the website.
1
In the Site Settings screen, click on SEO.
2
Check the Open to Search Engines checkbox if you want search engines like Google
to search the website and add it to their search results.
3
Site Keywords – Enter the keywords and themes of the website, separated by
commas. Search engines will add the page to their search results based on these
details.
Site Description – The description will appear below the website title in the search
results of search engines or in directories.
4
Click Submit.
Statistics
Add the website's Google Analytics details (username, password and account ID).
This will be used by the statistics menu to access the statistical information Google
provides on the website.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 33
Page Management
This section explains how to add pages to a multi-page website. It assumes a basic
familiarity with website structures and web search engines (like Google).
Adding a page
1
Click Pages located in the left panel. The Page Management will appear.
2
Click Add Page, a new Add Page screen will appear.
3
Enter the Page Name, note that this is the name that will be displayed in the
menu.
4
Select Page Type (Detailed in-depth below) and add the required information
5
Click Submit.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 34
Page Type:
Blank Page – An empty page, containing only global parts of the
websites (Header, Footer areas that are shown in all the pages).
Link Page – This can be used to forward a site visitor to an internal or
external webpage. When clicked in the menu, the linked page is
opened in a new screen or tab.
To add a Link Page, click on Link and add the linked page's URL
address in the Page Link section.
FAQ Page – A page designed for Frequently Asked Questions.
This is very useful to provide site visitors with answers to questions
they may have about the site or business.
1
After adding the FAQ page, click on the page in the menu and click
on the edit button appearing under its name.
2
In the FAQ editor, click on Add Categories to list the subjects that
will appear in the FAQ page.
3
Click on each category (the category will turn blue) and click Add Item to add
questions and answers to that specific category.
4
To reorder a category or an item, hold the mouse on
the 3 lines, located on its left side, and drag it up or
down in the list.
5
When done, click Submit.
More details about items and categories in the FAQ:
If there is more than one category, each category will be a link to the category
page. When the site visitor chooses a category, they will be transferred to a page
containing all the Questions and answers items listed under the category.
Clicking on the category's arrow head, located on its right side, will allow you to
rename or delete it.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 35
To delete an item or items, check the checkbox located on the left side of each
item and click on the garbage can button.
To edit the content of an item, click on the arrow head located on its right side.
Jobs Page – This page is designed for the business to post job
opportunities on its website for prospective job seekers.
The design of a Job Page is very similar to that of an FAQ Page:
1
After adding the Job page, click on the page in the menu and click
on the edit button appearing under its name.
2
In the Jobs editor, click on Add Categories to list the different
position categories that will appear in the Jobs page.
3
Click on each category (the category will turn blue) and click Add Item to add
a Job position offer to that specific category. In each item, enter the job
number or code, job title and job description.
4
To reorder a category or an item, hold the mouse on the 3 lines, located on its
left side, and drag it up or down in the list.
5
When done, click Submit.
More details about the Jobs Page:
If there is more than one category, each category will be a link to the category
page. The category's items (job offers) will be listed according to their order in the
editor.
Below each item in the Jobs Page, There is a link Apply for This Job that the site
visitor can click and be directed to send an email to the business.
Clicking on the category's arrow head, located on its right side, will allow you to
rename or delete it.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 36
Deleting a Page
To delete a page (note: The page cannot be undeleted later):
1
Click on Pages in the left panel.
2
In the Page Management screen, click Delete, located to the right of the page.
Hiding a Page
To hide the page from the website menu
1
Click on Pages in the left panel.
2
In the Page Management screen, click the Eye icon, located to the right of the page.
Note: The page is still active and accessible with its link
Editing a Page
To edit a page:
1
Click on Pages in the left panel.
2
In the Page Management screen, click Edit, located to the right of the page.
Optimize Page/Category Page for Search and Browser
Click the advanced setting
button, located on the right side of each page or
category to add information for browsers and search engines:
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 37
Title – The title will appear on the browser's tab or window bar.
Description - The description appears below the page link in the search results
pages of search engines.
Keywords - Enter the keywords and themes of the page, separated by commas.
Search engines will add the page to their search results based on these details.
Friend URL – Use a meaningful term that will be easily understood to by your
website visitors and search engines for better usability and Search Engine
Optimization.
Header and Footer code – Add more code to the header and footer area for the
specific page.
Crawlers Data (in category pages only) – Check the box if you want search engines
to add the page to their search results (Unchecked by default).
Click Submit when you are finished.
Publishing the Site
When you are done building your site, click the Publish button. This publishes your
site on the Internet at the address you entered in the Domain field, in Personal
Details.
You can also preview your site using the Preview screen, where you can also view
the Mobile and Facebook preview sites.
Now that you know all the many features, options and widgets the system has
to offer, you can design your website like a pro!
Go ahead and prepare your very own website using this user guide as a step-bystep assistant. You can also use the tooltips available throughout the system
(look for the question marks) and the FAQs in the help button.
Building a Site - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN - FINAL (DL) ● 38
Appendix A: Using the Design Menu
The Design Menu offers additional design tools for you to use on your website.
Don't worry, the content of your website (text, images, widgets, etc.) will not be
affected by the changes you make in the Design area.
To enter the Design screen, click Design in the left panel.
Themes
In this menu, you can select a template from a list of Website Themes.
1
In the Design screen, click on Themes from the left menu.
2
Click on the drop-down list to select the Website Theme for your website.
You can also choose all to view all the themes available in the system.
3
Select your preferred template from the preview images displayed.
4
When you are finished, click Submit.
Text
1
In the Design screen, click on Text from the left menu.
2
In this area, you can define the global text styles that will be used in your website
from the drop-down lists in the text menu (Font types, size, color).
3
You can view the result of every change in the Text Preview area located to the right
of the color change area.
4
To revert to the default text style definitions, click Restore.
Appendix A: Using the Design Menu - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN FINAL (DL) ● 39
More
1
In the Design screen, click on More from the left menu.
2
In this area, you can design your Site Background and Site Out of Bound:
For each of the above design areas you can choose to:
a. Load an image from the system's image database.
b. Upload an image from your computer.
c. Choose a color from the color palette on the right side of the menu.
3
If you choose to use an image, you can set the following parameters for it:
Position – Choose where to position the image on the page.
Repeat – To display the image as a tile (repeated many times) in the area it was
positioned.
Down – To have the image repeat vertically.
Across – To have the image repeat horizontally.
No Tile – To prevent the image from repeating.
4
You can always revert back to the template's original state by clicking Restore.
5
Site Alignment – Define the position of the site content
area (Left, center or right).
6
When you are finished, Click Submit.
Appendix A: Using the Design Menu - HOSTWAY USER GUIDE TO DIY WEBSITE DESIGN FINAL (DL) ● 40