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

# Sidebar User Guide

> Learn how to use every tool in the Butternut sidebar: blog, brand, pages, header, footer, theme, fonts, and settings.

## Overview

This guide explains each feature available in the Butternut sidebar inside the website editor, what it does, and how to use it.

## Table of contents

1. [Blog](#blog)
2. [Brand](#brand)
3. [Pages](#pages)
4. [Header (Navbar)](#header-navbar)
5. [Footer](#footer)
6. [Theme](#theme)
7. [Font](#font)
8. [Settings](#settings)

***

## Blog

The **Blog** feature lets you create and manage a blog page and its articles.

### How to access

* Click the **Blog** icon in the sidebar (document/article icon).

### Create a new blog page

**Note:** Blogging is a **Pro** feature. If you’re on a free plan, you’ll need to upgrade first.

1. Click **Blog** in the sidebar.
2. If you don’t have a blog page yet, click **Create New Blog**.
3. Wait for the page to be created (you’ll see a loading spinner).
4. Your blog page is ready.

### Blog page settings

#### Edit page title

1. In **Blog Page Settings**, find **Page Title**.
2. Type your desired title (for example: “My Blog”, “Articles”, “News”).
3. Click outside the field (or press Enter) to save.

#### Change page URL (slug)

1. Find **Page URL**.
2. Type the path name (for example: `blog`, `articles`, `news`).
   * The `/` is added automatically.
3. Click outside the field to save.

#### Show / hide the blog page

1. Click the **eye** icon at the top-right of the settings section to toggle visibility:
   * Green eye = visible
   * Gray eye with slash = hidden

#### Delete the blog page

1. Click the red trash/delete icon at the top-right.
2. Confirm by clicking **Delete**.
   * **Warning:** This deletes the blog page **and all articles**. It can’t be undone.

### Articles

#### View articles

1. Under blog page settings, find the list of articles.
2. Each item shows the article title.

#### Edit an article

1. Click the article title (or the external link icon next to it).
2. You’ll be taken to the article editor.

#### Delete an article

1. Hover the article you want to remove.
2. Click the trash/delete icon on the right.
3. Confirm by clicking **Delete**.
   * **Warning:** This can’t be undone.

#### Manage all articles

1. Click **Manage Articles**.
2. You’ll be taken to the blog editor where you can create new articles.

***

## Brand

The **Brand** feature lets you set your business identity: business name, logo, and favicon.

### How to access

* Click the **Brand** icon in the sidebar (image icon).

### Update business name

1. In the **Business Name** card, type your business/organization name.
2. This name will appear across your website.

### Upload a favicon

A **favicon** is the small icon shown in browser tabs next to your website title.

1. In the **Favicon** card, click the upload area (or click the existing favicon to replace it).
2. Choose your file.
   * Supported formats: PNG, ICO, SVG
   * Recommended size: 32×32 or 16×16
   * Max size: 1MB
3. Confirm the preview looks correct.
4. To remove: click the red delete icon next to the preview.

### Upload a logo

1. In the **Logo** card, click the upload area (or click the existing logo to replace it).
2. Choose your file.
   * Supported formats: PNG, JPG, SVG
   * Max size: 5MB
3. Confirm the preview looks correct.
4. To remove: click the red delete icon next to the preview.

### Save changes

1. Click **Save** at the bottom.
2. Wait for uploads to finish (you’ll see “Uploading…”).
3. Click **Cancel** if you want to discard changes.

***

## Pages

The **Pages** feature lets you add new pages and manage existing ones.

### How to access

* Click the **Pages** icon in the sidebar (list icon).

### Add Page tab

1. Open **Add Page** (default tab).
2. Choose a page type (for example: Contact, About, Services, Custom).
3. Click the page type to create it.
4. The page is added to your website.

### Manage Pages tab

1. Open **Manage Pages**.
2. Review the list of your pages.
3. Depending on what’s enabled for your site, you can:
   * Edit the page title
   * Change the page URL/slug
   * Toggle visibility
   * Reorder pages (drag and drop)
   * Delete pages
   * Set a page as your homepage

***

## Header (Navbar)

The **Header** editor controls the navigation bar at the top of your site.

### How to access

* Click the **Header** icon in the sidebar.

### Layout tab

1. Open **Layout**.
2. Choose a header layout style (classic, centered logo, minimal, etc.).
3. Apply the layout and adjust spacing/alignment as needed.

### Pages tab

1. Open **Pages**.
2. Choose which pages appear in the header menu.
3. Reorder menu items and rename labels if needed.

### Buttons tab

1. Open **Buttons** and click **Add Button**.
2. Configure button text, link, and style (primary/secondary/outline).
3. Reorder buttons and remove any you don’t need.

### Social tab

1. Open **Social**.
2. Add profile URLs (Facebook, X, Instagram, LinkedIn, YouTube, etc.).
3. Toggle platforms on/off and adjust icon style/appearance.

**Saving:** Changes are typically auto-saved, or you may be prompted to click **Save**.

***

## Footer

The **Footer** editor controls the bottom section of your website.

### How to access

* Click the **Footer** icon in the sidebar.

### Layout tab

1. Open **Layout**.
2. Choose a footer layout (multi-column, centered, minimal, etc.).
3. Configure elements such as:
   * Footer logo (can differ from header logo)
   * Business tagline
   * Footer text / copyright
   * Column arrangement

### Pages tab

1. Open **Pages**.
2. Choose which pages appear in footer links.
3. Organize links into columns (if supported), reorder, and rename labels.

### Social tab

1. Open **Social**.
2. Add and configure social profile links.
3. Toggle platforms, set URLs, adjust icon style/size, and arrange order.

**Saving:** Changes are typically auto-saved, or you may be prompted to click **Save**.

***

## Theme

The **Theme** feature controls your site’s colors and overall look.

### How to access

* Click the **Theme** icon in the sidebar (paint palette icon).

### Themes (pre-built themes)

1. Open **Themes** (default).
2. Browse and click a theme to preview it.
3. Themes typically include coordinated colors for backgrounds, text, buttons, links, and status colors (success/warning/error).

### Generate (AI theme generator)

1. Open **Generate**.
2. Describe the look you want (for example: “Modern blue professional theme”, “Warm autumn colors”).
3. Click **Generate Theme** and preview the result.
4. Repeat with a new prompt if you want different options.

### Save theme

1. Click **Save Theme** to apply your selection permanently.
2. Click **Clear Theme** to revert to your previous theme.

**Note:** Many changes are previewed live but don’t become permanent until you click **Save Theme**.

***

## Font

The **Font** feature lets you customize your website typography.

### How to access

* Click the **Font** icon in the sidebar.

### Choose fonts

1. Browse available font combinations.
2. Compare how headings and body text look across your page.

### Save fonts

1. Click **Save Theme** to apply font choices.
2. Click **Clear Theme** to revert to previous fonts.

**Tips**

* Choose fonts that are easy to read.
* Make sure headings and body text have good contrast and hierarchy.
* Preview fonts across multiple sections before saving.

***

## Settings

The **Settings** area provides shortcuts to configuration pages for your website.

### How to access

* Click the **Settings** icon in the sidebar (gear icon).

### Available settings pages

Click a settings option to open it (often in a new page/tab). If you see an external link icon (↗), you can use it to navigate directly.

1. **General Settings**: Basic website information and general configuration.
2. **Domain Settings**: Connect and manage your custom domain and DNS.
3. **SEO Settings**: Meta titles/descriptions and social previews.
4. **Analytics**: Connect analytics and review traffic reporting.
5. **Integrations**: Connect third-party services and integrations.
6. **Advanced Settings**: Custom code and developer-focused options.

***

## Additional sidebar features

### Tutorial

* Access step-by-step guides and (where available) video tutorials.

### Help

* Open support/chat to get assistance with issues or questions.

### ChatAI

* Ask the AI assistant for help with website changes, content, and suggestions.

***

## Tips

1. **Many changes auto-save**: some tools save as you type.
2. **Watch for explicit Save buttons**: some areas require confirmation.
3. **Preview before committing**: confirm changes look correct before saving.
4. **Use the backdrop**: click outside the sidebar to close a panel.
5. **Focus on one section at a time**: you’ll move faster and avoid conflicts.

***

## Getting help

* Use **Help** for live support.
* Use **Tutorial** for guided walkthroughs.
* Use **ChatAI** for quick questions and assistance.

**Last updated:** November 2025\
**Version:** 2.0