skip to contentThe University of Texas at Austin

Blocks

Overview

Pages, the College of Liberal Arts’ new content management system (CMS), is a custom-built user interface (UI) for our unique website management needs.

Designed with effective communication as a priority, Pages uses intuitive drag-and-drop components to provide multple options for content management and integrate into a clear, engaging page design without any guess work. Site navigation, web responsiveness for all devices, and accessibility requirements are all pre-coded and managed by our web development team. But remember to add alt text for all your images!

College of Liberal Arts

Block Toolbar (left: block name, right: block tools)

Selecting and Managing Blocks

When you drag a block on to the canvas or click a current block, the block will be highlighted in a blue outline. At the top of the block you will see the block name (in this example "Text") and the block tools.

The block tools provide ways to manage and customize the blocks on the page.

  • The up arrow icon will select the block or move the selection to the container block in the case of multiple-element blocks like Cards.
  • The crosshairs icon allows you to drag and drop the block to reorder it on the page. This can also be done in the Layers panel.
  • The double page icon will copy the current block and its contents directly below the copied block.
  • The trash can icon will delete the block and its contents from the canvas. You can also hide a block instead using the Layers panel.

Text Sizes and Styles

Text sizes and styles are pre-set for many of the Blocks. In Text blocks users style the text in a number of options.

This is a H2 header

This is a H3 header

This is a H4 header

 

This is normal text

This is bold text

This is italic text

College of Liberal Arts

This caption describes the image above.

Quick Tips

  • Always use images that have been approved for use either from university or college asset collections or custom photography. If images are third party, always get approval and credit the photographer. This is true for all imagery on your site.
  • Several component have multiple elements. Be sure to select the element you want to apply settings to. Selected elements are indicated by the blue highlight. Click the up arrow to select element layer above.
  • Be sure adhere to accessibility standards by using descriptive text for images in the “alt text” box.
  • Use headings to organize content and make it easy to scan.
  • Use headers in sequential order. For example, use H2 for your section title. If you have sub-sections, use H3, then H4 in order. Headers are pre-styled. Do not bold or italicize headers.
  • Keep button titles short.