> For the complete documentation index, see [llms.txt](https://docs.sonoransoftware.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sonoransoftware.com/cms/tutorials/community-website/website-builder.md).

# Website Builder

<figure><img src="/files/90jfXPzC6p7QgmpCis4g" alt=""><figcaption></figcaption></figure>

## Page Editing

To access the website builder, navigate to **Administration Panel** > **Website Builder**

Select an existing or **Add New Page** to open the website editor.

<figure><img src="/files/N3lPndYGRBjkGFX95bQ4" alt=""><figcaption></figcaption></figure>

### Sections and Containers

<details>

<summary>Website Sections and Containers</summary>

Custom webpages are made up of two main structural elements, sections and containers.

Sections are blocks inside the webpage. These contain multiple other containers and elements like text or images.

Containers are used to group multiple elements together, align elements horizontally or vertically, and handle spacing between elements. Containers can be nested&#x20;

<figure><img src="/files/CqqnexdacF7K3yXFDCyq" alt=""><figcaption></figcaption></figure>

**Section Styling**

Select the gear icon on a section to open the editor. Sections can have customized backgrounds, colors, sizing, margin, and more.

<figure><img src="/files/7pN6E75JOCbmRj9lqecB" alt="" width="278"><figcaption></figcaption></figure>

**Container Styling**

Similarly, select the gear icon on a container to open the editor. Here, you can customize the ordering, alignment, and spacing for the elements inside the container. Or, customize background colors, padding, etc.

<figure><img src="/files/Di7J2ED0r4f80CvlfqAR" alt="" width="280"><figcaption></figcaption></figure>

</details>

### Elements

<details>

<summary>Webpage Elements</summary>

Elements are items like text blocks, images, buttons, etc. Elements can be dragged-and-dropped inside of a container or section from the toolbox on the right.

Once on the page, click an element to open up the editor. Or, use the resize buttons on the edges to customize the size and positioning.

<figure><img src="/files/wo9fxUErytAEZDjqPgyB" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Button Elements</summary>

If you wish to add buttons to your page, you can add a button or button group section to your page. Each button has several settings that define how the button looks like and acts. Each button can be direct users to external websites, custom forms and custom pages.

Button elements can have individual styles and button group elements can have all group styles.

You can customize by clicking on it. The styling of a button is set in the `Styles` tab, the target link a button leads to is set in the `Target` tab.

<figure><img src="/files/sg1rGb9X9wu8MPRFEL3E" alt=""><figcaption><p>Sonoran CMS - Website Builder - Button Editor</p></figcaption></figure>

For Button Group elements, you can add as many target links as you need, and re-order or delete them using the controls on the top right of each entry.

<figure><img src="/files/5x7dOJsS1U96b9SOWA3z" alt=""><figcaption><p>Sonoran CMS - Website Builder - Button Group Targets</p></figcaption></figure>

</details>

### Screen Size Preview

<details>

<summary>Screen Size Page Preview</summary>

The top right of the page allows you to quickly view your webpage on a desktop, tablet, or mobile size. You can also zoom in and out to ensure your pages look great on all devices.

<figure><img src="/files/h9CRW13NsBipuxdYlnYv" alt=""><figcaption></figcaption></figure>

</details>

### Title and URL Slug

<details>

<summary>Page Title and URL Slug</summary>

At the top of the editor you can name your custom page and enter an optional custom slug. The slug (ex: `home`) defines the custom URL path to view this page.

Select the copy button in the URL slug box for the public page link.

<figure><img src="/files/sPhMbvqpKWvhOXvKxhJP" alt=""><figcaption></figcaption></figure>

</details>

## Page Permissions, SEO, and Other Options

### Privatized Pages

<details>

<summary>Private Website Pages (Rank Restricted)</summary>

{% hint style="info" %}
Only Private Pages will have customizable permissions in the [**Rank Editor**](/cms/tutorials/user-management/creating-departments.md)
{% endhint %}

Pages can now be privatized and require permissions to view. When editing a page, you can select whether the page is public (and can thus be viewed by anyone in the community) or private.

<figure><img src="/files/SxSexrEj0dD4WgzE14uE" alt=""><figcaption><p>Sonoran CMS - Visibility Button</p></figcaption></figure>

If it's set to Private, you can use the dropdown to the right to select what ranks are allowed to view this page.

<figure><img src="/files/LUG3BCIHE34HL1UhHxzT" alt=""><figcaption><p>Sonoran CMS - Open Rank Selector</p></figcaption></figure>

<figure><img src="/files/RbNNeipJ55EoXvB28yhS" alt=""><figcaption><p>Sonoran CMS - Select Rank to View Page</p></figcaption></figure>

</details>

## Default / Home Landing Page

<details>

<summary>Setting the CMS Homepage</summary>

Sonoran CMS allows you to easily customize the landing page/dashboard for your community, this page is the first page your members will see from signing into your community. This allows the full customization of a custom page for your landing page.

<figure><img src="/files/WTW0oKVgwL2rAQqZF6gB" alt=""><figcaption><p>Sonoran CMS Custom Page as Dashboard Page</p></figcaption></figure>

To set a Custom Page as your homepage, navigate to the main page for the Website Builder and look under the section titled `Website Pages`. Locate the page you wish to use as your homepage and press the grey gear icon then the grey home icon, this will turn it orange and set it as the landing page.

<figure><img src="/files/xaQ65ls7ZZFKl7pK8AIH" alt=""><figcaption><p>Sonoran CMS - Set Homepage</p></figcaption></figure>

</details>

## Page SEO

<details>

<summary>Page SEO (Embed Content)</summary>

Clicking on the cog on the right side of the `Page Title` box will open the SEO panel. Here you can set a custom image and description for the website's page. These will show in embeds, such as when you paste the link in Discord.

<figure><img src="/files/bDVc21QT2PH4bnqPI4LX" alt="" width="213"><figcaption><p>Sonoran CMS - SEO Panel</p></figcaption></figure>

If you have a **Standard** subscription or higher, the "Sonoran CMS" branding in the title will be removed.

Please be aware that Discord will locally cache the embed info - so updates may not show right away.

<figure><img src="/files/TA5YoZkvva6zIssQEJqg" alt="" width="289"><figcaption><p>Sonoran CMS - SEO Discord Embed</p></figcaption></figure>

Additionally, there are third party sites such as [HEY META](https://www.heymeta.com/) that can be used to check your page's "meta" tags and show it, without caching like Discord would. After you've saved the page, you can use this to verify that the image and description display how you want.

</details>

## Custom Domain

Sonoran CMS allows you to display your community website [on your own domain](/cms/tutorials/customization/custom-domain.md)!

{% content-ref url="/pages/-Mfo1lSfL4dcDwn3Mven" %}
[Custom Domain / Vanity URL](/cms/tutorials/customization/custom-domain.md)
{% endcontent-ref %}

## Toolbar

Sonoran CMS allows you to [customize the top toolbar](/cms/tutorials/community-website/toolbar-customization.md) with buttons to link your users to whatever your community needs.

{% content-ref url="/pages/jZX4fe5WCkzFN9VORPOG" %}
[Toolbar Customization](/cms/tutorials/community-website/toolbar-customization.md)
{% endcontent-ref %}

## HTML Elements Limits

<details>

<summary>HTML Elements Limits (Sanitization)</summary>

HTML elements get sanitized before they're saved, displayed or manipulated.

* **Allowed Tags**: A wide range of HTML tags for different purposes including:
  * Structural elements like `header`, `footer`, `main`, `nav`, `section`.
  * Text formatting tags such as `h1` through `h6`, `strong`, `em`, `b`, `i`.
  * List elements like `ul`, `ol`, `li`.
  * Table components including `table`, `th`, `td`, `thead`, `tbody`, `tfoot`.
  * Media embedding tags `img` and `iframe`.
  * Inline elements like `span`, `br`, `mark`, `small`.
  * Text semantic tags such as `time`, `code`, `var`, `samp`.
* **Attributes**:
  * Allows `style` universally.
  * For `a`: `href`, `name`, `target`.
  * For `img`: `src`, `srcset`, `alt`, `title`, `width`, `height`, `loading`.
  * For `iframe`: `src`, `height`, `width`, `name`.
* **Styles**:
  * Basic layout and visual styling such as `width`, `height`, `border`, `padding`, `margin`, `background`, `display`, `opacity`, `overflow` and `visibility`.
  * Specific regex patterns are set for `color`, `text-align`, and `font-size` to control text styling and coloring with precise formats.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.sonoransoftware.com/cms/tutorials/community-website/website-builder.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.