Overview

Components are pieces that enable users to create page layouts. We have a collection of curated components that fall into one of four categories, scaffolding components, structural components, full width components, and internal components.

Most components consist of two parts, a component data source which is an item that can be added and is visible in the tree view of the Sitecore Content Editor. A component data source stores textual content and imagery that will be displayed by a component rendering. A component rendering is an element that can be added to a page via placeholders using the Sitecore Experience Editor and connected to a data source.

Component types

Component Data Sources

Component data sources are Sitecore items that are visible in the Content Editor and are usually found in a page's _Content folder or in a shared location such as the Global Shared Content folder. A data source consists of different fields that store data such as basic text, rich text, html, images and links.

sitecore data source image

Component Rendering and Placeholders

A component rendering supplies the visual layout of the data from a data source item. Component renderings can be added to a page via the Sitecore Experience Editor and placed in a supported placeholder.

A placeholder is a designated section of a page where allowed component renderings can be added. Multiple allowed component renderings can be added to a single placeholder. In the Sitecore Experience Editor, an empty placeholder is denoted by a dashed light blue border and a gray checkered background.

Below is an example of a single column full width frame placeholder followed by a 2 column frame with 50% width placeholders.

sitecore placeholder example
placeholder example

A component rendering can be added to a placeholder by clicking the Component button located under the Home tab of the Sitecore Experience Editor ribbon or by clicking within an empty placeholder.

A button labeled Add here will display and you can hover your mouse over the Add here button to confirm which placeholder that button will add a component rendering to.

Clicking the Add Here button will open the Allowed Renderings dialog for the selected placeholder. You can then select a component rendering from this dialog to add to the page.

sitecore screens

Component Rendering Properties

All components have configurable properties that allow a user to adjust the component in some way. These properties will vary between components. Follow the steps below to access a components properties.

  1. Select the component that you are editing to load then component control bar.
  2. On the component control bar, click More & then click Edit component properties.
  3. This will open the Control Properties dialog. This dialog will contain all the configurable properties of the component that you are editing.