SIGBI-Hosted Websites Club Administrator s User Guide - updated January 2017

Transcription

1 SIGBI-Hosted Websites Club Administrator s User Guide - updated January 2017 This document is bookmarked for ease of reference. To view the bookmarks, right-click anywhere on the page to bring up a menu, and select View Navigation Pane, which will display a vertical menu at the left hand side. Click on this symbol to display the bookmarks. This will display a list of contents, and clicking on the item required will take you directly to that item. Or you can use the Table of Contents on page 2.

2 Table of Contents 1. Getting Started Logging in Getting a new Password Setting a new Password once you have logged in The SI Clubs Editors: Important settings/messages box Item 1: Update your Item 2: Choose between your latest posts or a static page for your homepage Item 3: Add your Contact Page Item 4: View the latest Club Editor s User Guide Items 5 and 6: Add links (with icons) to your Clubs Facebook/Twitter pages Adding/Amending/Deleting a User Your Website Template Pages Adding a New Page Options Available for Pages Page Attributes Publish Creating a Members only section on your Club Website Editing an existing Page Deleting a Page Recovering a deleted page Permanently deleting multiple pages Quick Edit Adding a Contact Us Form Changing the Home Page Posts Categories Adding Posts Editing / Deleting posts Use of Tags What are tags? General tagging tips Keywords Meta Tag How to add tags Page 1

3 3.4.5 Managing Tags Bulk Actions Images Uploading an image Options for Images Moving the picture/changing the attributes once it has been Inserted Uploading an Image directly into the Media Library Editing an Image after it has been uploaded Cropping Re-sizing (scaling) an Image Other Image Editing Options Reverting Set Featured Image Videos Embedding your videos from YouTube into your website PDFs Maximum size of upload Creating a reduced size PDF Creating PDFs from Word Uploading PDFs Creating a link to the PDF from a page/post Links Linking to PDFs Linking to external sites Linking to other pages of your own site (internal links) General Editing Tips Pasting text from Word Tables Using Bold/Italics/underline Bulleted/numbered lists Indenting paragraphs Choosing heading styles Adding changing images (slideshow) to a page or post Image Size Creating your Slideshow 53 Page 2

4 9.3 Embedding the Slider in a Page/Post Adding Google Analytics to your Website Dashboard Creating a Google account Setting up your SIGBI club page to track visitors Configuring the dashboard widget for visitor overview 63 Page 3

5 1. Getting Started 1.1 Logging in If you are logged into the members area of the SIGBI website, then you must log out of this before you can log into the administration panel (click Sign off members area at the very top of the screen). To login to your club website, you need to go to the URL You will be presented with the following login page: Here you will enter your username and password (these will have been supplied when your account was created with Federation Office). Then click the Log In button. Page 4

6 1.2 Getting a new Password If you have forgotten your password, or the password you are entering is not accepted, please select the Lost your password? link on the login screen ( On the following screen enter your address and click Get New Password. You will receive an from sigbi.org containing a link that you need to click to confirm your request for a new password. Open the and click the link. You will then be directed to a screen where you can enter a new password: Enter a password of your choice twice as indicated. You will be advised as to the strength of your password (Weak, Medium or Strong). If you cannot get a new password, because your is unrecognised, then contact Federation Office as it may be that you are not registered as an Editor for the website. This may be because you have recently taken over as Club Website Administrator and the change has not been notified to Federation Office. Page 5

7 1.3 Setting a new Password once you have logged in You can change your password at any point from within the Dashboard. At the top RH side of the Dashboard, you will see the words Howdy Username : Move the cursor over these words and select Edit My Profile from the dropdown menu. On the next screen you will need to scroll down until you see New Password, the click onto Generate Password. You then need to enter the new password. Click Update Profile to save the new password. Page 6

8 1.4 The SI Clubs Editors: Important settings/messages box When you first log into your website you will be in the Dashboard. If you move away from the Dashboard at any point, you can return to it using the Dashboard link in the LH panel. The Dashboard contains a box called SI Club Editors Important Settings/Messages, which contains links to seven important items: Item 1: Add your Google Analytics Tracking Code Clicking on the link will take you to the screen below, where you can add your Google Analytics Tracking Code Item 2: Update your When you create a Contact Us page, any messages that sent via this form will be sent to the address specified, so it is important that if the administrator changes, this address is updated. Page 7

9 Tip 1: only users registered on the system can put their address in here. If you want someone else, eg Club Secretary, to receive messages, inform Federation Office who will add her as a user. Tip 2: If your website has just been created you do not need to do this as your address will already have been entered. If the website administrator changes, the new administrator needs to do this. Click the link for Item 2. It will take you to a screen where you can enter your address. When you have done this and clicked Save Changes, the address will be REPLACED by the previous one, and a message highlighted in yellow will be shown that the change of address is pending : You will receive an , which contains a link that you need to click to confirm the request. Tip: Make sure you are logged into your Dashboard BEFORE you click the link. Otherwise it will not work. Click the link and you will see the address being updated. The page is automatically saved, so you do not need to click Save Changes. Tip: Item 2 needs to be done every time the website has a change of administrator Item 3: Choose between your latest posts or a static page for your homepage Tip: You must have at least one published post and one published page before you can do this. Click on the link from Item 3. This will take you to a screen where the following option is displayed: Page 8

10 The default is that both these options are not checked, which results in an error message when viewing the site. Simply either click Your latest posts which will list all your posts (see chapter on Posts) or A static page then click the down arrow on the box next to Front Page. A list of available pages will be displayed. Click on one to select it, then click Save Changes. Tip: The best page to select is usually About Our Club or President s Message, but a page called Programme Work with details of projects would also be good. The home page should have lots of colour in the form of pictures to be eyecatching use the Featured Image tool to make a particularly striking home page see the Chapter 4 for details or add a Slideshow with changing pictures see section Item 4: Add your Contact Page All Club Websites, when created, have a Contact Us tab across the top of the website: By default, this tab links to the main SIGBI Contact Us form, so any messages that are sent using this tab will be sent to SIGBI Federation Office, and will then be forwarded to your Club Secretary. However, you can create your own Contact Us form, which will then send all messages to the website administrator. See the notes in 1e i) above, because you need to ensure that the address that messages are sent to is kept up to date. Click Item 4. This simply displays all pages, and you need to click Add New in the LH menu, under Pages : Page 9

