Full-Width Content Types

2 Columns 6-6 (Full-Width)

  • Add 2 columns (proportions 6+6 out of 12 total units)
  • Columns can hold a combination of text and/or images
  • Each column may have an optional heading
  • Image is 864 x 576 px

A 2 Columns 6-6 (Full-Width) example

Working Example of 2 Columns 6-6 (Full-Width)

2-Panel Promo (Full-Width)

  • Text panel uses plain text, no links
  • Image floats right on desktop, then goes to top on mobile
  • Image is 670 x 447 px

2-Panel Promo (Full-Width)

Working Example of 2-Panel Promo (Full-Width)

3-Across Tiles with Text Below (Full-Width)

  • Add exactly 6 image tiles with a subheading and teaser text
  • Image and subheading link to an existing section
  • Laid out in 3 columns on desktop, then 1 on mobile
  • Image is 756 x 504 px

3-Across Tiles with Text Below (Full-Width) thumbnail

Working Example of 3-Across Tiles with Text Below (Full-Width)

3 Columns 4-4-4 (Fullwidth)

  • Add 3 columns (proportions 4+4+4 out of 12 total units)
  • Columns can hold a combination of text and/or images
  • Each column may have an optional heading

3 Columns 4-4-4 (Fullwidth) example

Working Example of 3 Columns 4-4-4 (Fullwidth)

4-Across Tiles with Slide-Up Panel (Full-Width)

  • 4 images across 1 row 
  • Text panel that slides up on mouseover
  • Top line of text links to a section
  • Image is 740 x 740 px

4-Across Tiles with Slide-Up Panel (Full-Width) example

Working Example of 4-Across Tiles with Slide-Up Panel (Full-Width)

4-Across Tiles with Text Below (Full-Width)

  • Add exactly 8 image tiles with subheading and teaser text below
  • Image and subheading link to an existing section
  • Laid out in 4 columns on desktop, then 1 on mobile
  • Image is 756 x 504 px

4-Across Tiles with Text Below (Full-Width) example

Working Example of 4-Across Tiles with Text Below (Full-Width)

Button (Full-Width)

  • Add a button that can link to either a section or an external website
  • Button width scales based on the amount of text within

Button (Full-Width) example

Working Example of Button (Full-Width)

Campuses Block (Full-Width)

  • Add the campuses block to Landing Pages (not for Landing Sub-Pages)
  • Images and campus names are fixed
  • Text may be edited

Campuses Block (Full-Width) example

Working Example of Campuses Block (Full-Width)

Feature CTA II (Full-Width)

  • A heading over text with a wide call-to-action button below
  • Button can link to either a section or an external website
  • All content appears in a gray box

Feature CTA II (Full-Width) example

Working Example of Feature CTA II (Full-Width)

Feature CTA III (Full-Width)

  • Text with a call-to-action button below that all floats to the right
  • Image floats left on desktop, then goes to top on mobile
  • Image is 600 x 447 px

Feature CTA III (Full-Width) example

Working Example of Feature CTA III (Full-Width)

Feature CTA IV (Full-Width)

  • A heading above text with a call-to-action button below
  • All content is centered on the page

Feature CTA IV (Full-Width) example

Working Example of Feature CTA IV (Full-Width)

Feature Tabs (Full-Width)

  • Add up to 6 tabs with text, button, and left-floated image
  • Button links to an existing section
  • Image is 640 x 447 px

Feature Tabs (Full-Width) example

Working Example of Feature Tabs (Full-Width)

Feature with Links (Full-Width)

  • Heading and text on the left with up to 8 links on the right over a maroon background
  • Buttons can link to either a section or an external website
  • Background image is 1400 x 544 px

Feature with Links (Full-Width) example

Working Example of Feature with Links (Full-Width)

Featured Events (Full-Width)

  • Add a set of featured events to the page from an XML feed
  • Email the Web Team at webteamrequest@twu.edu for setup

Featured Events (Full-Width) example

Working example of Featured Events (Full-Width)

Gallery Deck (Full-Width)

  • Each thumbnail image is a deck
  • Add 1-12 gallery images within each deck
  • Decks with a single image are styled to look flat and clicking on them opens a single image popup
  • Decks with multiple images are styled to look like a stack and clicking on them opens a slider popup
  • Text below deck can link to a section or appear as just plain text
  • Images are 900 x 600 px
  • Add as many decks as needed, but use only one complete set per page

Gallery Deck (Full-Width) example

Working Example of Gallery Deck (Full-Width)

Pull Quote Slider (Full-Width)

  • A pull quote with small image on right over an optionally-skewed maroon background
  • Multiple slides make a slider
  • Small image on right is 240 x 240 px
  • Image behind maroon background is 1440 x 700 px

Pull Quote Slide (Full-Width) example

Working Example of Pull Quote Slider (Full-Width)

Pull Quote with Image (Full-Width)

  • Add a single quote with a circular photo to the left
  • Heading is always an H3, so these are meant to be used under an existing H2
  • Styles for quote and attribution are automatically added
  • Image is 150 x 150 px (square) and will automatically be styled as a circle

Pull Quote with Image (Full-Width) example

Working Example of Pull Quote with Image (Full-Width)

Slider Image II (Full-Width)

  • A simple slider with just images
  • Add at least 3 slider images next to each other to make a complete slider
  • Use only one complete slider per page

Slider Image II (Full-Width) example

Working Example of Slider Image II (Full-Width)

Table (Full-Width)

  • Add a table using the HTML Editor
  • Table header cells and other cells are automatically styled with color
  • Add scroll and shadow to make large tables usable on mobile
  • See the Table section of the T4 Web Editor's Manual for details

Table (Full-Width) example

Working Example of Table (Full-Width)

Text Feature (Full-Width)

  • Add a heading over text and up to two optional buttons on an optionally-skewed maroon background
  • Buttons link to existing sections
  • All content is centered on the page

Text Feature (Full-Width) example

Working Example of Text Feature (Full-Width)

Text Feature II (Full-Width)

  • Add a heading over text with a block of side text on a maroon background
  • Side text goes floats right on desktop, then goes to bottom on mobile
  • Not intended for links, so use plain text only
  • Background image is 1440 x 700 px

Text Feature II (Full-Width) example

Working Example of Text Feature II (Full-Width)

Text with Captioned Image (Full-Width)

  • Add text with just one large image and optional image caption underneath
  • Image can float either left or right on desktop, then goes to top on mobile
  • Image size is 900 x 600 px

Text with Captioned Image (Full-Width) example

Working Example of Text with Captioned Image (Full-Width)

Text with Optional Images (Full-Width)

  • Paste or type text into T4's text editor
  • Can add multiple images using "Select with layout" from the media library to float left, right, or none
  • Can add multiple headings using the the text editor's "Format" menu
  • Image size is 900 x 600 px

Text with Optional Images (Full-Width) example

 

Working Example of Text with Optional Images (Full-Width)

Video (Full-Width)

  • Add video embed code to a page
  • Heading and video are centered

Video (Full-Width) example

Working Example of Video (Full-Width)