--- title: 4. Building a page slug: lf-csc-hol-q32026/4-building-a-page docTags: createdAt: 2026-05-19T07:41:37.298Z --- *In this section, we will create a new NBO Mortgage page in AEM Sites, using the shared hero banner from the DAM and the Content Fragment we built in the previous exercise.* :::hint{type="info"} **Business Context** A content author shouldn't need a developer to assemble a new campaign page — they need reusable, pre-approved building blocks they can drop onto a page and configure themselves. In this exercise, you'll build your NBO Mortgage page using two such blocks: a **Hero Banner** block, pulling in the shared campaign image everyone in the room is using, and a **Content Fragment** block, rendering the fragment you personalised for your county in the last exercise. ::: In this exercise, you'll build your NBO Mortgage page using two such blocks: a **Hero Banner** block, pulling in a shared campaign image, and a **Content Fragment** block, rendering the fragment you built in the last exercise. ## Objective Create a new page under the Hands-on Lab section, add a Hero Banner block using a shared campaign image, and add a Content Fragment block referencing your ISK tax-free fragment, proving that pages can be assembled from governed, reusable content rather than page-specific duplication. ## What This Proves - Custom content types, templates and blocks can be created/configured - Pages are assembled from reusable blocks/components, not page-specific duplication - DAM assets can be inserted directly into the page structure - Content Fragments can be rendered on a page via a dedicated block - Ownership, versioning and traceability are visible for the created content ## Create your page 1. Go to AEM Sites: [AEM Sites](https://author-p168711-e1945519.adobeaemcloud.com/ui#/aem/sites.html/content/lf-eds) 2. Navigate the tree structure to **Länsförsäkringar Site > Language Masters > English > Hands-on Lab**. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/TAeAOPVrz75lnX7Z1Bc6t_screenshot-2026-08-28-at-111524.png) 3. Click **Create**, then select **Page**. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/csZFeuUv3FYfOrulX7zD6_screenshot-2026-08-28-at-111529.png) 4. Select the **Page** template, then click **Next**. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/_efDQRUfgdLAAoio3It4d_screenshot-2026-08-28-at-111535.png) 5. Name your page: `{{LASTNAME}}- NBO Mortgage` 6. Click **Create**, then **Open**. This opens the page in the Universal Editor interface, ready for you to add content. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/WYqFRlu0GQq4s6Eja9yht_screenshot-2026-08-28-at-111556.png) ## Add the Hero Banner block 1. From the side panel, click **Content Tree** to show the content tree, then select the **Section** block, this is where we'll insert the Hero Banner. Click the **(+)** icon to add a new block. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/IKb8DQ5kaeynmf45mj_-7_screenshot-2026-08-28-at-123625.png) 2. Search for `Hero` and select **Hero banner**. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/SjpYsmnykhq3waGTj1T8A_screenshot-2026-08-28-at-123638.png) 3. Switch to the **Properties** menu to see the block's configuration options. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/5bKgdemMGsLA0ql0BFE9i_screenshot-2026-08-28-at-130506.png) 4. Add the content for the Hero Banner. Since we're building this centrally, let's use generic content that any regional company could inherit: - Click **Add** on Image, search for `random image`, and select an image. - Click on **Text** and enter: :::BlockQuote Mortgage calculation - how much can I borrow? ::: :::BlockQuote Plan your home purchase with our mortgage calculator. Calculate your mortgage and see how much you can borrow when you buy a house, apartment or holiday home. ::: ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/E0cw4WseRqqnsx5XJ4JoJ_screenshot-2026-08-28-at-123714.png) 5. Select the style you'd like from the **Style** dropdown. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/DvNNv1gDU7IPYbHMWQ6pv_screenshot-2026-08-28-at-124710.png) ## Add the Content Fragment block 1. From the side panel, go back to the **Content Tree** menu and select **Section** again. Click the **(+)** icon to add a new block below the Hero Banner. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/r_dnfDSTrIsFtD3d6_oKQ_screenshot-2026-08-28-at-124913.png) 2. Search for `content` and select **Content Fragment** from the list. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/ISqTNJUHv0nZUyItRYbFy_screenshot-2026-08-28-at-124933.png) 3. Switch to the **Properties** of the Content Fragment block. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/Z789d5MjaCt0-l6XoA3w-_screenshot-2026-08-28-at-131823.png) 4. From the content fragment picker, select the generic content fragment `ISK tax-free`. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/9pG76wfnJt_NtNj3JCqge_screenshot-2026-08-28-at-124959.png) 5. Ensure you're using the **Main** variation, then select the style you'd like. As an example, we're selecting **Image left**. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/NZiJWOgZtTYqGH24NhBZU_screenshot-2026-08-28-at-125046.png) 6. Your changes are saved automatically, no explicit save action is needed. ## What you learned :::hint{type="success"} Before moving to the next step, you should have: - ✅ Created a new NBO Mortgage page from the shared template - ✅ Added a Hero Banner block using a shared, generic campaign image - ✅ Added a Content Fragment block referencing your ISK tax-free fragment - ✅ Confirmed both blocks render correctly on the page :::