Content Editor Guide

HTML allowed in Page Titles:  <sub> <sup> <cite> <em> <strong> <abbr>

This page demonstrates the capabilities of the content editor interface of this website. Editors can take a peak behind the scenes to see how this page was edited. Please take care not to edit or delete this page. If you want to try something in a sandbox, check out the test website.

The editor interface includes some links to documentation for the UT Drupal Kit. Many features are inherited from this parent distribution. A few things may be the same or similar but be aware there are many differences.

Other resources for editors of this website can be found on the Dashboard.

Need help or have questions? Contact the COFA Web Team.

Contents

Before you start, familiarize yourself with the infrastructure, requirements and writing for the Web best practices.

Web Content Requirements

Voice, Tone, and Branding

The most important first step to establishing proper tone and branding is an open communication with your own school or department's public relations office.

Layout Builder

The Flex page, like this one, and some other Content Types use what is called Layout Builder. As you might expect it allows you build the layout with columns, sections and block as demonstrated by this page. You do not have to use all of the available options. You are encouraged to create your own style guide and pattern library of consistent layouts suited to your content needs that you use most. If you wish to explore improvements or additions, please contact the web team.

Block Type Demos

Each Content block type has configurations that result in variations of style and format:

 

Back To Contents

Hero & Feature Content

Recommended upload image width is 2280 pixels. Minimum recommended image width is 1600 pixels. Display size and ratio are variable and change on device window size and depend on selected cropping choice.  Suggested size, 2280x1232 pixels.

Always pre-optimize images that are larger than 1 MB and review on different screen sizes.

Wind Ensemble
Hero Style 1 & 2
Text Left Option

caption credit

Call to Action
Wind Ensemble
Hero Style 3 & 4
portrait of Susan Chan at the piano
Hero Style 5
Text Overlay

Select image that will ensure the text is legible and contrast complies with ADA requirements. Credit

Should I use a text overlay?

H1 Hero

Hero content lacks semantic value; even though it is visually displayed as large text, the content will be read as a paragraph. Except the H1 Hero option which adds a level 1 heading tag, can be used instead of the Title field. To comply with requirements for Hierarchical Headings, you must have a single H1 tag on every page. To use the H1 Hero, you must uncheck “Display Title” in the Display Options of the Edit tab to remove the H1 created by the Title field.

test alt

Semantic H1 tag

Subheading

caption credit

CTA

Carousel

Ambient Video

Trombone
The World is Listening.

Subheading

Should I use a text overlay?

Gallery

Header text area

test alt

Media copy text area.

test alt

Media copy text area.
example image

Copy area for caption of image.

example image

Copy area for caption of image.
Student with trumpets
Student with trumpets
Student with trombone
Student with trombone

Footer text area

Below demonstrates Blocks added into a Section that is 2 Columns (50%, 50%).

Basic Body Block & Body Fields

Basic Body Blocks & Body fields are for using the "What you see is what you get" (WYSIWYG) editor interface, similar to Microsoft Word.

Rich Text Editor Buttons

Create content in the Body field using the Rich Text Editor buttons to format and style text and media. Hover your mouse over the buttons to see a tool-tip text in a pop-up describing the button.

Format Drop-Down

From the Format drop-down, you can turn your text into Headings. Headings need to be hierarchical and accurately represent the outline of the page. Heading 1 is used for all page titles. Even the homepage has a Heading 1, although it may be hidden visually. H1 Hero is available, read above.

Heading 2

Heading 2 Variation

The configurations in the Custom Block types allow you to choose to display the Title or not. If you check the "Display title" box, the Title is displayed as a Heading level 2.

Heading 3

Heading 3 Variation

The "Heading" fields in the Custom Block types are usually displayed as Heading level 3. 

Heading 4

Heading 4 Variation

Use Title/Sentence case when entering text in the editor, even if it appears as all caps on the website. Designers decide when content should be all caps or styled differently. Once you enter text in all caps, the website cannot revert it to sentence case should we chose to change the design.

Heading 5
Heading 5 Variation

Headings should allow you to create a consistent stylistic presentation that expresses prominence, grouping and hierarchy.

Heading 6
Heading 6 Variation

You can apply emphasis, strong, smaller, bigger and cite to headings. However, you also have a set of variation styles to apply in headings, which can be found in the Styles Drop-Down.

You have a paragraph variation style in the Styles Drop-Down, too!

Styles Drop-Down

From the Styles drop-down you can:

  • Apply stylistic variations to Headings and paragraphs demonstrated above.
  • Insert visually styled Bigger Text inline or as a paragraph without any semantic meaning. The paragraph options adjust leading / line-spacing.
  • Insert visually styled Smaller Text inline or as a paragraph without any semantic meaning. The paragraph options adjust leading / line-spacing.
  • Insert a Side Comment text representing fine print, like copyright and legal text.
  • Insert text with emphasis or strong to indicate importance.
  • Insert visually styled italic or bold text with no semantic meaning. Use cases for this are uncommon.
  • Indicate the title of a work, publication or performance with the Cited Work option. Eg.Hamlet.
  • Hide content from the visual display to provide more context to Google, screen readers, and other non-visual displays.
  • Clear float, which is useful for aligning images next to text in the Body field.
  • Steps to create hide-reveal accordion content include tools in the Styles Drop-down.

