New Standard Features

Added in 2014

The gallery feature allows users to add a photo gallery below the main content of a page. It's programmed to automatically fit any size screen.

The tabbed content feature provides up to six different tabs of content to display within the same area of the page. The tabs become a dropdown when the width of the screen becomes narrower on a phone or tablet.

The accordion content feature (also referred to as fold/unfold) allows content to be hidden until a user wants to view the content within.

Added in 2015

The WYSIWYG styling feature refers to several new style additions to our WYSIWYG Editor that provide a much better representation of the style that will be applied to the content being edited.

Below are instructions how to use each one of these within the CMS.

Please Note: These standard features are available on about 90% of pages within the CMS. They are not available on pages that have been customized. Additionally, you can use either the tabbed or accordion content feature on a page, but not both on the same page. 

There are several new style additions to our WYSIWYG that will provide a much better representation of style of its content. The WYSIWYG now displays Headings, Paragraph, and Font styles within the editing window but there are more styles available within the “Style” dropdown selector to use. These new styles include:


To apply any of the styles in the dropdown you must highlight the text or image and select the style you want applied.

To un-apply the changes of the style, you must select the text with the current style, go to the dropdown menu and select the style being applied. This will deselect it from the highlighted text.


Header/font styles will appear automatically when you select text types:

heading-font.gif


To add a Blockquote to style:

  1. Highlight text with cursor you want the style applied.
  2. Go to the Style dropdown on the top row of the WYSIWYG editor
  3. select Blockquote

blockquote.gif


Color Shades:

  1. Highlight text with cursor you want the style applied.
  2. Go to the Style dropdown on the top row of the WYSIWYG editor
  3. select Yellow-Shade or Purple-Shade

yellow-shade.gif

purple-shade.gif


Aligning Images

  1. Select image so it’s highlighted in the WYSIWYG box
  2. Select Styles dropdown
  3. Choose Left or Right Align

image-left.gif

image-right.gif

If you change your mind and want to change its alignment, you must undo the original change by selecting the image and choose the alignment that is assigned to it.

image-right-to-image-left.gif


Creating a button

A button is creative way to draw attention to a link, usually a form. To create a button, you must:

  1. Highlight text
  2. Select Styles dropdown
  3. Choose Purple-Button (the text is styled as a button but it should always be hyperlinked)
  4. Hyperlink the text

button.gif


File Type Signifier

Sometimes a link will lead to something that isn’t another webpage like a PDF or Word Document. With the increase usage of mobile devices, this would cause an unexpected experience for the user. Now there will be an indication of a file type at the end of a link automatically after creating it.

The file extension notifier will add a superscript of the link’s file type if it’s not another web address link. This will let a user know when a link leads to a place that isn’t a website. An example of this would be linking to a PDF. If a user is using a mobile device and knows a link is a PDF, they might wait until they are at a computer because they rather not use data downloading a PDF to their devices. This eliminates surprises it provides a better user experience. 

pdf-file-signifier-external.gif

pdf-file-signifier-internal.gif


To remove/undo a shade style you must deselect it from the dropdown menu:

  1. Highlight text containing the color (purple/yellow) shade style
  2. Select the Style dropdown menu
  3. Select the color of the style you want removed. (note: selecting another style will not always override another style, it’ll simply add that style in addition to the current one)

yellow-shade-undo.gif

purple-shade-undo.gif

Creating a Gallery

1. To activate the gallery, go to the Edit tab of the page.
2. Scroll near the bottom and look for Display Gallery and check YES.

locating gallery

Entering Images into Gallery

3. A gallery dropdown will appear and allow you to add images.
4. To add an image, click on the + symbol.
5. Select an image within the image chooser.

entering content

Arranging Images in Gallery

6. To arrange the images within the gallery, there are up and down arrows next to the images. Simply click the direction you want the image to be within the gallery.

arranging

The result.

Final galelry

Supplemental Content - Tabs

1. When editing a page, scroll to the bottom of the page to locate Supplemental Content.
2. Click on Supplemental Content and you will see  a dropdown that includes three items: None, Tabs, Accordion.
3. Select Tabs

locating


Creating Tabs

4. After selecting Tabs there will be a section to populate content for an individual tab.
5. Create another tab by clicking the green + icon

content


Arranging Tabs

6. Once the tabs have been created, they can be arranged by clicking on the up or down arrow icons.
7. Submit the changes on the page to view it.

arranging

Final Results - Tabs

final tabs

Supplemental Content - Accordion

1. When editing a page, scroll to the bottom of the page to locate Supplemental Content.
2. Click on Supplemental Content and you will see a dropdown that includes three items: None, Tabs, Accordion.
3. Select Accordion.

locating

Creating Accordion Items

4. After selecting Accordion there will be a section to populate content for an individual accordion item.
5. Create another accordion by clicking the green + icon

content

Arranging Accordion Items

6. Once the accordion items are created, they can be arranged by clicking on the up or down arrow icons.
7. Submit the changes on the page to view it.

arranging

The Result

final result