Websites User Guides. Beginner s Guide

Transcription

1 Websites User Guides Beginner s Guide hibu (UK) Limited 2013

2 Contents Contents... 1 Welcome to your site... 3 Choosing your Template... 5 The Edit Environment... 7 Editing Your Page... 9 Selecting Objects on Your Page... 9 Moving/resizing Objects... 9 Editing Objects Using the Editor The Mini-toolbar Using Multiple Select Copy and Paste Editing Text on Your Page Adding Your Own Files Adding New Objects to Your Page Uploading Your Files File Types Organizing Your Files Creating links Basic Linking Turning Text into a Link Image and Button Links Testing Your Links Adding and Organising Pages Changing the name of your page in the menu Changing the order of your pages Making a page a sub-page Adding a new page Editing hidden pages Mobile Access Arrange Content Mode Image tools Video External Video and other HTML Snippets YouTube Video Google Maps Global Design Settings Site Structure Background Page Master Moving the Menu Your Website Logo Hiding Your Menu or Website Logo Site Settings hibu (UK) Limited

3 Border and Icon Finding your site on the internet Search Engines Google Tools Google Analytics Google Webmaster Tools Sitemap Robots.txt Contact Us hibu (UK) Limited

4 Welcome to your site With our innovative website builder you can build and edit your website in the same way that you browse it. You can build a website for free and try it for 30 days, or you can choose to buy a website up front. Simply follow these steps: 1) Go to the hibu business store (Screen 1): Screen 1 2) Log into your account (Screen 2). If you don t yet have an account, use the Register option: Screen 2 hibu (UK) Limited

5 3) In the Build a website for free banner, click on Choose your design (Screen 3, a): Screen 3 4) Now choose a design for your website by clicking on your chosen template for example JB photo (Screen 4, a): Screen 4 hibu (UK) Limited

6 5) Finally, click 30 day free trial or Buy this (Screen 5, a): Screen 5 Choosing your Template You will first need to choose your template for your website. There is a wide choice of templates, so take the time to choose one that you re happy with. If you have selected a Website Trial your template cannot be changed once you have selected it. If you have decided by purchasing a Website Basic, Plus or Premium, you can change the template you have chosen at any point, but you will lose all the work you have done so far on your website. Go into My Account Select My Products Then select My Websites At the bottom of this page select Change template. This will take you to a new page for you to choose a new template. Once you have chosen your new template you will be reminded that changing your template means that all the copy, images, logos etc. that you have inputted so far will be deleted. You will see TWO popups; the first asking if you are you wish to change templates, the second asking if you are really sure you would like to change templates. You will need to start building your website from scratch at this point. Once you have chosen your template you will be taken into the Edit environment. Here is an example of what it will look like (Screen 6): hibu (UK) Limited

7 hibu (UK) Limited

8 Screen 6 The Edit Environment Your website is made up of a number of different pages. The menu in the work area (Screen 5, a) displays links to each page. Once you log in, you automatically enter Edit mode. In Edit mode you can still see all of your pages and content, but we also overlay the edit tools that allow you to add, remove, or update the contents of your site. These are the three core tools in Edit mode: 1) The Toolbar - At the top of the page (Screen 7, b). This row of buttons contains links to the main editing functions: for example, adding/removing pages, copy/paste, design settings, and more. Once you select Edit on the toolbar, the sidebar will appear (Screen 6, c). NOTE: You ll notice that the sidebar will display context-sensitive options depending on which toolbar button is selected. 2) The Page Editor - This floating panel displays basic settings for the object that is selected on the page, for example position and size, background color, and other specific details based on the type of object selected like font size for text boxes, or website address for links. (Screen 7, d) Screen 7 hibu (UK) Limited

