Drupal CMS Training Guide - NMU Marketing and Communications

Card Options:

• Columns
• Columns - Two Thirds

The columns card can be divided into one, two, or three columns, only two for the two-thirds column card. Each section can be just a text column, an image and text column, or a video and text column. We recommend always choosing the image column over the text column because of its versatile nature. The image is not required, and allows you the ability to add one later if you choose. The two-thirds column card allows you to create two columns of content in which one takes up two-thirds of the width of the page and the other one-third. 

Features: The image and video columns have a media selection tool within the card that will insert either an image or an external video (YouTube, Vimeo) at the top of the column. The image cannot be over 10MB. Each card provides a title section, body section, and link section. The title section should be kept short and direct. The body section is the same as a text area with the same features. The link section creates either a button link or a list of links displayed on the bottom of the card. The button link occurs when just one link is chosen. You can add multiple items to create a list of links instead of a button.

When it should be used: Use the column card when you have multiple areas of information you would like to neatly display on the page in separate “blocks”. Use the column card over the text area card if you would like prominent links displayed or an image. Use the columns card when the information in each of the columns is approximate the same length. The two-thirds column card should be used when the information being inputted would be uneven utilizing the regular column card.

When it should not be used and what should be used instead: The column card was not designed for over two paragraphs of text or for any tables inside the columns. Tables should only be used for tabular data in one of our text area cards. Do not use the two-thirds column if you plan to input the same amount of text on either side; use the regular column card. ​​​​​​We recommend only linking to videos on the office NMU YouTube account. If you need help with video content, please reach out to our social media team.

Card Options:

• Section Header
• Text Area One-, Two-, or Three-Column
• Text Area Accordion
• Text Area Separator

The section header card card can be used to provide a header before other text area cards that do not have a title section, but need to be introduced. The text area cards provide a one-, two-, or three-column area to easily enter any standalone text. The text area accordion card provides a collapsible text area on the page. The text area separator inserts a horizontal line between text area cards.

Features: The section header is a single line of text which should be kept under 5 words. There is no editing abilities within this card. The text area features include general document editing abilities like bold and italicize as well as bullets and numbering. You can add links to internal or external sites. If you want to add a link to a document/pdf/file, please review the File Upload card. Other features include images, block quotes, tables, horizontal lines, and special characters. If you copy and paste content into the editor, please use the T with the subscript x to remove any formatting the previous software may have added to it. We have preformatted text styles to be used including the general paragraph font and headings. The text area accordion has a title and text area. The text area provides the same editing features listed above. 

When it should be used: The section header should only be used before another text area card. This provides a header, different than our styled headers in the text areas, for sections that do not have a specified title text box. The text area one- and two-column cards should be used when you have a big block of text or a small amount of text that doesn’t have any additions to it (photos, prominent links, etc.). The text area three-column card is designed for lengthy articles, blog posts or stories. The text area accordions should be used when there is a lot of information that can be split up into sections on a page. For example, this card is perfect for frequently asked questions or in-depth information that can be collapsed until someone wishes to view it. The text area separator should only be used between text area cards. Horizontal page lines are built in to the design of the other cards, so it is not necessary to insert the separator between other cards. 

When it should not be used and what should be used instead: The section header should not be used to simply copy and paste your page title onto the top of your page. Only use the section header to separate subsections of the page. The text area card should not be used when you wish to add prominent links, photo/video content, or any other use that fits the needs met by our other cards (i.e. directories, news, events, large format images, etc.). If you wish to add prominent links, use the column card. If you wish to add a video or photo(s), use the full-size or media cards. If you have any further questions on what should be displayed in a text area card or wondering what you could use instead, contact the Marketing & Communications Office. 

Card Options:

• Image and Headline
• Image and Quote
• Portrait Image and Quote

These cards take up the full width of a user’s device and adds a visual element to individual pages. It allows an easy way to highlight students, faculty, staff, or call out phrases related to your department.

The image and headline card is used to create a callout block bringing attention to certain text that is overlayed on top of an image. The image and quote and portrait image and quote cards are used to highlight a quote from a student, alumni, faculty, or staff member in your department about their experience at NMU.

Features: These cards have a media element with text. The headline card will provide a short text area for up to 2 sentences of copy. Both the quote cards have a name, label, and quote text area. The general image and quote card has only one media element. The portrait image and quote card has two image elements, a portrait image of the subject and a background image for the card. 

When it should be used: The image with headline card should be used when you wish to draw attention to a short snippet of information on your web page. The quote cards should be used to highlight the awesome things our students, alumni, faculty and staff are saying about us. Utilize a quote specific to your department that sheds light on the incredible experiences and opportunities offered here. 

When it should not be used and what should be used instead: Do not start or end your page with a full size card. You should also not stack any full-size cards. Do not use the headline card if you wish to add a paragraph of text or a call-to-action link. This would be better suited by our column or image with text card. Do not use the image and quote card if you do not have a high quality image of your subject, instead, use the portrait image and quote card and add a high quality photograph as the background image. All three of these cards should be used with darker images in order to contrast with the text and remain accessible to all users. 

Card Options:

• Image or Video with Caption
• Image or Video with Text
• Image Carousel 
• Image Gallery - Grid

The image or video with caption card is used as a storytelling piece to display images or videos related to your page. The image or video with text displays your chosen media on half the width of the card with the text portion taking up the other half. The image carousel and image gallery allow you to display multiple images on a page to give viewers a visual look at the content you wish to convey.

