Skip to main content
  • Updated

Using Snippets

Snippets are an easy way to create components that can be used across your site. Insert snippets into any WYSIWYG editor and then update the text and code to fit the page. They are most useful as a jumping off point, meaning they are no longer connected to the saved snippet once added to a WYSIWYG.

For example, you can use snippets for elements in articles that you need to use often, but may be slightly different for each article, like Notes, Tips, and Warnings. Using Snippets, you can easily add the HTML for your Note to the article and then update what the Note is communicating. 

Snippets_AddingToTextBlockPage_GIF.gif

Included in this article:

Creating a Snippet

  1. Go to Settings > Content > Snippets. 
  2. Click Add Snippet.

    Tip

    For easy management, consider creating code classes to reference in Snippets. That way you can update the styling in one place (site CSS) and have it affect your Snippets that reference those classes.

  3. Add a Label. The Label is just for your reference on the Snippet management page.
  4. Add the Body of the Snippet. This is the actual Snippet you will have access to from any WYSIWYG editor in your site.

    Tip

    Common places to use Snippets:

    • Content Authoring - Any text block on content pages
    • Designing Layouts and Pages - Any WYSIWYG editor in widgets, like the Single Column widget for example
  5. Click Save.
Snippets_CreatingSnippet_GIF.gif

 

Editing Snippets

You can edit, duplicate, or delete existing snippets for easy management. 

Note

Snippets do not have any connection to the original - it is simply a way to add a jumping off point to WYSIWYG editors. This means that updates to an existing Snippet do not flow through to where you've used the Snippet.

However, if Snippets are referencing CSS Classes and you update the CSS Class from site CSS, that change will reflect across your Snippets.

  1. Go to Settings > Content > Snippets. 
  2. Click the Pencil Icon to edit a Snippet.
    • Make sure to Save any changes.
  3. Click the Copy Icon to duplicate a Snippet.
    • The Label field will add "Copy" to the end of the original value by default. You can always update the Label to whatever you desire. Make sure to Save your new Snippet.
  4. Click the Trash Icon to delete a Snippet.
Snippets_EditCopyDelete_AdminView.png

 

Adding Snippets to Content

Snippets can be added anywhere there is a WYSIWYG editor. 

  1. Go to Content > Manage Content > Click on Content Title.
  2. Once you're in a course outline or editing an article/video, locate the Snippets icon in the WYSIWYG where you'd like to place a Snippet.
    Snippets_Icon_article.png
  3. Click the Snippets Icon and then click Insert next to the Snippet you want to place in the WYSIWYG. 
  4. Update the Snippet as needed - text or HTML code can be modified here to create exactly what you need for this specific content.
  5. Make sure to Save whatever you're working on. 
Snippets_AddingToTextBlockPage_GIF.gif

 

Adding Snippets to Layouts and Pages

  1. Go to Design > Layouts > Actions > Edit.
    • You can choose any layout you wish to update.

    Tip

    Any widget with a WYSIWYG available can use Snippets. A good example is the Single Column widget.

  2. Once you're designing a layout, locate the Snippets icon in the WYSIWYG where you'd like to place a Snippet.
    Snippets_Icon_article.png
  3. Click the Snippets Icon and then click Insert next to the Snippet you want to place in the WYSIWYG. 
  4. Update the Snippet as needed - text or HTML code can be modified here to create exactly what you need for this specific content.
  5. Make sure to Save whatever you're working on. 

Related articles