> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpbevel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Your first site

> From a fresh install to a site you would publish, by hand in the editor or with an assistant.

After [installing](/getting-started/install), the starter set has given you a working front page, header, footer and templates. Here is the order that turns it into your site.

## 1. Set the design system

**Bevel → Site Settings.** Under **Global** set the colours (primary, secondary, text, accent) and the fonts for headings and body. Under **Theme Style → Buttons** set the button style and pick a **Hover Animation**. Under **Site Identity** upload the logo and, if the footer is dark, a **Light Logo**.

Everything built from here on reads these values. Change a colour later and every page follows.

If the brand has its own typeface, install it first under **Bevel → Custom Elements → Custom Fonts**; it then appears in every font picker. See [Custom Fonts](/kit/custom-fonts).

## 2. Frame the site

**Bevel → Theme Builder.** Open the starter **Header** and **Footer** templates and make them yours: the logo, the menu (the **Nav Menu** widget reads the Primary Menu location), a button. Publish. They show on every page.

The starter **Single Post**, **Archive** and **404** templates are good as they are; restyle them when the blog matters.

## 3. Build the pages

Two ways, and they mix.

**In the editor.** Add a page, edit with Elementor, and use the template library (the folder icon) for blocks and pages, or the [Bevel widgets](/kit/widgets) directly. Pages use the full-width layout by default, so the header and footer wrap them.

**With an assistant.** Install [Bevel MCP](/mcp/overview), connect Claude or ChatGPT, drop the brand's logo, photos and fonts into **Brand assets**, and ask for the site. The assistant reads your design system, builds pages from the Kit's widgets under the house rules, and saves them as drafts for you to review. See [Your first build](/mcp/building).

## 4. Menu, front page, forms

* **Appearance → Menus**: the starter **Main Menu** lists the published pages; add, reorder, or hand an item a [mega menu](/kit/mega-menu).
* **Settings → Reading**: the starter front page is already set as the homepage.
* A contact page gets a [Form](/kit/forms); submissions arrive under **Bevel → Submissions** and by email.

## 5. Make it fast, then publish

**Bevel → Site Settings → Tools → Optimization → One-Click Optimization.** It sets the font and image options, delays scripts until the first interaction and converts the library to WebP. Then switch on the **HTML Disk Cache**. Check the result with **Check PageSpeed** in the admin bar.

Publish the pages. Done.

## Where next

* [Site Settings](/kit/site-settings) for everything the screen holds.
* [Theme Builder](/kit/theme-builder) for display conditions.
* [Popups](/kit/popups), [Loops](/kit/loops), [WooCommerce](/kit/woocommerce) as the site grows.
* [Security and privacy](/mcp/security) if an assistant is connected.