ClubNet Limited. ClubNet Websites. Manual for Editors

Transcription

1 ClubNet Limited ClubNet Websites Manual for Editors Allan Hawkey January 2018

2 Introduction... 4 Getting Started with your ClubNet Website... 5 Logging In and Out... 5 Logging in... 5 Logging Out... 5 The Edit Mode Interface... 6 Initial View... 6 Smaller screen sizes... 6 The Content Dashboard... 7 Welcome... 7 Create Blog Post... 7 Redirect URL Management... 7 Link Checker... 7 Creating, Saving and Publishing Content... 8 Creating a New Page... 8 Various Saving and Publishing Options... 8 Save... 8 Save and Publish... 9 Publish... 9 Scheduled Publishing... 9 Unpublishing... 9 Manually Unpublish... 9 Scheduled Unpublishing... 9 Finding Content Editing Existing Content Content Within the Tree View List View Pages Ordering Pages Moving a Page Copying a Page Deleting and Restoring Pages Deleting a Page Restoring a Deleted Page from the Recycle Bin Emptying the Recycle Bin Emptying the Recycle Bin Deleting Individual Items Working with Content Content Structure Home Page Content Page Rows and Styles Rich Text Editor Content Type Image Content Type Macro Content Type Embed Content Type Quote Content Type Blog Post ClubNet Websites // Manual for Editors Page 2

3 Post Info Content Committee List and Committee Profile Calendar Gallery Page Map and Map Markers Redirect Page Version Management Comparing Versions Rollback to a Previous Version Media Management Working with Folders Creating a Folder Editing a Folder Deleting a Folder Restoring a Folder from the Recycle Bin Emptying the Recycle Bin Emptying the Recycle Bin Deleting Individual Items Moving a Folder Sorting the Contents of a Folder Working with Images and Files Uploading an Image or File Deleting an Image or File Restoring an Image or File from the Recycle Bin Moving an Image or File Event Calendar Create a Calendar Add an Event Add a Location Edit A Location Tips & Tricks Refreshing the Tree View Audit Trail Notifications Preview Pane Responsive View Session Timeout Try things on a Test Page Writing Style And Finally ClubNet Websites // Manual for Editors Page 3

4 INTRODUCTION The ClubNet platform allows you to publish information quickly and easily on your website without the need for any specific knowledge of creating web pages. Any authorised editor can easily update their website via a normal web browser. No special skills are needed to be able to create web pages, and you will be able to create pages and publish them without any previous knowledge of website building. This in no way reduces the functionality of your website. The ClubNet platform offers a number of complete functions that each editor can use to develop their website. All editing work is carried out directly via a web browser, which means that you will always be able to log on via the Internet to create and update information, irrespective of time and place. Whilst the platform has been designed to be as intuitive as possible, the objective of this document is to give editors the key information they will need to perform their role, provide a document for ongoing reference, and make learning and using the site a breeze. We will update this document periodically in light of suggestions from users or new developments. We recommend that you view this manual on screen rather than printing it as you can then be sure to have the latest available version, and you will save printing costs and trees Happy editing! ClubNet Websites // Manual for Editors Page 4

5 GETTING STARTED WITH YOUR CLUBNET WEBSITE LOGGING IN AND OUT LOGGING IN ClubNet provides a web publishing system that is easy for editors to use and does not require large hardware and software resources. All you will need is basic word processing skills and a modern web browser we recommend using Mozilla Firefox which you can download for free from To access edit mode, follow the Admin link in the footer of any page of your website. This will take you to the Admin Dashboard, where you can access all the ClubNet modules in your package. Select the Website Editing icon from the dashboard or Website Admin from the navigation bar at the top of your Admin page. Alternatively, you can open your web browser and go to All three options take you to the same place. Click to access the website editing login screen A login box will appear for you to enter your username and password, which will be supplied to you by ClubNet. Please note that your editor login is totally independent of any login you may have as a member of your website. If you try to enter your member login details here, they will not be recognised. Your editor username is usually your address unless you ve been told otherwise. If you cannot remember your editor password, there is a Forgotten Password link beneath the login button. Click that and follow the on-screen instructions. LOGGING OUT To logout of edit mode, click the admin profile picture in the top left of the screen which will reveal a slide out menu. Then simply click the orange logout button. From this same slide out menu, you can also change your password by clicking the green Change Password button. ClubNet Websites // Manual for Editors Page 5

6 THE EDIT MODE INTERFACE INITIAL VIEW Once you have logged in you will enter the Content section. The Content section allows you to manage the web pages of your site. There are several sections within Edit Mode that allow you to manage different aspects of your site. Sections may vary from user to user based upon their role. As an editor for instance, you will usually have access to the Content and Media sections, and possibly the Event Calendar. You can navigate between sections using the black Section Bar on the left-hand side of the screen. As you rollover one of the sections the name of the section will be revealed. Click a section to navigate to it. To the right of the section bar is the Tree View which shows the structure of your website. To navigate the tree you can click on the black arrows to the left of tree items which will reveal any sub-pages. Clicking on the page name will load that page s content into the large Content Area on the right of the tree view or, as in the case of the screenshot below, the Content Dashboard which is the start page in edit mode (depending on your installation, you may see different tabs on the right side of the window). In the example below, the Create Blog Post tab is selected this is where you can create News articles for your website. Search Bar Content Section Section Bar Media Section Content Tree Content Area Calendar Section SMALLER SCREEN SIZES By default, on a desktop with a large screen size, the content tree is always visible giving you quick access to select and navigate website content. On smaller devices such as laptops and tablets, the tree view will be closed and only opens after you click on one of the navigation icons in the section bar on the left of the screen. After selecting an item within the tree view on a smaller device, it will automatically close to save screen space. If you wish to close the tree view without selecting a page, you can move your mouse out of the tree view, or alternatively on a touch device you can swipe left over the tree view. ClubNet Websites // Manual for Editors Page 6

