Similar in purpose to assets and snippets but more structured in format, components make certain types of content easy to insert and work with. Examples include audio players, displays of social media icons, feeds of news and events from other areas of the website, and department staff profiles.

Though the list of components is relatively short compared with other advanced features in Omni CMS, becoming familiar with the available options can help you know how and when to utilize each one. 

How to Add a Component

1. Choose the Component

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

Here is an overview of some of the most popular components to choose from:

  • Audio Player: MP3 file player for an uploaded file.
  • Department Staff Profile: Staff listing with bio in plain text (useful for short bios — see Staff Profiles article for details).
  • Department Staff Profile (with Accordion): Staff listing with bio in accordion (useful for long bios — see Staff Profiles article for details).
  • Events Feed: Customizable feed from Calendar of Events or The HUB.
  • News Feed (WordPress): Customizable feed from News and Features platform (for RSS Feed URL, enter the full URL to the topic or tag and add "/feed/" to the end of the URL, in the format of: "") 
  • Social Media Icons: Display of social icons for Facebook, Twitter, Instagram, LinkedIn, and Youtube.

2. Insert the Component

Once you have chosen a component, click the component and then click the INSERT button, as seen in the example below. 

3. Edit the Component

In most instances, inserting a component will open an Edit Component window. This window varies for each individual component, but includes a range of fields with requested information. 

Enter the information for the component and then click the  button, as seen in the example below.

Edit Component - Events Feed

4. Preview the Component

Because most components are compiled by source code, Omni CMS usually does not load a preview of the component in the editing interface; rather, it simply shows that it has been inserted in a blue oval.

To preview the component, 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 component. You can continue using this workflow by toggling between Edit and Preview mode until you are satisfied with the component.

(Note that for some components, the page may need to be published in order to properly view.)

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