Snippets

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.

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  button, as seen in the example below.

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  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 CalLutheran.edu website with your edits, click the  button and  button. Don't forget to view the published page on desktop AND mobile to ensure that everything is neat and tidy.