Don’t forget to turn your masthead on/off in Parameters under the Property tab above. This is also where you upload a new image!

Full Width Template


Using Snippets & Components


This page will show you how to insert components on a full-width page template properly. It will also show you what snippets these components must be contained within in order to display properly on this type of template. Pay close attention to the descriptions below and always follow the red helper text in each snippet!

 

 

Interior Container Snippet


This is an Interior Container Snippet used on full-width pages. It's a simple container that allows you to change the color of your section background to white, gold or gray and also allows for WYSIWYG editing, inserting images, inserting videos, etc.

 

This is an (Any Page) Video - YouTube Embed component.

Select it from the components icon in your toolbar!

Info Card Snippet


This is an Info Card snippet that is inside an Interior Container snippet. These two must be used together in order to properly display within our standard website margines. Be sure to look for the red helper text inside snippets for reminders how to use snippets correctly! You can add more cards to this snippet. To do this, go to the snippet options menu, select the fourth icon in the snippet menu that has the + sign at the bottom of the icon.

 

screenshot of how to add a row

 

  • Alt Text

    Phase 1

    Aug 24 - Sept 4

    Lorem ipsum

    • is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.
    • Lorem ipsum may be used before final copy is available, but it may also be used to temporarily replace copy in a process called greeking , which allows designers to consider form without the meaning of the text influencing the design.
  • Alt Text

    Phase 2

    Sept 7 - Sept 25

    Lorem ipsum

    • is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.
    • Lorem ipsum may be used before final copy is available, but it may also be used to temporarily replace copy in a process called greeking , which allows designers to consider form without the meaning of the text influencing the design.
    • Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum , a first-century BC text by the Roman statesman and philosopher Cicero , with words altered, added, and removed to make it nonsensical, improper Latin .
  • Alt Text

    Phase 3

    Sept 28 - Nov 20

    Lorem ipsum

    • is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.
    • Lorem ipsum may be used before final copy is available, but it may also be used to temporarily replace copy in a process called greeking , which allows designers to consider form without the meaning of the text influencing the design.

 

FAQ Accordian Snippet


Similar to the Info Card snippet, the FAQ Accordian snippet is designed to be used within an Interior Container snippet. You can add as many rows as you'd like to your accordian. To do this, find the snippet option menu, select the fourth icon in the snippet menu that has the + sign at the bottom of the icon. 

 

The FAQ Accordion snippet, once selected and inserted into an interior container snippet, has prepopulated fields to direct you easily to what information goes where. Simply change out the helper text with you own information! 
Answer 2
Answer 3

 

Callout Snippet

This is a callout snippet that is designed to be used within an Interior Container snippet in order to display correctly.

 

Formatting example

  • This is a "List on Gold" style option 
  • Add links for example road conditions
  • Use bullets 
  • Change size and style

Business Accreditation

Students studying in the College of Business Atrium

 

Parallax Snippet


This is an example of a Parallax with an Image

 

You simply upload a photo at 2210 px wide. If you have a large amount of text, you will likely need to upload a taller photo. For reference, the photo behind this text is 500px tall.  This container is designed to be used independently so that it extends the full screen without white space on the site. Therefore, you do not need to use this snippet within another snippet container.

 

 

A Note About Parallax Images

To avoid accessibility contrast errors, try using a photo for your paralax that has a dark color overlay overtop. This one as a dark blue overlay that was created inside of Canva. If you do not have a licence for Canva and wish to be added, please contact creativeservices@uwyo.edu and they will send you pricing and information on joining UW's enterprise license.

 

 

 

 

 

 

 

 

Parallax Snippet (No Photo)


THIS PARALAX DOES NOT CONTAIN A BACKGROUND IMAGE

 

You can also choose to have a solid brown bacgkround for your paralax without an image. Simply leave the photo selection blank and select Brown in the background color option above.

PLEASE NOTE: Avoid using the blue background as this can create a contrast issue.

 

This container is designed to be used independently so that it extends the full screen without white space on the site. Therefore, you do not need to use this snippet within another interior container snippet.

 

Insert an image, like this one below, by using the insert/edit image button from the main toolbar.

 

A student sits in a chair

 

 

 

 

2-Column Row Snippet


Must be used in an Interior Container snippet in any section below the Intro Section



