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 of events from Arts & Events calendar or The HUB.
- 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 
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.
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 
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 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 |