Illinois Wesleyan
Communications Office

A General Guide to Snippets

Writing for the Web  |  Page Properties  | Web Styling Options  | Photo Sharing in Google Drive

Snippets Dialog BoxThe "Snippet" tools in our content management system make it easier to create attractive web pages, but there are some limitations and guidelines to follow.

The Basics

Here are examples for each snippet, which are offered in the following categories:

Layout Helpers


Outside Content

Data Tables



The Basics

How do I add a snippet to my page?



Place your cursor where you would like to insert a snippet


Snippet Icon

Click on the snippet icon located in the toolbar at the top of the OU editor


Insert Button

select a snippet and click insert

Why do they look like tables?

Most of the snippets are styled when you publish your web page. In the editor, they will look like tables to provide fields in which you can insert text and/or images and better organize content on the page. The exceptions to this are the image with caption and data tables.

How can I edit/modify them?

Snippets can be easily modified to fit your needs. In most cases, simply add a row in the snippet table to input more content.

Do not add or delete columns.

With the exception of data tables, adding or deleting columns will cause the snippet not to work properly. If you do not wish to use a particular content cell, leave it blank.



Layout Helpers


People List

Main use: Spacious faculty/staff lists. Faculty listing pages require this snippet.

Image of Tommy Titan
Tommy Titan

Assistant Professor

(Only list the most relevant specialties, no more than 6.)

This snippet does not replace faculty/staff profile pages. Keep your description under 6 sentences long. If more space is needed, create a profile page and include the link in the Profile URL cell in the snippet.

Contact: (309)

Image of Ann Aubry
Ann Aubry

Assistant Director for Electronic Communications

(Part of the University web team, on an endless mission to improve the Illinois Wesleyan website and make life easier for content contributors.)

Most of her sentences begin with, "I heard on a podcast ... "

Contact: (309)


People Grid

Main use: People list alternative for less available space and more general info.

Features: Allows wrapping of content.

Tommy Titan

Assistant Professor

Favorite color is green

Wears size 22 shoes

Jonah Kang

Student Worker 

Here to help make your web pages pretty!

A senior at IWU

Don't List Vacancies

Do not add vacant positions

Doing this conflicts with our "keep it current" guidelines



Picture List

Main use: Equipment listings, event timelines and any other sort of list with visuals.

  • Basketball


    Because basketballs are cool.
  • Upside-Down Pacman

    Upside-Down Pacman

    To eat the leftover clay from the pottery classes.



Course List

Main use: Course description pages require this snippet.

Please note that the course number needs to be in this style to generate automatic page anchors, used for links on Course Plan pages.

ART 115 Introduction to Art History

A thematic course examining the complex relationship of artist, work of art, and audience over time and across cultures. Students will consider a select group of works in an effort to develop the ability to engage visual “texts” in an analytical and critical manner. Fulfills general education requirements for The Arts category. Offered annually.

ART 116 Survey of Asian Art

A course designed to give the student an overview of the history of Asian Art. The course will concentrate study on the artistic traditions of India, China, and Japan. Offered occasionally.



Callout Box

Main use: Highlight a list/procedure that needs extra attention.

Limit: 1 per page.




Main use: Organize content so one set of information is visible at a time. Course plan pages require this snippet.

Limit: 1 per page. No exceptions.

This content will automatically be shown first.
All the other content will be hidden unless the viewer clicks on a different tab.
This snippet requires the interactive participation of the audience.
Do not put important information in this snippet unless it makes sense to do so.
The content on the course plan pages is an example of content that is appropriate for this snippet.
The tab Label should be one to two words long. There are no limits to how many tabs you have in the snippet but they will wrap to two rows if you have too many and/or the labels are too long.




Main use: To visually track the progress of something with quantitative data.




Flexible Grids (2 & 3 Columns)

Main Use: Organize and display content in columns without using tables.
Features: Expands and contracts in response to the width of your screen. You can use almost all of the other snippets inside the flexible grid snippets allowing you to have full control over the layout of your web page.

How it works:

When viewed on a mobile device, the content in this area will display first.
This will display second. You can see this by looking at this page on your smart phone or by decreasing the size of your browser window
This will be third  You cannot add columns, but you can add as many rows as you would like.
This content area will display last. Everything in the flexible grid snippet will display in one column on a smart phone instead of multiple columns like on a desktop computer.






Image with Caption
Image with caption. The image can be any size; the caption will automatically adjust its width accordingly.


Image with Caption

Main use: To add visuals to a page, including a caption whose width adjusts according to the image size.

Size limits: Uploading the original full-sized version of the image is recommended (the largest dimension of the photo should not exceed 2000 pixels).

When inserting an image into a page, you can determine the size it displays by typing new dimensions in the "Appearance" tab of the "Insert/Edit Image" dialogue box. Always leave the "Constrain Proportions" option checked to avoid image distortion.The recommended display size of an image is 450 pixels wide (The display width should not exceed 600 pixels). 

Features: Allows wrapping of content around image and caption by aligning it to either the right or left side of the content area.



Turning Titan '14
Limit text to about eight words.
Turning Titan '14
You can use both text areas
Or neither of them. 
Shinto Shrine Reception
Try not to cover people's heads like this!
 Use the appropriate text area for the photo
Images must be the same size
This photo shows what not to do – Do not change orientation or dimensions, or use this much text.

Rotating Image Carousel

Main use: Provides multiple images in less space.

Limits: 1 per page. Widths of images should not exceed 450 pixels. All images must be the same dimensions, both width and height. Rotating image carousels should have at least 3 photos and not more than 6 photos.

It's a good idea to check your page on a mobile device – captions will cover more of the image.

Features: Allows wrapping of content around image and caption by aligning it to either the right or left side of the content area.


Outside Content


Video with Caption

Main use: Easily include videos on your site, without having to use embed code.

Features: Allows wrapping of content.

Limits: Be aware that only right alignment is possible at this time.



Small Flickr Gallery

Main use: Introduce fewer images from a Flickr gallery than the large Flickr gallery snippet.


Large Flickr Gallery: A large Flickr gallery displays every photo in the album you choose to share.



Data Tables


Main use: Data/info that requires this kind of visual organization. Tables are no longer acceptable for general page layout.

Warning: Do not modify the widths/heights of table cells. They will expand/contract depending on the width of the content.

Dataset Column A Column B
Subject 1 Result 1A Result 1B
Subject 2 Result 2A Result 2B
Subject 3 Result 3A Result 3B
Subject 4 Result 4A Result 4B
Subject 5 Result 5A Result 5B
Campus News & Events