11 This will display the editing screen for a New Page this section is repeated in the Chapter on Pages, so that you are familiar with Pages by the time you do this. In the title box enter the title Contact Us it must be that title in order for the Contact Us tab to recognise it. In the box at the RH side of the screen called Page Attributes click on the arrow next to the box under Template and select Contact. You can add words at the top of the page, eg If you wish to contact SI (Clubname) then please use the form below. Click Publish to publish the page. You won t be able to see a form in editing mode, but when you view page or when a visitor goes to your website, the form will be on the page Item 5: View the latest Club Editor s User Guide If you are reading this user guide then you will have already completed this option. You can download the user guide, or print it, but it is 63 pages long, so you are recommended to only use it for reference when you need to know how to do something Items 6 and 7: Add links (with icons) to your Clubs Facebook/Twitter pages Both these links go to the same screen, so either of them can be used. On the Links screen, click Add New : On the next screen, simply call the link either Facebook or Twitter (do not use any other title), and put the full web address to your Club s Facebook or Twitter page(s) where indicated: Page 10

12 Click Add Link at the RH side of the screen. You can add links for both Facebook and Twitter if required. When you view your website, the words Follow SI (ClubName) and underneath Follow us on Facebook / Follow us on Twitter or both, linking to the relevant account(s), will be displayed at the bottom of the LH Panel (underneath the list of pages). 1.5 Adding/Amending/Deleting a User If you want more than one person to be able to update the website, to change your website administrator or to remove one of the people able to amend the website, please contact Federation Office as soon as the change is required. 1.6 Your Website Template When your new website template is created, it has no pages or posts, so you need to create them. This is detailed in the next section, as well as the difference between posts and pages. The link from the SIGBI Website is not created until you inform Federation Office that your site is ready to go live. You can view your site at any time from within a page or post by clicking View Page or View Post respectively. This is described in more detail in the next section. Page 11

13 2. Pages There are key differences between posts and pages. Posts are entries listed in chronological order (newest at the top) on your website. Posts can be found in the Archives, Categories, Recent Posts and are also displayed in the RSS feed of your website. They can also help the Search Engine Optimisation (SEO) of your website, as tags can be used that Search Engines (eg Google) look for when updating their search lists. Posts should be used for News Items. Pages are static and are not listed by date. Pages do not use tags or categories. This section deals with pages. 2.1 Adding a New Page At the LH side of your Dashboard there is a menu: To add a new page to your website, move your cursor over the word Pages and select Add New from the pop up menu: Page 12

14 On the next screen, enter a page title and the text of the page in the editing box. You can copy text from a word document and also add pictures and PDF downloads, and these are dealt with in later sections of this manual. You can increase the size of the editing box by clicking and dragging the corner. When first created, a new page is not visible to the public. You can click any time to save the work you have done, whilst still keeping the page not visible to the public on the website. at If any of the boxes on the RH side of the screen (eg Publish) are closed (ie the options they offer are not visible), click the down arrow at the RH side of the box to expand it. Page 13

