How to Use the Page Builder

Published on 17 August, 2026
How to Use the Page Builder

Page Builder is how you add and arrange sections on a page without writing code.

1. Open Page Builder

Log in and open your website.

Page details editor
Dashboard view: Open a page first, then launch Page Builder to compose its sections.

Go to Pages and open the page you want to change.

Click Page Builder.

2. Understand sections and components

A section is a named region supplied by the selected template, such as the page body. A component is one cohesive block placed inside that section, such as a hero, feature grid, FAQ, or call to action.

Use multiple focused components to build a page. Do not combine unrelated regions into one large custom component. Repeated cards or links that belong to one section should be stored as repeatable items inside that component.

The shared header and footer belong to the base template. Do not add extra copies to an individual page.

3. Reusable components versus placements

The component library contains reusable source designs. When you add one to a page, SDP creates a page-owned placement with its own field values.

  • Edit the page placement when the change belongs only to that page.
  • Edit or create a reusable component when you are maintaining a shared starting design.
  • Remember that placements are independent copies: changing a reusable source does not automatically rewrite every existing placement.

4. Add a component

In the section you want to fill, click Add Component.

Pick a component that matches the job, such as a headline, features list, or call to action.

The new block appears in that section.

5. Edit typed fields

Open the component and select the field you need. SDP fields are typed: text and headings accept plain text, HTML fields hold rich content, image fields use Media Library assets, link fields keep the label and destination together, and repeatable fields manage lists of related items.

Change the value in the editor panel. For links, check the URL, visible label, target, and optional title. For images, choose the correct asset and add meaningful alt text. For repeaters, add, remove, and reorder items within the same component.

Watch the preview in the centre of the screen.

6. Reorder, duplicate, or remove

Drag a component to change the reading order.

Duplicate a block when you only need a small change.

Delete blocks you no longer need.

7. Publish

Preview the page on desktop and mobile.

Click the black Publish button when it looks right.

If you edit a live page again, it shows as modified until you publish once more.

Pro-Tip

Start with a few components. Reuse what you already have before adding more. Need a new page first? Follow How to Add and Edit Pages.