HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS

Transcription

1 HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS GETTING STARTED (LOGIN) 2 SITE MAP (ORGANIZE WEBPAGES) 2 CREATE NEW PAGE 3 REMOVE PAGE 6 SORT PAGES IN CHANNEL 7 MOVE PAGE 8 PAGE PROPERTIES (PUT PAGE BEHIND LOGIN) 9 CONTENT MODULES 11 IMAGE MANAGER (ADD/EDIT IMAGE TO WEBSITE CONTENT) 21 HYPERLINK TEXT TO URL 27 CREATE ANCHOR LINKS 29 HYPERLINK TEXT TO ADDRESS 33 DOCUMENT MANAGER (ADD DOCUMENT TO WEBSITE CONTENT) 35 CONTENT BUILDER (MOVE, EDIT OR DELETE MODULES) 38 1 P age Page 1 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

2 How To: Use the Content Management System (CMS) This documentation is designed to walk through the necessary steps to use the Content Management System (CMS). The Content Management System offers much flexibility to allow you to design your class, club or group web site to meet the needs of your constituency. GETTING STARTED On the class, club or group s home page, go to the LOGIN link. Use your Infinite Connection username and password to login. SITE MAP (ORGANIZE WEBPAGES) The Site Map indexes of all webpages on your website. To view the Site Map, on the imodules Administrative Toolbar, go to Content and then the Site Map on the secondary toolbar. The page you are on when selecting Site Map will be highlighted in blue. Pages shown in yellow are non active pages and cannot be seen by class, club or group members. In some cases, they are pages that are not ready to be published. If you do not have access to any of the Site Map settings they will be grayed out. If additional access is needed, please contact your class, club or group staff liaison. When you click on the Site Map, the 2 P age Page 2 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

3 page you were on will be highlighted in the left portion of the screen. When you click on a page on the left, the Page Properties for each page will be shown on the right portion of the screen. NOTE: On non active pages (shown in yellow on the Site Map), the option to Exclude this page from navigation has been selected. This can be used for seasonal pages, for a page that is under construction, or for system pages that you don't use. Uncheck the box to make the page active. If you check the box to Exclude all navigation from this page, it will remove the navigation from the page completely. The navigation bar will not be available, but the back button will still be enabled. This is sometimes used to focus on the content of a page like a registration form, etc. CREATE NEW PAGE There are two ways to add a new page. You can add a new page by clicking on Site Map which, by default, will add a Mobile Ready Content Block or add a new page by clicking on New Page. To create a page using Site Map, go to the area of the Site Map where a page needs to be added. Click on the parent page and then right click. Select Create Page. The New Page tool lets you create multiple child pages for one parent page, allowing you to quickly set up an outline of pages that you can go back to later to load with content. New Page also lets you choose which type of module to start your page off with, while creating a new page in the Site Map has you start off with a content block (although you can edit the page to add or change the order of any content modules on the page). Site Map is useful for setting up new pages for different parent pages throughout the site, and allows you to work with the properties of each page. 3 P age Page 3 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

4 Option 1: On the imodules Administrative Toolbar, go to Content and then Site Map on the secondary toolbar. SITE MAP (Option 1) Step 1: (Option 1) On the imodules Administrative Toolbar, go to Content and then Site Map on the secondary toolbar. Step 2: (Option 1) Click on the parent page (+) or child page ( ) to add page. Right click to select Create Page. Step 3: (Option 1) In the Page Name field, enter the name of the page. Step 4: (Option 1) Click Next. 4 P age Page 4 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

5 Step 5: (Option 1) Select Content Block. Step 6: (Option 1) Click Next. 5 P age Page 5 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

6 Step 7: (Option 1) Click the Click here to Add Content link. Step 8: (Option 1) Add all content within the Content Editor. Use the toolbar to format text, add images, documents and hyperlinks. Step 9: (Option 1) Click Apply. 6 P age Page 6 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

