Page Structure or template design under pages category

General
,
1

I want to create a Page template in one particular format for consistent page design under page category(eg- secondary page, blogs, home page, landing page etc). is there any way to follow the same design or declare a design once use it every time whenever i want to add something under particular page category.
Creating symbol is the one way but is there any other way to achieve this using Builder’s functionality without using Visual Editor.

2

Hi @apatil , Yes, you can maintain consistent layouts across different page categories (like “Secondary Pages”, “Blogs”, or “Landing Pages”) without using Symbols or the Visual Editor.

Here are a few Builder-native approaches you can use depending on how your site is set up:

Option 1: Use a Template Component in Code

You can define a reusable layout component in your codebase and programmatically map it to Builder pages.

  1. Create a layout component, for example SecondaryPageLayout.tsx:

    import { BuilderComponent, builder } from '@builder.io/react';

export const SecondaryPageLayout = ({ content }) => (
  <main className="secondary-page">
    <header>/* Common header for secondary pages */</header>
    <section className="content">
      <BuilderComponent content={content} model="page" />
    </section>
    <footer>/* Common footer */</footer>
  </main>
);

  2. When fetching Builder content, choose which layout to render based on a page type field (like data.pageType) or the URL pattern:

    const content = await builder.get('page', { url: location.pathname }).toPromise();

if (content?.data?.pageType === 'secondary') {
  return <SecondaryPageLayout content={content} />;
} else if (content?.data?.pageType === 'blog') {
  return <BlogPageLayout content={content} />;
} else {
  return <DefaultLayout content={content} />;
}

You define your layout structure once in React (or your preferred framework) and reuse it for all pages of that category — no need to recreate the design each time in the Visual Editor.

You can refer to Builder’s Developer documentation for details on fetching and rendering Builder content in code.

Option 2: Use a Separate Model per Page Type

Another approach is to create separate models for each page category (like blog-page, landing-page, or secondary-page) and define their default structure.

  1. In Builder, go to Models → Create new model (e.g. blog-page).

  2. Add default fields (hero, content blocks, CTAs, etc.).

  3. In your code, fetch content using the model name:

    builder.get('blog-page', { url: location.pathname });

It keeps each page type isolated and lets you set consistent default layouts for every new entry.

Option 3: Use Custom Fields or Metadata

You can add a custom field (like layoutType) in your Page model and render layouts conditionally in code based on that. This is a flexible option if you want all your pages under a single model.

Refer to the Custom Fields guide to see how to add and manage fields in your models.

If your goal is to have developer-defined, reusable layouts that editors can’t modify structurally, Option 1 (Template Component) is usually the cleanest and most maintainable approach.