353 Using Components for Formatted Content

What Are Components?

Components are a feature of OU Campus that allows for inserting and editing content that is easy to maintain, and which is automatically formatted to a certain design. Components allow for content of site elements to be edited separately from the design of the element, via form fields, which keeps the formatting in tact. They are especially useful for adding site elements with more complex styling than can be easily maintained in the editor.

Web Development Services builds and maintains a collection of components that can be added to pages. Component types include content cards, picture cards, event listings, and directory cards. Many components have multiple design options that can easily be chosen via a drop-down when creating or editing the component.

The underlying structure of each type of component is built by Web Development Services. When a component is added to a page, that underlying structure is populated with content specific to that page, and becomes unique to that page. However, when changes are made to the underlying structure of a component, those changes will be pushed to any component of that type across the site. In that case, the content of the component stays the same, while the underlying structure may change.


Adding Components to Pages

Multiple components may be added to a single page. To add a component to a page:

  1. Place the cursor where you would like the component to appear. Click on the "Insert Component" icon from the editor toolbar.
    Screenshot showing the "Insert Component" icon selected in the OU Campus editor.
  2. From the window that appears, choose the component type that you would like to insert. To see the component options, visit the Elements Library.
    Screenshot showing dialog box with list of available component.

  3. After choosing the component type, a window will appear for entering the content and options for that component. Many component types have a drop-down list of different available styles. If the component you have chosen has this drop-down, choose the option style you would like to use. You may change the style later. To see different styles of components, visit the Elements Library.
    Screenshot showing drop-down list of style options.
  4. Fill out the remaining fields with content and options for the component.
    Screenshot showing fields with information about the component.
  5. Save the component to add it to the page.
  6. After inserting the component, the editor will give a visual representation of many (but not all) component types.
    Screenshot showing the component in the editor.
  7. To edit the component, click on the component, then click on the pencil icon that appears underneath the component.
    Screenshot showing icons to edit or delete the component.
  8. To delete a component, click on the component, then click on the "X" icon that appears underneath the component.
  9. Save and publish your page when your changes are complete.