9 3) The File Manager This opens when you click the Files icon in the toolbar (Screen 8, a). This essential tool lets you upload and organize all the files you want to add to your site. (Screen 8, b) Screen 8 If you wish to see your site as your visitors will, then you can click on the View my site button in the top right corner (Screen 8, c). You will be asked to save any changes. Once the page has refreshed, you will see how your site appears to visitors. This will allow you to review the layout, test any or all functionality, and check navigation. To return to edit mode just click on the Edit my site button. If at any point while editing your site you require additional help, click the 'Help' icon on the toolbar. Lastly, when you are finished editing your site for now, you can return to the main hibu business store page by clicking logout in the upper right corner of the screen (Screen 9, a). Screen 9 hibu (UK) Limited

10 Editing Your Page Now that you are familiar with the editing environment and the toolbar, you can start editing your pages. This section covers moving and resizing objects, as well as adding material and text to your pages. Selecting Objects on Your Page Most objects on your page can be edited by clicking on them. Click once to select the object, to move, scale or rotate it. Double-click to edit the contents of that object; for example, to edit the text in a text box. The exceptions are the menu, which is automatically generated according to the pages you have created, and anything on the Page Master (see the Page Master section below for more details). Moving/resizing Objects Click on an object once and you will see a single line border appear around the object with resize handles in the corners (Screen 10, a). Now, if you click within the object border, you can drag your object (e.g. an image, a text box, a widget) around your page. If you click and drag on one of the resize handles you can also change the size or shape of the selected object. Alternatively, you can use the input field on the Editor (Screen 10, b) to enter a specific value in X and Y coordinates, as well as Width and Height values. Screen 10 hibu (UK) Limited

11 Editing Objects To edit the content of an object, like a text box, simply double-click it. When you are editing an object, a grey shadow/border will appear around the object (Screen 11, a) and a title box will appear in the top left corner showing the object name (Screen 11, b). Screen 11 Using the Editor The Editor will allow you to change the settings of an object. The settings will vary depending on which type of object or widget is selected. For example: If you are editing a text box, using the Font tab (Screen 11, c) allows you to change the text font and style. If you are editing an image, by using the Style tab image (Screen 12, a), you can change the background style and the border style (Screen 12, b). There are also Effects and Links tabs. The Effects tab allows you to visually enhance your object, and the Links tab allows you to link your object to a range of other options, for example to an or to another url. hibu (UK) Limited

12 Screen 12 The Mini-toolbar You can use the mini-toolbar to perform basic functions, which is especially useful when working at the bottom of longer pages. The mini-toolbar can be opened from the Editor using the small button beside the tabs (Screen 13, a). It allows you to quickly do the following: Save the page; Upload files; Open the File Manager; Copy, paste, duplicate and delete objects; Add text boxes, title boxes and button links; Move an object below (or behind) others. hibu (UK) Limited

13 Screen 13 Using Multiple Select Sometimes you ll want to move or manipulate more than one object at once. There is an easy way to do this. After you have selected one object, hold down the 'Ctrl' or 'Shift' key while clicking other objects to add to your selection. (Screen 14, a). Once a group of objects has been selected you can drag it around your page, or copy and paste the objects as a group. Screen 14 Copy and Paste To make the task of duplicating or aligning groups of objects much quicker and easier, you can copy and paste a single object or an entire selection, onto the same page or to a different page. To do this: Select your object/s Use the 'Copy' option in the 'Edit' menu of the toolbar (Screen 14, b) hibu (UK) Limited

14 Either 'Paste' the selection (also in the 'Edit' menu) onto the current page or navigate to a different page and paste the object/s there. Editing Text on Your Page To begin editing text or adding new text, double-click on a text box. There is no limit to the amount of text you can add, and you can separate it onto different lines or paragraphs. If you want to change the shape of your text box, to create a narrow column for example, just click and drag the square drag handles to alter its size. Screen 15 To change other properties of the text box, including font, point size, style and color, you will need to use the Font tab in the Editor (Screen 15, a). You can make text bold, italic or underline simply by selecting (or highlighting) the text and then clicking the 'B' (bold), I (italic) or U (underline) buttons (Screen 15, b). You can also select a line or paragraph rather than the entire contents of the text box. Additionally, you change the justification (Screen 15, c) to left, center, right or justified. If you click in the 'Font' selection box a new box will appear for you to select a new font for the entire box (Screen 16, a): in this case, Arial. NOTE you can only specify one font for each text box. If you wish to change the font for only a certain section of text within a text box, you will need to copy that text into a new text box before you change it. hibu (UK) Limited