15 2.2 Options Available for Pages At the right hand side of the page, there are several boxes where you can select various options for how the page is displayed. They may not be in the same order from top to bottom as the order of the descriptions below. You can change their placing on the screen by moving the curser to the heading of the box (so that it changes to a 4 headed arrow move shape, and clicking and dragging the box to where you want it Page Attributes The options in this box should be selected before publishing the page. Parent: If the page is to remain at the top level of the website (i.e. visible to users as soon as they view the website), then leave the Parent box defaulted to no parent. If you click on the arrow next to this box, you will see that all the pages (including subpages if applicable) are listed. You can select any page from this list, and the page you are editing will then become a sub-page, and will only be visible when you click on the parent page, when viewing the website Template: The default setting is Default Template which should remain unchanged for all pages except the Contact Us page, which is dealt with later in this section. Page Order: Pages are displayed alphabetically unless a page order is specified. The default number is 0, and if you change this setting for only one page, then that page will be displayed at the bottom of the list of pages when the website is viewed. If you decide to use this option, then ALL pages have to be numbered for them to appear in the required order. Tip: Page ordering works on one level of pages only. Therefore, if you want to order sub-pages, you can use the numbers starting from 1 again to order the pages below a parent page. Only whole numbers can be used (ie not 1.1, 1.2 etc). Good practice is to number pages 10, 20, 30 etc, so that if further pages are required to be added at a later stage, they can be slotted in where required using the unused numbers. Page 14

16 2.2.2 Publish a) b) Tip: When a page is in draft form (a), the options in this box are slightly different to after it has been published (b). Before a page is published (ie when it is in draft form) click the large blue Publish box to make your page visible when viewing the site. This will then change to Update, which you need to click whenever you want to save the page. To see what the page looks like before it is published, click Preview. After a page is published you can also view any proposed changes to the page by clicking Preview Changes before you actually commit to clicking the blue Update button. The other three options available from the Publish box are described below. To amend any of them, click the blue Edit button next to the item, and to accept a change click OK or click cancel if no change if required: Status: Before the page is published, the status is shown as draft. When it is published it is shown as Published. You can change the status back to draft if required using this button. Visibility: Choose from Public (anyone can see the page), Password Protected (you can create a members only area using this option (see next section), or Private not visible on the website at all. Published on: If you want to schedule the page to display at a later date, you can change the date here and it will display when that date arrives (if you want it to display early in the day then make sure the time is also changed, otherwise it may not publish until the afternoon, depending on the time shown). Page 15

17 2.3 Creating a Members only section on your Club Website See Section 2.2 on the Publish box. You can add a password to a page in the Publish box, by clicking edit next to the Visibility option. There are just a few things to be aware of: 1. You need to put a password on each page in the members area sub-pages of a password protected page are not automatically password-protected 2. The same password can be used for each page in the members area 3. When going from one page to another in the members area, you will not be asked to enter the password again to look at different pages (if the same password has been used for each page) 4. There is no log out option, so once someone has entered the password on one particular computer, even if they close the site and return to it later, it may not ask for a password in order to view the members pages. However, be assured that they are password-protected so non-members (on other computers) will not be able to look at them 2.4 Editing an existing Page To view all the pages within your site, select All Pages from the left hand navigation page in the dashboard (if the menu is expanded), OR (if the menu is closed) move the cursor over the word Pages and select All Pages from the pop up menu. When you move your cursor over one of the items on the list, several options will appear underneath the page title. These will be explained in the next few sections, but to edit a page simply click on the page title. You can then amend the text by clicking and dragging to highlight the text to be changed and typing in the new text. Adding Images, PDF downloads, links and general editing tips Page 16

18 are all dealt with in later chapters of this document. For advice on using the Publish and Page Attributes sections of the page, refer to 2b Options available for pages. 2.5 Deleting a Page To delete a page from your website you can either 1) click All Pages to bring up the list of pages, hover over the specific page and select trash from the options that appear: Or from within the specific page, select Move to trash Either of these options will delete the page and put it in the trash (you can always restore it from the trash if you accidentally delete a page or post etc. see 26 below). 2.6 Recovering a deleted page If you have accidentally moved a page to Trash and want to restore it, click on ALL PAGES, and you will see two, three or four options for types of pages to view: All, Published, Draft and Trash (the number in brackets is the number of pages you will see if that option is selected, and if there are no pages in draft format or in the Trash the option will not be visible). Click on Trash, and on the resulting list put your cursor over the page that you want to restore. The options to delete permanently and restore will be displayed. Select Restore. Page 17

19 2.7 Permanently deleting multiple pages To permanently delete all pages, enter the trash as above and click the box next to each page you wish to permanently delete to tick it. Click on the down arrow next to the box which is displaying bulk actions, and select Delete Permanently from the list. Click Apply to delete all the ticked pages permanently. You can delete individual pages by hovering over the page concerned and clicking Delete Permanently from the options displayed, and you can click Empty Trash to permanent delete all the files in Trash. Note: you cannot restore pages that have been deleted permanently. You may wish to permanently delete pages if the storage space on your website starts to be restricted. Page 18

20 2.8 Quick Edit When you click All Pages and then hover over the page you want to edit, one option is to quick edit the page. If you click on this option, the page section expands to include some options that can be quickly amended (NB to change the content of the page you need to edit it by clicking on the page title to go to the page editing screen). The items that can be amended using Quick Edit are: a) Page Title b) Slug (URL or Webaddress) if you change the Page Title you should also change this, so that when you send a link to the page to someone, the web address makes sense. The URL is simply the page title in lower case, with hyphens (-) separating each word) c) Date d) Author e) Password (or you can remove the password altogether if the page is to be made into a public page) f) Parent page g) Page order (if you have a number of pages or sub-pages to put into a certain order, it is much better to use the Quick Edit method rather than entering each page in turn to change the page order, but NB: the change of page order won t be seen until you refresh the page h) Template i) Tags j) Status (published or draft). Page 19

21 2.9 Adding a Contact Us Form All Club Websites, when created, have a Contact Us tab across the top of the website: By default, this tab links to the main SIGBI Contact Us form, so any messages that are sent using this tab will be sent to SIGBI Federation Office, and will then be forwarded to your Club Secretary. However, you can create your own Contact Us form, which will then send all messages to the website administrator. See the notes in 1.4.2, because you need to ensure that the address that messages are sent to is kept up to date. Click Item 3. This simply displays all pages, and you need to click Add New in the LH menu, under Pages : This will display the editing screen for a New Page. In the title box enter the title Contact Us it must be that title in order for the Contact Us tab to recognise it. In the box at the RH side of the screen called Page Attributes click on the arrow next to the box under Template and select Contact. You can add words at the top of the page, eg If you wish to contact SI (Clubname) then please use the form below. Click Publish to publish the page. You won t be able to see a form in editing mode, but when you view page or when a visitor goes to your website, the form will be on the page. Page 20

22 2.10 Changing the Home Page Click Dashboard on the LH menu to return to the Dashboard. You will see a box called SI Club Editors Important Settings/Messages (see screen shot below). The third item on this list is to Choose between your latest posts or a static page for your homepage. Click this item to go to the screen where you need to set your homepage. NB: you must select either Your latest posts or A static page (and then choose a page from the drop down menu). If you do not, when visitors go to your site, the first thing they will see is a File Not Found message. To select an option, simple click the required item. Page 21

