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.
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.
- 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.
|< Previous Article|