Important Things to Know

0

Important Things to Know

Do Not Delete Pages You Did Not Create

DO NOT delete any existing pages in the navigation of your website that you did not create. If you believe you do not need a given page, simply hide the page and leave the content saved in the content management system. Deleting pages that you did not create may cause problems with the functionality of the site. Instructions for hiding a page are below.

What is a Content Management System (CMS)?

The Content Management System (CMS) provides a central interface for officers to edit, organize, publish, and maintain website content without the need for special web page editing software. Your SPE Connect CMS is the back-end system where officers control the visual layout and content that is visible on the website to users.

•

•

How to Access the CMS: Officer Toolbar

All web editing through the CMS begins with the officer toolbar. The officer toolbar appears on every page an officer has access to edit. The CMS is accessed through the folder icon called “Edit Navigation.”

For this reason, the CMS is also referred to as the “Edit Navigation” screen.

1

What the Icons Mean

Understanding the Navigation Layout

Each page of your website comes from a Navigation item that allows an officer to establish the page’s layout and the name of the page as seen in the site's main menu:

The main navigation items in the CMS that match the main menu buttons are called “parent folders.”

Any subfolders under that parent are referred to as “child folders.” You will see this visually displayed as parent folders having plus signs to show or hide their child folders and child folders are indented below their parent’s folder.

Edit this Page

Edit Navigation (Primary Button to access the CMS)

Open the full officer toolbar

2

Edit Navigation: What It Looks Like and Page Functionality

3 Functionality of each area within the Edit Navigation page is described below:

1. Include in site navigation – Indicates whether this page should be visible in the main menu or not. Uncheck this box to hide a page.

2. Navigation Title – Name the page here. If a link to the page is included in the main menu, the name entered here will be the name in the main menu across the website.

3. Page Title – The page title that appears at the top of the page (also known as the H1 header) and as the browser tab name. If you uncheck the “Show page title?” box, the title will not be visible to users on the page. A page title is not required.

4. Page Code Name – Page Codes are used by the site functionality to open pages and can serve as short URLs. They also allow the content of web pages to be syndicated to other pages.

DO NOT CHANGE EXISTING PAGE CODES. Changing the Page Code Name field for product pages will break functionality. Page Code Names should only be changed by an officer on pages that were created by the officer at the time of creation.

5. URL Name – The URL is the web page address visible to users in their browser. In most cases this field should be the same as the Navigation Title without spaces or match the page code.

DO NOT CHANGE EXISTING URLS. A URL should only be edited at the time of the page creation or all direct links to this page will break (i.e. linked to from another website, in email,

bookmarked by a member, etc.).

6. CSS Wrapper Class Name – This is connected to custom CSS code added to a site theme.

DO NOT CHANGE OR ADD A CSS WRAPPER CLASS. Only SPE staff should make changes to this field as it affects the branded look and functionality.

7. Tags – Choose from the list of tags to describe the navigation or content item for ease of searching within the site. Tags are managed by SPE staff. This field is optional.

8. Meta Title – For SEO, add a meta title to your page. The entire SEO section is optional.

9. Meta Description – This effects SEO and is shown as the black text under the title of the page in web search results. This is optional.

10. Featured Image – For SEO, you may add a desired featured image. This is optional.

11. Canonical URL – The canonical URL to which this page should point. This is optional.

12. Additional Meta – Enter additional meta tags here for inclusion in the page header. This is optional.

13. Advertising – Check to allow or uncheck to disallow ads to show on this page. These site ads are managed by SPE staff. You can add ads of your own choosing using content items with the instructions below.

4 14. Syndication – Unchecking this option removes the ability to syndicate content associated with

this navigation item to other web pages.

DO NOT CHANGE THIS SETTING ON EXISTING PAGES.

15. View Permissions & Security – Pages can be made visible only to specific audiences. You can choose Custom Permissions to see the options by which you can restrict who pages can be made visible to. Usually, the permissions should be set to “Everyone” for public access or “Logged In”

to allow only SPE members to access the page.

Hiding vs. Deleting Navigation Pages

If you do not wish to display a page on your site, hide the page by unchecking the “Visible in Navigation”

box. It is important that you DO NOT DELETE ANY NAVIGATION ITEMS. You can never be sure which pages are necessary for core site functionality and when page content will be valuable in the future.

Hidden pages are easily restored to active status. Deleted pages are gone forever.

More About Page Codes and URLs

• DO NOT modify the Page Code Name of an existing page, only edit the Page Code at the time you create a new page

• Page Code Name must be unique

• Every page must have a Page Code Name as it is tied to site functionality and reporting

• Page Codes cannot contain spaces or special characters

• Navigating to pages is more straightforward when the URL Name and Page Code Name are the same

• Page Codes can be used to create short URLs that are easy to reference and remember, i.e.

https://connect.spe.org/network with “network” being the page code.

Navigation Tips

• Don't delete pages in the Navigation, especially those that you did not create. Simply hide pages you do not want visible on your site.

• For many browsers, the back button will not work in the CMS. To return to the Navigation, click the “Cancel” button if you are editing an item and do not want to save changes, or click

“Navigation” in the menu.

