SXA components in Horizon

Abstract

Overview of the settings available for SXA components in the Horizon editor.

In the Sitecore Experience Accelerator (SXA), you can use SXA components in the Horizon editor. When you add an SXA component to your page in Horizon, the right-hand pane displays the extra settings Grid layout, Styling, and Advanced styling. The settings and configurations that you see in the right-hand pane depend on how your developer configured the Horizon experience for SXA.

For some components, the Assign content item dialog appears when you drop the component on the page. In this dialog, you must either assign an existing or create a new content item for the component.

Tip

Some SXA components have fields where you can enter information. When you change the value of an input field, Horizon saves automatically after 1.5 seconds, or when you press Return on your keyboard. If your input was not saved and you remove a component from the Canvas, the change is lost. We recommend that you always wait for the automatic save or press Return before you switch between components.

The grid layout settings affect the sizing and positioning of the component inside the chosen placeholder on the page. The settings that appear under this header depend on which grid the site uses. The most common one is Size, where you can choose to do one of the following:

  • Manually configure the number of columns that the component can have as its width.

  • Select Auto fit to content, which makes the component as small as possible, depending on the content inside of it.

  • Select Auto fill rows and columns, which automatically makes the component as wide as possible, depending on how many other components are placed in the same area.

Note

If you manually configure the number of columns for a component, we recommend that you check the layout for every device size that you use. If you do not configure for larger sizes they use the configuration from the closest smaller size that you configured for. For example, an unconfigured desktop uses the configuration from a tablet, if the size is specified on the tablet. If the tablet is unconfigured, the desktop uses the configuration for mobile instead.

The styling section contains the most common settings that affect the look and feel of the content in the component itself. For example, this is where you can configure spacing and alignment.

This section contains styling options specific to the component that further affect the rendering of the component itself.

Image selector

Some SXA components let you use images. For these components, an image selector appears under Advanced styling. For example, for the Container component, the Background image selector appears. For every type of image selector, you have the following options:

  • To add a new image, click Add. When you select an image, Horizon applies the changes to your layout.

  • To delete the image from your layout, click Clear.

Some components have configurable options that fall outside of the standard headers Grid layout, Styling, and Advanced styling. If you drag one of these components into the Horizon editor, a new section appears in the right-hand panel.

New content item

Some SXA components, for example composites, have complex data sources. For these components, the section New content item appears. This section lists the data source items for the component. Here, you can Add new, Rename, Move, and Delete the data sources for the component.