23 The options are: a. Your latest posts will display a list of all the posts in your Club News section. b. A static page allows you the choice of which page to display. This is the preferred choice, and the best page to have as your homepage is About our Club, but any attractive page with pictures can be used. The next time you edit your Club Website homepage, be sure to use Set Featured Image (see section 4d) to create maximum impact when visitors go to your website. Page 22

24 3. Posts Posts should be used for items of news and diary events. The posts are displayed in chronological order, with the newest post at the top. Therefore, if you want diary events to appear in the order in which they will occur, you need to edit the date of publication (see section 3c for how to do this). Posts are used to Tag your website (so that they can be found by search engines) and RSS feeds (if a person subscribes to RSS feeds, they are notified every time a new post is added to your website). 3.1 Categories Posts are held within categories, and you can have different categories for different types of information (eg news, club events). When you click on the category name (when viewing the website) you will see all the posts in the category listed, and can then go to any that look interesting. You can also scroll between all the posts in a category using the Previous and Next buttons. It is not a good idea to have too many categories, or have one post in a category (if a category only has one post, then create a page to hold the information, and delete the category). Do not create a category that has no posts in it. This will display on your website, but when people click on it, they will see a File not Found error message. When you create a new category, it will display above the list of pages at the LH side, and will show the number of posts in the category in brackets. You can create additional post categories by moving the Cursor over the word Posts in the LH menu, and selecting Categories from the drop down menu. Page 23

25 The four sections of the resulting screen should be completed as follows: a) Name the category name should be such that there is scope for adding different posts to it. The category News already exists, so there is no need to create this category. Other categories could be Diary (with details of forthcoming events on different posts) or Programme Action (with details of activities undertaken by your Club on different posts). b) Slug This is how the category will appear as part of the full website address when the category is viewed. This should be the same as the Category name, which is straightforward for one word categories (eg diary) but for two or more word categories, the words need to be separated by a hypen (eg programme-action). No capital letters or spaces should be used. c) Parent the default is none and should not be altered d) Description this is not mandatory When the Name and Slug fields have been completed click Add New Category. Then create posts to go in the category. You must create a category before you can add posts to it, BUT do not create a category that has no posts to go in it, because it will produce an error message on your website. Page 24

