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.
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.
Images & Multimedia
Image size
Always pre-optimize images that are larger than 1MB.
- File Size: Keep image file sizes under 500KB. To accommodate document uploads, the stated allowed upload size is much greater than needed for images.
- Pixel Recommendations: Follow the pixel size recommendations next to each Custom Block Type below or next to the to the image upload field. Don’t insert the Custom Block into a section that exceeds the maximum recommended display width.
- Automatic Optimization: Our system optimizes images for all devices. Upload the largest recommended pixel size; it’ll deliver smaller versions, especially on smaller screens.
- Review Content: Always check how your content looks on different devices and screen sizes.
Image Types
Allowed types: png gif jpg jpeg. PNG is not recommended and must be pre-optimized.
Media Library
Images, documents and video links (from Vimeo or YouTube) are stored in the Media Library. Avoid uploading duplicate files, even if you use them at different sizes.
Embeddable Media
In the Body field, use the media button to insert content from SoundCloud, Spotify, and other embed-friendly sites. Note that if you insert Vimeo or YouTube content using this button, it won’t be included in the Media Library. For more details, refer to the instructions for editing in the Basic Body Block below .
Accessibility
Don't forget alternate text for images, captions, audio description or transcripts for video and these important accessibility considerations for documents.
Alignment and Responsiveness
Always test the responsiveness of your content at different screen sizes. Especially, when an image is aligned or "floated" next to text or other items on the page.
Layout Builder
The Flex page and some other content types on this site use what is called Layout Builder, which has all of the capabilities demonstrated on this page. 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.
From the "Layout" tab you can add Sections and Blocks to create multi-column page layouts. "Sections" are the top-level building blocks of page layouts. "Blocks" exist within a Section.
Sections
Click "+ add Section" to insert a section up to 4 columns wide. Since some of the blocks have options to insert 4 columns you could insert a 16 column layout, which might not look good on all device sizes.
You are encouraged to test layouts by expanding and shrinking your browser window and viewing the page on a mobile device. You may also experiment in the sandbox.
Select a Section width: readable, container or full-width. For text heavy content, shorter lines will make a big difference in the legibility and professionalism of your layout.
Blocks
Click "+ Add block" and a menu will appear with options to add pre-configured blocks, such as
- one of the Reusable custom blocks, found on the Dashboard, or
- click "Create custom blocks" to insert content with the following layouts, demonstrated on this page below.
To create an empty column in one of your sections (a.k.a. more white space), you can insert the Reusable custom block with the description "Blank Column - fill space for layout."
Custom Blocks
Each Custom block type has configurations that result in variations of style and format:
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 1MB and review on different screen sizes.
Caption Credit
Select image that will ensure the text is legible and contrast complies with ADA requirements. Credit
Quotation entered in Subheading field
Credit
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.
Semantic H1 tag
Carousel
Consider carefully the pros, cons and best practices of using a carousel
especially for slides with text.
Gallery
Header text area
Media copy text area.
Copy area for caption of image.
Ambient Video
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:
The "I" button will add emphasis and the "B" button will indicate strong importance of the content. Visually it looks like bold and italic but it's important to understand what it means for browsers that aren't visual.
Block Quotes for quotations
And horizontal rules:
For the following horizontal rule style use the Reusable Blocks "HR Dots offset Right/Left".
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.
For the following button style, edit the Source code to add "two" to the end of the class, like so:
<a class="ut-btn-alternative-two" href="#">Button Variation 2</a>
Button Variation
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.
- Abbreviations and foreign languages should be indicated with edits in the Source code.
- Control where long words break in narrow columns. This is particularly important to check for on some small screen sizes.
- Qualtrics forms and some other iFrame embeds must be requested, contact the Web team.
- Full list of available tags and more tips.
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 Header Column | Second Column Header |
|---|---|
| Data cell 1 | Data cell 2 |
| Data cell 3 | Data cell 4 |
| Data cell 5 | Data 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
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
Consider carefully the pros, cons and best practices of using Tabs
Item 2 Content
Flex List Horizontal Tabs Variation 1
body text
Body text
Below demonstrates Blocks added into a Section that is 2 Columns (33%, 67%).
Photo Content Area
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
Photo Content Area Variation 2
Promo Unit
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.
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
Item 1
Copy Here
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
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
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.
Headline
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
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
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.
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 into a Section that is 4 Columns (25%, 25%, 25%, 25%).
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.
Menu Instructions
We cannot over emphasize the importance of navigation. Please do not miss this critical step.
Duplicate Link Text
This site appends visually hidden text to menu items if you enter it into the "Description" field in the menu item creation form interface. If you have two menu items with the same visible link text, please enter additional contextual text into the "Description" field. Learn more about the importance of unique clickable text.
Add a Secondary Menu
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.
- Add a Section with a 33% 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.
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.
Test Flex Content
Headline
Copy
Flex Content Variation
Headline
copy
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.
- Buttons in the Rich Text editor
- Create a Link
- Telephone Links
- Great Links
- Source Code, HTML
- Great Headings
- Acronyms & Abbreviations
- Foreign Languages
- Documents, files, Word, PDF
- Long word wrapping
- Menus, Navigation & Paths
- Responsive Web Design, Large & Small Devices
- Site Search
- Clearing the browser cache or memory
- Content Management System Infrastructure
- Test site, Sandbox
- Image Optimization
- Research & Analysis
- Analytics & Visitor Data
- Increase traffic, visitors
- Evaluate & Test webpages
- Alternate Text descriptions
- Use of Color & Color Contrast
- Captions, Audio Description and Transcripts
- Hide on Mobile
- Hide on Desktop