7 THE CONTENT DASHBOARD The Content Dashboard is the page that you see when you log in to the website s edit interface. The tabs on the right side of the window enable you to perform some key tasks NB depending on your installation, not all of these tabs may appear. The key tabs to note are: WELCOME Shows you recent editing activity on the site you can click on the link for each item to take you directly to it, so that you can make further changes if required. CREATE BLOG POST This is where you create all your News items. This feature will automatically generate a new post for you, ready for you to add your content, and will place the post in the correct place in the content tree. As news items are stored in date folders (for the year, month and day), these will automatically be created for you if they do not already exist. REDIRECT URL MANAGEMENT When you create and publish a page on your website, that page has an address. For example, this might be If you subsequently change the page name, or move the page to somewhere else in the website, the address will also change. For example, the new address might be The website recognises the change and sets up a redirect automatically for you. As a result, if a member has saved or bookmarked the old address, they will still find the page at its new address. You should not need to change anything here, and it s always advisable to seek guidance from ClubNet before making any changes to ensure nothing is broken! LINK CHECKER The Link Checker enables you to check for any non-valid links on your website in case of errors (e.g. if you link to an external website, but the page no longer exists) so that you can identify and remove or fix them. ClubNet Websites // Manual for Editors Page 7

8 CREATING, SAVING AND PUBLISHING CONTENT CREATING A NEW PAGE Firstly you will need to select the parent page for your new page. This could be the home page or any of the sub-pages of the site. If the parent page allows sub-pages underneath it, the following process can be followed: Hover over the name of the parent page and then click on the options icon ( ) to reveal the types of pages you can create in this location. Click on the type of page you wish to create which will then load the new page into the content area on the right-hand side. Most commonly, you will select a Content Page. Enter a name for the page in the text field at the top of the content area. See sections below for more information on saving and editing the new page. Note: For news articles / blog posts, whilst this approach is valid, there is a much quicker way. This is because news is stored within Year, Month and Day folders, and it can be time-consuming to create these manually each time. Instead, you can create a blog post directly from the landing page / Create Blog Post tab when you log in you can return to this page later by clicking on CONTENT at the top of the content tree, above your Home page: VARIOUS SAVING AND PUBLISHING OPTIONS There are four different options you have for saving and publishing pages. Each has its own benefits for different occasions depending on whether you re still in the process of editing the page or have completed and wish to publish your changes. SAVE The Save option (found by clicking the arrow on the green Save and publish button in the bottom right of the screen) is used for saving the page without publishing the changes to the live site. This is especially useful if you are working on changes over a period of time as you can save frequently to prevent losing any data or if you wish to save the current state and return to edit the page at a later date. Using the Preview button will show you how the page will look once published. ClubNet Websites // Manual for Editors Page 8

9 SAVE AND PUBLISH The Save and publish button is ideal for when you want to publish a previously saved page to the live website, or to just publish a page without previewing it. This will save and publish the page to your live website. PUBLISH Clicking the actions menu in the top right of the page or right clicking on the name of the page you wish to publish from the context menu will reveal the slide out menu. On this menu you will see an option to Publish. You can now choose to Publish all sub-pages excluding any with unpublished changes. You can also select to include all unpublished sub-pages pages too. This is especially useful if you have many pages you wish to publish at the same time. SCHEDULED PUBLISHING Scheduled publishing is ideal when you need a page to go live at a specific date and time when it is not convenient to do so manually. To schedule publishing you need to navigate to the Properties tab and click on the Calendar icon within the Publish at field which will then open up a Calendar. Select the date and then click the Clock icon at the bottom of the calendar to select the time you wish for the page to be published. After you have done this, click anywhere outside the date and time picker pop-up to close it. Now all you need to do is save your changes by clicking the arrow on the Save and publish button and click Save. The website will automatically publish the page at the date and time you chose. Note: You must ensure that the page is saved but NOT published for scheduled publishing to work. At the selected date, the website will automatically publish your unpublished page. If you Save and Publish when setting the page up, it will be live immediately. UNPUBLISHING Along with the various options for saving and publishing, you also have the ability to unpublish a page. This is useful if you no longer wish for the page to be publicly visible but do not want to delete it. MANUALLY UNPUBLISH 1. Find the page you wish to unpublish and click on the name to select it. 2. Click the arrow on the Save and publish button which is found within the content area. 3. Select Unpublish. SCHEDULED UNPUBLISHING Scheduled unpublish is ideal when you require a page to be removed from the website at a specific date and time, but are unable to do so manually, for example at the end of a promotion. To schedule the unpublishing of a page you need to navigate to the Properties tab for the desired page and click on the Calendar icon within the Unpublish at field which will then open up a calendar. Select the date and then click the Clock icon at the bottom of the calendar to select the time you wish for the page to be unpublished. After you have done this, click anywhere outside the date and time picker pop-up to close it. Now all you need to do is save your changes by clicking the Save and publish button. Note: You must ensure that the page is saved AND published for scheduled unpublishing to work. At the selected date, the website will automatically unpublish your published page. If your page is not published, it will remain unpublished at the unpublish date. Note: You can use scheduled publishing and unpublishing together. To do this, set the Publish at and Unpublish at dates as described above, and Save but do NOT publish your page. Ensure that the Publish at date is in the future, and that the Unpublish at date is after the Publish at date. ClubNet Websites // Manual for Editors Page 9