Other Rich Text Editor Buttons

Below are a few tips and demonstrations:

Block Quotes for quotations

And horizontal rules:

For the following horizontal rule style, insert the custom reusable block, "DESIGN: horizontal Rule | orange"

 

 

Basic Body & Rich Text Editor - Continued

Link Button

Since website visitors, search engines, screen readers and other technologies all rely on links, the text used for links and link appearance are critical.  Once a page is published we do not recommend changing the Universal Resource Locator (URL) path for the page. The Link button will popup an interface where you can:

  •  enter an entire Universal Resource Locator (URL) for an external website, an email addresses to create a mailto link,
  • start typing the page title or file name and autocomplete will help find internal content, sorted by type, on the current site to link to, 
  • you can also turn a link into a Primary Button or Secondary Button  
  • use the ARIA label to provide more contextual information about your links for Google, screen readers, and other non-visual displays,
  • add icons to indicate that a link requires a login and
  • create a link that opens in a new window/tab. If you do, be sure to add the External Link icon.

HTML Source Code

You will need to use the Source button to edit code for the following. After completing your edit, toggle out of the Source interface to review in the WYSIWYG before hitting save or your edits may be lost.

Tables

Data tables require special coding to be accessible and responsive. You must create them with the Rich Text Editor button and you must include a caption and select a Header Column and/or Row.

Required Caption, describing the table
Required Header ColumnSecond Column Header
Data cell 1Data cell 2
Data cell 3Data cell 4
Data cell 5Data cell 6

Learn more about Accessible Tables on the WebAIM site.

Images in Rich Text Fields

Use the button with the tool tip "Insert from Media Library" to add images to the Body field. Above the image find an "Edit media" link that will allow you to align the image left, right or center. You can also select a display size and adjust the caption or alternate text.

The maximum recommended image size is 1600px wide. See important guidelines on Images above.

If you want an image to be a link please use the Image Link Custom Block.

Display Size Dropdown

Default displays the image at its uploaded size or, if it is larger than the column, at the full-width of the column. Percentage options can be used in columns that are greater than 50% the container width. The images will display as full width in smaller columns and on small screens. As the window gets smaller the images get larger so that they remain comprehensible.

Multimedia

Vimeo and YouTube can be added with either the "Insert from Media Library" button or the "URL" button.

Sound Cloud and other embeddable media can only be inserted with the "URL" button.

Image Link Custom Block

This is the Link Text

The easiest way to add an image on a page that is a link is to use the "Image Link" Custom Block. Recommended upload image size is 1800 pixels. Maximum recommended image display width is 900 pixels wide.

Hide-Reveal or Accordion in a Basic Body Block

Using the Flex List Custom Block is easier. If you need a more flexible layout or different semantic structure you may need to create a hide-reveal accordion in any Body field. To do so, you must edit the Source Code. Take a peak at the Source Code for the example below to replicate the required code pattern, or contact the Web team for assistance.

This is a H2 tag trigger

Some paragraph text hidden in the hide-reveal

This is a paragraph tag trigger

Some paragraph text hidden in the hide-reveal

Alternately, you can use the Flex List Custom Block with the View Mode set to Accordion.

Flex List

Description List Heading DL tag

The Description Details in the DT tag. Any content that can go in a Basic Body Block can go in this content area, including images, video and other media.

Item 2 Header

Default display is a semantic description list. View mode options: "Accordion", "Horizontal Tabs" or "Mobile Accordion, Desktop Tabs"

Flex List Accordion

Item Header Summary Tag

Item 1 content

Should I Use Accordions?

Consider carefully the pros, cons and best practices of using Accordions.

Flex List Horizontal Tabs

Content 2

Back To Contents

Below demonstrates Blocks added into a Section that is 2 Columns (33%, 67%).

Photo Content Area

Student with trombone

Single image with text either next to it or below it (stacked). No CTA. Can have a links list.

Recommended upload image size is 1800 pixels. Maximum recommended image display width is 900 pixels wide. COFA sites do not crop the image to a 3:4 ratio.

Photo Content Area Variation 1

Student with trombone
Photo Credit

Headline H3 tag

Copy

PHOTO CONTENT AREA Variation 2

Student with trombone
Photo credit text

Promo Unit

Landscape Div Tag
Student with Clarinet

Item Headline H3 tag

Usually multiple items. Can be image with text either next to it or below it (stacked). Choose either landscape, portrait or square. Limit the number of items per row for largest screen size. Can have a link with each item or link the Headline. Does not have CTA. COFA sites display slightly larger images.

Student with trumpets

Item 2

11:7 ratio image. ​Recommended upload image size is 660x400 pixels. Maximum recommended image display width is 330 pixels wide.

