# Create your first page
This guide walks through creating your first Capell page from the admin panel. It is written for a first-time user who has already installed Capell and can log in to `/admin`.
If you have not installed Capell yet, start with the [quickstart](quickstart.md) or the full [install guide](install.md).
## Start from Pages
Open **Pages** from the sidebar. Pages are the main routable content records in Capell: they belong to a [Site](../reference/glossary.md#content-model), can sit inside a page tree, and publish to frontend URLs.
Click **New page** in the top-right corner.
## Choose the page context
The first fields decide where the page lives before you write content.
**Site** controls which public website owns the page. This matters even on a single-site install, because the Site carries the domain, languages, default pages, related sites, and brand-level details used by the frontend.
**Parent Page** controls the page tree. Leave it empty for a top-level page such as `/about`. Choose a parent when the page belongs under another page, such as `/about/team`.
**Internal name** is the admin-facing name for the page record. It normally follows the page title, but you can use it to keep the admin list clear when the frontend title is long or marketing-led.
## Understand parents and URLs
Capell builds URLs from the page tree.
| Page setup | Resulting URL |
| -------------------------------------------- | ---------------- |
| Top-level page with slug `about` | `/about` |
| Child page with slug `team` under `about` | `/about/team` |
| Child page with slug `careers` under `about` | `/about/careers` |
Moving a page to a different parent changes the URL path. If the Redirects package is installed, old URLs can be protected with redirect records. This is useful once real users or search engines already know about the old page.
For more background, read [How Capell works](how-capell-works.md#the-core-model).
## Add the title and slug
The **Title** is the main human-readable page title. It is usually shown in the browser title, search snippets, social previews, and any frontend template that prints the page heading.
The **Slug** is the URL segment. Capell fills it from the title, so `About Our Team` becomes `about-our-team`. You can edit it when you need a shorter or clearer URL.
The URL preview shows the Site domain and parent path before the slug. Use it as a quick check before saving.
Good first-page examples:
| Page | Title | Slug |
| ------------- | ---------- | ---------- |
| About page | `About` | `about` |
| Contact page | `Contact` | `contact` |
| Services page | `Services` | `services` |
Keep slugs short, lowercase, and stable. Changing a slug after publishing changes the public URL.
## Write the content
The **Content** editor is where the main body of the page lives.
On a plain install, this is a rich text editor for headings, paragraphs, links, tables, lists, and simple formatting. With [ContentSections](../packages/catalog.md#capell-foundation) installed, the content area can become a content sections with rows, columns, reusable widgets, and richer page composition.
For your first page, keep it simple:
1. Add a short heading or opening sentence.
2. Add one paragraph of useful body copy.
3. Save as draft.
4. Preview the page before publishing.
## Fill useful extra content
Open **Extra Content** when the page needs supporting fields.
The exact fields can vary by page type and installed packages, but the common ideas are:
| Field | What it is for |
| -------------------- | --------------------------------------------------------------- |
| Summary | A short description for cards, listings, and fallback metadata. |
| Label | Alternate text used by some themes or navigation surfaces. |
| Link text / CTA text | Button or link copy when another page links to this one. |
You do not need to fill every field on the first pass. Add the content that helps the frontend theme render the page well.
## Pick a layout and publish timing
The **Layout** decides which frontend template renders the page. A normal content page can use the default layout. A landing page, article, product page, or campaign page may use a different layout if your project has registered one.
**Visible From** controls scheduled availability. Leave it empty when the page should be available as soon as it is published.
Page **Type** is closely related to layout, but it is not the same thing. Types shape how content is edited, rendered, and reused:
| Concept | Practical meaning |
| ------- | ---------------------------------------------------------- |
| Type | Controls reusable editing, rendering, and behaviour rules. |
| Layout | Controls how the frontend renders the page. |
| Content | The text, media, and structured fields the editor adds. |
Developers can register custom types through Capell extension points. Read [Types](types.md) for examples and screenshots, or [How Capell works](how-capell-works.md#extension-points) when you are ready for the deeper model.
## Save as draft first
Use **Save as Draft** while you are still editing. A draft is stored in the admin, but it is not the public version yet.
Use **Create** or **Save changes** when you are ready to store the record normally. Depending on the workflow packages installed, publishing may be immediate or may move through approvals, publishing-studio, or scheduled publishing.
For the first page, save a draft, then preview it.
## Preview and publish
Return to the Pages list and open the row action for your page. The preview action opens the frontend view so you can check the content before making it public.
After publishing, visit the page URL directly. If the frontend still shows old content, use the admin **Clear Cache** action or run:
```bash
php artisan capell:html-cache:clear
```
If the project uses `capell-app/html-cache`, also run `php artisan capell:static-site` to warm the generated public cache.
If you use a queue connection such as `database` or `redis`, keep a worker running while testing publishes:
```bash
php artisan queue:work
```
See [Troubleshooting](../operations/troubleshooting.md) if the page shows a 404, stale content, or a blank frontend screen.
## Adjust settings after the page exists
On edit screens, Capell shows additional page settings and package-provided fields. These can include SEO settings, canonical URL choices, cache behaviour, featured images, and other fields added by extensions.
For a first page, avoid tuning everything at once. Confirm the page renders first, then come back for SEO and sharing details.
## Configure the Site once
A **Site** is bigger than one page. It represents the public web property that all its pages belong to.
Site-level details can apply across every page for that site:
| Site detail | Where it is used |
| -------------------------- | ------------------------------------------------------------ |
| Company or business name | Footer, contact blocks, schema, and theme copy. |
| Logo and inverted logo | Header, footer, dark backgrounds, and theme components. |
| Favicon and icon | Browser tabs, saved shortcuts, and app-like surfaces. |
| Brand color | Theme accents, buttons, and package-aware UI choices. |
| Email, phone, contact page | Footer, contact cards, schema, and reusable widgets. |
| Domains and languages | URL generation, language tabs, canonical links, and routing. |
Site records live in the **Settings** area of the admin sidebar. Open **Sites** when you need to update the company, logo, favicon, brand, domain, language, or related site details behind the pages.
Change Site details when the same value should affect the whole website. Change Page details when the value only belongs to one page.
For the full admin map, see the [Admin interface guide](../admin/interface.md).
## Useful next extensions
Do not install every package on day one. Add the next package when the page you are building clearly needs it.
| Extension | Add it when you need |
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| [ContentSections](../packages/catalog.md#capell-foundation) | Custom rows, columns, widgets, reusable content blocks, and richer page layouts. |
| [Navigation](../packages/catalog.md#capell-foundation) | Header, footer, sidebar, or utility menus that link your pages together. |
| [Redirects](../packages/catalog.md#capell-foundation) | Manual redirects or safer URL changes after pages have been published. |
| [Foundation Theme](../packages/catalog.md#capell-foundation) | A practical frontend starting point for rendering pages without building a theme from scratch. |
| [Frontend Authoring](../packages/catalog.md#capell-foundation) | Edit page title, description, or content from the public page after the admin-only beacon confirms access. |
| [Media Library](../packages/catalog.md#capell-foundation) | The Curator media backend and picker, instead of the default Spatie MediaLibrary backend. |
| [SEO Suite](../packages/catalog.md#capell-search-seo) | Audits, structured data, robots controls, and stronger social metadata. |
| [Site Discovery](../packages/catalog.md#capell-foundation) | HTML/XML sitemaps and discoverability files. |
That order keeps the learning curve sane: create pages first, add layout power with ContentSections when the content needs structure, connect pages with Navigation, protect URLs with Redirects, then add SEO or richer operational tooling when the site is real enough to benefit.
## Next
- [Your first session](first-session.md) for the broader admin tour.
- [How Capell works](how-capell-works.md) for Sites, Pages, Types, Layouts, and extension points.
- [Approved packages](../packages/catalog.md) for the full package catalogue.
- [Glossary](../reference/glossary.md) for quick definitions.