10 FINDING CONTENT The content tree view allows you to navigate web pages through a logical site hierarchy. You can find a page by navigating through the tree itself if you know where the page is stored. Alternatively a quicker approach might be to perform a search across the entire content tree view. Using the search bar you can enter a search term and the system will search for pages containing the term anywhere in the page name or page content. EDITING EXISTING CONTENT CONTENT WITHIN THE TREE VIEW When you want to edit content on an existing page you can follow this process: 1. Find and select the page you want to edit. 2. Edit the page s content within the content area. Each different type of page will have different content fields for you to populate such as simple text boxes, content and date pickers and rich text editors. See section 3 for more information on working with content. 3. Click the arrow on the Save and publish button to reveal more options. Now you can click Save in the popup menu. 4. Click the Preview button to preview how the page will look once published to the live website. 5. If you are happy with the changes you can now click Save and publish which will make the changes live. Note: Once you become more experienced and confident, you can if you wish click Save & Publish to make your changes live straightaway, without previewing first. LIST VIEW PAGES Some of the pages in your website may use a list view style which shows child pages in a table format rather than the standard tree view. If a page were to have many child pages for example a map with many map markers showing clubs in a region the tree view could become very large and unmanageable. Where a list view has been set up for a particular type of page, you will notice there are now no child pages for that page within the tree view but pages are instead listed within a table on the right hand side. The table will show a maximum of ten child pages at any one time. Pagination controls allow you to navigate to additional pages should you have more than ten. In the top right of the table there is a search facility which enables you to search for specific pages. This enables you quickly and easily to locate pages without having to use the pagination. You can click the column titles to sort the list items. For example clicking the name column title will sort the list items alphabetically. Note: Examples of list views are for Map Markers on a Map, and Authors, Categories and Tags under News. ORDERING PAGES The pages in your website are sorted in the tree structure according to a predefined sort order, and this determines the order in which pages are displayed in your website s navigation. It is most common for the page that has been created most recently to be placed at the bottom of the tree structure. However, you can easily change the sort order of the pages in a section of the website by using the sort function. 1. Right click the parent page whose sub-pages you wish to sort to reveal the context menu. Or alternatively you can click the Actions button in the top right right-hand corner. 2. Click Sort from the context menu. 3. Click and drag the pages into the required order. Alternatively, click on the Name or Creation Date column header to sort the items automatically by Name or Creation Date. Clicking on a column header again reverses the sort order. 4. Click Save. ClubNet Websites // Manual for Editors Page 10

11 MOVING A PAGE Pages can easily be moved between areas of the website by moving them in the tree view. Not all pages will be able to be moved below other pages depending on your specific set up. For example, a Committee Profile page is only permitted as a sub-page of a Committee List. If you try to move a Committee Profile page to be a sub-page of an ordinary content page, the move will not be allowed. If you are unsure or need clarification, seek advice from ClubNet. To move a page: 1. Right click the page you want to move to reveal the context menu. Or alternatively you can click the Actions button in the top right right-hand corner. 2. Click on Move and select the parent page you would like to move this page under. 3. Click on the Move button to confirm the move and then you will see a confirmation message. 4. Click OK to dismiss the confirmation message COPYING A PAGE If you want to re-use a page or structure you have created previously you can copy the page to a different place within the site structure. When you copy a page all of its sub-pages may also be copied if required. 1. Right click the page you want to copy to reveal the context menu. Or alternatively you can click the Actions button in the top right right-hand corner. 2. Click on Copy and select the parent page you would like to copy this page under. 3. Untick the Relate to original checkbox 4. Untick the Include descendants checkbox if you want to copy just this page, or leave it ticked to copy any sub-pages too 5. Click on the Copy button to confirm the copy and then you will see a confirmation message. 6. Click OK to dismiss the confirmation message DELETING AND RESTORING PAGES DELETING A PAGE If you have pages that you no longer want on the website you are able to delete them. Upon deletion, the page is moved to the Recycle Bin as a safety net just in case you change your mind and wish to restore the page. 1. Find the page you wish to delete in the website tree view. 2. Right click on the page name in the tree view to reveal the context menu or click the actions link in the top right when on the selected page. 3. Click Delete. 4. Click OK to confirm you wish to delete the page or click Cancel if you do not. ClubNet Websites // Manual for Editors Page 11

