---
title: "Add Modules to a Page"
slug: "how-to-add-modules-to-page"
updated: 2021-07-20T10:47:24Z
published: 2021-07-20T10:47:24Z
canonical: "docs.viewlift.com/how-to-add-modules-to-page"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.viewlift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Modules to a Page

Use the AppCMS menu to add modules (page sections) to a specific page. You can drag and drop the desired module into an existing page, or start with a new page and add multiple modules.

**An example provided below shows how to add a Masthead, a Carousel, a Tray and a Footer to a Home Page. For demonstration purposes, the original Template Page modules have been deleted**

1. From the AppCMS menu, go to **Template Builder > Pages**, click on **Modular Pages** and select one of the pages available. In this case we access **Home Page**.

![access blocks1](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/access%20blocks1.png)

1. Once on the **Home Page**, click on **Add Modules** from the top navigation. A side menu will open, displaying different types of modules available to add to the page.

![masthead0](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/masthead0.png)

1. Scroll down until you find the **Masthead** category, click and drag the **Masthead** option into the main window. You will see the **Masthead Navigation** module appear on the page layout.

![masthead1(1)](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/masthead1%281%29.png)

![masthead2](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/masthead2.png)

1. Again click on **Add Modules** from the top navigation, and scroll down on the side navigation to **Carousels**. Click and drag the **Carousel** option into the main window. You will now see the **Carousel** module appear on the page layout.

![carrousel0](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/carrousel0.png)

![carrousel1(3)](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/carrousel1%283%29.png)

This same process can be followed for any other page, subpage, section or module within the Template Builder. Keep in mind that you can add as many of the same module as desired, we'll continue building a Page and show this case with Trays.

1. Click on **Add Modules** from the top navigation, and scroll down on the side navigation to **Trays**. Click and drag the **Hover Tray** option into the main window. You will now see the **Tray** module appear on the page layout.

![hover0](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/hover0.png)

![hover1(1)](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/hover1%281%29.png)

1. Click **Add Modules** from the top navigation, and scroll down on the side navigation to **Footer**. Click and drag the **Small Footer** option into the main window. You will now see the **Footer** module appear on the page layout.
2. Add a Refer & Earn module to your page.

![footer0](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/footer0.png)

![footer1(1)](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/footer1%281%29.png)

Congratulations, you have now built a full page with different kinds of Modules! Continue to the next section, Editing Modules, to learn how to configure them to display your content.