Adding a component to a page

Adding a component to a page

We specify regions of the page where you can add different types of components. The regions where you can add components are shown by an ‘+Add here’ button.

In the Experience Editor, click on the ‘component’ icon in the top ribbon. Multiple ‘+Add here’ buttons should appear on the page.

Screenshot the experience editor with the '+Add here' buttons visible for adding components. The 'add a new component' button in the ribbon is highlighted in the top left.

Buttons may appear stacked on each other, so make sure you click the correct one.

Some components are available in certain positions, depending if you click an outer or inner ‘+Add here’ button. Selecting the outer button will allow you to add a new component. Selecting the inner button allows you to add content items to a component, for example, a CTA item to a themed navigation block.  

Click the ‘+Add here’ button where you want to add a component. This opens the ‘select a rendering’ dialogue box. You can choose from the components you are able to add to the region. Each component should have an icon to help identify it. Click on the component that you wish to add and then press ‘select.’

The select a rendering' dialogue box containing the components options.

The ‘select the associated content' dialogue will open to link the content that populates your component.

Datasource locations

When adding a component to a page you will be offered the chance to choose a location to save it to or pick from in the content tree. Usually this is the parent datasource folder for the page you are currently working on (a local datasource item) and so you’ll find that this is the default offered.

However you also have the ability to select an alternative location if you’re creating an item that is going to be reused across a number of pages, or wanting to select an item that already exists in a global/regional folder outside of the page you’re working on.

Local datasource items

The primary method of saving datasource items, these are used when looking to create or use a component that will only sit on the current page you are working on:

  • On the 'Select the Associated Content' window choose either ‘select existing content’ or ‘create new content’ from the left menu
  • In the right hand window select the datasource folder located at the top
Choosing a local datasource folder for a component
  • Name the item if required
  • Press OK

Global/Regional datasource items

When looking to create or use a component that will be reused across multiple pages:

  • On the 'Select the Associated Content' window choose either ‘select existing content’ or ‘create new content’ from the left menu
  • In the right hand window navigate to the datasource folder you wish to save the component within via the ‘Main site’ icon and content tree.*

*You will only be able to browse and save within sections of the website that your user account has permissions to view.

Choosing a global datasource folder
  • Press OK
  • The component will appear on your page.

As with pages themselves when choosing to create a global/regional component keep in mind other users and make sure it’s given a suitable name and location to avoid any confusion as to its purpose.

Required fields

Each component has required fields that need populating. To do this, click on the component and a toolbar will appear on the left which will allow you to edit it.

The toolbar for editing component properties

For guidance on adding specific components and their required field, visit our components section.