Center Flex Components & Flex Components

Components are a great way to set up & customize how your content will be delivered on your page.  The difference between Center Flex Components and Flex Components are: 

• Center Flex Components is the area contained to the left of your right navigation.  
• Flex Components is the area contained underneath the Center Flex. This allows the option for a more edge-to-edge or full(er) width component use.  The Flex Component area is limited to the Department Front and College Front pages.

To start inserting a component, you want to click the down arrow located on the right bottom corner of the Center Flex or Flex Components area:

Once that field is expanded, you'll want to click on the 'Create' button to begin the selection process of inserting a component:

NOTE: because behavior will vary based on the location of the component -- Center Flex vs. Flex -- not all component tray options will be shown or the same.

Components can be placed/moved in any order, by using the 'hamburger' icon to the left of the component:

or by utilizing the 'move item' arrows, located to the top right of the specific component (click the gear icon to reveal these options):

To Remove or Add a component element, you will click on the subtract or add icon accordingly:

NOTE: Adding a component will clone an existing component. One of the identical components will need to be cleared before creating a different component type.

To clear a component element, you may hover over (if not already visible) and click on the Eraser icon, where you will be met with a confirmation box, where you will click Clear (or Cancel if you wish not to proceed with erasing it).

There are various options for component usage on your pages.  Here's a run down of some of the components that are available for use on some of your page templates.

Tray: Accordion  (view How To Configure)

The Accordion tray is often used to house large amounts of information without creating an endless scroll on the page.  You can add individual accordions as necessary when using this component.  All accordions begin in the collapsed view when the page is loaded, and the user would click the plus (+) icon to expand the desired accordion to view its contents. 

Tray: Buttons  (view How To Configure)

The buttons tray is often used to link to other areas of the website... generally within your site, but it can be used to link to other areas of the global website, without having to recreate the pages' contents.  Each row can hold up to 3 buttons.

Tray: Facts
This tray can be used to highlight some facts/figures of your unit. This component is set up to show 3 facts at one time, randomly. So if you have more than 3 facts, only 3 will show at a time, but at page refresh another fact will be shown. In order for these to be displayed, Taxonomy tags must be used, so please reach out to us at websupport@morgan.edu for further assistance.

Tray: Photo Grid  (view How To Configure)
This component can be used to display photo-based links to lead your users to different content areas of your website. 

Tray: Photo Rotator  (view How To Configure)

This component can be used to display different photos from your unit/area.  Each photo cares a caption field to describe what the end user is viewing.  This component is also set to auto-rotate.

Tray: Responsive Table  (view How To Configure)

This is a table that responds best to the users' viewing experience.  Utilizing the traditional table within the body copy area can be challenging to use at times, so we've provided an option that will conform to the user's device, whether it be on a desktop or a mobile device.

Potential Desktop View:

Potential Mobile View:

Tray: Section Photo  (view How To Configure)

The component is used for a singular photo.  This component also contains a caption area to provide the end user with a description on what the photo is about.

Tray: Text  (view How To Configure)

This is a traditional component used to place text on your page.  CMS users in our former system would remember this as the "body copy" editor.

Tray: Video Full Width  (view How To Configure)

This component is used to display videos from YouTube, Vimeo, or Panopto.  All that you need to do is select the video source, and provide it's video ID.  This ID is usually a series of alphanumeric characters found after the respective service's sharing link.  Examples of those IDs are highlighted below (in yellow):

• YouTube:  https://youtu.be/cHSw0_I8S3s or https://www.youtube.com/watch?v=cHSw0_I8S3s
• Vimeo: https://vimeo.com/657441818

Tray: Spacer  (view How To Configure)

In some instances, when utilizing multiple components, spacing can be an issue where there is too much space or not enough space between those components.  The Spacer component can be utilized to provide or remove that extra vertical spacing that may be displayed between the components.  Vertical spacing options range from adding 10 to 60 pixels, or subtracting -10 to -60 pixels.  All spacing options are measured in height only.

(This list will continue to be updated)