Introduction
This page contains a series of screen tutorials developed to provide step by step lessons on routine tasks in the Catalyst Content Management System. All of these videos cover topics that were part of the in person tutorial session provided to familiarize site administrators with the content management tools. Each video is also accompanied by a transcript of the tutorial.
Currently, to view these tutorials a password is required.
Password: catalyst-tutorial
Logging In
Transcript
The first part of the editing process is logging into the Catalyst CMS.
To login you will provide your email address and associated password.
You are now logged into the Catalyst Content Management System.
This is the Dashboard.
On the left side is the site's navigation that is used to find the pages that can be edited, along with other configuration tools.
Resetting Your Password
Transcript
If the need arises, you can reset your password.
Click the "reset password" link found below the Login button.
You will be asked to enter the email address that is associated to your admin account.
Enter the email address and click the Reset button.
An email will be sent to that email address with a link directing you to set a new password.
Enter and confirm your new password and click the Reset button.
A second email will be sent confirming that your password has been reset.
Your password has been reset and you can now login with that new password.
Updating Your Admin Profile
Transcript
When logged in you can modify your admin profile by clicking on the profile icon in the top toolbar.
This is your admin profile.
Here you can modify your profile details. Name, Email address, and updating your password.
Other elements include your Catalyst Role. Generally your role will either be Content Editor or Administrator.
The three Catalyst Roles are described below the selector.
If you have a Basecamp account, this identifier can be set here.
Checking the Send email notifications checkbox will send emails made in Catalyst to both Basecamp and the email address associated with that account.
A profile can have separate site roles applied to subsites. These roles are defined here.
Changes made to the profile will only take effect after clicking the Save button.
Adding a Page
Transcript
In the navigation column click the Add Page icon.
Type in the page title.
The Navigation Label will match the page title by default, but can be given a custom name if necessary.
The alias will be created automatically and shouldn't need to be adjusted.
By default as soon as the page is saved, it will be published live, will be searchable by Search Engines, and will be visible in the site's navigation.
The three checkboxes at the top of the form can be adjusted so that the page is inaccessible until the content for the page is complete.
The Layout drop menu has a list layouts available for the site. This should be left as Default.
The Type drop menu has the basic page options available for the site.
This should be set to "Create Page with a Content Module".
Other options are available but should only be attempted in consultation with the Developers.
The Sort field should be left at 0.
The ability to add Metadata is also available here.
Sorting site navigation and applying page metadata will be covered in later tutorials.
Click the Save button to complete adding a page.
Adding a Node Page
Transcript
A node page is a menu item that contains no content but has a submenu of pages.
Clicking on a node page in the navigation will take the user to the first subpage within that submenu.
In the navigation column click the Add Page icon.
Type in the page title.
In the Type drop menu select "Node page that redirects to the first child page".
Click Save.
Pages can then be added or moved under that Node page.
Adding a Link Page
Transcript
A link page is a menu item that contains no content and links to either an external website, or another page in the website.
Clicking on a link page in the navigation will take the user to url set on the page.
In the navigation column click the Add Page icon.
Type in the page title.
In the Type drop menu select "Link page that redirects to another page or site".
In the Link To field that appears type in either the page address, or the website to where this page will link.
Click Save.
In the Catalyst navigation the page icon will show a chain link as part of the icon as a visual indication that the page links to another page or website.
Page Metadata
Transcript
Metadata elements are underlying code elements used for search engine optimization, social media information, and accessibility purposes.
Click the page icon under the Edit Page heading.
Click the Add Meta Data button under the Metadata heading.
Depending on the metadata that is to be added, select the type of metadata using the Key drop menu.
Add the copy required for the selected key in the Value field.
Adding multiple Metadata elements is possible.
These items do not need to be added at the time of page creation. They can be added at anytime.
Previously added Metadata can be modified at any time.
Click Save.
Adding written content to a page
Transcript
The editors for a page will appear in the right column.
Click the pencil icon.
This is where the content for this module is managed. Catalyst has been developed to allow users to add content without affecting the look and feel of the public side of the site.
The Title field is the main heading of the block of content.
The Content field has a lightweight editor to allow for the basic formatting of the main text. The editor tools will be reviewed in later tutorials.
Content can be either typed in and formatted inline, or can be pasted from an external word processing source.
The Column Layout tool will be reviewed in a later tutorial.
Click the Save button to complete adding copy to the content module.
Adding an Image to content
Transcript
Click the pencil icon to access the content editor.
Click the cursor into the content editor where the image should be placed.
In the Content field toolbar, click the Insert/edit Image icon. Third icon from the right.
In the image dialogue box, click the icon to the right of the Source field.
This is the Catalyst File Manager. Here, images can be organized by using folders.
Click the images folder in the left column.
In the toolbar at the top of the File Manager click the upload icon.
The select files dialogue box is used to select images to be uploaded.
Once the image is selected it will automatically upload to the site.
The uploaded image will then appear in the file manager. Double-click the image.
The image dialogue box now has the image information required to place the image in the content.
The image description defaults to the image filename.
For accessibility purposes this should be modified to actually describe the image.
The dimensions fields indicate the width and height of the image in pixels.
The width should be set to be no more than the maximum width of the display area on the public side of the site.
The constrain proportions checkbox should always remain checked.
This ensures the image doesn't become stretched or compressed.
Click OK.
The image is now added to the content.
Click Save.
Adding a Document link to content
Transcript
Click the pencil icon to access the content editor.
Select the words that are to be linked.
In the Content field toolbar, click the Insert/edit Link icon. Fourth icon from the right.
In the Insert link dialogue box, click the icon to the right of the Url field.
Click the files folder in the left column.
In the toolbar at the top of the File Manager click the upload icon.
The select files dialogue box is used to select documents to be uploaded.
Once the document is selected it will automatically upload to the site.
The uploaded document will then appear in the file manager. Double-click the document.
The Insert link dialogue box now has the document information required to link the document in the content.
The Text to display field shows the words that will be linked to the uploaded document.
The Title field defaults to show the filename. For accessibility purposes a more descriptive title can be provided here.
The Target select menu provides two action options for the link. None will open the document in the same tab as the current page. New Window will open the document in its own tab.
Click OK.
The selected words are now linked to the uploaded document.
Click Save after all edits have been completed.
Adding a bullet list to content
Transcript
Click the pencil icon to access the content editor.
Set the cursor to the position where the bullet list is to be applied.
In the Content field toolbar, click the Bullet List icon. The menu arrow next to the icon provides three bullet options.
Disc, Circle, and Square.
A bullet list has been started. Add the first item to the bullet list.
Press the enter key to start another list item. Repeat these steps for each list item to be added.
Click Save after all edits have been completed.
Adding an ordered list to content
Transcript
Click the pencil icon to access the content editor.
Set the cursor to the position where the ordered list is to be applied.
In the Content field toolbar, click the Numbered List icon.
An ordered list has been started.
The menu arrow next to the icon provides five additional ordering options.
Lowercase Alphabetical, Lowercase Greek, Lowercase Roman Numeral, Uppercase Alphabetical, and Uppercase Roman Numeral.
Add the first item to the ordered list.
Press the enter key to start another list item. Repeat these steps for each list item to be added.
Click Save after all edits have been completed.
Adding a link to content
Transcript
Click the pencil icon to access the content editor.
Select the words that are to be linked.
In the Content field toolbar, click the Insert/edit Link icon. Fourth icon from the right.
In the Url field type in the destination address of the location to which the link is going.
The address should always include http:// or https://.
The Text to display field shows the words that will be linked to the destination address.
The Title field is not required to be filled, but for accessibility a descriptive of the site or page to which is being linked is an option.
The Target select menu provides two action options for the link. None will open the link in the same tab as the current page. New Window will open the link in its own tab.
Click OK.
The selected words are now linked.
Click Save after all edits have been completed.
Column Layout Options
Transcript
Click the pencil icon to access the content editor.
Below the Content field is the Column Layout tool.
There are five icons that show the layout options available for the copy in the Content Field.
A Custom layout option is also available.
Entering the number of columns and separating them into rows by using the pipe character will define a custom layout.
Click the icon indicating the layout pattern required.
Place the cursor in the Content Field editor where the first break in the content should occur.
Click the Horizontal Rule icon in the Content Field toolbar. Second icon from the right.
Repeat these actions for each content area in the selected layout.
The administrator will not see the column display in the editor.
The editor is just meant to show the separation of column copy areas.
The selected layout will repeat if the content is separated into more blocks.
Click Save.
To review the result on the public site click the Public View button at the top of the right column.
Reviewing Changes
Transcript
Click on a page in the navigation in the left column.
To review what the page looks like on the public facing site, click the Public View button at the top of the right column of the selected page.
This will open the selected page in a new browser tab.
Removing Content
Transcript
Click the pencil icon to access the content editor.
Select the copy that is to be removed.
Press the Delete/Backspace key.
The selected copy has been removed.
To undo a deletion, press the ctrl + Z keys on a PC or command + Z keys on a Mac.
There are also Undo and Redo tools available in the Content editor toolbar. The first and second icons on the left.
Once the copy has been removed, Click Save.
Once Saved the deletion cannot be undone.
Deleting a page
Transcript
Click the page icon under the Edit Page heading.
Scroll to the bottom of the page.
Under the Delete Page heading are some instructions about what happens when a page is deleted.
Deleting the page removes the page information from the site's database.
It also deletes the modules and their associated data from that page.
There is also a warning that the deletion cannot be undone.
Click the Delete button.
A Javascript warning will appear with a last chance to cancel the delete action.
Click OK.
The page and all of its associated modules and content have been deleted. This cannot be undone.
Moving a page
Transcript
Move the cursor over the page icon of the page to be moved.
Click and drag that page to the page under which it should be positioned.
Release the mouse button once the new location has been chosen.
A Javascript warning will appear requesting confirmation of the page move.
Click OK.
The page has now been moved.
To re-order the page within its new submenu, follow the steps for Re-ordering page navigation.
Hiding a page
Transcript
Click the page icon under the Edit Page heading.
Un-check the Visible in navigation checkbox.
Click Save.
In the navigation column the page will now have an icon to the right of it. This icon is a crossed out eye. The page is now hidden from the public navigation.
The Bulletin Module
Transcript
The bulletin module is a news or blog module for the creation of date related articles.
Click the Add Article link.
Enter the Headline of the article. This field is required.
Enter the article Brief. This field is also required.
The Brief is a teaser sentence about the article and should be no more than two sentences.
If the article has an associated headline image, that image can be uploaded here.
Click the Upload button.
Select the image to be uploaded. The filename of the selected file will appear in the field beside the Upload button.
Enter the article copy. The copy can be pasted from a Word document, or any other content source.
This field is required.
The pasted copy will need to be formatted using the tools in the Body field toolbar.
Set the Publish Date.
This is the date that the article will start appearing on the website.
Click Save after all edits have been completed.
The Gallery Module
Transcript
The gallery module is for a photo gallery display.
Click the Add Gallery link.
Type in the gallery title. This should be descriptive of the photos that will be in the gallery.
Optionally a gallery description is available.
Click Next.
Select the images from the computer and drag them into the image upload tool.
There is a size limit to how many files can be uploaded at one time, so getting all images into a gallery may take a few edits.
Each image uploaded now has a file caption field associated to it that will appear in the public gallery display.
Click Save after all edits have been completed.
Editing Page Settings - Page Title
Transcript
The page title appears in the browser tab and is part of the underlying code that is recognized by search engines like Google.
In the Catalyst CMS, click the page icon under the Edit Page heading.
Change the page title.
Click Save.
Click the Public View button at the top of the right column.
The new Page Title is now displaying on the public facing page.
Editing Page Settings - Page Alias
Transcript
The page alias is part of the page address that is recognized by search engines like Google.
A descriptive alias will always gain better search engine ranking than a page number or a series of coded variables.
It is also easier for visitors to remember a page address.
In the Catalyst CMS, click the page icon under the Edit Page heading.
By default the page alias is based on the Page Title. This can be modified here.
A warning: changing a page alias can mean any links to the old alias will fail.
A Create Redirect checkbox will appear as soon as the alias is modified.
By checking this checkbox, a hidden redirect page is added to the site navigation in order to catch any broken links and redirect them to the page's new address.
Click Save.
Click the Public View button at the top of the right column.
The new alias is now applied to this page.
Form Fields - Plain text field
Transcript
In the form editor, click the Add Input link.
For the Input Type, select "A Plain single-line text field".
If this field is required, check the Require Input checkbox.
Set the Input Label for the Plain Text Field.
The default value a text input is blank as this value will be provided by the user.
Click Save.
Click the Public View button at the top of the right column to see the field that was added to the form.
Form Fields - Email field
Transcript
In the form editor, click the Add Input link.
For the Input Type, select "A text field for email addresses".
If this field is required, check the Require Input checkbox.
Set the Input Label for the Email address field.
The default value for an email input is blank as this value will be provided by the user.
Click Save.
The functionality for this field will verify that the user input follows the structure of an email address.
Click the Public View button at the top of the right column to see the field that was added to the form.
Form Fields - Textarea
Transcript
In the form editor, click the Add Input link.
For the Input Type, select "A multi-line textarea for text entry".
If this field is required, check the Require Input checkbox.
Set the Input Label for the Textarea field.
The default value for a textarea is blank as this value will be provided by the user.
Click Save.
A textarea field is where the user can provide larger amounts of information. In a contact form this may be the field where the user can submit a complicated question, longer message.
Click the Public View button at the top of the right column to see the field that was added to the form.
Form Fields - Radio Buttons
Transcript
In the form editor, click the Add Input link.
For the Input Type, select "A set of radio buttons; separate options with new lines".
This field is always required. A user must make a selection from the options available.
Set the Input Label for the Radio Button set. Similar to a Pulldown menu, a Radio Button set is treated like a multiple choice question.
Set the Default Values for the Radio Buttons by setting the text options on new lines.
Click Save.
Click the Public View button at the top of the right column to see the field that was added to the form.
Form Fields - Checkbox
Transcript
In the form editor, click the Add Input link.
For the Input Type, select "A single checkbox".
This field should always be optional.
Set the Input Label for the Checkbox. A checkbox is usually answering a yes or no question where checking the box is answering yes and leaving the checkbox unchecked is answering no.
Set the Default Value for the Checkbox to be the answer to the Input Label.
Click Save.
Click the Public View button at the top of the right column to see the field that was added to the form.
Form Settings
Transcript
In the form editor, click the Form Settings link below the field list.
These are the recipient and security settings for the form.
The Recipients field is where the recipient email addresses for this form will be sent.
Multiple recipients can be set by separating the email addresses by commas, and no spaces.
Recipient Input - This functionality, if set, allows the user to choose to whom the email is sent. This functionality should be set with the help of the developer.
The Email Notifier Name is the name that appears in the From field of the email. Set this to show that the email was sent from a web form.
The Submit Button of a form is required, however the wording can be modified. Some examples are Submit, Send, or Go.
Since the form submits to an email address, security should be added to prevent Spam.
There are two types of Spam protection used in Catalyst.
The Honeypot tricks automated scripts into filling out a form field that can only be set by a script. If the Honeypot field has a value the form does not send the email.
reCaptcha requires an interaction with the user acknowledging that the user is a real person before the email is sent.
Once a Spam Protection option has been selected, Click Save.
The form configuration is now complete. Click the Public View button at the top of the column to review the form.
Form Submissions Export
Transcript
To review the submissions made to a form, click the View / Export Submissions link.
Under the Form Submissions heading is a list of all submissions made to the form.
Set a date-range with the two date fields to select the submissions to be exported.
By default the starting date-range will be for the current date.
Click Export as CSV.
A .csv file will be downloaded to the computer. The .csv file format can be opened by most spreadsheet applications like Microsoft Excel, Google Sheets, or Apple Numbers.
The export will display all of the form fields as columns, and the submissions in rows.
Metadata
Transcript
Click the page icon under the Edit Page heading.
Click the Add Meta Data button under the Metadata heading.
Depending on the number of Meta Data items to be added, the administrator can continue to Add Meta Data for the various options available.
The general Meta Data terms that are used consistently for all HTML pages are as follows:
- Keyword
- Author
- Copyright
- Description
The Open Graph Metadata terms for integrating a page into a social graph are as follows:
- og:title
- og:description
- og:site_name
- og:type
- og:url
- og:image
The Facebook Metadata terms are specific for integrating a web page into the Facebook Social Network. Facebook generally uses the Open Graph protocol for most of their metadata requirements.
The Facebook Metadata terms are specific for apps created for Facebook are as follows:
- fb:admins
- fb:app_id
Metadata - Keywords
Transcript
Click the Add Meta Data button.
Select Keyword.
In the Value field create a comma separated list of the keywords for the page.
Chosen keywords should accurately reflect the content of the page.
Search engine can determine if the keywords reflect the content on the page in order to prevent false placement.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - Author
Transcript
Click the Add Meta Data button.
Select Author.
Enter the name or organization who authored the page.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - Copyright
Transcript
Click the Add Meta Data button.
Select Copyright.
Enter the copyright year for the content. If there is a copyright notification directly on the public web page, this is not required.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - Description
Transcript
Click the Add Meta Data button.
Select Description.
Enter a short descriptive paragraph about the subject matter of the page.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - og:title
Transcript
Click the Add Meta Data button.
Select og:title.
Enter the title of the page as it relates to Social Networks.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - og:description
Transcript
Click the Add Meta Data button.
Select og:description.
Enter one or two sentences describing the content of the page as it relates to Social Networks.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - og:site_name
Transcript
Click the Add Meta Data button.
Select og:site_name.
Enter the name of the web site from which the page is a part.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - og:type
Transcript
Click the Add Meta Data button.
Select og:type.
Enter the type of content specified. For a web page, the type is referred to as "website".
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - og:url
Transcript
Click the Add Meta Data button.
Select og:url.
Enter the canonical public web address of the page. The format of the URL should always begin with either http:// or https://.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - og:image
Transcript
Click the Add Meta Data button.
Select og:image.
Enter the public web address of the image that will represent this page within a Social Network. The format of the URL should always begin with either http:// or https://.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - fb:admins
Transcript
Click the Add Meta Data button.
Select fb:admins.
Enter the Facebook USER_ID of any Facebook App administrators.
Multiple USER_IDs can be applied by separating them with commas.
This field is only necessary if the page is part of a Facebook App.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.
Metadata - fb:app_id
Transcript
Click the Add Meta Data button.
Select fb:app_id.
Enter the Facebook App ID to allow Facebook Insights to view analytics for traffic to this page from Facebook.
The admin can include additional Meta Data by clicking the Add Meta Data button.
Once all Meta Data has been applied, Click Save.