26 3.2 Adding Posts You can view all posts in your website using the left hand navigation bar by clicking All Posts. Adding a post is the same as adding a page, other than you must choose a category for a post. To add a post, move your Cursor over Posts in the LH menu and select Add New from the pop up menu. Enter the title and the post details and items (pictures, links etc). Editing the post is exactly the same as for Pages, so see Section 2 on Pages for instructions on how to do this. Then before publishing, select the category you wish it to appear in. (If you publish it before you select a category it will be given an uncategorised label. You can edit the post and give it a category or change it s category at any time. Page 25

27 3.3 Editing / Deleting posts To edit an existing post, move the cursor over Posts in the LH menu and select All Posts from the pop up menu. This will bring up the full list of posts. Click on the name of the post you want to edit. Deleting posts is the same as deleting pages you can do it either from the overview page All Posts,by moving the mouse over menu for a post and selecting Trash from the options that appear: Or from within a post itself, select edit on the posts view to enter the specific post, and then in the publish box select MOVE TO TRASH. Page 26

28 3.4 Use of Tags Online references: What are tags? Tags provide a useful way to group related posts together and to quickly tell readers what a post is about. Tags also make it easier for people to find your content. Tags are similar to, but more specific than, categories. The use of tags is completely optional but does help the user in terms of finding related content because content can be sorted and browsed, grouped by tags as opposed to being displayed chronologically (as is the default in the News section for example). Tagging also helps with Search Engine Optimisation (SEO), especially if used in conjunction with SEO plugins (the SIGBI site is currently being developed with such plugins). Tags are similar to categories, but they are generally used to describe your post in more detail. Whereas categories can have a hierarchy, tags cannot they exist in their own right and have no set relationship to anything else (remember though, a single tag can be attached to unlimited posts and pages just make sure that it is relevant) General tagging tips Tags must always be highly relevant to your content. Keep tags short 1-3 words maximum. Tags should be referenced multiple times. If you have a tag that is only referenced by one or two pages, it isn t relevant enough to your blog and should be deleted. When it comes to naming tags, choose consistent capitalization or lowercase, otherwise more than one tag may be created for the same phrase. Try not to over tag, have a maximum of around 10 tags if possible. Don t tag for the sake of it Keywords Meta Tag A number of keywords have been added to the main site and each club website in the website s Keywords meta tag. These are shown below for your information. If you feel that there are individual posts that could benefit from being tagged with a WordPress tag, using a keyword from the spreadsheet then there is no problem in doing this, as it will aid the user in finding relevant content and will also help to group relevant content (see What are Tags above). The website s Keyword Meta Tag is not thought to have much influence on Google now, and tagging individual posts is preferable. The keywords in the SIGBI Website Keyword Meta Tag are: Women s Organisation (Womens Organisation, Women s Organization, Womens Organization) Associations Clubs Groups Societies Charity Page 27

29 Fundraising NGO Non-Governmental Organisation Voluntary Human Rights Lobbying Action Environment Conflict Resolution Health Members International Organisation Service Organisation Women and Girls How to add tags The following will describe how to tag your posts and pages. You can add tags via each post/page edit screen, or by using the Quick Edit feature in the list of post /pages Adding Tags via the Tags Module You can assign and/or add new tags to posts before or after you publish them using the Post Tags module to the bottom right of the post editor: You can add tags one at a time by clicking the Add button or hitting the Enter/Return key on your keyboard after typing each tag. Or you can add multiple tags at a time by separating them with a comma as you type. Page 28

30 To remove a tag from the post, click the small X icon next to the tag. To choose from your most commonly used tags, click Choose from the most used tags. Then, click on the tags you want to assign to the post. Page 29

31 Adding Tags via the Dashboard You can add new tags and manage existing ones from Posts -> Tags in your dashboard. You will be presented with a list of your existing tags and a method of adding new tags. You can add a new tag by filling out the fields: Name : Tag name. Slug: This is the URL version of the Tag Name. Words should be lowercase and separated with a hyphen. Description: Optional description of tag. Click on, Add New Tag Page 30

32 3.4.5 Managing Tags The Posts -> Tags page in your dashboard shows a list of tags you ve used, as well as the name and number of posts belonging to each tag. If you move your mouse over a tag a set of options will appear allowing you to edit, quick edit, or delete that tag: If you click on Quick Edit the tag will change into an edit box and you can rename the tag quickly: If you click on Edit you will be taken to a separate page where you can edit the name and description. This functions exactly the same as in adding a tag. Clicking on Delete will delete that tag Bulk Actions If you have a lot of tags that you want to delete, you can use the bulk actions feature. Select each tag you want to delete using the checkbox to the left of the tag name. If you want to select all tags click the checkbox at the top: Page 31

33 From the bulk actions menu select Delete and then click Apply. The tags will be deleted. Page 32

34 4. Images 4.1 Uploading an image Images can be used in both pages and posts, which is why it is a separate chapter in this user guide. There are two ways of uploading images, from within the page in which you want to insert them, or directly into the media library. This section deals with uploading images from within a page. You can upload JPEGs (.jpg), GIF files (.gif) and PNG files (.png). Tip: when pictures are taken on cameras and uploaded to computers, they are given reference numbers. Always rename them to something you can remember before uploading them to the website, so that they are easy to search for in the media library. You need to start by being on the editing screen of the Page/Post that you want to add the image to. Click to position the cursor at the point you want the image to be inserted. It is preferable to select the start of a paragraph, as this achieves the neatest results. Even if you want the picture to display at the RH side of the text, still click at the start of the paragraph. Click the Add Media icon on the visual editor menu (indicated in red in the diagram). Page 33

35 The next screen should default to the screen shown above, click Select Files and find the image on your computer and click open. You can click Edit Image (in red above). Here there are some basic editing options (crop, rotate, flip, and resize) available. These are dealt with at the end of the section, as you may not want to edit your picture in WordPress but prefer to do it using Microsoft Office Picture Manager. Ensure the image you want is selected with a tick and click Insert into Post. Page 34

36 There are two options for finding files to upload: 1. Upload Files This allows you to upload images from your computer 2. Media Library This will show all the items, including PDFs, in the Media Library that you can insert into the page you are working on. If you have a lot of items in the Media Library, you can use the search facility to locate the image that you want. Tip: If you upload full-sized high resolution images to your website, these take a lot of storage space and you will quickly fill the space available (100Mb). It may be better to resize your picture before uploading it using Microsoft Picture Manager which is a free tool when you have Microsoft Office. The other options for your images are described below. 4.2 Options for Images Once the image has been uploaded and edited (if required see next Section), you are given the option to change some other settings before inserting the image into the post/page. Title: this is automatically completed with the filename without hyphens between the words. You can change the title if you wish, but this does not alter the display. Caption: the image will be displayed inside a frame, with the caption underneath the picture: Page 35

37 Alignment options: None: the text does not wrap around the picture and the picture is at the LH side Left: the picture is to the left of the text, which wraps around the picture Right: the picture is to the right of the text, which wraps around the picture Center: the picture is centred on the page, but the text does not wrap around it. Tip: To put several photos side-by-side, use the None alignment option when inserting each picture. They should have been resized before uploading, and so that they appear neat, they should all be exactly the same height. Do not use captions, and the pictures should be fairly small (thumbnail size) as the maximum width of the page is 640 pixels. Link to: This is image/attachments link. You may need this to use to link directly to the image from another page. Size options: There are four size options: full size, large, medium, thumbnail. Depending on the size of your picture when you uploaded it, all options may not be available for the image in question, and the sizes shown against each available option will vary. The optimum size for a picture that is to be displayed to the left or right, with text wrapping, is no more than 250 wide, so choose the option closest to this. Tip: Unless the original picture is already quite small, don t use the thumbnail option, as this tends to crop the picture, and parts of people may be missing. The other options resize the picture in proportion. Page 36

38 When all the settings have been selected, click Insert into Post. 4.3 Moving the picture/changing the attributes once it has been Inserted It is best to insert an image exactly where you want it to appear on a page, as it is not easy to move and position afterwards. You can click and drag an image whilst editing a page, but this can result in some errors with formatting. If an image has a caption it is best not to try to move it at all, but to delete it from the Page/Post and reinsert it from the media library (see next section). If you don t want to move the picture, but want to change its attributes (eg from Left to Right, or change the caption), click on the picture whilst editing the page. 6 icons will be displayed: 4 for the alignment, 1 to edit the image and 1 to remove the image. Simply click the delete icon to remove the picture altogether. Click the edit image icon to change the attributes. Change the attributes as required and click Update. Tip: If a picture has a caption, then using the delete icon as above removes the picture and caption in their entirety. If you highlight the picture and use the delete key on your keyboard it will only delete the picture and not the caption, so always use the delete icon as above. Page 37

39 4.4 Uploading an Image directly into the Media Library To upload an image to the Media Library, click on Media. Then, click Add New You will be presented with the same facility to browse for files on your computer as before. Find the file you wish to upload, and click Upload. When the file has been uploaded you will see a list of all the files in the Media Library. The top one will be the file that you have just uploaded. If you hover over the image, you can click Edit. The next screen (shown below) allows you to change the title and add a caption and description, but does not give you the alignment or size options as earlier described. You cannot insert an image into a post from the Media Library. Page 38

40 You can edit a picture in the Media Library, which will then retain the editing when inserting into a page or post at a later date. Click the Edit Image button beneath the picture. The next screen will look as follows: You can then crop or scale the image as described in the next section. Page 39

41 4.5 Editing an Image after it has been uploaded You can edit an image after it has been uploaded by clicking on Media -> Library, and searching for the image to be edited. Hover over the image title so that some options appear underneath, and select the Edit option. On the next screen click Edit Image immediately underneath the image Cropping You can remove any unwanted portion of an image you have uploaded to your media library by using the cropping feature. First, with your mouse (click and drag), select the portion of the image you want to keep. Once you re happy with the selection, click on the Crop button (highlighted below): You will then have your new image: If happy with the result, click Save. If unhappy, click Cancel. Note that you must click Save for the crop to finalize. Tip: Highlight the required section first, then click the Crop icon. Clicking Crop first has no effect Re-sizing (scaling) an Image Follow previous instructions to edit your image, and click Scale Image. In the box that then displays enter the pixel size required. When you enter a figure in one box, a number is automatically entered in the other box. This is because the scaling will be proportional to the original. Click Scale Image, followed by Save. Page 40

42 4.5.3 Other Image Editing Options You can also rotate or flip images as required using the relevant icons. Remember to click Save Reverting It s always a good idea to maintain a copy of any images on your computer, but you do have the ability to revert any previous edits made to the image and restore the original image that you uploaded initially to your media library. When you open an image in editing mode (one to which you have previously made edits), you will see a Restore Original Image link: If you re sure you would like to restore the image, click on the Restore image button. The image should then revert back to its original form, and you will receive a message that the restoration was successful. Page 41

43 4.6 Set Featured Image This feature has TWO uses. On the Club Website Home Page. We would encourage all Clubs use this feature for their Club Homepage as it will create a striking appearance to all Club Websites, and confirm that they are all part of the same group of websites. You need to have a picture (in JPEG format) that is at least 645 pixels wide by 300 pixels high, that evokes the spirit of your Club in some way. It could be an action shot of some area of programme action that the Club is involved with, a landscape of the area in which the Club is based, or a picture of all the Club members. Edit the Home Page of your website (this is the first page that is displayed when visitors go to your website, and can be set from the dashboard see section 1f). Click Set Featured Image from the RH side Featured Image box: This brings up the same uploading a picture screen that you are used to. Upload your large picture, and instead of click Insert into Post, click Use as Featured Image : The picture will be displayed across the full width of your website, and the height adjusted accordingly to keep the scale of the picture correct. An alternative to the featured image, is to use a SlideShow on your home page. See section 9 for details. This can be equally eye-catching. For News items the featured image will show against the news item when viewing all posts in the News Category, see image below. It can also be used for posts in other categories. Page 42

44 The picture needs to be at least 150 pixels wide and 150 pixels wide. Edit each of your news items, or create a new one, and follow the instructions as above to insert the featured image. Check the results by viewing the site and clicking News to display the full list of news items, which should now have an image next to each of them. Page 43

45 5. Videos 5.1 Embedding your videos from YouTube into your website The best way of putting videos onto your Club website, is to set up a YouTube account and load the videos onto that. This means that they are not stored on your website, so you do not use up your space allocation, and then you can either link to them, so that visitors are taken away from your website to YouTube to watch the video, or embed them into your website so that they can be run whilst the visitor remains on your website. You can set up a YouTube account by going to and clicking Set up an Account. It is best to follow the instructions that YouTube provide for doing this, and for uploading your videos. The videos should be MP4 format, and the dimensions should be 610 pixels wide by 433 pixels high. Press CTRL+C to copy this code. When you have uploaded a video to YouTube, from within your YouTube account, view the video and you will see a Share button. Click this and some options will be displayed, one of which is Embed. If you click this you will see three lines of code, which are already highlighted. Return to the page you are editing on your website, and click the HTML tab just above the editing box: You need to find the place on the page that you want to put the video it needs to be on a line on it s own. Click where you want the video to be inserted and press CTRL+V to insert the code. Click the Visual tab, and you will see a large pale yellow box. It is only when you view the page that you will be able to watch the video. Page 44

46 6. PDFs 6.1 Maximum size of upload The maximum size of uploads should be no larger than 7Mb. This is more than ample size for most documents. If you have any issues, please contact the Federation Office directly. 6.2 Creating a reduced size PDF If you have Adobe Acrobat Professional you can create a reduced size PDF, which will save space in your Media Library, and may reduce the PDF from a non-loadable size to a loadable size. Some other software packages may also offer this facility, but unfortunately it is not available using Acrobat Reader. 6.3 Creating PDFs from Word In the latest version of Microsoft Word, you can select SAVE AS > FILE TYPE > PDF Alternatively, you can select print as.pdf IF you have a pdf maker installed. Page 45

47 6.4 Uploading PDFs You can upload a PDF in the same way as adding an image into a post, or you can add it directly to the media library. If adding from within a page, use the Add Media button on the Upload/Insert line: Select the Upload Files tab, then Select Files to find the PDF file from your computer, then click open. Page 46

48 When the above screen appears, the PDF you have just uploaded will be selected. On your RH side there are your attachment details. The title will already be completed with the filename, but you can change this is required. The caption and description fields can be left blank. The link under the Link to field should contain the filepath of your document. Tip: The file URL shown is a relative path, which allows the website to locate the file in the media library relative to the page s URL. If you want to send someone the link to this page in an , you have to add to the front of it. Click Insert into Page. This will insert the text that is in the Title field of the PDF and automatically link to the PDF from that text. 6.5 Creating a link to the PDF from a page/post An alternative to Insert into Page is to copy the filename from the Link URL field (highlight the full name and use CTRL + C to copy). Close the screen using the X on the top right. You can add your link using the instructions in section 7. Use this method if the other method causes any problems. Page 47

49 7. Links 7.1 Linking to PDFs Uploading a PDF is covered in Section 6. You can either Insert into Post, which will put the link in for you, or use the instructions in 7.2 to add the link. 7.2 Linking to external sites Highlight the text from which you want to link. Click the link button on the toolbar: In the dialogue box that appears, enter the URL you want to link to. This must be the full web address of the website, including The title of the link is optional. If the text you are linking from is simply click here, then you could put the name of the organisation that the website belongs to as the Title. This text will pop up when the visitor to the site hovers over the link. If you want the link to open in a new window/tab when clicked, check the box. Page 48

50 7.3 Linking to other pages of your own site (internal links) If you want to link to one of your own posts or pages, highlight the text from which you want to link, then use the link button as before: Underneath Or, link to existing site content there is a search field. Enter a keyword that appears in the page/post you want to link to and a link of pages/posts that contain that word will be listed. Click the title of the post or page you want to link to, and the URL and Title fields will automatically be filled in. Click Add Link. Page 49

51 8. General Editing Tips 8.1 Pasting text from Word When copying and pasting information from Microsoft Word, even plain text, it is important to use the Paste as plain text Icon to avoid later issues with the text on the website. When you use this icon, a window will appear where you can insert your Word content (use CTRL + V to paste). Click Insert to add the Word text into the page/post. Pictures cannot be copied from Word and pasted onto your website always upload the JPEG (or other allowable formats see Section 4). 8.2 Tables You can paste tables from Word, and this is particularly useful if you want to display columns (for example Club Officers or Club Events). It is impossible to line columns up in WordPress, but by creating the table first in Word the columns will be lined up. Page 50

52 Tip: Use tables sparingly, as extra space is added at the top and bottom of the table so your information can look spread out. When inserting a picture into tables extra space is also added, which cannot be deleted. Tip: Keep a copy of your completed table in Word on your hard drive, as it is easier, when the table has to be updated to delete the one on the website, amend the Word version and copy and paste it again. To delete a table, switch to the Text tab and find a line that starts <table border... Delete everything from the beginning of that line to the end of a line that says </table>. Switch back to the Visual Tab: Insert your amended table from Word, if required. If your table included pictures then these will have to be re-inserted from the Gallery. 8.3 Using Bold/Italics/underline You can format your text using the editor the same as you would in Microsoft Word or similar applications highlight the text and then select B, I or U formatting options in the editor to change as appropriate. Once complete select publish or update to commit the changes to the page 8.4 Bulleted/numbered lists If you have a list of items, then highlight them and select bullets or numbering as required. Page 51

53 To un-bullet select the bullet button again to remove the formatting. Tip: Wordpress always puts a line space between paragraphs, which cannot be removed, but bullets/numbered items are listed with single spacing which makes them look much neater. If each bullet point goes onto several lines, you may wish to make them double-spaced. Simply click at the end of each line and press return. Then press the Delete key to delete the bullet point on the empty line. 8.5 Indenting paragraphs Highlight the paragraph(s) to be indented, and click the Indent button. The right button indents the text, and can be clicked several times to further indent the text. To undo an indent click the left of the two buttons. 8.6 Choosing Font Size The font sizes have been predefined within the WordPress template in use for Club Websites. However, you can choose which you allocate to each heading within your website, by clicking the down arrow as indicated. Do try to be consistent with the font sizes in use. These are the main editing features you will use, but do have a look at the other options available. For example you can centre or right-justify text. Page 52

54 9. Adding changing images (slideshow) to a page or post For visual impact, you may wish to add changing images to certain pages or posts on your website, for example the Homepage. The following instructions explain how to use the WordPress administration panel to create and manage new image slideshows. 9.1 Image Size The pictures that are to be used should all be the same size (height x width), and orientation. You can use Microsoft Office Picture Manager to crop or resize your pictures to the same size in pixels. For best results they should be 613 pixels (w) x 300 pixels (h). 9.2 Creating your Slideshow 1. Select RoyalSlider from the left-hand menu: 2. Click Create New Slider: 3. Choose the only option available from the pop up menu: Custom Slider: 4. Give your new slider a name and then either click Create New Slide or Add Images (they are very similar and both allow you to either upload new images or choose from existing images in your Media Library: Page 53

55 5. You should be able to see the thumbnails for the images/slides you are adding: 6. When you have all your images click Add all uploaded to Slider Page 54

56 7. If necessary, you can drag these thumbnails to reorder them: 8. There are various menus to change the settings in the right-hand panel most of them should be left as the default, except for the settings specified below: You may wish to change the following settings. Remember to click Save Slider when all settings have been updated: Page 55

57 Size and scaling The default settings (illustrated) will display the slider at the full width of the article. You may prefer to have a smaller slidershow (half or a quarter of the width), which the text on the page will then wrap round. For half the size change Width to 50% and Height to 200px, and for quarter of the size use 25% and 100 px. Leave the auto height setting unchecked. Ticking Auto Height will allow the slider to grow in height for larger images (as opposed to shrinking the image to fit the slideshow). This effect may or may not work for you so you may need to experiment. Image Options The only change in this section should be to choose Fill the Area from the Image Scale Mode menu. This will ensure that if some of your pictures are different sizes, they will all fill the area of the Slidershow. Autoplay Under Autoplay, tick the Autoplay box (other options will automatically activate). This will ensure that the slideshow begins automatically when someone goes onto the page. Page 56

58 The delay (length of time between one image and the next) is shown in milliseconds, so 2000 equals 2 seconds. You can increase or decrease this figure as required. Caption If you d like captions to display under each image, tick the Caption box under Caption. Note: captions use the Title &Alt field to set the caption click the thumbnail to edit this (the value will be predefined if you entered this info when you uploaded the image so you can override it here if necessary). Miscellaneous Only two settings should be changed in this menu: a) To change the slide transition from the default Move (slides to the left) to Fade (slides fade seamlessly one to another), change the option under Miscellaneous b) By default, when the slide show ends it will visually rewind to the beginning of the show. To move seamlessly back to the start of the show, click Continuous Loop Page 57

