Build a Multi-Page Website

A multi-page site is more than a stack of pages. It needs a shared header, a footer, a navigation menu, and site settings that hold it all together. The work goes in order: plan the structure, build the foundation once, then build each page against your design system. You talk in plain English and your AI does the building.

Before you start

• An active license, with the next AI command not paused.
• MCP connected and set to Read + Write. See the quick start if you have not connected a client yet.
• One base builder chosen (the BuildPress Builder or Elementor).
• Your design system marked ready. Every page build stops and routes you to set up the design system first if it is not ready.

Step 1: Plan the structure

Start with the whole site, not a single page. A large "system" ask like this goes through a planning step that produces a content model and a widget breakdown for your sign-off before anything is written. Your AI decides which screens are Pages, which one-of-many items are custom post types, which groupings are taxonomies, and which values belong in global options. Paste a prompt like this:

Your AI replies with a proposed structure: which screens are Pages (Home, Services, Work, About, Contact), whether any content is better modeled as a custom post type (for example case studies behind the Work page), which taxonomies group that content, and which details live in global options. It also lists the widgets each page will use, reusing existing ones where they match and creating new ones where they do not. Read the plan, then confirm or adjust before it writes a single thing.

Step 2: Build the foundation

The header, footer, navigation menu, and site settings are the chrome that every page shares. Build them once, before the pages. Your AI builds the header as its own reusable widget, then the footer, creates a navigation menu, and wires everything site-wide. Describe what each piece holds:

Your AI builds the header and footer as separate, reusable widgets (never inlined into a page), creates a Main Navigation menu with the items you listed, and creates any missing pages as drafts so the menu has something to point at. Every color and font binds to your design tokens, so a later token edit re-themes the chrome along with everything else.

Step 3: Build each page

With the foundation in place, build one page at a time. This keeps each build focused, easy to verify, and easy to refine before you move on. Describe the sections you want in order:

Your AI maps each section to a widget, reusing one from your library if it genuinely matches or creating a new token-bound widget if it does not. The page is created as a draft, built section by section top to bottom, and verified as it goes. Repeat the same pattern for Work, About, and Contact. A closing CTA or newsletter strip near the bottom is page content, not chrome, so it lives on the page rather than in the footer.

• Build pages in priority order. Home and Services first, then the rest.
• Refine before moving on, for example "Make the hero headline bigger and switch the CTA to your accent color."
• Reuse pays off as you go. Sections built for one page can be reused on the next.

Step 4: Verify and publish

Your AI confirms the menu is assigned and complete, then render-verifies the header, footer, and each page by loading the live render and checking that the right widgets are present, the menu shows, and there are no PHP notices. Pages stay drafts until you say so. When the report reads clean, publish on your word:

Where to go next

• Need repeating content like a directory or portfolio? See Build a content site.
• Building on Elementor specifically? See the Elementor guide.