Features: The image or video with caption card has a media element with a short text area beneath it on the page. The caption should simply be a description of the media element. The image or video with text card allows for a media element, title, text, and one link button. The image carousel displays images in an automatically rotating field on the page. Each image requires a caption. The image gallery - grid creates rows and columns of images on your page that configure themselves according to the size of the media uploaded. Each element has an optional caption that would be displayed when the viewer clicks to expand the image. 

When it should be used: The media cards should be used when you wish to supplement your content with a visual element. They should be used with high-quality photos or videos. All videos need to come from YouTube or Vimeo. If you need assistance with photo or videos, please contact the Marketing office. We encourage only horizontal images be inserted into the image carousel. However, any orientation images can be uploaded to the image gallery card. 

When it should not be used and what should be used instead: Do not use these cards with low-quality images. Do not use the image or video with caption card if you wish to display prominent information or links; use a column card, or image or video with text card. Along the same lines, do not use the image or video with text card if you are simply describing what is happening in the media element; use the image or video with caption card. You should only use either the image carousel or image gallery on a page, not both. You should also not insert multiple image galleries or carousels on a page. 

Card Options:

• Directory
• Biography
• Contact and Social

The directory card is used to display short profiles and contact information for any staff, faculty, or other employees in your department. The biography card is used to display information that would not fit within the directory card for individual faculty, staff, or other employee information. The contact and social card is a two-column card that shows department contact information on one side and department or NMU social media links on the other. 

Features: The directory features two elements: headings and entires. Headings are used to split up directories by employee type when needed. The entries are for individuals. They include a name, title, image, email, phone, and link option as well as a few additional informational fields. If you add a link to the main link field, the image will become hyperlinked (or clickable) to that link. The biography card has a media element for an individual's portrait as well as customizable biography elements that include a title and text area. The contact and social card has many elements. The contact side pre-populates a title and has an option text field. The contact portion also has contact elements where numbers and emails can be entered. These element fields have HTML so when clicked on allow the user to call or email your department directly. The social column has a title area and elements to link to your departments social media account. The social drop-down menu sets the logo used on the published site according to the social media you are linking to. The social title appears when hovering over the social button in case of multiple accounts on one platform. If you department does not have any social networks, you can leave this area blank and the official NMU accounts will be populated. 

When it should be used: These cards should only be used to display contact or biography information for the department and individuals within the department. For the directory, you should use the same elements for each entry to create consistency.

When it should not be used: The department should only use one directory. The headings are there to allow you to split directory up by employee type where needed. Do not display too much information in the directory card as the entries are narrow. Use the biography card for those longer additions to an individuals entry. The biography card should be the only card on an individual page titled with the name of the individual the biography is for. These should be linked up in the directory. 

Card Options:

• Link List
• Stat Slider

The link list formats a list of links on your page and can be useful for resource pages. The stat slider is a sliding card that highlights stats or accolades about your department.

Features: The link list has an optional title and each link element had a URL and link text area. The link text is what displays on the site. The stat slider elements each have two parts: the statistic, limited to 4 characters, and the label, limited in characters as well. When more than four stats are added, the slider become slidable. We recommend adding more than four stats to avoid any immediate repeats as the stat slider moves. 

When it should be used: These cards should be use for their specific purposes. The link list is great for resources pages. Combine the link list with anchor embed cards for long pages to allow the user to skip to the content they want. The stat slider should be used when you have great statistics or accolades for your department.

When it should not be used and what should be used instead: Do not use the stat slider for anything other than statistics. Use the stat slider to display only stats that you would share with prospective students, nothing inaccurate or mediocre. 

Card Options:

• File Upload
• Anchor Embed

The file upload card is a non-visible card that uploads documents, pdfs, and other files to your webpage for use in links. The anchor embed card allows you to create a link to a specific part of a page. 

Features: The file upload card is used to upload documents, pdfs, and other files to you webpage for use in links. You can upload up to 10 MB of documents in each file upload card and you can use multiple file upload cards on a page. Do not use any spaces or special characters when creating your anchor name. Anchors allow users to link to a specific part of a page using that anchor name. The card should be placed on top of the card you wish to link to on the page. There is only one field in this card for the anchor name. For example, if you enter the text MyAnchor in the provided box, you can link directly to this anchor by creating a link that points to #MyAnchor. If you wish to link to an anchor on a different page, add #MyAnchor to the end of the page URL for the link. For example, https://nmu.edu/mc/drupal-training#MyAnchor.

When it should be used: Use the file upload card when you wish to link a pdf, document, or other file types to an area of your webpage. The anchor embed card should be used when you need to link to a specific spot on a page. It can also be combine with link lists to easily create a table of content at the top of a lengthy page. 

When it should not be used and what should be used instead: Do not use the file upload card for images. Those can be uploaded directly in the card you wish to display it in. 

Other Tools Available in the Editor:

• Collapse
• Drag & Drop
• Publish/Unpublish
• Three Dot Menu

Since NMU is a publicly funded university it is crucial that we comply with the ADA's web accessibility guidelines. Part of this responsibility falls on our trained web editors. This video will cover simple best practices and editor tools that will help your department remain compliant including:

• Screen Reader Compatibility
• Images with Text
• Alternative Text
• Header Styles
• Descriptive Links
• Full-Size Card Images
• Simple Sentences and Bullets

If you need any help or have questions on accessibility, please contact the University Marketing and Communications office.