7 Step 10: (Option 1) Click Save. BEST PRACTICE: ALWAYS do your formatting within the Encompass content editor. However, if you are copying and pasting in content, you MUST first use Notepad or a similar software application in order to remove all html formatting. Note: Auto Save Feature on Text Editors The auto save feature saves a version of the work in the editor every 2 minutes, so when you log back into Encompass you have the option to continue working with the latest version. This feature works on CMS, , events, forms, memberships and only works in the edit mode. For example, if the admin is adding rich text to a form and is logged out because their session expires the unsaved content is not saved. It would be saved if editing rich text that was already on the page. When you return to the editor there will be a message at the top of the page stating "Unsaved data was found for one or more content editors on this page" plus an additional message stating The following unsaved content from time and date was found with a Restore and Delete link. The editor will display the unsaved content in the editor to allow the admin to see the latest version of the content. In addition, the admin WILL NOT be able to enter anything new into the editor until selecting the 'Restore' or "Delete' option. 7 P age Page 7 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

8 Option 2: On the imodules Administrative Toolbar, go to New Page then choose the type of module to be added on the secondary toolbar. NEW PAGE (Option 2) Step 1: (Option 2) On the imodules Administrative Toolbar, go to New Page then choose the type of module to be added on the secondary toolbar. Step 2: (Option 2) Choose the type of module to use for the New Page. Select from the list and use the arrow to the right to choose additional selections. Step 3: (Option 2) In the Page Title field, enter the name of the page and click the green check mark to save. The new page will be saved and you can go into the Site Map to move, edit or remove the pages as needed. 8 P age Page 8 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