This is a 2-Column Row snippet. This is great for displaying side-by-side information including images and text. Snippets using more than one (1) column must be placed inside an Interior Container snippet if it is in a section below the intro content of a full-width template. 

 

test

 

 

You can add buttons by using the (Any Page) Button with Two Color Options component.

Note: Each button must be on its own line. 

 

 

 

 

 

3-Column Row Snippet


Must be used in an Interior Container snippet in any section below the intro section


This is a 3-Column Row snippet which can be used on this page template, however it is not recommended on two-column page templates. This is great for displaying three sets of related information as needed. Snippets using more than one (1) column, like this one, must be placed inside an Interior Container snippet if it is in a section below the intro content of a full-width template. 

Insert text or images to the recomended size by followng the helper text in the snippet. To link photos or text, use the insert/edit link button from the main toolbar. 

 

test

This is a a three-column snippet, image #1.

test

This is a a three-column snippet, image #2.

test

This is a a three-column snippet, image #3.

 

 

 

4-Column Row Snippet


MUST BE USED IN AN INTERIOR CONTAINER IN ANY SECTION BELOW THE INTRO SECTION



This is a 4-Column Row snippet which can be used on this page template, however it is not recommended on two-column page templates. This is great for displaying related information in a concise format. Snippets using more than one (1) column, like this one, must be placed inside an Interior Container snippet if it is in any section below the intro content of a full-width template. 

Insert text and/or images to the recomended size by followng the helper text in the snippet. To link photos or text, use the insert/edit link button from the main toolbar.

 

test


INFORMATION ICON #1

This is some info about this icon.

test


INFORMATION ICON #2

This is some info about this icon.

test


INFORMATION ICON #3

This is some info about this icon.

test


INFORMATION ICON #4

This is some info about this icon.

Two-Column Image with Caption (Full Width) Component


This component is being used within an Interior Container (full Width) snippet

 

This component must be used inside an Interior Container snippet when inserted in a section below the intro section. You can add as many rows of two (2) in this component, as you'd like. Within the component editor, you can add links and captions as needed to each image. 

 

 

 

 

 

 

Infographics Slider (Any Page) Component


This component is being used within an Interior Container (full Width) snippet

 

This component must be used inside an Interior Container snippet when inserted in a section below the intro section. You can add multiple graphics to the infographic for a "sliding" effect. Graphic icons must be provided by site editor. Within the component editor, you can add links and captions as needed to each image.

 

test

Optional Title Here

This is an optional subtitle.

test

This is a Title

This is another subtitle.

test

Title Here

This is a subtitle.

test

Optional Title Here

This is another subtitle.

 

 

Three-Column Image with Caption (Full Width) Component


This component is being used within an Interior Container snippet

 

This component must be used inside an Interior Container snippet when inserted in a section below the intro section. You can only add a total of three images in this individual snippet. If you wish to add multiple lines of a row of three (3), simply add another component of the same type below the exising one. Within the component editor you can add links and captions to each image as needed.

 

 

 

 

 

(Any Page) Image Slider Component


This component is being used within an 2-Column Row Snippet that is Place INsde an Interior Container snippet

 

This component must be placed inside a snippet. It is typically used in once of the columns of a 2-Column Row snippet so that accompanying WYSIWYG text can be added in the other column. You can add multiple images in the Image Slider component for a scrolling effect. This component does not display captions text within the photos. 

 

Two grey draft horses pull a UW wagon in a parade.Two grey draft horses pull a UW wagon in a parade.

This is a some text you can put here in the second column of the 2-column row snippet. An example is this bulleted list.

  • Bullet #1
  • Bullet #2
  • Bullet #3

 

4+ Image Slider with Caption (Full Width) Component


This component is being used within an Interior Container snippet

 

This component must be used inside an Interior Container snippet when inserted in a section below the intro section. You can add up to 10 slider images in this component, but you must have a minimum of four (4). Within the component editor you can link each image as needed. Recomended sizing for images is also provided in each component editor.

 

Photo Gallery (Any Page) Component


This component is being used within an Interior Container snippet

 

This component must be used inside an Interior Container snippet when inserted in a section below the intro section. You may insert up to nine (9) photos and caption them by following the prompts in the component editor. To view Photo Gallery captions you may hover over the image or click on it to expand into a slider view.

 

Edit Custom Contact Information Here

Department Name
Address
Department #
(XXX) XXX-XXXX
Email: email@uwyo.edu