59 9.3 Embedding the Slider in a Page/Post Note that all changes to the way the Slider displays are made in the Edit Slider view (see Section 9.2). You can then embed the Slideshow on one or more pages, and any changes made to the Slideshow will automatically be reflected on the page(s) where the Slideshow is featured. 1. Return to the Royal Slider summery page - either select in the left menu: or click Back to list from a slider s editing screen: 2. Find the Shortcode field, and copy it s content(highlight all the text including the square brackets and press CTRL+C on your keyboard): 3. At the relevant point in your Page or Post, paste the code (CTRL+V). When your post is ready, press Publish / Update and preview the post to see the slider in action. Page 58

60 10. Adding Google Analytics to your Website Dashboard Only recommended for advanced users Google Analytics helps you to track the usage of your website, ie how many visitors it has and how which pages they viewed. You can now set up your own Google Analytics account to track your own Club Website using the following instructions. You can either just use the Google Analytics account to view the detailed stats on your website, or you can add a widget to the dashboard of your website. There are three main stages to adding Google Analytics for your website to your dashboard: 1. Create a Google account 2. Setting up your SIGBI club page to track visitors 3. Configuring the dashboard widget for visitor overview Item 3 will show an overview of visits to your website, but you can use the google account you create in Item 1 to get in-depth analyses of activity on your website Creating a Google account You only need to do this if you do not already have a google account. Go to the webaddress and click Create an Account (large orange box at the top RH side of the screen. On the next screen click the Sign Up box (red box at the top RH side). If you do not see this box, you may already have a google account set up, so can use this account to add the analytics. You should see this screen: Complete all the fields, and remember to click the Terms of Service box to say you agree to them. At the bottom of the screen click Create an account (grey box). The next screen will ask you if you want a text message or voice message giving you the Verification Number. Select one, and in the Page 59

61 phone number box enter your mobile number (if text message preferred) or your home phone number if you prefer a voice message. Click Get Verication Number (blue button). The text/voice message should come through straight away, and on the next screen you need to enter the number you are given and click Verify (blue button). Return to and Sign In. You may have a further stage of Google sending you an with a link that you need to click to verify that it is your address. When you have set the account up and signed in, you will see the following screen: Click the link to go to the Dashboard (circled in red) Under Analytics on the next screen, click Manage Analytics Settings, then Sign up on the following screen. You will then see the following screen: Fill in the details for Web Site, as per the example below: Website Name SI Leeds Website URL sigbi.org/leeds/ Industry Category Education and Government (this is the nearest available match for SIGBI) Page 60

62 Reporting Time Zone UK Account Name SI Leeds Click Get Tracking ID (blue box) You will be asked to approve Google s Terms of Service on a separate screen. Click I accept. The next screen looks like this: The Tracking ID is circled in red here. You need to copy this (highlight it and use CTRL + C to copy it). Click Save. If you re not going to do Item 2 of this manual straight away, then paste it into Word and save it (use CTRL + V to paste). Page 61

63 10.2 Setting up your SIGBI club page to track visitors Login to the dashboard of your SIGBI Club Website. In the important settings / messages box, you will see a new link for Add your Google Analytics Tracking Code click this link to open the tracking code page: Here you need to enter your ID, eg UA It is best to paste it into the box to ensure it is accurate. Click save changes. You will see the message Analytics ID saved. Google will now track your site. Allow 24 hours before any site activity is shown. You can view your full stats by logging into: using your newly created Google account. An overview of your statistics can be seen from the dashboard of your SIGBI Club Website, after you complete section Page 62

64 10.3 Configuring the dashboard widget for visitor overview If you would like to see an overview of your stats as part of your SIGBI Club Website dashboard, click Dashboard at the top LH side of your screen to return to your dashboard, where you will see the following box: Click the Options panel link. You will then be presented with the screen below: Click Start the Login Process, which will take you to Google once more to verify Click GRANT access You will then be presented with an options screen: Page 63

65 You do not need to enter any settings here, just click Save Changes. Then return to your dashboard, where you will see a new Dashboard Widget showing your website statistics. You can click and drag this box to another position in your dashboard if required. The line showing number of visits, will be flat when first set up. Visit a few of the pages of your website, then wait until the following day to view the stats. Remember that for more detailed stats you can log into Google Analytics directly. Full instructions and user guides for this external service are available at: Page 64