12 RESTORING A DELETED PAGE FROM THE RECYCLE BIN The Recycle Bin is a separate tree list which can be found at the bottom of the content tree view. Clicking the arrow to the left of the Recycle Bin icon will reveal any pages that have been deleted from the website. To restore a deleted item from the recycle bin: 1. Click on the ( ) icon for the page you wish to restore from the Recycle Bin to reveal the context menu. Or alternatively you can click the Actions button in the top right right-hand corner. 2. Click on Restore and review where the page is to be restored to. NB If you wish to restore an item from the recycle bin but to a different location, you can follow the same process as for moving a page (see above) 3. Click on the Restore button to confirm and then you will see a confirmation message. 4. Click OK to confirm. 5. You will now need to go to the page and republish it by clicking the Save and publish button in order for it to be visible on the website. EMPTYING THE RECYCLE BIN IMPORTANT NOTE: periodically, ClubNet may empty your Recycle Bin as part of routine maintenance. You should manage your Recycle Bin actively, and ensure that you do not use this to store items that you may wish to retrieve later. The recycle bin is intended only as a short term facility in the event that you delete something by mistake so that you can correct an error straight away. If you are not ready for a page to be deleted permanently, you should unpublish it in the content tree instead of placing it in the recycle bin. If you are confident you no longer require any content within the Recycle Bin you should permanently delete it. You can delete pages one by one or as a whole. Please note that after deleting pages from the Recycle Bin you will not be able to retrieve any data associated with that page. EMPTYING THE RECYCLE BIN 1. Click on the ( ) icon for the Recycle Bin in the website tree structure to reveal the Actions menu. 2. Click Empty Recycle Bin. 3. Click OK to confirm you wish to empty the Recycle Bin or click Cancel if you do not. DELETING INDIVIDUAL ITEMS 1. Click on the ( ) icon of the page within the Recycle Bin you wish to permanently delete. 2. Click Delete. 3. Click OK to confirm you wish to permanently delete the page or click Cancel if you do not. ClubNet Websites // Manual for Editors Page 12

