Sitecore Experience Accelerator

Add, edit, and delete a rendering

Abstract

SXA comes with a library of predefined renderings to make page design easy.

In the Experience Editor, you can use the Toolbox that comes with predefined renderings to make page design easy. You can construct your pages by dragging renderings from the Toolbox to the page.

This topic outlines how to:

In the Experience Editor, you can add a rendering to the page by dragging it from the Toolbox.

To add a rendering to the page:

  1. Open the Toolbox and find the relevant rendering. When you click and start dragging a rendering, the placeholders where you can drop the rendering light up in blue.

    DE470D12D5D346B68DAE9C147E018C24.png

    Alternatively, you can use the touch panel to drag renderings to the page with your finger or you can click the Rendering icon, on the HOME tab.

    Note

    If you are unable to drag a certain rendering to the page, this may be caused by placeholder restrictions.

  2. Click to drop the rendering on the page.

  3. Depending on the rendering you choose, you may need to select a content item. In the Select The Associated Content dialog box, select the content item you want and then click OK.

    Once your rendering is on the page, you can move it to a different placeholder without returning to the toolbox. Click Move 9A39A7031726467584F9937A171F4E64.png on the floating toolbar and move the rendering to a different placeholder.

    Sxa-move-to-here.PNG

There are certain renderings that are editable and others that you cannot edit. If you can edit a rendering, a floating toolbar appears.

To edit a rendering:

  1. Click the rendering that you want to edit and in the floating toolbar, click Edit component propertiesC2B8306D7F6C45C4AD7F67CBAE4160DE.png. If the rendering is a text, you can edit it directly on the page. You can also click the edit style icon 099C96872F994CD49E2EBBA03B8127AF.pngfrom the floating toolbar.

  2. In the Control properties dialog, specify the rendering behavior and/or styles that you want. The available options depend on the type of rendering. For all renderings, you can change the style settings. For example, you can change the paragraph style of the title or change the dimensions of the preview icon.

    Note

    Do not change the Placeholder and Data Source properties. Changing these properties can cause the rendering to disappear or may lead to other unexpected behavior.

  3. To change the style, in the Control properties dialog go to the Styling section, select the style you want.

  4. Click Publish to publish the data source assigned to the rendering. It will not publish the site.

Occasionally, you might want to remove a rendering from a page. For example, because a promotion offer is no longer valid.

To delete a rendering from a page:

  • Click the rendering that you want to delete and in the floating toolbar, click 5B2701EDEF084E7FB4C11CD3B9D5E3AA.pngRemove.

    Note

    If you have created a complex page layout with lots of column and/or row splitters and you try to delete nested renderings, you may receive a message asking which rendering you want to remove. The section that will be removed after clicking Remove is highlighted. If you click OK, all of the listed components will be removed.