CREATING WEBSITE CONTENT As an administrator, you will need to know how to create content pages within your website. This document will help you learn how to: Create Custom Pages Edit Content Areas Creating Custom Pages Your custom pages will be used for all of the internal website pages you wish to display on your website. NOTE: For certain website features, there are pre-defined webpages already created for you. See the Editing Content Areas section of this notes document for more information. To create custom pages: 1. Navigate to Content & Settings > Content Management > Custom Pages > Add a Page 2. Custom Page Configuration area: 1
a. Internal Category the category to be used for internal sorting and filtering only on the administrative backend. NOTE: To add page categories to appear in the Internal Category dropdown list, navigate to Content & Settings > Content Management > Custom Pages > Edit Page Categories. b. Page ID the tag that will be applied to the friendly URL permalink. NOTE: No spaces are allowed in the Page ID. Once a Page ID is entered, notice that the permalink updates and adds the Page ID into the URL. c. Page Title the title of the webpage that will be displayed as the webpage header. d. Permalink the website page URL. e. Collaboration (Wiki) Mode when enabled, this will allow public users to edit the content within the webpage. f. Privacy - controls webpage access. i. Public all users will have access to this webpage. ii. Private only members will have access to this webpage upon logging in. g. Redirection if the content of this page is no longer needed, you can enter a URL here and users will be directed to the new URL instead of viewing the webpage content. h. Searchable? make a page "searchable" if you want it to be included in your site's search index (Community Search). A "searchable" page will also be included in your sitemap so that search engines such as Google may index it as well. Please be aware that only pages to which an anonymous web user has access can be indexed by Google and other public search engines. i. Enable Voting and Score? if enabled, a voting and scoring widget will appear at the top of the webpage and viewers can score the content of the webpage. 2
j. Related Custom Pages all of your created custom pages will be listed here. If you wish to link related webpages together, select them accordingly. Once pages are linked as related, they will appear in the upper left corner on the front end of the webpage within a drop down menu. k. RSS Feed URL if you would like to add syndicated content to this custom page from another website, enter the URL of the RSS feed here and the content will be displayed below any custom page content that you enter into the Custom Page Content area. NOTE: New content is pulled from the RSS feed at 15 minute intervals and a maximum of 100 items will be displayed. l. Meta Tags meta tags are keywords you use to provide information about the website content which will help search engines index your website (placing it at the top of the search result lists). m. Attach a Custom Form if you wish to link a custom form to the webpage, select the form from the drop down list. i. Custom Form View utilize this field to determine how you wish the custom form to display on the page. Display Form (default) will display the attached custom form for the user to complete. Display Form Responses will display the approved responses to the attached custom form and users will be given the option to view or print the submissions. NOTE: The custom form must be created before it can be linked to a custom page. To create a custom form, navigate to Content & Settings > Content Management > Custom Forms. Any custom form attached to a custom page will be displayed at the bottom of the webpage beneath the custom page content. n. Review by Date To enter a date, select the appropriate timeframe from the drop down menu. 3
NOTE: If a date is entered here, the system will move the custom page to the top of the custom pages list view and place a reminder within the reminders area of the site (found by selecting the Reminders: Past, Today, Upcoming + link at the top of the site. 3. File Collections area: a. Utilize the file collections area to link any file collections to the custom page. If selected, the files will be displayed at the bottom of the custom page (and under any custom forms that may be attached to the page). NOTE: To create a file collection and upload files to it, navigate to Content & Settings > Content Management > File Library > Add a New Collection. 4. Custom Page Content area: 4
a. Utilize the webpage editor to enter and manipulate the webpage content. The editor is divided into three different tabs: i. Home Important Features: Paste (clipboard icon) to insert content from existing website pages or word documents, select this icon. This option will strip the content of any hidden formats a. Paste from Word - will ensure extraneous Microsoft Office markup is removed from your content but will maintain the content structure. b. Paste Text will remove all formats from the content. Remove Formatting (eraser icon) use this tool to erase formatting such as font and other styles from your content. Paragraph utilize this drop down menu to format the highlighted text within the web page content appropriately. For example, change normal text into a Heading 1, etc. NOTE: It is best practice to always use the paragraph format drop down to edit your content. ii. Insert Important Features: Hyperlink (chain-link icon) select the chain-link icon to insert hyperlinks. A Hyperlink popup box will appear: 5
a. Source utilize this field to enter the hyperlink information. Choose the source type from the drop down menu. i. There are 3 main types of links that can be created: 1. Open URL utilize the http:// option to create a link to a general website URL. 2. Secure URL utilize the https:// option to create a link to a secure website URL. For example, a webpage where users will be required to enter secure information such as payment. 3. Email Address utilize the mailto: option to create a link to someone s email address. ii. URL Textbox - enter the URL in the source text field. NOTE: If you are linking to a page within your website, it is best practice to use the relative path. For example, instead of entering the full URL http://xxxx.site-ym.com/store, enter /store in the source text area. NOTE: If you are linking to a file that has been uploaded to your Resource Manager, select the yellow folder icon and browse the Resource Manager for the desired file. b. Bookmark if you wish to utilize anchors on the webpage, first create the anchor(s) by selecting the anchor icon from the insert toolbar. Once created, select the desired bookmark from the drop down menu. c. Target utilize this field to determine how you wish the hyperlink to be opened once selected on the front end. i. Self using this option will open the selected hyperlink in the same viewing window that the user is currently in. ii. Blank using this option will open the selected hyperlink in a new window. iii. Parent - using this option will open the selected hyperlink in the parent frame which is the same window that the user is currently in. Images (photo icon) select the mountain and sun image icon to insert images. An Image popup box will appear: 6
a. Source To insert an image from your Resource Manager, select the yellow folder icon. i. A Resource Manager popup box will display. Select the appropriate folder from the Resources drop down menu to find your image. ii. The files will be displayed on the right; select the appropriate image file. iii. A preview of the image will be displayed in the preview area along with the image path information in the path textbox. 7
iv. Click Ok. v. The image path information will be inserted into the Source text box. b. Title text entered here will be displayed as a tooltip when the user hovers their mouse over the image on the webpage. c. Alignment select the desired image alignment from the drop down menu. d. Border create a border around your image by selecting the Border Style button. A Borders pop up box will appear: e. Width utilize this field to adjust the image width in pixels. f. Height - utilize this field to adjust the image height in pixels. NOTE: If you are resizing an image drastically, it is recommended to utilize a different service (such as rsizr.com or pixlr.com) and resize the image before uploading it to your Resource Manager. The reason being if you use the width and height options here, the webpage still needs to load the entire file size of that image. Adjusting the image width and height will not change the image file size. g. Spacing utilize these options to add padding or spacing around the image you wish to insert. 8
i. Top add spacing above the image. ii. Bottom add spacing below the image. iii. Left add spacing to the left of the image. iv. Right add spacing to the right of the image. Website Creating Content NOTE: When adjusting spacing options, notice that you are given a preview of what the image and text will look like at the bottom of the Image popup box. h. Select insert. Tables (table icon) utilize this option to insert and edit tables on the webpage. a. Insert Table when the icon is selected, a table popup will appear and allow you to select the desired number of rows and columns. b. Edit Table/Cell utilize this icon to edit an existing table and/or cell. NOTE: To enable this icon, the table must be selected within the editor area. i. Table Size a table size popup box will display and allow you to adjust the number of rows and columns within the table. ii. Edit Table a Table Properties popup box will display. 1. AutoFit utilize this tab to adjust how the table displays on the webpage. 9
2. Properties utilize this tab to adjust the cell properties, table alignment and margin options. 3. Style utilize this tab to adjust the table CSS text. 10
NOTE: Any changes made here will be made to the entire table. iii. Edit Cell utilize this option to edit one specific cell. A Cell Properties popup box will appear with the same options as the Edit Table popup (AutoFit, Properties, Style tabs). iii. Advanced Important Feature: HTML utilize this option to view/edit the HTML source code for the webpage content. A Source Editor popup box will appear: 11
5. New Version Information area: a. Utilize this area to keep track of the changes being made to your custom page content. The system will keep track of the last 10 saves of each custom page. b. You must select a Version Label before saving a custom page. The version label and notes are recorded in the Previous Version Information area. NOTE: Version notes are not required; however, the notes may be useful if you have multiple site administrators who edit the same custom page(s). 6. Previous Version Information area: a. Utilize this area to view all previous saves of the custom page. b. To revert the custom page content to an older version, select the double blue arrow icon. This action will return the page to its previous content. NOTE: The custom page will not display the reverted content until you select the Submit button. 12
c. To view the previous version notes, select the yellow folder icon. 7. Custom Page Actions: a. Submit select this button to save your current content. b. Cancel select this button to cancel any changes made and direct you to the Custom Pages listing. If you wish to save your current content, do not select cancel until you have submitted your changes. c. Delete select this button to delete the current custom page. NOTE: If you delete a custom page, it cannot be retrieved. d. Submit & Continue Editing select this button to save your current content and continue working within the custom page. This option is useful when working on page content for extended periods of time. Editing Content Areas Content areas are pre-existing site pages that contain page summary messages editable by admins. For example, Homepage content sections, Calendar of Events content sections, Career Center content sections, etc. Edit these content areas to include your organization's name, instructions, and/or any necessary information to a specific predefined page area. Path: Navigate to Content & Settings > Content Management > Content Areas (Page Summaries) 13
Content Areas list: Quick Actions: Edit (pencil/paper icon) utilize this icon to edit the information being displayed within the corresponding content area(s). View (magnifying glass/paper icon) utilize this icon to view the content area page on the front end of your site. NOTE: A feature may have multiple editable content areas. For example, the Community Calendar has multiple content area pages that are available to edit. NOTE: Available homepage and subpage content areas are dependent upon your website template. 14
NOTE: Any content entered into the subpage content areas will appear on all site pages except for homepage and microsite pages. 1. Editing content areas: a. Select the pencil/paper icon to edit the corresponding content area. i. Title/Page Header text appears towards the top of each page (where applicable) and stands out in a larger font. You may opt to keep the default title or enter custom text instead. Should you ever want to revert to the default title, select the "Reset to Default" link and then select the "Update" button. ii. Body Content utilize the editor to insert content, images, hyperlinks and tables just as you would within a custom page. iii. Version Information Area refer to editing custom pages for more information. iv. Previous Version Information refer to editing custom pages for more information. b. To view the content area on the front end of your site, select the magnifying glass/paper icon. 15