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