Image Sizes for a 20-60-20 Commonspot Layout

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.
_________________________________________________________
An image of two Stout students on laptops with a width of 128px. An image of two Stout students on laptops with a width of 128px. An image of two Stout students on laptops with a width of 128px.

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

___________________________________________________

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac pellentesque odio. Sed sit amet aliquet elit. Nulla pulvinar semper neque, ac ultrices nisl tincidunt quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ut pretium urna. Calla orem shusta ia ia malecoge sjakd djqud neuq liiel. Mn poes jdjs aer a popwo justyw qu dj keke ndqiud pueis ns eau. Ut sem ligula, pulvinar ac porta vel, tempor non nisl. Phasellus nec tellus at felis dapibus laoreet volutpat cursus purus. Pellentesque dui felis, lobortis vel nunc eget, egestas mattis tortor. Vestibulum posuere, sapien at accumsan feugiat, ligula sapien feugiat massa. Phasellus nec tellus at felis dapibus laoreet volutpat cursus purus.

This is an example of what a paragraph of text looks like with a 20-60-20 layout. CommonSpot makes it so that the size of an image alters how close the text gets to the image itself. 

settings for text wrap commonspot

  • Click IMAGES to edit your inserted images. 
  • You can also edit the border(padding) width to determine how close or far you want the text to be to the image. 
settings padding commonspot
  • Using 6px to add space and -6px to decrease space is a good start.
__________________________________________________________

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.