Add, edit, and delete a component

In the Experience Editor, you can use the toolbox that comes with predefined components to help you design your pages. You can construct your pages by dragging components from the toolbox to the page.

Add a component

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

To add a component to the page:

  1. Open the toolbox and drag the component to the placeholder that you want to add the component to. While dragging, the placeholder turns blue.

    Drag the component to the page

    Alternatively, you can click the Component button on the HOME tab to open the Select a rendering dialog box.

    Note

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

  2. Drop the component on the page. Depending on the type of component, you may need to select a content item in the Select The Associated Content dialog box.

  3. Once your component is on the page, you can move it to a different placeholder without returning to the toolbox.

  4. To move the component to a different placeholder, click Move on the floating toolbar, and then click Move to here in the placeholder you want to move the component to.

Edit a component

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

To edit a component:

  1. Click the component that you want to edit. If the component is a text, you can edit it directly on the page.

  2. To edit the component properties, in the floating toolbar, do one of the following:

    • Click More > Edit component properties .

    • Click Edit style and behavior of the component .

  3. In the Control properties dialog, specify the component behavior or styles that you want. The available options depend on the type of component. For all components, 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 component to disappear or may lead to other unexpected behavior.

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

  5. Click Publish to publish the data source assigned to the component. It will not publish the site.

Remove a component

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

To remove a component from a page:

  • Click the component that you want to delete and in the floating toolbar, click Remove.

    Note

    If you have created a complex page layout with lots of column and/or row splitters and you try to delete nested components, 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.

Do you have some feedback for us?

If you have suggestions for improving this article,