13 WORKING WITH CONTENT CONTENT STRUCTURE Your website is made up of pages and each of these pages uses one of the available Document Types. The most common of these is the Content Page, but there are others which provide specialized functionality. There are some common features of most document types: The page name this is the internal label within the editing interface and also determines the address of the page. For example a page called About Us would generate a page at [ Page Titles most pages require a Page Title to be entered and (optionally) you can enter a sub-title too. This appears at the top of your page, below your topbar and above your main content Page Settings here you can set: o whether or not the login boxes should be shown at the top of the page o whether the page should be hidden from the navigation bar or from subnavigation macros o whether the Tawk.to and Social Sharing features are displayed or hidden (see home page below for details of how to set the default for your site) o settings for the scrolling news rotator at the top of the page o whether the page is a feature page i.e. whether it is included in any Feature Page macros on the site and if so, what content to display The document types available in your website may vary, but the common ones are listed on the following pages: ClubNet Websites // Manual for Editors Page 13

14 HOME PAGE In addition to the same features as a Content Page (see below), the Home Page has other significant attributes. In particular, the Home Page has tabs for settings which apply not only on the Home Page but also on sub-pages of the website. It is possible to add additional home pages either at the top of the navigation or to create sub-sites - but please note that these are chargeable, so only add additional home pages if you are happy with the fees for this. Each home page and its sub-pages has: Its own contextual navigation so if you have a Sports Club website with three sports sections, and each section has its own sub-site, when you visit the pages of Sport A, only the pages relevant to Sport A will appear in the navigation bar The ability for each site / sub-site to have different styling for example, a different colour scheme for each sports section The settings for the Tawk.to Chat Support service on your website. This is a chargeable add-on, so please contact ClubNet if you would like to discuss having this feature added. The facility enables visitors to your site to chat to a club operator (e.g. receptionist) in real time The option for switching on or off the Social Sharing buttons on the left of each page (or the bottom when viewed on mobile devices) this can be overridden on each sub-page as required (e.g. if you wanted to hide these buttons on a specific page) The ability to set a Footer on the home page and each sub-page Settings for Social Media, including the links to use at the bottom of each page for linking to your Facebook, Twitter, Google + accounts etc The facility to display up to four adverts at the top of the home page and each sub-page, typically for your sponsors o To activate the adverts, you should tick the Display Adverts checkbox on the Adverts tab o The adverts are half banner size (a standard advert size) which is 236x60 pixels and appear on all sub-pages of the home page where the adverts are set up o You should set a default advert which is displayed if you ever have fewer than four live adverts often this is used for a message encouraging advertisers to contact you to place their logo on the website o Each advert can be set up as a banner and a link (to the advertiser s website, typically) or using an html tag supplied by a third party AdServing software supplier. AdServing software enables you to track impressions (i.e. the number of times an advert has been viewed) and clicks which can be useful for your internal purposes and also for encouraging advertisers to renew their advert. If you wish to set up AdServing software, ClubNet can arrange this for you, but please note that such software is not free! ClubNet Websites // Manual for Editors Page 14

15 CONTENT PAGE This is the most common document type. It enables you to add content in a grid format. This means that the page comprises a number of rows, and each row can contain one full width column, two columns or three columns. You can add as many rows as you like to a page, though readability is likely to be the limiting factor people tend not to read very long pages. ROWS AND STYLES Each new row will be added below any other rows already on the page. You can move rows above or below other rows by clicking on the row header (the row header and background turns blue) and then dragging and dropping the row where required. For large pages, or pages with a large amount of content, it may be easier to use the Reorder feature in the top right of the Content Area. This hides the content and just shows you the rows and the content types in each so you can see more of the page and drag and drop more easily. We recommend saving your changes regularly when re-ordering and previewing your progress to check the results are as you intend. In addition to re-ordering rows, the Reorder feature also enables you to move blocks of content within or between rows. When you first create a page, you need to add your first row before you can add any content: Each row can carry styling from one of the pre-set styles. To apply a style, click on the header of the row you just created, then click the setting icon (the cog symbol) on the right side: The styles available to select are determined by your website s stylesheet which ClubNet have created for you. Note: You should always select one of the options for Background colour. If this is not set, your stylesheet settings do not apply and your page will contain plain, un-styled content which will not look very good. The spacing between rows is pre-determined by the stylesheet. However, if you wish to increase or reduce the gap between rows you can enter a value in the Add spacing field. This adds or, for negative values, reduces the spacing below the row you are styling. To enter a value here, you enter a number of pixels for example, to reduce the gap by 40 pixels, you would enter -40px. When you have finished applying your styling, click Submit to return to the page for adding content, then remember to Save (or Save & Publish) the page for the changes to be saved. ClubNet Websites // Manual for Editors Page 15

16 Once you have created a row, you can then begin to add content to that row by clicking on Add content. You will be asked to select from the available content types. Embed Image Macro Quote Rich Text RICH TEXT EDITOR CONTENT TYPE The Rich Text Editor is the field where you, as the editor, can work on text content, format the text, or simply leave it the way it is. If you want to do more, you can insert images, create tables or create links to other pages or documents. The functionality varies depending on how the editor is set up. Here we describe the default editor with all options enabled. Contact ClubNet if you have any questions regarding how your editor is set up. APPLY FORMATTING TO TEXT To apply formatting to text: 1. Select the text you want to apply the formatting to 2. Click the appropriate format button (see below) to apply the formatting you wish to add PARAGRAPH BREAK/LINE BREAK The editor is like any other word processing program. You write the text, and the text wraps around when the line reaches the end. When you press ENTER in the editor, you get a paragraph break, which means there is space between the paragraphs. If you do not want a space, you have to make a line break instead. You do this by pressing SHIFT+ENTER. SHORTCUT KEYS To make your work easier, there are shortcut keys for certain editor functions. Shortcut keys let you use the keyboard to carry out certain commands. Ctrl + A Ctrl +B Ctrl + C Ctrl + I Ctrl + U Ctrl + V Ctrl + X Ctrl + Y Ctrl + Z Select all Bold Copy Italic Underline Paste Cut Redo Undo ClubNet Websites // Manual for Editors Page 16

17 EDITOR BUTTONS Below are all the default editor buttons available. Your system administrator is able to determine which buttons are displayed in different templates. You could therefore have access to more or fewer buttons than those shown here. If you hover over any of these buttons in the editor, you will see a label for what that button does. The buttons are: Source code for anyone familiar with HTML coding, but otherwise steer clear! You don t need to use this. If you do use it, please note that certain elements such as scripts will not be allowed and will be filtered out of code automatically Clear formatting if you apply styles to some content and you want to start over, you can remove the styles already applied Undo Redo Cut Copy Paste as text note that by default when you paste into a rich text editor, all formatting is stripped out. This is because formatting applied outside the website editor is likely to contain styling tags which cause conflicts on the website when viewed in some or all browsers so always apply your styling via the editor after typing or pasting in the content Formats drop-down list provides a set of predefined styles that can be applied to text whilst maintaining a consistent look and feel through the site. These styles often incorporate more advanced formatting functionality which can be applied to provide a different look for certain elements such as headings and sub-headings Bold Italic Underline Strikethrough Align left Align center Align right Justify Bullet list Numbered list Decrease indent Increase indent Insert/edit link you can use this for setting up a link to another page of your website, a file (e.g. a PDF or Word document), an anchor or an external website see below for detailed steps for each type of link Remove link Anchor for creating an anchor point on the page which you can link to from elsewhere (useful for long pages) Media Picker for inserting a photo or image into the rich text area Table for adding a table with your chosen number of rows and columns Embed for embedding a YouTube video within your rich text area Horizontal line Subscript Superscript Special Character ClubNet Websites // Manual for Editors Page 17

18 LINKS (WITHIN RICH TEXT) The process for inserting a link differs depending on the type of hyperlink you wish to create. Remember after adding a link that you need to Save & Publish the page for the link to be visible on the live website. LINK TO A PAGE ON ANOTHER WEBSITE 1. Select the text that will form the hyperlink 2. Click the Insert Link button which will reveal the link properties slide out menu. 3. In the Link to document field, enter the full URL of the web page you wish to link to (e.g In the Link title field, enter the text that will be shown as a pointer to the link. This is helpful for all users and especially important for people reading the website with the help of various accessibility aids 5. In the Target field, tick the checkbox to open the link in a new window or tab this will ensure your website also remains open 6. Click Submit. Your text will now contain the link as requested. LINK TO A PAGE IN YOUR WEBSITE 1. Select the text that will form the hyperlink 2. Click the Insert Link button which will reveal the link properties slide out menu 3. In the Link to Page area of the menu, either search for the name of the page you wish to link to, or click the arrow next to Home to open the content tree 4. Select the page to link to and you will see a blue tick appear next to the page name; this will populate the link to document and link title automatically for you. 5. In the Target field, do not tick the checkbox to open the link in a new window or tab this will ensure your website remains open in one window / tab rather than opening multiple tabs with your site 6. Click Submit. Your text will now contain the link as requested. LINK TO A MEDIA FILE (E.G. PDF FILE, WORD DOCUMENT ETC) 1. Select the text that will form the hyperlink 2. Click the Insert Link button which will reveal the link properties slide out menu 3. Click the Select media button in the Link to Media area of the menu which is situated at the bottom of the slide out menu 4. You will then be taken to the media picker, where you can select the media item 5. When you have selected the media item you will be taken back to the link screen where the Link to document and Link title fields have been populated with the media item information. By default the page title will be the media file name but this can be edited 6. In the Target field, tick the checkbox to open the link in a new window or tab this will ensure your website also remains open even when the user closes the media file after viewing it 7. Click Submit. Your text will now contain the link as requested. LINK TO AN ADDRESS It is possible to create a link to an address but we recommend that you do not do so. This is because such links are visible to users and robots which crawl around the internet looking for addresses and adding them to spam lists. Instead, we recommend that you use Contact Forms and the Committee Lists / Profile Pages functionality this enables contact without making the address publicly visible ClubNet Websites // Manual for Editors Page 18

19 LINK TO AN ANCHOR ON THE SAME PAGE An anchor allows you to create internal page links that enable users to navigate to a specific place within a page. There are two parts to setting up an anchor; the anchor itself and the link to the anchor. CREATING AN ANCHOR 1. Focus the editor cursor where you wish to create the anchor 2. Click the Anchor button which will then launch the Anchor creation dialog 3. In the name field enter your anchor name. You should avoid special characters and do not use spaces 4. Click OK to finish 5. You will see a small anchor icon where you previously had the editor cursor. To delete an anchor, simply select it and then press your delete key. LINKING TO AN ANCHOR 1. Highlight the content which you wish to add the anchor link to 2. Click the Insert Link button which will reveal the link properties slide out menu 3. Add a hash symbol followed by the name of your anchor into the link to document field 4. Click Submit. Your text will now contain the link as requested. CREATE A LINK FROM AN IMAGE As well as text, you can also make images into clickable links. 1. Insert an image into the editor (see Working with Images for more details) 2. Select the image that will form the hyperlink 3. From here, follow the same instructions as for inserting a normal hyperlink, starting at step 2. REMOVING A LINK 1. To remove a link you first need to select it in the editor. For text links simply click the cursor anywhere within the link text. For an image just click the image itself 2. Click the Remove Link button which will remove the hyperlink ClubNet Websites // Manual for Editors Page 19

20 MEDIA PICKER (WITHIN RICH TEXT) To insert an image into your rich text, you need to use the media picker. This enables you to select a photo or image stored in your media section, or to upload one or more new photos if required. First, click on the Media Picker button on the toolbar, you will see the Select Media slide out menu. INSERTING AN IMAGE FROM THE MEDIA LIBRARY From here you can navigate to the relevant folder where your image is stored. To open a folder, click the blue bar which appears when you hover over that folder. To select an image, you need to click on the image (not the blue bar) when you find it. INSERTING AN IMAGE FROM YOUR COMPUTER If you haven t yet uploaded the photo, you can either do that via the Media section (see Working with Images section below) or you can upload it from the Select Media slide out menu. First, if you need to create a new folder, click the + in the folder structure (see example in the screenshot above, to the right of Media ), and enter the new folder name. Once you have created the folder(s) you need, click the Upload button, navigate to where the image is stored on your computer, and click Open. You will be asked to select a Media type in this case, select Image, and then the upload will begin. You can upload single images or batches in this way, but only batches of similar files (e.g. only images, or only PDF files etc) rather that a mix of file types. Once the photo is uploaded, simply click on the image. Enter the Alternative text as something meaningful to the picture if for any reason the image is not available to display (e.g. if the photo is inadvertently deleted), this text appears in its place. Then click Submit. You will return to the Rich Text Editor. If you wish to re-size the image, click on it once to select it and then you are able to drag the corner handles of the image to adjust the size as required. You can also align the image. If you click the image and select Align Left [or right] from the toolbar, the image will move to the left [or right] and any adjacent text will wrap around the image to the right [or left]. Be sure to select only the image when doing this; if you select any of the adjacent text, that text will also be aligned and you will not achieve the desired outcome of text wrapping around the image. Note: It is important that you re-size photos and images before uploading them to the website. Generally 800px is the maximum you re likely to need in either dimension) doing so will use up less of your allocated space, upload pictures faster, and render faster for users when viewing the site. Many photos taken these days are a much higher resolution than you will use on the website. Once re-sized, there will be no visible loss of quality on the site, but the photo will be a small fraction of the original file size. Many photo editing tools will enable you to do this and some allow you to re-size photos in bulk to save you time. If you need help with finding a tool to assist you with this, please contact ClubNet. ClubNet Websites // Manual for Editors Page 20

21 DELETING AN IMAGE FROM THE PAGE If you want to delete an image from the page, simply select the image and press Delete button on your keyboard. The image disappears from the page, but is not deleted from the media library. EMBED (WITHIN RICH TEXT) The embed option allows you to embed a YouTube video into your Rich Text section. To do this, click the Embed button, enter the URL of the video you wish to embed into the Embed slide out menu. Click Retrieve and once your video has been found, you can edit the dimensions, then click Submit to return to the Rich Text Editor. TABLES (WITHIN RICH TEXT) Tables are used to format information in a grid based structure. When you insert a table, you select how many rows and columns the table should contain, as well as fill in a number of additional optional formatting properties. These values can be altered later, so it is not important to know exactly what your table will look like when you create it. EDITING AN EXISTING TABLE To edit the table after you have already created it, you need to click on it so you have a small square box in each of the four corners. Then you need to click on the Table button in the rich text editor in order to reveal the options. Clicking Table Properties gives you several options for modifying the table s appearance; however ClubNet may have already created table styles for you so you may not need to adjust these settings. There are various other options available for modifying cells, rows and columns such as height, alignment, merge, insert and delete. To create column or row headings, select the cells that you would like to convert in to headings, then select Cell / Cell Properties from the Table button options, and set the Cell type to Header cell. Also set the Scope to be Row for a row heading or Column for a column heading. Not only with this apply the pre-set header styles, but also this will help users with screen readers to interpret the table data more effectively and help make your website more accessible. You should avoid using paragraph breaks within tables as these can distort the formatting and may also lead to unpredictable results because the table needs to be displayed on different screen sizes; adding a line break where it looks right on your screen may not look very good on someone else s narrower or wider screen. If you need to create a new line, add a new row to the table instead and, if necessary, merge the adjacent cells. The image below shows an example of a table with no paragraph breaks, but with rows for each set of data and merged cells as necessary: ClubNet Websites // Manual for Editors Page 21

22 IMAGE CONTENT TYPE The Image content type enables you to add an image to the page without needing a Rich Text section. This is useful if you simply wish to add an image quickly to a page, but please be aware that none of the other Rich Text functionality (e.g. links, text etc) is available within the Image content type. INSERTING AN IMAGE FROM THE MEDIA LIBRARY From the Select Media slide out menu you can navigate to the relevant folder where your image is stored. To open a folder, click the blue bar which appears when you hover over that folder. To select an image, you need to click on the image (not the blue bar) when you find it. Enter the Alternative text as something meaningful to the picture if for any reason the image is not available to display (e.g. if the photo is inadvertently deleted), this text appears in its place. Then click Submit. INSERTING AN IMAGE FROM YOUR COMPUTER If you haven t yet uploaded the photo, you can either do that via the Media section (see Working with Images section below) or you can upload it from the Select Media slide out menu. First, if you need to create a new folder, click the + in the folder structure (see example in the screenshot above, to the right of Media ), and enter the new folder name. Once you have created the folder(s) you need, click the Upload button, navigate to where the image is stored on your computer, and click Open. You will be asked to select a Media type in this case, select Image, and then the upload will begin. You can upload single images or batches in this way. Once the photo is uploaded, simply click on the image. Enter the Alternative text as something meaningful to the picture if for any reason the image is not available to display (e.g. if the photo is inadvertently deleted), this text appears in its place. Then click Submit. Note: It is important that you re-size photos and images before uploading them to the website. Generally 800px is the maximum you re likely to need in either dimension) doing so will use up less of your allocated space, upload pictures faster, and render faster for users when viewing the site. Many photos taken these days are a much higher resolution than you will use on the website. Once re-sized, there will be no visible loss of quality on the site, but the photo will be a small fraction of the original file size. Many photo editing tools will enable you to do this and some allow you to re-size photos in bulk to save you time. If you need help with finding a tool to assist you with this, please contact ClubNet. ClubNet Websites // Manual for Editors Page 22

