#  Adding a component 

 



 ##  

  expand\_more  

 
  

 

## How to add a component

### Step 1: Choose a component

1. From the page edit view, click on **Choose component** in the region where you would like to add or manage content (see [Page Regions](/resource/page-regions "Page Regions") for details about page regions).

   ![Screenshot of choose component control](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-03/Choose%20component_0.png?itok=eK6Ffxfz) 

 

Select the Choose component button in the region where you would like to add a component.2. Choose a component from the list that appears (see [Components Overview](/components "Components") for details about components).

   ![Screenshot of portion of Choose a component dialog with filter items field and four component cards](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-03/Choose%20a%20component%20dialog_1.png?itok=pZfuWCtP) 

 

Select a component from the components list. If you know the component name, enter it in the Filter items input to locate it quickly.3. After creating your new component, you have the ability to see the component in your editing window, and add new components.

### Step 2: Add additional components

1. To add another component to this region click on the plus sign above or below the component you added in order to place a component above or below the one that you just created.

   ![Screenshot of Additional Content region with a horizontal rule, showing the "+" control to add a component](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-03/Add%20component%20control_0.png?itok=PftRC3Ue) 

 

Once you add a component, use the “+” control to add additional components above and below the component.2. Choose another component using the component selection window and add details for your component. Once you have finalized your component you will see it appear above or below the first component that you created.



 

---

 

##  Related how-tos 

 



  [### Media Gallery

 ](/media-gallery)How to add images and display them as a media gallery on your site.



 

 

   ![an icon that represents a grid layout with photos](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2025-12/media-gallery-thumbnail.png?itok=8ALT2Eiw) 

 



 

 

   [### Adding a section heading

 ](/adding-section-heading)Use a section heading to provide introductory content describing the component topic, as well as link to other pages with more details.



 

 

   ![Close-up of books on a bookshelf.](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-07/thumb_adding_component_heading.jpg?itok=7K0qitus) 

 



 

 

  

 

 

 

 

---

 

##  Related resources 

 



  [### Component Controls

 ](/resource/component-controls)How to work with component controls to edit, duplicate, reorder, and remove components from a layout.



 

 

   ![Person working on a crew boat inside a boat house, framed by rows of crew boats.](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-10/thumb_component_controls.jpg?itok=RoQZmMll) 

 



 

 

   [### Hero component: Styles, sizes, and best practices (VIDEO)

 ](/resource/hero-component-styles-sizes-and-best-practices-video)Understanding the options available in the Hero component and best practices.



 

 

   ![a tablet computer showing a website](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-pixabay-39559.jpg?itok=-VFJXOhB) 

 



 

 

   [### How to navigate and edit nested content (VIDEO)

 ](/resource/how-navigate-and-edit-nested-content-video)How-to video on understanding how content and components are nested on HarvardSites Drupal



 

 

   ![Black squares within bigger squares](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-03/pexels-pppsdavid-6727764.jpg?itok=mxCK2clU) 

 



 

 

   [### Pages vs Lists vs Resources vs News in HarvardSites (VIDEO)

 ](/resource/pages-vs-lists-vs-resources-vs-news-harvardsites-video)Learn when to use pages, lists, resources, or news to display content on your site.



 

 

   ![File folders with papers](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-nada-mohamed-3446789-29234185.jpg?itok=sE0QoWAv) 

 



 

 

  

 

 

 

 

 



 

 See also:- [ How-tos ](/content-structure/how-tos)
- [ Components ](/topics/components)