shadowdao
6a0a461c26
Build and deploy / deploy (push) Successful in 23s
Adds /whp/site-builder/ with overview, getting-started, blocks-and-pages, styling, and publishing. Wired as a 'Site Builder' sidebar group with a Beta badge. - Captured real screenshots via the demo account through a redaction step (server names, domain, demo-user all swapped for placeholders) - New beta-callout partial shared across all 5 articles - capture-site-builder.ts is local-only (uses tools/screenshots/.env for demo creds, never runs in CI)
117 lines
4.5 KiB
Plaintext
117 lines
4.5 KiB
Plaintext
---
|
||
title: Blocks & pages
|
||
description: The Site Builder block library, plus how to add pages and edit the shared header and footer.
|
||
sidebar:
|
||
order: 3
|
||
---
|
||
|
||
import { Aside } from '@astrojs/starlight/components';
|
||
import Beta from '~/content/partials/beta-callout.mdx';
|
||
import Support from '~/content/partials/support-link.mdx';
|
||
|
||
<Beta />
|
||
|
||
## The block library
|
||
|
||
The **Blocks** panel on the left of the editor groups every available content block into five collapsible categories. Drag any block onto the canvas to add it.
|
||
|
||
|
||
|
||
### Basic
|
||
|
||
Building-block primitives for any page:
|
||
|
||
- **Heading** — H1–H6, with the size set from the inline toolbar.
|
||
- **Text** — paragraph copy. Supports bold, italic, links, and lists.
|
||
- **Button** — call-to-action with label, link, and style.
|
||
- **Logo** — drop in your site logo from Assets.
|
||
- **Menu** — the site's main navigation (most commonly placed in the Header).
|
||
- **Footer** — quick footer wrapper (or use the dedicated Footer editor; see below).
|
||
- **Divider** — horizontal rule.
|
||
- **Spacer** — adjustable vertical whitespace.
|
||
- **Icon** — pick from a built-in icon set.
|
||
- **Star Rating** — five-star widget for reviews.
|
||
- **Social Links** — links to your social profiles with icons.
|
||
- **HTML** — drop in raw HTML when nothing else fits.
|
||
|
||
### Layout
|
||
|
||
Structural blocks that hold other blocks:
|
||
|
||
- **Section** — a full-width strip of the page.
|
||
- **Container** — a centered, max-width wrapper.
|
||
- **1 / 2 / 3 / 4 / 5 / 6 Columns** — pre-set column rows.
|
||
- **Sidebar Left / Right** — content area with a sidebar.
|
||
|
||
### Sections
|
||
|
||
Pre-composed page sections — Hero, Features, CTA, Accordion, Tabs, Pricing, Gallery, Countdown, and more. Drop one in and edit the placeholder content.
|
||
|
||
### Media
|
||
|
||
Image, video, audio, and gallery blocks. Uploaded files live in the **Assets** panel and can be re-used across pages.
|
||
|
||
### Forms
|
||
|
||
Contact form, newsletter signup, and similar input blocks.
|
||
|
||
<Aside type="tip">
|
||
Selecting any block on the canvas swaps the right-hand panel from **Styles** to **Block settings**, so you can edit its content, colour, padding, and link target without leaving the editor.
|
||
</Aside>
|
||
|
||
## Editing blocks
|
||
|
||
Click a block on the canvas to select it. From there:
|
||
|
||
- **Inline toolbar** — quick text formatting (bold, italic, link, alignment).
|
||
- **Right panel** — block-specific settings (colour, padding, link, size, alt text, etc.).
|
||
- **Layers panel** (left) — see the block tree, drag to re-parent or re-order.
|
||
|
||
To delete a block, select it and press **Delete** on your keyboard, or use the trash control in the inline toolbar.
|
||
|
||
## Pages
|
||
|
||
Most templates ship as multi-page sites. Manage pages from the **Pages** tab.
|
||
|
||
|
||
|
||
The **PAGES** list shows every page on the site, with its path (e.g. `Home /index`). The currently-edited page is highlighted.
|
||
|
||
### Add a page
|
||
|
||
1. In the Pages tab, click **+ Add Page**.
|
||
2. Give the page a name (used in navigation) and confirm the slug (used in the URL).
|
||
3. The new page opens, empty, ready for blocks.
|
||
|
||
### Edit the shared header
|
||
|
||
The **Edit Header** button at the top of the Pages tab opens the header in isolation. Whatever you put there appears on every page. The same applies to **Edit Footer**.
|
||
|
||
This is the right place to drop your Menu, Logo, and Social Links blocks — once, instead of once per page.
|
||
|
||
### Reorder or delete pages
|
||
|
||
Click a page in the list to edit it. The menu beside the page name lets you rename, change the slug, duplicate, or delete. Deleting a page removes it from the site on the next publish.
|
||
|
||
<Aside type="caution">
|
||
Renaming a slug changes the URL. If the page is already published and indexed, set up a redirect (or hold off until you can update inbound links).
|
||
</Aside>
|
||
|
||
## Layers panel
|
||
|
||
The **Layers** tab on the left shows the block tree for the current page — useful when blocks are nested inside containers and clicking on the canvas keeps selecting the wrong level. Click any layer to select that block; drag a layer to re-parent it.
|
||
|
||
## Assets panel
|
||
|
||
The **Assets** tab is where uploaded images, videos, and other media live. Drag an image directly from this panel into an image block, or use the **Upload** button to add new files.
|
||
|
||
## Related
|
||
|
||
- [Getting started](/whp/site-builder/getting-started/)
|
||
- [Styling your site](/whp/site-builder/styling/)
|
||
- [Publishing & code injection](/whp/site-builder/publishing/)
|
||
|
||
## Still stuck?
|
||
|
||
<Support />
|