15 Screen 16 Adding Your Own Files Adding New Objects to Your Page You can add any object to your page using the File Manager. Simply click on the 'Files' icon on the toolbar and this will open the File Manager (Screen 17, a). The File Manager contains a collection of files (images, widgets, animations etc.) that we provide which can be found in the Library (Screen 17, b). Screen 17 hibu (UK) Limited

16 Here, you can browse through the contents of the File Manager. All files you upload will be stored in the Library folder called My Files. When you want to add something to the page, select a file and click 'Use this' (Screen 17, c). You can also access the File Manager and several standard features by using the Insert menu on the toolbar, or by using the Mini-toolbar on the Editor (see Using the Mini-toolbar ) to open the File Manager. NOTE If you want to use files (including images) you didn t create yourself, make sure you get the owner s permission beforehand. Uploading Your Files There are two easy ways to upload your own files and media: Use the Upload button in the toolbar (Screen 18, a) to go straight to Windows Explorer, or Finder if you are using a Mac Click the Files icon on the toolbar (Screen 18, b) to open the File Manager Screen 18 In the File Manager, simply click Upload. This has the same effect as clicking Upload on the toolbar. Screen 19 hibu (UK) Limited

17 You can now browse your computer and select the files you wish to upload. You can use the Shift or Ctrl keys in Windows (or Shift or Cmd on a Mac) to highlight multiple files. Click Open to import your images into the File Manager. By default, they are stored in the My Files folder (Screen 19, b). File Types You can upload files of your choice and add them to any folder you create (Please see Organising Your Files for details). However the software is quite specific about the types of files it can use directly on your site, although it does automatically group your uploaded files into four different types - images, audio, video, and file types that cannot be used directly on your site but which can be downloaded. Organizing Your Files The File Manager allows you to organize the files you have uploaded. Screen 20 Here you can create your own folders (Screen 20, a), rename or delete them, and move files between folders. You can also rename and delete files, and sort the files within a folder for ease of use. hibu (UK) Limited

18 Creating links Basic Linking You can easily add links to your text, images, and buttons. In the following example, we have selected an image that we want to add a link to (Screen 21, a). Within the Link tab in the Editor (Screen 21, b) it is possible to create many kinds of links, including the following: A URL hyperlink to a website address A link to another page in your site A download link to a file (for example, a PDF, docx, or mpeg) A mailto: link for s A login link (provides a link to the pop-up login panel) Screen 21 hibu (UK) Limited

19 Turning Text into a Link Making your text linkable is easy. Double-click your text box to enter Edit mode Highlight any word or sentence, or simply the whole text box if required (Screen 22, a) Select the Link tab in the Editor Then, all you need to do is choose what type of link you want, fill in the appropriate details (e.g. the web address) and click 'Apply' to make the link active. Screen 22 For example, to create a link to a web page on another site you need to highlight the text, click on the web link icon (Screen 22, b), then simply add the URL or web site address to the empty field before clicking the Apply button to set the link. Image and Button Links The same process is used when applying links to images or to button links. Once the image or button link has been selected: Use the Link tab on the Editor to choose the type of link you wish to apply Choose the link destination (web address, address, file, internal page etc.) Always remember to click 'Apply' to set the link. hibu (UK) Limited