23 MACRO CONTENT TYPE Macros are sets of pre-formatted functionality that enable you to place content onto your page without needing specialised knowledge or coding skills. Each macro shows you any available settings when you select it these are mostly self-explanatory, but if you need assistance, please contact ClubNet. The macros available on your site may vary, but the common ones are: BUTTON The Button macro enables you to insert a pre-formatted button onto your page with a link to a web page or a file in your Media section CONTACT FORM The Contact Form macro inserts a contact form on the page. You can set the address to which the contact s are sent. The form includes a recaptcha element to help reduce the risk of spam, and hides the recipient s address from public view. Note: We strongly recommend that you do not display any addresses publicly on your website as they are likely to be scraped by spam robots and added to spam lists from which it is virtually impossible to be removed. This includes displaying the address as text or adding it as a clickable link. EVENT CALENDAR There are four macros for the Event Calendar, which enable you to display either the Latest Events or Upcoming Events, in either case for either a single calendar or for all calendars. FACEBOOK There are two Facebook Macros one shows a Facebook Like Button on the page, the other enables you to embed a Facebook Page Plugin on the page this can display latest posts from a Facebook page directly on your website. FEATURE PAGES The Feature Pages macro searches the website for any pages marked as a Feature Page and displays a pre-formatted block of content for each. There are no settings or content within the macro itself, as all details are held within the featured pages themselves. This is most commonly used on a Home Page as a signpost to different areas of the site (such as the different sports sections in a multi-sport club). FEED VIEWER The Feed Viewer macro enables you to display an RSS feed from an external site on your website. FILE LIBRARY The File Library allows you to select specific files from the Media section and display them as a list of items, styled with an icon to represent their file type, and linked so the user can download those files. GALLERY A gallery is a collection of specific photos (or a whole folder of photos from your Media section) which can be displayed on the page. The images are shown relatively small on the page, but are clickable to enlarge them and the user can then move forward or back through the images or even view them as a slideshow. ClubNet Websites // Manual for Editors Page 23