9 REMOVE PAGE REMOVE PAGE Step 1: On the imodules Administrative Toolbar, go to Content and then Site Map on the secondary toolbar. On the imodules Administrative Toolbar, go to Site Map. Click on the page to be removed. Right click and select Remove. The page will be deleted. (If you're not sure if you want to completely delete the page, it is recommended to hide the page). Step 2: Click on the page to be removed. Right click and select Remove. A confirmation screen will appear. Click Confirm to remove the page. Step 3: Click Confirm. 9 P age Page 9 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

10 SORT PAGES IN A CHANNEL Channels are pages or parent pages that have child or sub pages. They will be marked with a plus sign (+) in the hierarchy, and you can click on the + to drill down to see the pages in the channel. Single pages will have a dash or minus sign ( ). They are at the lowest level and have no child or sub pages. To sort pages in a channel, right click on the parent page of the channel to be sorted. Click Sort Channel. The pages in the channel will be shown. Click each page and then use the Move buttons to sort the pages into the desired order. SORT PAGES IN A CHANNEL Step 1: Right click on the parent page of the channel to be sorted. Click Sort Channel. 10 P age Page 10 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

11 Step 2: Use the Top, Move Up, Move Down and/or Bottom buttons to move pages. Select Top, Move Up, Move Down and/or Bottom button to move pages. Step 3: Click Save. Once you click Save, you will be taken back to the Site Map. MOVE PAGE (DRAG AND DROP) MOVE PAGE Step 1: Hold down the mouse button on the page you want to move. Drag it to the page or channel you want it moved to. Another way to move pages is to click and hold down the mouse button on the page you want to move. Drag it to the page or channel you want it moved to. When you see the page or channel underlined, release the mouse. A confirmation screen will appear. Click OK to move the page. Step 2: Click OK. 11 P age Page 11 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

12 PAGE PROPERTIES (PUT PAGE BEHIND LOGIN) Sometimes there is a need to put certain pages on your website behind login so that they are not public pages and require login. To put a page behind login, go to the page you want behind login. PAGE PROPERTIES Step 1: Go to the page to put behind login. 12 P age Page 12 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

13 Step 2: On the imodules Administrative Toolbar, go to Page Properties. Step 3: For Audience, select Logged In. Step 4: Click Save. 13 P age Page 13 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

14 CONTENT MODULES (EXAMPLE: ADD AN IMAGE ROTATOR) To add content to your page, you can add different types of Content Modules by selecting the drop down menu under Content Modules. One type of Content Module that is used frequently and can be added is an Image Rotator. An Image Rotator displays pictures in a frame on your webpage at a given interval. Below is an example of an image rotator that has been added to a page. 14 P age Page 14 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

15 BEST PRACTICE: If you set the Image Rotator as a Slide Show, the Slide duration works best using an interval between 4 and 7. If the Image Rotator is on the right/left hand side of your page, the width should be set to 180 and the height should be set to 100. If the Image Rotator is in the center of your page, the width should be set to 460 and the height should be set to 345. ALWAYS make sure that all pictures that are in the Image Rotator are either ALL landscape OR ALL portrait. CONTENT MODULES * There is NO set limit of images that can be added to the Image Rotator. It is more the overall size of all of the images added together. The Image Rotator works best with under 20 images. Step 1: Go to the page to add a Content Module. 15 P age Page 15 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

16 Step 2: Go to Content Modules and select the type of Content Module to be added. The cursor will become a four sided white arrow. Hold down the mouse to drag and drop the Image Rotator Content Module. NOTE: If you hover over an area of the webpage and it appears in green, it will drop the Content Module into the template of your entire site. If the area is blue with a dotted line, it will drop the Content Module above that Content Block and if it is a solid blue line it will drop it above or below based on the available space on the page. 16 P age Page 16 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

17 Step 3: Click on the Image Rotator icon to add/select images to be included in the Image Rotator. 17 P age Page 17 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

18 Step 4: Right click and select Add Image. Step 5: Total files, allowable file format, search and photo manipulation tools are available for use in the Image Uploader. 18 P age Page 18 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

19 Step 6: To crop an image, select the cropping tool (preview/edit image). Step 7: In the new window, drag the corners of the image. The Image Uploader tool for use with the Image Rotator includes a search feature as well as photo manipulation tools (allowing you to crop, rotate, and save photos). Information is displayed regarding total files in folder vs. number of files with the allowable file types for upload. Step 8: Click Crop. 19 P age Page 19 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

20 Step 9: Click Save and close. Step 10: Click the box above the images to be added to the Image Rotator. The total number of images to be uploaded will appear at the bottom. Step 11: Click Save. A confirmation message will appear confirming that the images are being uploaded to the server. 20 P age Page 20 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

21 Step 12: Click Close. Step 13: Drag and drop the images from the bottom of the page into the film strip area at the top of the page. 21 P age Page 21 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

22 Step 14: To link an image to a URL, select the pencil icon and add the URL. Step 15: Click Save. Click the pencil to give an individual picture a unique URL. Enter the URL. (For example: When users click on the image they will be taken to that URL. Step 16: Select the Image Rotator settings by choosing any of the following options. 22 P age Page 22 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

23 URL: If you want the Rotator/Slideshow to direct people to a new location, you can enter a URL in the area provided. Open URL in a New Window: Select this to open the URL in a New Window. Disable Image Click Events: This will disable the images from linking to URLs and will keep the pop up window from displaying with the Image Description. Enable Image Isolation: This will allow you to create special rotators for certain pages without using another rotator module. If image isolation is enabled on a page, then you'll need to add the images you want to use on that page to the rotator. Image isolation is primarily used for image rotators that are built into site templates. By default, when the images are changed in a template rotator, those images change on every page that template rotator exists. Enabling Image Isolation allows you to change images in a rotator, and those changes will only affect the template rotators in that specific channel (changes made at the parent page will affect the child pages below; the change will not affect other parent pages). For example, admins will commonly enable image isolation at root home and add the images they plan on using for all pages at the root home level. Then you can go to the pages you need to customize and add the images you want to use on that area. NOTE: With image isolation, you will not be able to use the same images in multiple areas. However, if you want to use a group of images for a channel, then you can add them to the parent page of the channel. Width/Height: This specifies the width and the height of the Image Rotator not the image. If the Image Rotator is on the right/left hand side of your page, the Width should be set to 180 and the Height should be set to 100. If the Image Rotator is in the center of your page, the Width should be set to 460 and the Height should be set to 345. Select the Set as a Slide Show if you want the images to appear as a slideshow. When you select this option the following options can also be customized. Show Slide Show Nav: Arrows to allow users to move through the slide show will be shown on the Image Rotator. Enable this to allow users to scroll through the pictures at their own pace. Slide Duration: Enter the number of seconds you would like each slide to be shown before moving to the next slide. The Slide Duration works best using an internal between 4 and 7. Step 17: Click Save. 23 P age Page 23 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

24 IMAGE MANAGER: ADD/EDIT IMAGE TO WEBSITE CONTENT IMAGE MANAGER The Image Manager stores pictures that can be used in the Content Management System (CMS), Marketing and Events. Step 1: On the page to add/edit an image, click the pencil icon for Edit Control. Step 2: On the formatting toolbar, click the Image Manager. 24 P age Page 24 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

25 Step 3: Click Upload. Click the add folder icon to add a folder. You will not be able to move images into folders after they have been uploaded. Step 4: Click Select. BEST PRACTICE: ALWAYS organize the image folders first before uploading images. Consider creating a new folder so that you can easily find images. 25 P age Page 25 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

26 Step 5: Find the file on your computer and select it. Step 6: Click Upload. Step 7: Click on the image file name to insert. Step 8: Click Insert. 26 P age Page 26 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

27 Step 9: Click on the image and hold down the mouse to move the image to the desired location. Step 10: Right Click on the image to select Properties to edit the image settings. Once the image is inserted, you can manage its properties by right clicking on it and selecting Properties. 27 P age Page 27 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

28 To lock the ASPECT RATIO, click the lock. When you do this, if you change the Width the Height will automatically be adjusted. In the Image Manager there is the ability to re size, rename and set the values of a selected image. However, It is always best to use an imaging software to make changes to the image itself. Use the Image Alignment to wrap text around an image by clicking the down arrow. Adjust the margins to add some space between the image and text. A Margin of between 4 7 usually works best. Step 11: Click Save. 28 P age Page 28 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

29 Once you have saved the changes, the new picture will appear on the page. 29 P age Page 29 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

30 HYPERLINK TEXT TO URL HYPERLINK TEXT TO URL Step 1: Add text. Highlight the text to be hyperlinked to a URL. Step 2: On the formatting toolbar, click the Hyperlink Manager. Step 3: On the Hyperlink Tab in the URL field, enter URL. BEST PRACTICE: When bringing in content from outside the Content Editor, you should ALWAYS copy it into Notepad or TextEdit to remove all of the formatting. Then copy the text from Notepad or TextEdit and paste it into the Content Editor. Content Editor tip: Hitting Enter results in a paragraph tag <p>. In order to get a <br>, you need to use Shift + Enter. Step 4: Click OK. 30 P age Page 30 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

31 BEST PRACTICE: If you are linking the user to a location outside of the community, it is recommended that you set the Target to open in a New Window. Step 5: Click Save. 31 P age Page 31 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

32 CREATE ANCHOR LINKS Use Anchor Links to hyperlink text to a particular location on your webpage. Generally, it is the beginning of a paragraph or additional information on the same page. CREATE ANCHOR LINKS Step 1: On the page to add/edit, click the pencil icon for Edit Control. 32 P age Page 32 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

33 Step 2: Click at the location to add an anchor. Step 3: On the formatting toolbar, click the Hyperlink Manager. Step 4: Click the Anchor tab. Step 5: In the Name field, enter name of anchor. Step 6: Click OK. 33 P age Page 33 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

34 Step 7: Highlight text to be anchored. Step 8: On the formatting toolbar, click the Hyperlink Manager. Step 9: On the Hyperlink tab in the Existing Anchor field, click the drop down menu to select the anchor that was just created. 34 P age Page 34 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

35 Step 10: Click OK. NOTE: If the anchor you created does not appear in the dropdown, simply enter #anchorname (using the name of the anchor you created) as the URL. To link to an anchor location from another page or in an , simply use the URL of your anchor (i.e., You can generally find the URL by hovering over the text that links to your anchor. Right click on the link, select Copy Link Location, and paste the URL in the desired location. Once all of the Anchor Links have been set up, the user will be able to click the link and then will be taken to that particular area of the page. 35 P age Page 35 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

36 HYPERLINK TEXT TO ADDRESS HYPERLINK TEXT TO ADDRESS Step 1: Add text. Highlight the text to be hyperlinked to an address. Step 2: On the formatting toolbar, click the Hyperlink Manager. Step 3: Click the E mail tab. Step 4: In the Address field, enter Address. Step 5: Click OK. 36 P age Page 36 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

37 Step 6: Click Save. 37 P age Page 37 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

38 DOCUMENT MANAGER Step 1: On the formatting toolbar, click the Document Manager at the location to insert a document. DOCUMENT MANAGER: ADD DOCUMENT TO WEBSITE CONTENT The Document Manager stores documents that can be used in the Content Management System (CMS), Marketing and Events. Step 2: Click Upload. 38 P age Page 38 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

39 Step 3: Click Select. Step 4: Find the file on your computer and select it. BEST PRACTICE: ALWAYS organize the document folders first before uploading documents. Consider creating a new folder so that you can easily find documents. Step 5: Click Upload. 39 P age Page 39 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

40 Step 6: Click on the document image name to insert. Step 7: Click Insert. Step 8: Click Save. 40 P age Page 40 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

41 CONTENT BUILDER (MOVE, EDIT OR DELETE MODULES) Now that your page is complete and you ve added all of the needed information, the easiest way to move the content is to turn on the Content Builder. The Content Builder is located on the Administrative Toolbar at the top of the page in the upper right hand corner. The Content Builder allows you to move, edit, and delete modules via a "floating" toolbar. The floating toolbar appears as you hover over each Content Module. The floating toolbar icons that display will depend on the module and your administrative rights. Click the Content Builder button in the upper right corner of the window to activate/deactivate. CONTENT BUILDER Content Builder = INACTIVE Step 1: Click Content Builder to make it active. Content Builder = ACTIVE Floating Toolbar 41 P age To make it easier to distinguish between template and content areas, the Content Management System has visual indicators built in. When the Content Builder is turned on, template areas will have a green background and content areas will have a blue background. Page 41 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

42 MOVE MODULE To move a module, click and hold on to move the Module to the desired location. Step 2: Click and hold on the green four sided arrow to drag and drop the module. NOTE: If you try to move content and hover over an area of the webpage and it appears in green, it will move the Content Block into the template of your entire site. If the area is blue with a dotted line, it will move the Content Block above the existing Content Block and if it is a solid blue line it will move it above or below based on the available space on the page. 42 P age Page 42 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

43 The Move Control window will appear confirming the module has been moved and is being saved. EDIT MODULE Click to edit the properties of the Module. Step 3: Click the pencil icon to edit the content of a module. 43 P age Page 43 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

44 Step 4: In the Content Body area, use the Content Editor to make all edits. Step 5: Click Save. 44 P age Page 44 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

45 DELETE MODULE Click to delete a Module. Step 6: Click the red circle to delete a module. 45 P age Page 45 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus

46 A confirmation screen will appear. Click OK to delete the module. Step 7: Click OK to delete the module. The Remove Control window will appear confirming the module has been deleted. 46 P age Page 46 CMS: How To Use the Content Management System (CMS) for Class, Club and Group Leaders February 2015 K. Balkus