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.

    Right click


  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.

    Table functions

  7. Save your changes.
  8. Click Publish.

Small Image - Left

Manatee

 

 



Small Image - Left with Caption

Manatee

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

 

 

 

 

 

 

 

 

Small Image - Right

Manatee

 

 

 

Small Image - Right with Caption

Manatee

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

 

 

 

 


 

 


Medium Image - Left

Medium Snippet Left with Caption

 

 

 

 

 

 

Medium Image - Left with Caption

Medium Snippet Left with Caption

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

 

 

 

 

 

 

 

Medium Image - Right

Medium Image Right

 

 

 

 

 

 

Medium Image - Right with Caption

Medium Image Right with Caption

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

Large Image

Large Image

Large Image with Caption

Large Image with Caption

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

Image Grid

  • Display two, three, or four images.
Image Grid

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

Image Grid

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

Image Grid

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

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.

    Right click functions


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

    Table functions


  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. 

Manatee

Two-Column Text Snippets can include images.

You can also use WYSIWYG Editor functionality within Two-Column Snippets.

Like bulleted lists:

  • Thing 1
  • Thing 2
  • Thing 3
  • Thing 4

And different style elements.

Back to top