• If you are getting an error when trying to save, check that the page code is correct: unchanged and/or unique without spaces or special characters.

5

Creating New Parent (Main Navigation) Items

1. Open the CMS using the yellow folder icon in the officer toolbar from your website 2. Select Add Page to drag and drop where the new parent item will appear

3. With the new navigation item selected, complete the new page setup by referring to the “Page Properties” section above

6

Creating New Child (Sub-Navigation) Items

1. Expand parent folder that your new child page will belong to/under by clicking the “+”

2. Select “Add Page” at the top left of the CMS to drag and drop where the new child page will appear, underneath an existing navigation item

Moving Parent & Child Navigation Items

1. Select the navigation item you want to move by clicking on its name in the navigation list 2. Click the “drag and drop” arrows to move the item to where it needs to be in the navigation list

Page Layouts

From the Page Editor (after clicking “Edit” in the CMS), you can modify the page layout. Simply drag and drop the row type you want from the “Build” tab into the page content area where you want it to be placed to change the layout of how content will appear on the page. You can drag and drop to move rows around the page. Click on an existing row to see the options to copy or delete the row, as necessary. You must insert rows before you insert content. Content is placed inside a row.

7

Adding New HTML Content item

1. Select the navigation item that you want to add or edit content on 2. Click the three dots and select Edit

8 3. You’ll be taken to the Page Editor

4. Drag and drop the HTML content to a row

5. Select content and click edit (pencil and paper icon)

6. You can add, edit, and format text, hyperlinks, and images using the WYSIWYG editor. WYSIWYG stands for “What You See Is What You Get.”

Note: It is not recommended to paste content straight from Word or another place that is already highly formatted. Often the formatting does not transfer when pasting the content into the WYSIWYG editor. It is recommended to create content in the WYSIWYG editor, or first paste

9 the content into a Notepad or similar application where formatting is automatically stripped and then to copy it from there to paste into the WYSIWYG editor.

7. Once you are done managing content, click “Publish” at the bottom right of the Page Editor to publish page content. Click “Save” if you want to come back to your work later to continue making changes before publishing the new version to your live site. Click “Cancel” if you do not wish to save you changes. Clicking “View” will take you to the page you are editing on the live site.

Hiding a Content Item

When editing a content item, you can choose to hide it from view to all website visitors. Select the content box on the “Editing Page” screen, navigate to the “Properties” tab on the right of the screen, and check the “Hide” box. This will hide the content, but not delete it so you can reuse it later if desired.

To unhide a content item, uncheck the “Hide” box.

10 How to Link Text Within the Content

1. Highlight the text you want to link 2. Click the hyperlink button

3. A Hyperlink Manager box will open – enter the URL for your link in the top box that says Url 4. Under Target, decide if you want the link to open in a new window (same as opening in a

new browser tab) or if the user should be kept within the same browser tab when clicking the link.

5. Click “OK”

How to Link Text to an Email Address

Follow the same steps as in the Link Text instructions above, but you must add “mailto:email address” in the Url area.

If you simply put an email address in the Url link and click “OK,” the editor will show a popup asking if you want to add the required mailto: prefix to allow the link to open a new email to the specified address. Click “OK” on the popup.

11 How to Make Header Fonts

Your website will have different default header styles – these styles are created to create consistency throughout the website and function similarly to Microsoft Word.

Example header styles can be seen in the above screenshot. Yours may differ but will generally go from largest to smallest depending on the header number with ‘1’ being the largest and ‘6’ being the

smallest.

All the text within a single content item must be the same style, i.e. you cannot have Header 1 and Paragraph style both applied to different sections of text within a single content item.

Tip: Find the “Paragraph” style in the “Blocks” section of “Styles.”

How to Insert a Photo

1. Click the Image Manger Icon

2. A box will open; click on the folder icon to the right of “Source” to search for an existing image or to upload a new image

12 3. Choose the image you want to use or click “Upload” to add a new image from your computer

4. Click “Insert” to add the selected image to the content editor

5. You can right click on images in the Image Uploaded to edit, rename, remove, etc.

How to Embed (Insert) a YouTube Video

Using multiple browser tabs or windows will ease this task. In one tab, open the YouTube.com page with the video you want to embed. In another tab, create a new Content Item dedicated to the video you want to embed and navigate to its Enter/Edit Content Page. Then take the following steps:

1. Locate the video you want to embed on YouTube 2. Click on “Share”

3. Click on “Embed”

4. Copy the full code as shown in the image below

Depending on the size of your content block in Higher Logic, you may need to make the video smaller by creating a custom size.

13 Note: If you modify the size, make sure to re-copy the YouTube video code as the code will have

changed.

5. Then go back to your website content item where you want to insert the video 6. Click on the Insert/Edit Video icon

7. In the popup, click the “Embed” tab

8. Paste the code you copied from YouTube here and click OK

14

Adding Events

To add a new event or to edit an existing event click on “Settings” in the top right of the front end of your website then click “Manage Events.”

NOTE: If you want events to be visible to site visitors, make sure the Events navigation item in the CMS is visible, or check if the Events widget is already visible on the site homepage. Otherwise, visitors will be unable to find and register for any events created on the site.

If you need help, please contact [email protected].