20 Testing Your Links To test your links, you need to be in View mode. While you are in Edit mode, your links won t be active. Firstly, save your changes and then use the View my site option (Screen 22, c). This will take you into 'View mode'. Here, you can preview your site, including all links, navigation and features. They will function exactly as your visitors will see them.. Adding and Organizing Pages With the 'Organize pages' function, it is easy to add new pages, change the name of existing pages, and change the order in which your pages are listed in your menu. To access this, click 'Pages' in the toolbar, and then the 'Organize your pages' option (Screen 23, a). The 'Pages' panel will appear as follows. This shows each of your pages in the order they appear in the menu. Screen 23 Changing the name of your page in the menu The name of your page, and how it appears in the site menu, is displayed on the 'Pages' panel in a text box in the example, it is 'HOME' (Screen 23, b). You can click in this text box, delete the current text and insert a new page name. Remember to keep your page names short and relevant, as a long description won't always fit on the menu buttons. hibu (UK) Limited

21 Changing the order of your pages At the left of the Pages panel, you can see each of your pages has been given a number. This indicates the order they are displayed in the main navigation menu (from left to right). There is a 'drag' area in the center of each row (Screen 23, c): click and drag this up or down to change the order of your pages. The other pages will then be renumbered correctly. Making a page a sub-page You can add depth to the structure of your site by creating sub-pages. Sub-pages are not displayed in the main menu, but will appear as another option when a visitor hovers over the 'parent' page or menu item. Within the Pages panel, there is an arrow next to the page number on the left, labelled 'Create subpage' (Screen 21, d). Simply click on this arrow to make your page a 'sub-page' of the parent page above, or click again to revert it back to a parent page. This is shown by indenting the page relative to its 'parent'. The right arrow drops the page down a level (indents it) while the left arrow returns the page to a higher level. NOTE: Only two menu levels are supported. Adding a new page You can add a new page to your site by clicking on the 'Add a new page' button in the top right hand corner of the page (Screen 24, a). Screen 24 A dialog box appears asking you what type of page you want to add, e.g. 'Blank page. This will be a template for your new page. Pick the one that's closest to your purpose, but don't worry, you can add anything you like to your page later. Next you will be asked to give the page a name and choose whether to hide or show it. hibu (UK) Limited

22 Clicking Next will now give you the option to place your page before or after specific pages in the menu or to simply insert it at the end of your menu. Finally, Finish will complete the process. Click 'Apply' when you have finished adding pages or making all your changes and your site will reload with the new menu in place. None of your changes will take effect until you have clicked 'Apply' and exited the 'Add and organize pages' panel. Editing hidden pages When you've added a new page you may want to keep it hidden until you have completed the contents, as any new page that is not hidden will be visible to visitors of your website as soon as you click Apply. To do this you can use the 'Organise Pages' panel to set the page visibility. To the right of every page name in the list is the 'Page visible' radio button (Screen 25, a). When you have finished setting your visible or invisible options, click 'Apply' to set the changes. While the page is 'invisible' you can still edit it by using the 'Pages' drop-down list (Screen 25, b) in the toolbar to navigate to the page and then edit it as normal. Hidden pages while not available in the menu can still be viewed by visitors to your site if a link to the page is provided. For example, you could make a hidden page available to selected visitors by simply supplying them the URL. The easiest way to do this is to copy the page URL from the browser address bar while you are logged in (and editing the hidden page). You can then just paste the URL or website address (with page) into an for the recipient to click on. Screen 25 hibu (UK) Limited

23 Mobile Access It is quite likely that many visitors to your site will be using a web browser on a mobile device, so it is important that you configure your site to provide the right content and format for these users. We provide a tool that makes this quite easy. You do not need to generate additional content for mobile users; all mobile content is based on the content already in your site. (NOTE: for this reason, we recommend completing the basic design and content of your site before configuring mobile options.) Click the Mobile icon on the main menu (Screen 26, a) to open up the mobile editing screen. The Mobile preview tab opens presenting a mobile editing screen shaped like a smart phone so you can get an idea of the dimensions of your site on the device (Screen 26, b). Screen 26 In the mobile editing screen your content is laid out in a similar way to the way it is laid out on your site, with a few variations for a smaller screen. Since the content is based on your existing site content, you cannot edit site content for mobile, but you can hide / reveal content, change mobile formatting, and move content around. Your mobile content is configured around your menu, just like your site. To navigate your mobile site, click the menu icon on the upper right of the screen (Screen 26, c) to access the menu and click through to the various pages of your site. For Online Stores users, Note especially the online store layout, allowing customers to purchase from their mobile devices! Arrange Content Mode In Arrange Content mode you can move content, hide / reveal content, and change mobile platform colors. You are able to control this content in the mobile editing screen on the right (Screen 27, a), and navigate and see your results in the main mobile screen in the center (Screen 27, b). Moving your mouse over a section will highlight it in the edit menu on the right. hibu (UK) Limited