24 GALLERY INDEX A gallery index is a macro which looks for sub-pages with a document type of Gallery (note, this will not include content pages with a gallery macro). The index shows the gallery name and a thumbnail image representing each gallery which can be clicked to enter the full gallery page. IFRAME On occasion, you may wish to embed an external website within your page for example some sports clubs choose to embed the league tables page from the website of the league that they play in rather than trying to maintain a duplicate of that content themselves. This is achieved via the iframe macro. LATEST EDITS The Latest Edits macro shows the latest edits that have been made across the website. This can be a useful way of drawing users attention to recent updates to pages. MAP The Map macro enables you to embed a map on your page. Before you can set this up, you need to create a page with Document Type Map to hold the map settings and any Map Markers that you may require on the map to pinpoint specific locations. NEWS FEED The News Feed is an easy and attractive way of displaying a summary of recent News articles on other pages of your website, with a headline, brief summary and an image. SLIDESHOW The Slideshow places a series of photos on your page which are displayed one after the other in a slideshow style. SUBNAVIGATION The Subnavigation macro displays a list of all sub-pages of the current page (unless flagged to be hidden from subnavigation). SUBNAVIGATION PEERS The Subnavigation Peers macro displays a list of all pages with the same parent page as the current page (unless flagged to be hidden from subnavigation). TWITTER TWEET BUTTON This macro shows a Twitter Tweet Button on the page. WIDGET The Widget macro enables you to paste in snippets of code from TRUSTED external sites. Frequent uses include weather widgets from the Met Office, which display a weather forecast on your website, or a Twitter Profile widget which enables you to embed a Twitter Feed directly on your website page. IMPORTANT NOTE: Widgets come with a health warning please DO NOT USE widget code that you don t understand and fully trust, as it can be dangerous. If you are in any doubt, please contact ClubNet BEFORE trying it. ClubNet Websites // Manual for Editors Page 24

