Configure a component
This topic explains how to configure components previously built with Content Editor. To learn about components built with Components instead, visit the Components documentation.
In the page builder Editor mode, on the Components tab, you can access components and use them as building blocks for your page's layout. These components have multiple origins, and this section describes how you can configure the component that were built in the Content Editor, using the settings available in the right-hand pane of the page builder's editor when you select the component.
For the components prototyped in Components and registered to be available in the Page builder, learn how to configure and style them in the Component builder documentation.
For the components built in Forms, learn about configuring them in the Forms documentation.
If your organization has implemented custom fields via a Marketplace app, the documentation for these fields is provided by the app’s developer and can usually be accessed directly through the Marketplace interface.
Most code components are designed for reusability and pull data from data source items or associated content. The content they display is not bound to the page on which they appear but is stored in data source items. When you add a component to a page, you can select an existing data source or create a new data source item. This gives you full control over the content architecture, naming conventions, and the level of reusability that you want.
To learn more about assigning content to a component, see Adding content to a page.
In addition to assign a data source to a component, you can use the Design tab to change the component's look by configuring its layout and styling, or by selecting a different variant or rendering of the component.
To learn more about components and their variants, see Working with code components.
To configure the design of a component:
-
In the page builder, open the relevant page and click on the component you want to edit.
-
In the right-hand pane, click on Design. At the top of the panel, you can select the variant you want to use for the components. Variants make a component appear differently or make it show different content.
-
You can expand the Layout, Styling and Advanced styling sections to access the configuration options.