24 Moving Content: to move content around in mobile mode, simply click and drag the drag icons in the editing screen (Screen 27, c). Hiding / Revealing: to hide or reveal content in mobile mode, simply click the eye image in the mobile editing screen (Screen 27, d). Look and Feel: to modify the background and other colors for the mobile view of your site, click on one of the color options (for body text, title text, header text, site background, box background, and header background) to reveal a color palette you can use to change that color. Screen 27 Click Save to save your changes, and try accessing your site on your smart phone to see how well it works! NOTE: At this time, ios web browsers and several other mobile browsers do not support Flash, and come in a variety of screen sizes. hibu s Websites product therefore outputs content for end users in three formats: High-quality flash for desktops Mobile-optimized HTML for smartphones Larger-format HTML for tablets hibu (UK) Limited

25 Image tools From the File Manager locate the Image tools folder within Library (Screen 28, a) and then double- click Image Tools (Screen 28, b). Finally, click Use this (Screen 28, c). Screen 28 hibu (UK) Limited

26 Video You can give your site more interactivity by uploading videos for your visitors to play. You can upload video files such as WMV, MPG or AVI files. There is also an option to embed video from other sites such as YouTube and Google Video; see the HTML Snippet section for more information on this feature. To add video to your page, start by using the Vimeo Video Player widget. Go to the File Manager, select Library, and then Widgets (Screen 29, a). Select the Vimeo widget in the window (Screen 29, b). Screen 29 Select the 'Use this' button (Screen 29, c), and then click 'Upload' The Upload window/panel will open Select the file you want to upload from your computer (just highlight the file and click 'Open') You can rename your video file if that makes it easier to manage before you upload it. Or just select the 'Upload' button to continue to upload the file When you return to the 'File Manager', click 'Finish', and you will be see all your file folders which are contained within the 'My Files' folder. You can browse the 'Your Videos' folder for your uploaded file(s). Select the file and click 'Use this'. To complete the task visit the Style tab and choose the colors for the controls, background and border, and then decide whether your video will play automatically when a visitor lands on your page and whether the main controls will be displayed in the player. NOTE If you want to use a video you didn t create yourself, make sure you have the owner s permission. hibu (UK) Limited

27 External Video and other HTML Snippets Using the HTML Snippet tool, it is possible to incorporate external video, maps applications, and any other external content into your site. All you have to do is insert HTML into the tool from a third party source. This can be any third party source, but here we will discuss two scenarios: inserting external YouTube video and inserting a Google map. YouTube Video This time sselect the YouTube icon, (Screen 30, a), and click Use this (Screen 30, b). Screen 30 Next, in a separate window, go to the YouTube video you want to include (Screen 30). Then: Click the Share option on the YouTube page (Screen 31, a) And Embed (Screen 31, b) Tick the Use old embed code box underneath the code, and choose the desired player size (Screen 31, c) You may want to adjust the HTML Snippet in your website to match the size you are looking for - take a Note of the size in the Info tab of the Editor, and use those X and Y coordinates in the YouTube page (Screen 31, c). Copy the code (Screen 31, d) from the YouTube page hibu (UK) Limited

28 Screen 31 Now, go back to your site editor, and paste the code in the text box in the Setup tab. When prompted to change the widget size, select Yes. Google Maps Inserting a Google map into your website works just like adding a YouTube video. Select a Google Map widget in the Widgets folder in the Library, following the instructions in the previous section. Open the map widget and click the Setup tab in the Editor (Screen 32, a). Click Get Snippet (Screen 32, b) to open a new tab in Google Maps. Screen 32 Enter the address you want to center a map on in Google Maps (Screen 32, a) hibu (UK) Limited

