Text Pages

Snippets

Snippets are blocks of content created and maintained by UCM to allow the use of special design elements on a Text or Brand page. To insert a Snippet, click the Puzzle icon in the WYSIWYG Editor, choose the Snippet you want to use, and then click Insert.

1. Buttons
2. Images
3. Tables
4. Toggles
5. Two-Column Text

Buttons

Button Link

Example: Button Link

Button Link - Row

After you've inserted one of the Button Snippets:

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 one of the Image Snippets:

1. Navigate to the image you'd like to add to the page.
2. Click Insert.
3. Save your changes.
4. Click Publish. 

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 one of the Image with Caption Snippets:

1. Navigate to the image you'd like to add to the page.
2. Click Insert.
3. Add the caption in the "Enter Caption here." section. 
4. Save your changes.
5. Click Publish. 

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 the Image Grid Snippet:

1. In the "Number of Images in a Row" section, choose two, three, or four.
2. Navigate to the image you'd like to add to the first column.
3. Click Insert.
4. Repeat until you've added all of your images.

5. 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.

   

   
   

6. You can also use the pop-up toolbar and click on the approporate icon to execute the task, use the pop-up toolbar and click on the approporate icon to execute the task.

   

7. Save your changes.
8. Click Publish.

Small Image - Left

 

 

Small Image - Left with Caption

 

 

 

 

 

 

 

 

Small Image - Right

 

 

 

Small Image - Right with Caption

 

 

 

 

 

 

Medium Image - Left

 

 

 

 

 

 

Medium Image - Left with Caption

 

 

 

 

 

 

 

Medium Image - Right

 

 

 

 

 

 

Medium Image - Right with Caption

Large Image

Large Image with Caption

Image Grid

• Display two, three, or four images.

Back to top

Tables

Please note: Tables should be used for text content only. 

Table Snippets include:

Bordered and Striped Table

Example: Bordered and Striped Table

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

Bordered Table

Example: Bordered Table

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

Default Table

Example: Default Table

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 approporate 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

Toggles 

Toggle 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.

Example: Toggle

Toggle Section Content

After you've inserted a Toggle Snippet:

1. Enter the text you want to appear on the Toggle 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 text here." section.
3. WYSIWYG tools and other Snippets can be used within a Toggle Snippet.
4. Save your changes.
5. Click Publish. 

Back to top

Two-Column Text

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

After you've inserted a Two-Column Text 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