Similar to assets and components but more interactive in nature, snippets are pre-made content structures that can enhance plain text. Examples include clickable accordions, tables of information, columns, and tabs — and all are responsive to different screen sizes.

Snippets are particularly helpful to condense information, make information more engaging, or vary the way that information is presented to break up long paragraphs. If you think your content may be enhanced from one or more of these benefits, consider adding a snippet to your page.

 Instructional Videos

Watch this 6-minute tutorial for an initial overview of snippets (right) and tutorials on specific snippets (beneath), or scroll below to see complete written instructions.

*Note: Click Full screen  icon for best view.

How to Add a Snippet

1. Choose the Snippet

While you are Editing a Page, click the Insert Snippet  icon in the editing toolbar. On the left side of the Choose Snippet window, you can choose to scroll through the list of snippets, filter by category, or filter by name. 

There are over 20 snippets to choose from, but here is an overview of some of the most popular snippets:

  • Accordion: Clickable structure to expand one row of content (useful when there are many accordions listed but only a few of them pertain to each user).
  • Blockquote with Circle Crop Image: Columns-based structure with image and text (useful for testimonials by alumni who have a photo).
  • Blockquote with Citation: Full-width structure with text (useful for testimonials by alumni who don't have a photo).
  • Columns (various options): Columns-based structure with 2-4 columns of varying widths (useful for side-by-side content that condenses well for mobile devices).
  • Data Table: Table structure with rows and columns (useful for translating spreadsheets, PDFs, and schedules into web content); name each column to improve accessibility for people with disabilities. To display full-width, right click the table and choose Table Properties to enter a Width of 100%.
  • Feature Columns (3): Columns-based structure of 2-4 columns with image, heading, text, and button (useful for prominent layouts — see the Landing Pages article for details).
  • Image - Circle Crop (Align Left/Align Right): Image-based structure with no added text (useful for circular image crops).
  • Image with Caption (Align Left/Align Right): Image-based structure with caption (useful for descriptions of images).
  • Quick Facts Row: Columns-based structure of 2-6 columns with small space for content (useful for brief statistics or facts).
  • Tabs: Clickable structure of 2-4 panels that show/hide content (useful for condensing related groupings of content).

2. Insert the Snippet

Once you have decided which snippet you want to select, click the snippet and then click the INSERT button, as seen in the example below.

Choose Snippet

3. Edit the Snippet

Because most snippets are editable in the editing interface, you can enter any required information into the snippet directly. Take some time to enter content as prompted — this varies for each snippet.

4. Preview the Snippet

To preview the snippet, click the SAVE button in the top right corner of the screen. This will switch the editing interface to Preview mode to display an accurate view of the snippet. You can continue using this workflow by toggling between Edit and Preview mode until you are satisfied with the snippet.

5. Save and Publish

To update the website with your edits, click the SAVE button and PUBLISH button. Don't forget to view the published page on desktop AND mobile to ensure that everything is neat and tidy.

< Previous Article