A banner of a group of happy Stout students with a width of 434px.

This size could be used at the top of the content area, or as a header. 

________________________________________________________

An image of two Stout students on laptops with a width of 200px. An image of two Stout students on laptops with a width of 200px.

This is the max size for two images in an Image Grid for a 20-60-20 layout.  

  • Click on the YELLOW PLUS button and click LAYOUT to change layout alignments of your images. 
settings_commonspot
  • Change the layout to horizontal or vertical alignment, and left, right or center adjusted. 
  • Click IMAGES to edit your inserted images.
_________________________________________________________

An image of two Stout students on laptops with a width of 200px.
An image of two Stout students on laptops with a width of 200px.

This is the max size for two images in a Two Column Element Bin for a 20-60-20 layout.  

  • There should now be three small yellow icons. 
  • Click on the first YELLOW PLUS button for Two Column Bin and click DATA to change column proportions. 
settings for two column element commonspot
  • Click on the third YELLOW PLUS button for SINGLE IMAGE and click LAYOUT to change the layout properties for a textbox which include a header, link header, or no header. 
settings for single images for commonspot
  • Click IMAGES to edit your inserted images. 
  • Click on CAPTION to add one.
_________________________________________________________
Error in element (see logs)

This is the max size for three images for a 20-60-20 layout.

___________________________________________________

Error in element (see logs)

This is the max size for four images for a 20-60-20 layout.
____________________________________________________

Error in element (see logs)

Integer pellentesque et nibh eu gravida. Quisque eu ornare elit, vel ornare augue. Maecenas feugiat libero dolor, eu ultricies eros varius sed. Suspendisse dapibus nisl vulputate sem ornare bibendum. Sed commodo blandit nunc ut molestie. Suspendisse non dui lobortis, pulvinar nisi id, dictum velit. Integer at imperdiet metus. Nullam convallis tempor posuere.

Integer pellentesque et nibh eu gravida. Quisque eu ornare elit, vel ornare augue. Maecenas feugiat libero dolor, eu ultricies eros varius sed. Suspendisse dapibus nisl vulputate sem ornare bibendum. Sed commodo blandit nunc ut molestie. Suspendisse non dui lobortis, pulvinar nisi id, dictum velit. Integer at imperdiet metus. Nullam convallis tempor posuere. 

This is what two columns of side-by-side text look like with equal proportions of 50% with a 20-60-20 layout.

  • Click on the YELLOW PLUS button and click DATA to change column proportions and/or your text. 

This is a right column highlight

This is an example of what a paragraph of text and an image looks like for a 20-60-20 layout.

  • To add a white background place all elements within Text Elements/ UW-Stout Right Column Highlights. 
  • Click on the YELLOW button and click DATA to edit your formatted text box and header.

Image in a right column highlight

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nunc vel orci tempus, eget convallis mi ultrices.