Reusable Content: Assets, Snippets & Components

You don't have to build everything from scratch. The CMS offers three types of reusable tools to help you build complex layouts and manage repeated content.

The Definitions

• Snippets (Templates): Think of this as a "Table Template" you copy onto your page. You fill it in (like a form) to create a layout.

  • Behavior: Once added, it is unique to that page. Changing a snippet on Page A does not affect Page B.

• Assets (Global Blocks): Think of this as a "Live Broadcast." It is a single block of content (like a Contact Info block) that lives in one place but appears on many pages.

  • Behavior: If you update the Asset file, it automatically updates every page where that asset is used.

Using Snippets

Snippets are the best way to create complex layouts like accordions or columns without knowing code.

How to Add a Snippet

1. Place your cursor where you want the element.

2. Click the Insert Snippet icon in the toolbar (Black Puzzle Piece).

3. Select the snippet you want from the list.

4. Fill it in: The snippet will appear as a table with labels. Type your content into the table cells.

5. Save: Once you save, the system transforms the table into the final styled layout.

Common Snippets

• Accordion: Condenses content into expandable rows.

  • Best for: FAQs (where users only need to read one or two specific answers).

• Tabs: Organizes content into clickable tabs.

  • Best for: Separating information that doesn't need to be read sequentially (e.g., "Freshman Instructions" vs. "Transfer Instructions").

• Content Separation Line: A thick gray line used to visually break up sections of a page. Matches APSU branding.

• Call to Action (CTA) Box: Draws attention to a specific action. Includes a title, text, button, and optional image.

  • Image Tip: Works best with a 900x900 pixel square image.

• Tables (Border vs. Data):

  • Table with Border: Standard table. Use for general data.

  • Data Table: Recommended. This is coded to be mobile-friendly. On a phone, it will stack the rows instead of squishing them side-by-side. (If you only need 2-3 columns, use this).

Important Image Rule for Snippets

Snippets cannot resize your images for you. You must resize/crop your image offline before uploading it to the CMS.

• Example: For the Faculty Profile Snippet, your headshot should be cropped to a 200x200 square.

• Why? If you upload a 200x200 image and next to it a 200x300 image, the website will display one as a perfect circle and the other as a distorted oval.

Using Assets

Assets are ideal for content that repeats across multiple pages, such as a Department Contact Block, a list of Resource Links, or a specific Apply Now button.

How to Identify an Asset on a Page

You cannot edit an Asset directly on the webpage. When you open the edit panel, you will see a gray bar or text string that says: Asset [Name-of-Asset] cannot be shown in the WYSIWYG.

Make a note of that Asset Name. You will need it to find the original file.

How to Edit an Asset

1. Navigate: Go to the Content dropdown (top of screen) and select Assets.

2. Search: Find the asset that matches the name you saw on your page.

3. Check Out: Click the name to open it, then click the Lightbulb to check it out (just like a page).

4. Edit: Make your changes in the editor.

5. Submit: Save your work and click Submit.

   • Note: All Asset updates must be approved by PR & Marketing before they go live.

   • Message: In the submission box, please describe exactly what you changed (e.g., "Updated phone number in Contact Block").

Using Components

Components are complex, pre-coded elements designed to solve specific problems.

• The Nucleus Icon: Insert them using the Nucleus Icon in the toolbar.

• How they work: They are very rigid. You fill out a form, and the code handles the rest. You have very little room to customize the look.

• Editing: Once added, you will see a Blue Bar on your page.

  • Click the Pencil to edit the form content.

  • Click the X to remove the component.