# Website navigation

### Home

**Three dots menu** — Open the **Page SEO** section to improve how your pages appear in search results.

* **SEO Metadata** - Metadata is information about your page that search engines read.
  * **Title** — The page title that appears in search results.
  * **Description** — The page description is displayed under the title in search results.
  * **Keywords** — Words and phrases people search for related to your page content.
  * **Images** — Add images for image search optimization.
* **Custom Code** — Add custom code to your website for advanced SEO and tracking.
  * **Header Code** — Code added to your page's `<head>` section (used for meta tags, analytics, etc.)
  * **Body Head Code** — Code added at the beginning of your page's `<body>` section.
  * **Body Footer Code** — Code added at the end of your page's `<body>` section (used for tracking pixels, analytics, etc.)

**Site Navigation Bar** — Edit your website's main menu.

* **Content Tab** — Edit and manage the actual content and elements that appear in your navigation bar.
  * **Navigation Links** — Manage the menu links that appear in your navigation bar.
  * **Logo** — Upload or manage your business logo.
  * **Alt Text** — Helps search engines understand your image, improving SEO.
  * **Logo Link Toggle** — Control whether your logo is clickable. When enabled, visitors can click your logo to go to your homepage or any other page you configured.
  * **Call to Action Section** — Add a button or link that encourages visitors to take action.
    * **Text** — The button text that appears (e.g., "Book Now," "Contact Us," "Get Started").
    * **Style** — Design options for how the button looks:
      * Solid
      * Outlined
      * Text
    * **Action** — What happens when someone clicks the button:
      * Navigate to a page. (Services, Contact, etc.)
      * Open a booking form.
      * None.
* **Design Tab** — Customize how your navigation bar looks visually.
  * **Navigation Position** — Controls where and how your navigation bar appears on your website.
    * **Always Visible** — Your navigation bar stays visible at the top of the page as visitors scroll down. They can always access your menu.
    * **Hidden on Scroll** — Your navigation bar automatically hides when visitors scroll down the page, and reappears when they scroll back up. This saves screen space on mobile devices.
  * **Link Color Section** - Controls the color of your navigation links.
* **Page Sections** — These are the individual content blocks displayed on your website.
* **+ Add Section** — Add new content blocks to your website.
* **Footer** — Edit the footer of your website.
* **Site Design** — Customize the overall visual appearance and styling of your entire websit&#x65;**.**
  * **Colors** — Controls the color palette for your entire website.
    * **Color palette** — A selection of pre-designed color schemes.
    * **Primary** **buttons** — The color of action buttons. (Book Now, Contact, etc.)
    * **Titles** — Color of page titles and headings.
    * **Text** — Color of body text and regular content.
    * **Links** — Color of hyperlinks.
    * **Background** — Background color of your website pages.
    * **Borders** — Control the outline or edge styling of design elements on your website.
* **Section Spacing** — Controls the padding and spacing between content sections.
  * **Bar slider** — Allows you to adjust spacing visually.
    * **Less Padding** — Tighter spacing between sections. (more compact look)
    * **More** **Padding** — More space between sections. (more spacious look)
* **Fonts** — Controls the typography (fonts) used throughout your website.
  * **Hero Font** — The large, prominent font used for main headlines and hero sections.
  * **Header** — Font used for page headers and major section titles.
  * **Heading** — Font used for secondary headings.
  * **Subheading** — Font used for subheadings and smaller titles.
  * **Titles** — Font used for various title elements.
  * **Text** — Font used for body text and regular content.
* **SEO & Tracking** — Controls default SEO settings and code that applies across all pages.
  * **Default SEO Metadata** — Controls the default search engine information for your website.
    * **Default Title** — The default page title that appears in search results if a specific page doesn't have its own title. This is the main headline shown in Google search results.
    * **Default Description** — The default page description shown under the title in search results. This is the preview text that helps people decide whether to click your link.
    * **Default Keywords** — Default keywords and phrases that search engines use to understand your website content and match it to search queries.
    * **Images** — Default images associated with your website for search results and social media sharing.
    * **Site Logo** — Your business logo that appears in search results and when your website is shared on social media.
    * **Default Favicon** — The small icon that appears in browser tabs next to your website name. Helps with branding and recognition.
    * **Use Default URL Toggle** — A switch that controls whether to use default URL settings across your site or customize per page.
* **Custom Code** — Add custom code for advanced tracking and functionality.
  * **Header Code** — Custom code added to your page's `<head>` section.
  * **Body Head Code** — Custom code added at the beginning of your page's `<body>` section.
  * **Body Footer Code** — Custom code added at the end of your page's `<body>` section.

### Website view

* **View Options** — Preview your website on different devices.
  * **Desktop view** (laptop icon) — Shows how your website looks on computers and larger screens.
  * **Mobile view** (phone icon) — Shows how your website looks on smartphones and tablets.
* **Analytics** — View your website performance data.
  * Total Visitors.
  * Page Views.
  * Avg. Views per Visitor.
  * Form Submissions.
* **Pages Dropdown List** — Navigate between different pages on your website.
* **Light Indicator** — Color-coded lights that indicate your website status.
  * **Yellow light** = Work in progress, not yet published.
  * **Green light** = Published and live for everyone to see.
* **Publish** — Control status of your website.
  * **Draft** — The page is saved but not yet published to the internet. Only you can see it.
  * **Live** — The page is published and visible to the public on your website.
  * **Publish** — The action button that publishes your changes from Draft to Live status.
* **Website Preview** — Shows how your website looks in real time as you make changes. As you edit your navigation bar, colors, fonts, or content, the preview updates instantly.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.wonderly.com/help/wonderly/wonderlys-navigation/my-business-navigation/website-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
