Before you start#

A page belongs to one website and one language. Select both before you create it. Public delivery is scoped to the website resolved by the delivery key and the language code requested by the frontend.

For a first page, choose a small, stable URL. This guide uses an About page:

Example

Name:        About us
Stored slug: about-us
Public URL:  /about-us
Page type:   standard

1. Create the page record#

In the CMS Pages area, create a page and complete the General tab.

Field	Use for this example	Why it matters
Page Name	`About us`	Clear label for editors.
Slug	`about-us`	URL-safe page identity. The admin normalizes it to lowercase hyphenated text.
Page Type	`standard`	A good default for a normal marketing or information page.
Page Layout	Website Default	Use a named layout only when you need specific regions.

The CMS stores a normal page slug without a leading slash. The frontend requests the public path with a leading slash: /about-us.

Tip

Keep a published slug stable. A URL change can break bookmarks, navigation, and search results. Plan redirects in your frontend or edge layer when a URL must change.

2. Choose a page layout#

A Page Layout describes where blocks can be placed. It is not a React component.

Website Default uses the website's published default layout. If none exists, Contoprix uses the basic single-column flow.
Specific Page Layout uses a selected published layout with a grid and named regions, such as main and sidebar.

For a first page, keep Website Default. Choose a named layout only when your design needs it.

Two-region example

Page Layout: Marketing two-column
Regions: main, sidebar

Hero block       -> main
Newsletter block -> sidebar

When you change a layout on a page that already has blocks, the CMS displays a remapping plan. Review it before saving so the existing blocks go to the intended regions.

3. Configure page-level settings#

The Navigation tab controls whether the page appears in navigation, whether it shows breadcrumbs, and whether it hides the global header or footer.

For a normal About page, the defaults are usually correct: show it in navigation, use the shared header/footer, and show breadcrumbs if your website uses them.

SEO#

Add a useful title and description once the page content is ready.

Example SEO

Title: About Contoprix | Example Company
Description: Learn about Example Company, our team, and how we work.

Your frontend owns HTML metadata generation. The delivered ContoprixPage always includes the page name; use your project's SEO integration for richer page settings.

Access#

Public delivery only returns pages whose access settings allow public access. A page can be valid in the CMS but return a forbidden response to a normal delivery client when it requires authentication or roles.

Keep public marketing pages public. For a members-only page, build and test authorization in the frontend before publishing.

4. Add page content and blocks#

Creating the page gives the CMS a place to store content. Open the page's content or Visual Builder view and add blocks in visitor order.

A small About page could contain:

A hero_banner component block for its title and introduction.
A content-list block for team members or selected posts.
A call_to_action component block for a contact link.

You add in the CMS	Your React component receives
Component block	`settings`
One content entry	`content`
A group of entries	`contents`
A form placement	`form` reference

The component code is an integration contract. A block with code hero_banner needs a hero_banner key in the React component registry.

5. Save a draft#

Saving page content creates a new draft version for the selected language. It does not change public visitors' page.

Use the draft stage to check:

component fields are complete;
linked entries and media are correct;
images have useful alternative text;
optional fields do not make empty buttons or sections;
blocks are in the intended order and region;
the language is correct.

The CMS retains page-content versions, so a previous version can be reviewed or restored later.

6. Preview the draft#

Preview fetches a page by page ID, not public slug, and requires preview permission.

Set the Website Preview URL to a template containing [pageId]:

Website Preview URL

https://www.example.com/preview/page/[pageId]

The admin replaces [pageId] before opening the iframe. Your preview route fetches draft content with client.pages.getPreview(pageId) or getContoprixPreviewPage({ pageId }). Keep the route protected and do not cache it as public content.

7. Publish and verify#

Publishing validates the draft, creates a published version, and makes the selected language available through delivery.

Server-side delivery check

import { getContoprixPage } from "@contoprix/next/server";

const page = await getContoprixPage({
  slug: "/about-us",
  languageCode: "en",
});

console.log(page.name);

If this returns a 404, check publication state, website, exact language code, public access settings, and the route path. If it returns new data but the browser looks old, revalidate your frontend or CDN cache.

Common first-page mistakes#

Symptom	Likely cause	Fix
`/about-us` is not found	Content is still a draft.	Publish it for the requested language.
The page is missing in one locale	The locale has no published content version.	Complete and publish that language.
A block is a missing-component placeholder	Registry key and block code differ.	Add the exact code to the registry.
A nested URL fails	The frontend uses only the short slug.	Fetch the full route, such as `/company/about-us`.
Delivery is forbidden	Page access is not public.	Review the Access tab and client scope.

Next step#

Read Routing to connect CMS paths to your frontend, then Visual Builder Components to make your block renderers resilient and editor-friendly.

Create a Page