HTML allowed in Page Titles: <sub> <sup> <cite> <em> <strong> <abbr> <wbr>
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.
Layout Builder
Learn how to use Layout Builder to edit Flex pages and other Content Types that use Layout Builder to create layouts with columns, sections and block as demonstrated by this page.
Block Type Demos
Hero & Feature Content
For most images in the Featured content Block types the recommended upload image width is 2280 pixels. Minimum recommended image width is 1600 pixels. Suggested size is 2280x1132 pixels. The actual display size and ratio are variable and change on device window size and depend on selected cropping choice. Always pre-optimize images that are larger than 1MB and review on different screen sizes.
To use the Heading 1 (H1 tag) Hero on a page, you must remove the H1 created by the page Title field. Learn how and find other instructions for Featured Content Blocks on our instruction site.
Heading 1 (H1 tag) Hero
Caption
Credit
Caption
Credit
Carousel
Auto play is discouraged
especially for slides with text.
Ambient Video
Gallery
Header text area
Media copy text area.
Copy area for caption of image.
Below demonstrates Blocks added into a Section that is 2 Columns (50%, 50%).
Basic Block & All Body Fields
The Basic Blocks & Body fields allow you to use the Rich Text Editor buttons to format and style text and media.
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 Content Blocks on Layout Builder pages 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 Content 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
Block Quotes with alternative class added in Source code.
And horizontal rules:
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.
- 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 steps to be accessible and responsive. Follow these instructions carefully. You must create them with the Rich Text Editor button and you must include a caption and select a Header Column and/or Row. For a simple two column grid you may wish to use the default Flex List Block.
| Required Header Column | Second Column Header |
|---|---|
| Data cell 1 | Data cell 2 |
| Data cell 3 | Data cell 4 |
| Data cell 5 | Data cell 6 |
Images & Multimedia in Rich Text Fields
Many of the Block Types in Layout Builder, especially the Photo Content Area and Image Link Block are great for adding images but you can also add them into any Body field. See how to instructions for images in the Body and learn how to adjust the size, caption and alignment. The maximum recommended image size is 2280px wide.
Instructions for how to add multimedia or other embeddable content.
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
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 is 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.
Menus & Navigation
Consider carefully and follow instructions for Navigation, Menus, Paths & Links. You will find links to edit this sites Main Menu Navigation, Footer and Header Menus on the dashboard.
Breadcrumbs
This site relies heavily on a breadcrumb trail to support visitors navigation. The breadcrumbs are automatically generated by the URL alias address pattern of each page, so take care to create accurately nested paths to reflect parent pages. Content Administrators can configure the URL alias on the Edit tab for each page.
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.
Main Navigation, Secondary Menu Block
This site relies heavily on the breadcrumbs and is not using a secondary menu block. Should one ever be needed the "Main navigation" Menu block, demonstrated on the left is available, but the convention for how this site configures it has yet to be decided. If you decide to start using it, please reach out to the web team.
Quick Links Block
Also demonstrated on this page is the Quick Links Block. It can be used to mimic a Secondary Menu or make a Table of Contents jump links menu.
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.
flex content area default
headline
body
Flex Content Variation 2
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
- Media (Images, Documents & Videos) Management
- 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