Promo Unit Variation 1

Portrait
Student with Clarinet

Item 1

Copy Here

Student with trumpets

Item 2

4:5 ratio image. ​Recommended upload image size is 450x600 pixels. Maximum recommended image display width is 300 pixels wide.

Promo Unit Variation 2

Square
Student with Clarinet
Link here
Student with trumpets

1:1 ratio image. ​Recommended upload image size is 500x500 pixels. Maximum recommended image display width is 280 pixels wide.

Photo Content Area & Promo Unit Custom Blocks have a side-by-side option, where the text is displayed beside the image as demonstrated above or a stacked version, where the image is above the text, that is demonstrated at the bottom of this page.

Below demonstrates Blocks added into a Section that is a 100% Container Width.

Flex Content Area

Student with Oboe

Headline H3 tag

Usually multiple items. Content is always stacked. Can be text, images, list of links, CTA or any combo. Can have a button with each item or link the Headline.

Student with instrument

Headline 2

3:2 ratio image. Recommended upload image size is 1000x666 pixels. Maximum recommended image display width is 900 pixels wide.

Flex Content Area Variation 1

Student with Oboe

Rich Text Copy

Student with instrument
Student with Clarinet
Call to Action
test alt
example image

Headline

Flex Content Area Variation 2

Content fields in the Custom Block types are optional. You can use the Block types to experiment for edge case layout solutions.

Headline

For example, you can use some of the Custom Block Components without an image.

Student with Clarinet

Headline

Item 4

The Copy field in most Custom Blocks can be set to use the Flex HTML Text Format, which allows you to do everything that you can do in the Basic Body Block, including adding images, media or accordions. This flexibility could be helpful but proceed with caution and please carefully review on all screen sizes.

Butler School of Music students pose with instruments

Stacked version of Promo Unit and Photo Content Area work well in narrow columns. Compare them to Flex Content Area and Image Link below.

Below demonstrates Blocks added to a Section that is 4 Columns  (25%, 25%, 25%, 25%)

 

Photo Content Area Stacked

Student with trombone
Photo Credit

Sub-Headline

Copy

Promo Unit Stacked

Sub-Headline
Wind Ensemble

Item 1

Copy

Student with Clarinet

Item 2

Flex Content Area

Student with Oboe

Item 1

Display 1 item per row.

Call to Action

Student with instrument

Item 2

Block Quotes for quotations

Image Link

Link Text

Back To Contents

Menu Instructions

We cannot over emphasize the importance of navigation. Please do not miss this critical step.

It is advisable to use the Main Navigation Custom Block to add a secondary-menu to most pages. If configured properly, the menu should be automatically populated with the correct child and sibling pages for the appropriate section of the site, so that you do not have to manually edit every page when menu items change.

This block type does not display on mobile when the mobile menu becomes visible.

To create a page with navigation from the Main Menu:

  • Add a Section with a 25% width column for the navigation. 
  • Add the Block, "Main navigation"
  • Configure it
    • Check the box to "Display title".
    • Set the "Initial visibility level" to match the page level in the Main navigation, usually 1.
    • The "Number of levels to display" is usually unlimited.
    • Usually, do not check the box to "Expand all menu links"
      • If you want the children of sibling menu items to display, check the "Expand all menu links" box
      • If the parent is a <nolink> label you will have to expand the menu items.
    • Select the top level parent item that this page is a child of from the "Fixed parent item"  dropdown.
    • From the "Use as title" dropdown, select "Fixed parent item's title"
    • Check the box "Link the title?"
    • You should not need to set any other configurations.

Troubleshooting

  • If the wrong items display in the menu, it may be because the page has not been added to the site menu in the correct order. You can drag-and-drop items on the Main navigation page.
  • If menu items are displaying as expanded but you want them to be collapsed it may be because the "Show as expanded" is checked on the parent menu link item in the Main navigation page.
  • The menus on pages with View blocks, such as the Directory landing page, have to be configured by the web team.

Quick Links

Allow you to add additional helpful links to your page with the choice to display links in lists up to 4 columns.

Quick Links Variation 1

Styled like Main Navigation but is manually populated and does not disappear on mobile. 

Contents

Quick Links Variation 2

Intended to be used as a Table of Contents jump link menu on long scroll pages. Please read about linking to another spot on the page.The menu must have a title of "Contents" so you can include "Back to Contents" links below each content area, using the reusable Custom Block. 

Back To Contents

Below demonstrates Blocks added to a Section that is 100% Full Width of the page.

Tip: Combine Variations of the Custom Block Types that have the same background color, to create unique combinations. 

Margin Demo

This block has normal default margins

normal

normal

This block has increase top margin checked.

normal

This block has increase bottom margin checked.

normal

This block has decrease top margin checked.

normal

This block has decrease bottom margin checked.

normal

Additional Tips

Some of these links go to older instruction with screenshots that might not look quite right but, with that understanding, the information should still be helpful. We'll be getting it all updated asap.

Back To Contents

Back To Top