29 Click the link icon (Screen 33, b). Click the Customize and preview link (Screen 33, c). Screen 33 Set your map size Copy the HTML from the text box at the bottom of the screen Go back to your site editor and paste that HTML into the text box on the Setup tab in the editor (Screen 31, a) When prompted to change the widget size, select Yes hibu (UK) Limited

30 Global Design Settings Changing your fonts, menu style, background and more across your whole site is simple. You can alter the Global Design settings by using the Design button (Screen 34, a) in the toolbar. Once you re in the Design menu, a sidebar on the left will appear (Screen 34, b). Screen 34 Site Structure The Site Structure option (Screen 35, a) allows you to define your site size, site margins, site alignment and wallpaper and icons. When selected, a pop-up window appears (Screen 35, b) to allow you to enter all required parameters. Screen 35 hibu (UK) Limited

31 Background The Background on your site sits behind all of your page content. Normally this is a plain color, but it can have patterns and multiple colors for different areas. In the Design sidebar, there is an option for Page background (Screen 36, a). Here, you can change either the color of your existing background (Screen 36, b). You can also upload your own GIF, JPG or PNG files to give you more background options. Screen 36 Whatever changes you make via the Page background option, you can choose to Revert to previous or Apply as required, (see Screen 37). Screen 37 hibu (UK) Limited

32 Page Master The Page Master' is a layer that sits behind every page on your Website. Any object that is placed on your Page Master, including your menu and logo, will appear in the same place on every page in your site. The Page Master can be very useful for putting information that you want to appear on every page, e.g. copyright information or a contact link. You can get to the Page Master in the Design sidebar (Screen 38, a). Screen 38 You will now see your master background layer. You can edit this just like any other page and add or remove content as required - but remember, anything you add to this page will appear in the same place on every page. Be careful not to clutter your site! NOTE: If you set a standard footer and then change your page lengths you run the risk of the footer either hanging mid-page or disappearing off the bottom of the site. Moving the Menu In Page Master mode, simply click on your menu to select it (Screen 39, a). You can now: Drag the menu to a different position on the page by using the arrow keys on your keypad Manipulate the menu to suit your needs by dragging the corner handles NOTE: Remember that your menu will appear in the same place on every page of your site, so make sure you put it somewhere that won't interfere with your other content. When you have your menu, or any other Page Master item that can be included in every page exactly how you want it you can don t forget to 'Save' your work as normal. hibu (UK) Limited

33 Screen 39 Your Website Logo Your logo or site name will usually be on the Page Master too. In Page Master mode you can edit the site logo by double-clicking it (Screen 40, a) and changing the text as you would with any other text box. Just save and exit the Page Master, as you did with the menu to keep your changes. NOTE: You should only use your own logo. Don t use any third party s logo. Screen 40 hibu (UK) Limited

34 Hiding Your Menu or Website Logo It is also possible to hide the Page Master on a specific page (or pages). To do this, go to the page on which you want the Page Master hidden and then click Pages (Screen 41, a) on the toolbar. The Page Management panel will load in the Sidebar with a number of options. Choose 'Hide Page Master on page' (Screen 41, b) to hide the contents of the Page Master, including the menu and website logo, from this page alone. NOTE This automatically happens when you add an Intro page (through the Pages menu) to your site. Screen 41 hibu (UK) Limited

