CLA
web-services-logo

Cascade Page Layout Design

This instructional guide will go over various ways to visually enhance information on your cascade page. Below is an example of how one can add images, color, quotes, headers, etc to emphasize and organize information in a way that is eye-catching and helpful.

Effective page layout design whole page


 Banner

A banner is the main image across the front of the page, pictured below in the red box.

Screenshot of page with banner image in a red box

  • To submit a banner request, please include the following:

    • name of the site/department that needs banner update

    • Banner or preferred image/design

    • department branding

    • You may also add your own banner, as long as it adheres to the following parameters:

      • A high-quality image

      • 870 px in width, at least 385 px in height

      • 72 DPI



Photos (minimum dimensions and DPIs)

Photos can also be added to your website to add relevant imagery to posts, pages, events and more. See the following photo added under the “What can you Expect?” heading for an example.

  • Photos should be at a minimum 282 px in width, 188 px in height, and 72 DPI. Photos should not be any smaller than this.
A red box pointing out how a photos is used on a site

 


Colored bars on the right side of the page:

Quicklinks can also be added to the right-hand side of your website. If there are links that you think might be important to website visitors, this is a good element to include on your page. These bars can be customized to any words and links you wish to use.

You may add up to four links. There is a set amount of automated colors that range from the blue, fuschia, and orange colors you see below, as well as a fourth gray bar that is unpictured.

red box around three colored bars


Various ways to embed a video (Box, Youtube, right side, in body text):

Additionally, there are several ways to embed videos onto your website. You can embed a video uploaded to Box or YouTube to both the right-hand side of your website or in the body text of any post.

Here is an example of an embedded video on the right-hand side of a website.

Red box around a video in the right hand tool bar

The following is an example of a Box-uploaded video. Note that the formatting is different from the way a Youtube-embedded video is formatted.

Red box around embedded video


Fonts, Headings, and Text Wrapping

Text can also be customized on your website. There are up to six headings you can choose from, as well as an option for the standard body text and blockquote text. Headings can be adjusted to establish a hierarchy of information and organize topics.

Unbolded and bolded headings

Red boxes around different headings types


Pull Quotes

If there is specific information or text you would like to highlight, you may utilize pull quote stylizations.

In CSS, pull quotes can be colored in a variety of different shades. If you do not have experience in this area but wish to have a specific color pull quote, you may reach out to la-web-support-request@utlists.utexas.edu for help.

red boxes around two different types of pullquotes


URL-linked Images

A URL-linked image is an image that is hyperlinked to a URL. Clicking on the image will take users to another webpage.

URL-linked images may be added to both the right-hand bar and the body page.

a closeup on a URL-linked image


Page Breaks

Additionally, page breaks can be used to separate blocks of information from each other and add an element of page organization.

Page breaks span across the body width and are a light gray color.

red box around a gray page break line