Components Overview - v3

Owned by Alexandre Boyle
Last updated: Mar 16, 2023 by Gregory Moore
5 min read

 

Small but powerful, components are the essential building blocks that give you control over your website’s content. This documentation covers the newest v3 components which have been designed to meet USF standards and best practices on both desktop and mobile devices.

A Consistent Interface

While each component is designed with unique features and options, they all share a consistent interface to make them easier to understand. Below is a breakdown of that simplicity:

  1. Control Bar - Displays the component name and provides a “safe click” area for selecting the component.

  2. Options Gear - (Optional depending on component) Reveals and hides the component options to adjust component-specific features. Options will change depending on the component.

  3. Sorting Arrows - (Optional depending on component) Opens the Sort Content Items window that allows you to rearrange content sections within the component.

  4. Component Options - Component-specific options for making changes across the entire component. Allows you to see your changes updated live on the page.

  5. Edit Pencil - Opens the editing window where you enter content into the component.

  6. Delete - Permanently removes a section of content from within the component.

  7. Preview - Live preview of content entered into the component. Many components come with default content to help you get started.

  8. Add Section - (Optional depending on component) Adds a new section of content to the component.

Interface elements also share a consistent color scheme to show their function:

  • yellow = Edit

  • red = Delete

  • Green = Add

Working with Components on a Page

As your content changes you will need to add, move, and delete components in your pages. This work is all done within placeholders.

Below are the most common ways of working with components within placeholders. Click their title to expand the instructions.

Adding a Component

Empty placeholders can only be seen in edit mode and are labeled with +Select Component.

  1. Click on the empty placeholder. A button labeled Add here will appear in the upper left corner of the placeholder.

  2. Click the Add here button.

    A window titled Select a Rendering will appear with a grid of components for you to select from.

  3. Click on the component you want to add and then click the blue button in the lower right of the window titled Select.
    Your web browser will automatically refresh the page and the new component rendering will be in the placeholder you selected.

  4. Click the green + Add Component button.

  5. The component you selected has now been added and automatically saved to the page.

When all of the placeholders on the page already have components, you will not see the large, empty + Select Component placeholder. You can still add components to the existing placeholders with the following steps:

  1. At the top of the page, click on the Home tab .

  2. Click the button labeled Component.

  3. Multiple buttons labeled Add here will appear everywhere on the page where it is possible for you to add a new component. Scroll to the place you want to add the new component and click the Add here button.

  4. A window titled Select a Rendering will appear with a grid of components for you to select from. Click on the component you want to add and then click the blue button in the lower right of the window titled Select.

  5. Your web browser will automatically refresh the page and the new component rendering will be in the placeholder you selected.

  6. Click the green + Add Component button.

  7. The component you selected has now been added and automatically saved to the page.

Moving a Component

Components can be reordered within the same placeholder or moved to other placeholders on the page.

  1. Select the component you want to move by clicking on its control bar. When you have selected a component, Sitecore will pop up a small, rectangular window with the component’s name and buttons to control it.

  2. Click the Move component button. (page with arrows inside icon)

  3. Scroll to the new location you want to move your component to and click the Move to here button.

  4. You should see the component has moved into the placeholder you specified.

  5. Save the page to keep your changes.

Deleting a Component

Components can be permanently deleted from

  1. Click on the Control Bar of an existing component and Sitecore will pop up a small, rectangular window with the component’s name and control buttons.

  2. Click the Delete button. (red X icon)

  3. The component will disappear from the page.

  4. Save the page to make the deletion permanent.

 

Was this helpful? We welcome feedback for this Sitecore documentation: Take the User Survey