35 Site Settings Your site is initially set up with a fixed width and height depending on the template you use. However you can easily change the size and height of your entire site, or on a page by page basis. To make changes to the height or width of your site, select the Site size in the Design toolbar to see the following window: Screen 42 Here you can adjust three core settings: Site size: the drop-down box (Screen 42, a) allows you to set the size of your site width and height dimensions. All measurements are provided in pixels. There are a number of pre-set options to choose from or, at the very bottom of the list, you can select the 'Custom' option and specify your own values. Alignment: using the Horizontal align and vertical align drop-down boxes (Screen 42, b) you can control how your site s pages are aligned in the browser window. Margins: the four Site margins boxes (Screen 42, c) allow you to create space between the edge of your site and the browser window. For example, if your site is aligned to the top of the browser window, you can set a top margin of 10 (pixels) to separate your site from the edge of the browser. Border and Icon The area in the browser outside your site is referred to as the HTML 'Background'. Note that this is different from the Background (which has been covered above) of the Flash container. You can set the color of this background or you can upload an image to appear as the background to the entire page of your site. All of this is done on the Wallpaper and Icon' panel in the 'Site settings' window. Either select a 'Background color' using the color picker (Screen 43, a), or upload your own file to use as the 'Background image' (Screen 43, b), hibu (UK) Limited

36 Screen 43 You can also create a colored border around the edges of your site area by using the 'Border color' and 'Border width' settings (Screen 43, c), So in summary: you have the website or site (the Flash container) background, the site border, and the HTML background (the rest of the page that surrounds your site). The site can be resized or repositioned and you can even add padding to the positioning. Some users also like to set a 'Favorites icon' (or Favicon) which is used as a small image next to your site address in the browser address bar and as an easy identifier in the favorites or bookmarks menu. To do this use the 'Choose icon' button in the 'Favorites icon' section (Screen 43, d). NOTE You will need to create a 16x16 px (pixel) or 32x32 px.ico file to upload. Tools to do this can be found online: just run a search on favicons. hibu (UK) Limited

37 Finding your site on the internet Search Engines The Holy Grail of all questions! How do I get found and generate business for my site? Unfortunately there is no simple or easy answer to this. The short answer is that it could take several months for your site to be listed in Google's (or any other search engine s) search results. This is because millions of new sites are added each day to the internet and even Google takes a while to find them all. Have patience, it will happen. Just because your site is online doesn't mean people will find it. You need to invest time and effort in both online SEO (Search Engine Optimization) and in the (off-line) promotion of your site through other more traditional means like word of mouth, adding your address to your offline marketing materials and business cards, etc. It doesn't have to cost much, but it can take quite a lot of thought, hard work and time to be successful. Don't expect too much too quickly, after all the best, highest ranked sites have been around for a long time. Google Tools Google offers two excellent tools that can help provide additional information about your site and enable you to manage the way in which Google indexes your pages. These are Google Analytics, and Google Webmaster Tools. Please Note that whilst we make it easy for you to incorporate these tools into your website, they are provided to you by Google. You will need to accept Google s terms and conditions which will govern their operation. We accept no responsibility for performance or non-performance of these tools. Google Analytics Google Analytics is a free service that allows you to track and monitor activity on your site. You can sign up with Google who will give you a unique ID to attach to your site which will track user activity. From this you can see which are your most popular pages and how frequently people return, which sites your website was referred from etc. There is a huge amount of very useful information available especially if you run campaigns or promotions. To set up Google Analytics you can click on the Admin panel, then select the Statistics tab (Screen 44, a). hibu (UK) Limited

38 Screen 44 Once the Admin panel is open: 1) Click on the Sign up for Google Analytics button (Screen 44, b), which will open a new panel (Google Analytics) and then use the Get your Google ID button (Screen 45, a). 2) You will then be taken to Google's own Analytics page where you can sign in to your Google Account (or register for one). If you register, you will need to provide information about yourself, verify your address, and re-sign in. 3) Sign up for Google Analytics - this will ask for your URL (website address), account name (something appropriate), and your time zone. NOTE This is another good reason to ensure that your domain name, if you have one, is set up to point to your website as this will ensure your statistics are more reliable. 4) Then, after providing your name and other required information, you'll have to accept Google's terms and conditions. 5) You will then be presented with a code block containing your Google Analytics ID which you need to copy (to your clipboard). hibu (UK) Limited

