Image Sizes for a 20-40-40 Commonspot Layout

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

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

This is the max size for two images in an Image Grid for a 20-40-40 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 147px.
An image of two Stout students on laptops with a width of 147px.

This is the max size for two images in a Two Column Element Bin for a 20-40-40 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 92px. An image of two Stout students on laptops with a width of 92px. An image of two Stout students on laptops with a width of 92px.

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

___________________________________________

laptop_campus-outside_4 laptop_campus-outside_4 laptop_campus-outside_4 laptop_campus-outside_4

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

___________________________________________

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

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. 

This is an example of what a paragraph of text looks like with a 20-40-40 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 text wrap padding in 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 lobort.

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pharetra neque ac velit bibendum, et ullamcorper erat lacinia. Fusce sit amet laoreet purus. Vivamus ac congue felis. Curabitur rutrum consectetur libero at porttitor. Mauris venenatis porttitor imperdiet.

This is what two columns of side-by-side text look like with equal proportions of 50% with a 20-40-40 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-40-40 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. In hac habitasse platea dictumst. Maecenas porttitor ultricies euisd.

Image in a right column highlight

A banner of a group of happy Stout students with a width of 323px.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nunc vel orci tempus, eget convallis mi ultrices. In hac habitasse platea dictumst. Maecenas porttitor ultricies euisd.