Components

← Return to the Drupal User Guide

A component is a reusable content module that can be added to a webpage. Components provide functionality beyond the standard body content, such as feature blocks, galleries, accordions, call-to-actions, and other specialized content. Each component has its own settings and displays differently depending on the component type.

4.1 Understanding Content Zones

Drupal page templates contain three content zones where components can be placed:

• 3/4 Width Page Content — Reserved for components. Components added to this zone appear below the body content and to the right of the navigation menu. This zone is the same width as the body content above it.
• Full Width Page Content — Reserved for components. Components added here appear below the body content, navigation, and 3/4 Width Page Content. They span the full width of the page.
• Shared Site Content — Reserved for components managed through Site Settings. Components placed in this zone appear on every page of the website, below all other content zones.

Figure: Drupal pages contain three content zones where components can be added.

4.2 Adding Components

To add a component to a page, first navigate to the page and click Edit Page. Scroll below the body content to locate the 3/4 Width Page Content and Full Width Page Content zones.

Figure: The component zones appear below the body content in the page editor.

If a component already exists in one of the zones, it will appear there. In the example above, there are no components in the 3/4 Width Page Content zone and one Feature Link List component in the Full Width Page Content zone.

4.2.1 Adding a New Component

To add a component to a content zone, click the Add Component drop-down menu. A list of available component types will appear. Select the component you wish to add.

Tip

Some components are designed to work only in the Full Width Page Content zone and therefore only appear in that menu.

Figure: The available components vary by content zone.

Figure: Some components are available only in the Full Width Page Content zone.

4.2.2 Create the Component

After selecting a component—for example, Add Feature in the Full Width Page Content zone—a new blank component will be added to the page. Complete the required fields and click Save.

Tip

Each component requires different information. Refer to the documentation for each component type for field-specific instructions.

Figure: A new component is added to the page after it is selected.

Figure: Complete the required fields before saving the component.

4.3 Arranging Components

You can change the order of components by clicking and dragging the six-dot handle to the desired position within the content zone.

Tip

Components can only be reordered within their current content zone. They cannot be dragged from one content zone to another.

Figure: Drag the six-dot handle to change the order of components within a content zone.

4.4 Editing an Existing Component

Once a component has been added to a page, it can be edited in one of two ways:

1. Click the Edit button on the component.

Figure: Use the Edit button to modify an existing component.

1. Use the contextual editing icons that appear in the upper-right corner of each component when contextual links are enabled.

Figure: Contextual editing provides quick access to component editing directly from the page.

4.5 Removing Components

To remove a component from a page, click the Trash icon associated with that component.

Figure: Select the Trash button to remove a component from the page.