Pages

Overview

Pages are the building blocks of your website. Unlike blog posts, pages are standalone content that typically doesn't change often -- think About, Contact, Terms of Service, or Landing pages. GritCMS includes a powerful visual page builder with over 300 pre-designed sections and 100+ page templates, so you can create professional pages without writing any code.

Where Pages Appear on Your Public Site

Every published page is accessible on your public website at a URL based on its slug:

https://yoursite.com/{slug}

For example:

• A page with slug about is live at yoursite.com/about
• A page with slug contact is live at yoursite.com/contact
• A page with slug terms-of-service is live at yoursite.com/terms-of-service

The home page is a special case -- if a page has the slug home, it is served at the root of your site (yoursite.com/).

Only pages with the Published status are visible to the public. Draft and Archived pages are hidden from visitors and will not be accessible at their URL.

After editing a page in the page builder, changes take effect immediately when you save. You can click View Live in the admin header to open the public URL and see exactly what visitors see.

Creating a New Page

1. Navigate to Website > Pages in the admin sidebar.
2. Click the New Page button in the top-right corner.
3. You'll be taken to the page editor with the Settings panel open and the Page Builder below it.

Page Settings

Every page has a collapsible settings panel at the top with the following fields:

You can toggle the settings panel open or closed using the Settings button in the header.

Building Pages with Sections

The page builder uses a section-based approach. Instead of writing content in a text editor, you build pages by adding, arranging, and customizing pre-designed sections. Each section is a self-contained block of content -- a hero banner, a feature grid, a pricing table, a testimonial carousel, and so on.

The Three-Panel Layout

The page builder has three panels:

• Left Panel (Structure) -- A sortable list of all sections on the page. Drag sections to reorder them. Click a section to select it for editing.
• Center Panel (Preview) -- A live preview of your page as visitors will see it. Click any section in the preview to select it.
• Right Panel (Editor) -- A form for editing the selected section's content, including text, images, links, colors, and more.

Adding Sections

1. Click the Add Section button at the bottom of the structure panel (or in the empty state).
2. The Section Picker slides up with all 300+ sections organized by category.
3. Browse categories using the tabs, or type in the search box to filter by name, description, or tags.
4. Click a section card to add it to your page.

The new section is appended to the end of the page and automatically selected for editing. For a complete list of available sections, see the Section Library reference.

Reordering Sections

Drag sections in the structure panel to reorder them. Grab the drag handle (the grip icon on the left side of each section item) and move it to the desired position.

Removing Sections

Hover over a section in the structure panel and click the trash icon to remove it. This cannot be undone, so make sure you want to delete the section before clicking.

Editing Section Content

When you select a section (by clicking it in the structure panel or the preview), the right panel shows a form with all editable fields. The available fields depend on the section type. Common field types include:

Changes appear immediately in the preview canvas as you type.

Custom Tailwind Classes

At the bottom of the section editor, there is a Tailwind Classes input where you can add custom CSS classes to any section. This is useful for fine-tuning spacing, colors, or layout beyond what the default props offer. For example, adding py-20 bg-gray-50 would increase the vertical padding and change the background color.

Using Templates

Instead of building a page from scratch, you can start with one of the 100+ page templates. Templates are complete page layouts with pre-configured sections -- just apply a template and customize the content.

1. Click the Browse Templates button in the structure panel.
2. The Template Gallery opens with templates organized by category (SaaS, Agency, Portfolio, etc.).
3. Browse or search for a template that fits your needs.
4. Click a template card to preview its sections.
5. Click Use Template to apply it to your page.

Applying a template replaces all existing sections on the page. You can then customize each section individually using the section editor. See the Templates guide for a full list of available templates.

You can also click Start Blank to begin with an empty page.

AI-Assisted Content

The page builder includes an AI assistant that can generate or rewrite section content for you.

1. Select a section in the page builder.
2. Click the AI Assist button (lightning bolt icon) in the editor panel header.
3. The AI panel slides in from the right.
4. Type a custom instruction (e.g., "Write copy for a SaaS project management tool") or click one of the preset prompts:
   • Make it more professional
   • Rewrite for tech audience
   • Add more urgency
   • Make it more casual
   • Shorten the text
   • Make it more persuasive
5. Click Generate and wait for the AI to process your request.
6. Review the proposed changes -- old values are shown with strikethrough and new values highlighted.
7. Click Apply Changes to accept, or Cancel to discard.

The AI considers the section type and its current content when generating suggestions, so results are contextually relevant.

Saving and Publishing

The header bar provides two actions:

• Save Draft -- Saves the page with its current status (draft by default). The page is not visible to the public.
• Publish -- Saves the page and sets its status to Published, making it live on your site immediately.

You can return to any page at any time to edit its sections. After saving, changes are live immediately.

Managing Existing Pages

The Website > Pages list shows all pages with their title, slug, status, and last updated date. From this list you can:

• Edit a page by clicking its title, which opens the page builder with all sections loaded.
• Delete a page you no longer need.
• Change status between Draft, Published, and Archived.

Backward Compatibility

Pages created with the older block-based editor continue to work. The system automatically detects whether a page uses the new section-based format or the legacy block format and renders it accordingly. You do not need to migrate old pages -- they will display correctly as before.

Next Steps

• Page Builder -- Detailed guide to the visual page builder interface
• Section Library -- Browse all 300+ available sections by category
• Templates -- Browse all 100+ page templates by category