39 Screen 45 6) Almost there! Go back to the Admin panel on your site (it should be still open in another window or tab) and paste the code block into the spacious ID field (Screen 45, b) on the Analytics panel. 7) Click OK to save and then just be patient while Google begins to collect data about your site and your visitors. Depending on how popular your website is, it may take a few hours to start collecting data on your stats, or it may take several days. There is a lot of detail and data but the key stats for most users will be: Daily visitors (how many visitors and what percentage are new) Visits and page view tracking (the number of visits which is distinct from your visitors) Content drilldown (the popularity of each page on your site) Google's Help is pretty extensive, so it s a good idea to spend some time understanding the stats. You'll have the basis for some very useful information. They provide good graphing for the visually inclined, plus they offer good options for printing and saving to various formats on your computer. Google Webmaster Tools Google s free Webmaster Tools package allows you to set the frequency with which it indexes your site, as well as allowing you to submit a sitemap to make sure it indexes the correct pages. First you have to verify your site with Google. To do this, go to Services on the toolbar and click on Setup next to Google Webmaster Tools (Screen 45, a). Then click the link Click here to get your Google ID (Screen 46, a) hibu (UK) Limited

40 Screen 46 Screen 47 Google should open in a new window and ask you to sign in. You ll then be taken to the Google Dashboard (you may need to scroll down to the Go to the Dashboard link on the right). 1) Scroll down to Webmaster Tools and click Manage my sites. 2) Add your website address in the blank field and click Add Site ; from there you should be taken to the site verification page. hibu (UK) Limited

41 (NOTE: If you submit your domain name (if you have one) to Google but you have not set up the DNS A-record to point to your site i.e. using masked forwarding, you run the risk of these tools not working. If you simply use one of our free addresses and submit that then you shouldn t have any problems.) 3) Click Alternate Methods and select HTML tag, copy the code string, e.g.: <meta name="google-site-verification" content="ce88wlfkjm3hmhlrdpqysx69unntrq1cdc1bngma7rm" /> 4) Return to your website (which should still be open in another window). 5) Paste the code string into the blank field in the Webmaster Tools panel (Screen 46, b). 6) Click Save. Your site will now have the Google Verification code added to the HTML and can be verified by Google. 7) Go back to your Webmaster Tools page and click Verify to complete the process. Once this is done you can use Google Webmaster Tools, including the ability to submit a SiteMap. Sitemap We automatically generate a Sitemap XML file which search engines will index whenever they visit your site. We automatically publish all pages which are visible in the menu and withhold those that are hidden. If you d like your hidden pages to be published you will need to visit the hidden page, click on Pages, and then go to Page Settings. You can then select the check box for Include this page in my Site Map. To view your site map, you only need to add "/sitemap.xml" to the end of your website address (or URL) in the web browser address bar e.g. To add your Sitemap to Google Webmaster Tools: 1) Log in to your Google account 2) Go to the Dashboard and scroll down to Webmaster Tools 3) Click Manage my sites and click on your site 4) Click the 'Sitemaps menu 5) Click Add/Test Sitemap button 6) Enter sitemap.xml in the box 7) Click Submit sitemap. Once this is done successfully, Google will have an up-to- date list of all the pages in your site. We always publish a sitemap.xml file for your website. If you cannot find one under your domain name then this would indicate that your domain is not set up correctly to point to your website. When set up correctly it will not matter whether you test this on your website or your domain and you will be able to see basic data about each page in the menu which the search engines will index. hibu (UK) Limited

42 Robots.txt This is another file we generate for each site which tells search engine bots (Robots) that two directories on your site should not be read or indexed. None of your readable content is contained within these two folders. Core software files are tucked away in two folders you would not normally know about: /cgi-bin/ and /_app/ respectively. You can test this on your website like you tested the sitemap file above. Just add /robots.txt to the end of your site address (e.g. and it will display the disallow list. hibu (UK) Limited

43 Contact Us If you need more help, please contact us: By phone: (24 hours a day, 7 days a week) By team@hibubusiness.com Online: Or write to us: hibu business Customer Service PO Box 3162 Cedar Rapids IA hibu (UK) Limited