Components are a form-based type of reusable content that simplify entering information into complex design elements. When a component is placed on a page, it acts as a form for you to enter information into. Then that information is placed in the source code of the component and added to the page.
Like MultiEdit, components restrict you to entering specific kinds of content, and the formatting is done "behind the scenes." This makes it easier for you to change the information on design elements with many moving parts, such as slide shows, info cards, and more.
Components have two aspects: the form elements, similar to form assets; and the source code, which provides a framework for the information entered into the form.
Once created, a component is launched, making it available for use on pages. Components are like assets in that changing the original item affects the pages it is placed on, but also like snippets in that they allow for on-page editing.
Components can be inserted onto pages or other files with editable regions. To add a component to a page:
- In an open editable region, click "Insert Component" () in the toolbar.
- Choose the component you want, and click Insert.
- Fill out the component fields. Anything not marked optional is required, and must be filled out for the component to be placed on the page.
- Click Save. The component is entered into the page with your answers.
- Continue editing the page, or save and publish for your changes to appear on the live site.
Depending on the component settings, you either see the rendered component content, or it displays as a blue placeholder.
Click on a component to either edit the component answers (pencil icon) or delete it from the page ("x" icon).
Components can neither be edited nor added to pages while using the Classic Editor.
When a component is inserted into the page, the source code shows the component ID, its version number, and the form content. The data entered into the component is stored in the page source code, not the component code.
The same component can be added to a page multiple times, with unique form content for each instance.
Content > Components shows a list of all components in the account. Components can be filtered by name and sorted by name, last modified and launch date. Only Level 10 users can access Content > Components.
Hover over a component for menu options:
- Preview: Preview, Versions, Log
- Edit*: Form Elements, Source, Component Settings, Access Settings
- File: Rename, View Dependents, Copy, Disable, Delete
*Only available if the component is checked-out.
Renaming a component is a simple action. Unlike a file, a component has no published URL and pages link to it using its component tag, so renaming a component does not affect any other files.
The View Dependents box shows all pages that a component has been placed on, including which sites the pages are on. Click on the page name to navigate to it.
Copying a component creates a duplicate of it. Edit the component name so it is not the same as the original component, and choose the target site (that it will be locked to should you choose so).
Disabling a component makes it unavailable to users placing a component on pages but does not remove it from any pages it is currently on. Enabling a component makes it available to place on pages. Unlike a launch, this does not update the component content.
Deleting a component removes it from all pages and permanently deletes it from OU Campus, and cannot be undone. Any pages affected by this are listed in the Broken Pages report.
If you revert a page with a component added to it, the content entered into the component is reverted as well.
Previewing a component shows you the form elements and the source code side-by-side, but does not add any content or styling. Preview a component via either:
- In Content > Components, hover over the component and select Preview > Preview.
- While viewing a component, select "Preview" from the top toolbar.
The component log shows each time a component is saved, launched, or renamed, and by which user. See the component log via either:
- In Content > Components, hover over the component and select Preview > Log.
- While viewing a component, select "Properties" from the top toolbar and then "Log" from the left menu.