25 EMBED CONTENT TYPE The Embed Content type enables you to add a YouTube video direct to your page without needing a Rich Text section. When you select the Embed content type, enter the URL of the video you wish to embed into the Embed slide out menu. Click Retrieve and once your video has been found, you can edit the dimensions, then click Submit to return to the page. QUOTE CONTENT TYPE The Quote content type is simply some pre-formatted text, styled to provide emphasis. These are typically used for testimonials on websites. ClubNet Websites // Manual for Editors Page 25

26 BLOG POST Blog Posts are where you enter news articles. Please remember to create these via the landing page when you first log in (return here by clicking CONTENT at the top of the content tree) and selecting the second tab Create Blog Post. This will set up the Year, Month and Day folders correctly for you so the news can be properly stored, dated and archived by the system. When entering a news article, there are two tabs that you will focus on: POST INFO Post Date defaults to the date the post was created but can be back-dated if required, or dated in the future if you plan to schedule the post for publishing on a future date Main Image select an image if you wish to display an image in News Feeds and in the top left of the News article page when displayed on the website Author search for an author from the list (you first need to ensure your authors are set up in the Authors item under the News page) you may add more than one author to a post if necessary Tags enter a new tag or select an existing tag by clicking on Show/hide all tags Note: by convention, tags are usually written in lower case, even if they contain names Note: try to avoid duplication / variation of tags e.g. avoid christmas and xmas pick one and try to be consistent Categories - search for a category from the list (you first need to ensure your categories are set up in the Categories item under the News page) you may add multiple categories as required The significance of authors, tags and categories is that each enables users to search more easily for the content they are interested in. On the news page, the available authors, categories and tags are displayed and users can click on any of these to see all posts related to their selection. In addition, you can use categories together with the Latest News Rotator on each page and/or the News Feed macro to display only news articles which match a specific category on a specific page. For example, you might want to display only news which is categorised for Juniors on a Juniors page of the website. ClubNet Websites // Manual for Editors Page 26

27 CONTENT Title this is the headline for this news article Summary this is a short teaser (ideally 1-2 sentences) about the news article and is displayed on the main News page and also in the News Feed macro. In each case, a read more link is included automatically to enable the reader to access the full news article. We recommend that you always enter a summary Note: The summary accepts plain text only not images, links, formatting, line breaks etc Note: You should avoid using special characters such as ampersands and apostrophes in the summary as these can interfere with news feeds this is especially important if you use the automated newsletters through MailChimp as these characters can cause the feeds to be considered invalid in MailChimp resulting in newsletters not being sent Body this is the full news article and is displayed on the news article s detail page the summary is not displayed in addition, so both should be completed Note: The body enables photos, links, formatting etc as available via the rich text editor displayed HOW THE BLOG POST LOOKS ON THE NEWS PAGE: HOW THE BLOG POST LOOKS WHEN YOU VIEW THE FULL STORY: ClubNet Websites // Manual for Editors Page 27

28 COMMITTEE LIST AND COMMITTEE PROFILE Despite its name, the Committee functionality is suitable for use with any list of contacts, not just a committee for example, key contacts, team managers, coaches etc. This is a pre-formatted set of pages that enable you to set up a list, determine what details you wish to display and then add profile pages for each contact within that list. Details you may choose to enter include name, role, phone and mobile numbers, photo, address, and biography / pen-portrait. The address is not displayed on the site but, if entered, a contact form with spam protection is enabled so that users can complete the form to send an to the intended address. Note: Committee Profile pages are permitted only as sub-pages of a Committee List. CALENDAR The calendar pages of the site are available if the Calendar functionality is in use on your site. Please contact ClubNet if you require further information or would like this activated. The screenshots below show how the Calendar and Event Details pages could look on your website: ClubNet Websites // Manual for Editors Page 28