Text Pages

Snippets

Overview

Snippets are blocks of content created and maintained by UCM to allow the use of special design elements on a Gallery or Text page.

INSERT A SNIPPET

1. Click the puzzle piece icon in the WYSIWYG Editor.
2. Use the "Filter by name" field to type the name of the Snippet you would like to use or scroll through the list of all available Snippets.
3. Choose the Snippet you would like to use.
4. Click "Insert".

Text Page Snippet Options

1. Buttons
2. Images
3. Tables
4. Timeline (by request only)
5. Toggles
6. Content Two-Column

Buttons

Button - Left

Example: Button Link

Button(s) - Centered

After you've inserted a Button Snippet:

1. Change the text to what you want the Button Snippet to read.
2. Highlight the text, then click the Link icon to add the link.
3. Navigate to the page/file you'd like to link to or insert an external link.
4. Click Insert.
5. Save your changes.
6. Click Publish. 

Back to top

Images

All images placed on a web page must be placed within an image snippet. Images must be resized to fit the proper dimensions of an Image Snippet.

Image Snippets

After you've prepared and uploaded your image(s) and inserted an Image Snippet:

1. Click the gray box in the Snippet, which highlights the "Insert/edit image" icon on the WYSIWYG Editor.
   
   
   
2. Click into the Source field and clear out any default content.
   
   Then click on the Dependency Manager and navigate to the image you'd like to add to the page. It should automatically place you within the site's "images" folder. Click "Insert".
   
   Once inserted, the Dependency Tag will display in the Source field.
3. Add an Alternative description for the image.
   
4. (Ignore "Image title", "Width", "Height", "Class", "Custom Class", and "ID".) Click "Save".
5. Publish your changes to Test and/or Production.

Image with Caption Snippets

Image with Caption Snippets operate the same as Image Snippets, but allow for a caption underneath the image.

After you've prepared and uploaded your image(s) and inserted an Image with Caption Snippet:

1. Follow Steps 1-4 above (Image Snippets section).
2. Add the caption in the "Enter Caption here." field. 
3. Click "Save".
4. Publish your changes to Test and/or Production.

Image Grid Snippets

Image Grids are used to add multiple images (and/or text) in a row on a web page.

After you've prepared and uploaded your image(s) and inserted an Image Grid Snippet:

1. In the "Number of Images in a Row" section, choose two, three, or four.
2. Follow Steps 1-4 above (Image Snippets section).
3. Repeat until you have added all images to the Image Grid.

4. To add or delete rows or columns, or to delete the table entirely, right click on the Table and choose which option you'd like to add (i.e. Row > Insert Row Before). You can also make changes to the cells themselves or choose Table Properties to make other adjustments.

   

   
   

5. You can also use the pop-up toolbar and click on the appropriate icon to execute the task.

   

6. Save your changes.
7. Click Publish.

Image - Small - Left

 

 

Image - Small - Left with Caption

 

 

 

 

 

 

 

 

Image - Small - Right

 

 

 

Image - Small - Right with Caption

 

 

 

 

 

 

Image - Medium - Left

 

 

 

 

 

 

Image - Medium - Left with Caption

 

 

 

 

 

 

 

Image - Medium - Right

 

 

 

 

 

 

Image - Medium Right with Caption

 

 

 

 

 

Image - Large

Image - Large with Caption

Image - Grid

• Display two, three, or four images.

Back to top

Tables

Please note: Tables should only be used to display data. They should not be used for layout or design.

Table - Bordered and Striped

Example: Table - Bordered and Striped

Heading 1	Heading 2	Heading 3
Item 1	Item 2	Item 3
Item 1b	Item 2b	Item 3b

Table - Bordered

Example: Table - Bordered

Heading 1	Heading 2	Heading 3
Item 1	Item 2	Item 3
Item 1b	Item 2b	Item 3b

Table - Striped

Example: Table - Striped

Heading 1	Heading 2	Heading 3
Item 1	Item 2	Item 3
Item 1b	Item 2b	Item 3b

Table - Not Bordered or Striped

Example: Table - Not Bordered or Striped

Heading 1	Heading 2	Heading 3
Item 1	Item 2	Item 3
Item 1b	Item 2b	Item 3b

After you've inserted a Table Snippet:

1. Add the Table Caption, Heading(s), and Item(s).

2. To add or delete rows or columns, or to delete the table entirely, right click on the Table and choose which option you'd like to add (i.e. Row > Insert Row Before). You can also make changes to the cells themselves or choose Table Properties to make other adjustments.

   

   
   

3. You can also use the pop-up toolbar and click on the appropriate icon to execute the task.

   

   
   
4. You can also make changes to the cells themselves or choose Table Properties to make other adjustments.
5. Save your changes.
6. Click Publish. 

Back to top

Timeline

The Timeline snippet creates an offset two-column layout that groups events with their accompanying time periods. The snippet requires the Timeline Event Component(s), where users can add additional event details. Please note: Only Timeline Event Component(s) can be used within the "Timeline Item Components" portion of the Timeline Snippet. Timeline Event Component(s) cannot be used with or in addition to any other snippet.

After you've inserted a Timeline Snippet:

1. Choose a Timeline Style (formats the position of events).
   • Basic: Simple vertical timeline.
   • Centered: Vertical timeline where the events alternate in an ‘even-odd’-type order.
2. Type in the event's Time Period.
   1. Suggested usage is by month and/or year (i.e. 2019, January 2019).
3. Insert the Timeline Event Component(s). Please note: More than one Timeline Event Component can be added to a single Time Period.
   
   
   
4. Please see our resource for further instruction.

Back to top

Toggle Section

Toggle Section Snippets put content into an accordion-style layout, allowing it to expand and retract. They are often used when there is a lot of content that would cause the reader to have to scroll down the page to find all of the information.

After you've inserted a Toggle Section Snippet:

1. Enter the text you want to appear on the Toggle Section when it is retracted in the "Enter toggle text here." section.
2. Enter the content that will be hidden from view, until expanded by clicking the plus sign symbol, in the "Enter toggled content here." section.
3. WYSIWYG tools and other Snippets can be used within a Toggle Section Snippet.
4. Save your changes.
5. Click Publish. 

Back to top

Content - Two-Column

Like its name, Content - Two-Column Snippets are used to create two columns of content side-by-side on a web page. 

After you've inserted a Content - Two-Column Snippet:

1. Enter the text you want to appear in each column.
2. WYSIWYG tools and other Snippets can be used within the columns.
3. Save your changes.
4. Click Publish. 

Back to top