LogoLogo
SupportServer Hosting
  • Sonoran CMS
  • 📱Download the App
  • Other Products
    • 🖥️ FiveM Hosting
    • ⌨️ Sonoran CAD
    • 📡Sonoran Radio
  • Why choose Sonoran CMS?
    • 🏆Why Choose Sonoran CMS?
  • Tutorials
    • Getting Started
      • Account Registration
      • Community Registration
      • Inviting Users
      • Troubleshooting
    • User Management
      • Creating Ranks
      • Setting User Ranks
      • Community Profile
      • Creating Rosters
    • Community Website
      • Website Builder
      • Toolbar Customization
      • Forums
      • Image Gallery
      • Navigation Permissions
    • Customization
      • Community Branding and Settings
      • Custom Domain / Vanity URL
      • Profile Fields
    • Calendar Events
    • Drive & Documents
    • Forms and Applications
      • Creating Forms
      • Form Submissions
      • Clock In/Out System
    • Administrative
      • Archive Community Member
      • Delete & Transfer Community
      • Delete User Account
      • View Your Limits
      • Growth and Discovery
        • Growth Panel
        • Discovery
      • Security Center
        • Account Flags
        • Logging Center
      • Disciplinary Panel
      • URL Shortener
  • Integration Capabilities
    • Sonoran CAD Sync
    • Sonoran Radio Sync
    • Discord Bot Integration
    • TeamSpeak 3 Role Sync
      • Getting Started
      • Adding Ranks
      • Adding your TeamSpeak UID
    • Discord Rich Presence
    • Discord Webhooks
    • FiveM Game Panel
      • Installation
      • QBCore & Qbox Panel
        • Dashboard
        • Players
        • Vehicles
        • Whitelist
        • Logs
        • Resources
        • Aces & Principals
        • Characters
        • Items
        • Jobs
        • Gangs
        • Job Sync
        • Environment
      • vMenu Panel
        • Dashboard
        • Players
        • Vehicles
        • Environment
        • Whitelist
        • Logs
        • Resources
        • Aces & Principals
    • Sonoran Shield
    • In-Game Integration Resources
      • FiveM Installation
        • FiveM Installation - Next Steps
        • FiveM Submodules
          • Clock In
          • Ace Permission Sync
          • Whitelist
          • Job Sync
      • Minecraft Integrations
        • Minecraft Resource Installation
        • Available Resources
          • Whitelist
      • Roblox Integrations
        • Roblox Resource Installation
        • Available Resources
          • Whitelist
      • IP Whitelisting
  • Developer API Documentation
    • 📖API Integration
      • Getting Started
        • Retrieving Your Credentials
        • API ID System
      • Push Events
        • Account Updated
        • Account Kicked
        • Account Banned
      • API Endpoints
        • General
          • Get Sub Version
          • Check Com API ID
          • Get Com Account
          • Get Current Clock In
          • Get Accounts
          • Get Departments
          • Get Profile Fields
          • Get Account Ranks
          • Set Account Ranks
          • Clock In Out
          • Kick Account
          • Ban Account
          • Edit Account Profile Fields
        • Servers
          • Get Game Servers
          • Set Game Servers
          • Verify Whitelist
          • Full Whitelist
        • Events
          • RSVP
        • Rosters
          • Get Roster Contents
        • Disciplinary
          • Get Member Points
          • Get Member Records
          • Add Member Record
          • Update Member Record Points
          • Update Member Record Reason
    • 🌎Translation Support
  • Roadmap
    • 📋Changelog
  • Other
    • Sonoran CMS
    • AI QA
    • Contact Us
    • Policy
      • Terms of Service
      • Privacy Policy
      • Refund and Purchase Policy
      • Promotions
        • 03/10/25-03/17/25 Suggestions
  • Pricing
    • Pricing FAQ
      • Branding Removal
      • Military and First Responder Discount
      • Expert Installation
      • Free Plugin Installation and Discount - Sonoran Servers
      • Accessing the Payment Center
      • Create and Manage a Subscription
      • Request Discord Role
    • View and Compare Plans
Powered by GitBook
On this page
  • Page Editing
  • View Your Page
  • Basic Information
  • Section-Specific Styling
  • Element Sizes, Alignment and Background
  • Buttons
  • Privatized Pages
  • Default / Landing Page
  • Custom Page Paths
  • Page SEO
  • Custom Domain
  • Toolbar
  • HTML Elements Limits

Was this helpful?

Edit on GitHub
  1. Tutorials
  2. Community Website

Website Builder

Create your own community website entirely within Sonoran CMS!

PreviousCommunity WebsiteNextToolbar Customization

Last updated 12 months ago

Was this helpful?

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

Page Editing

To start editing a page, either add a new page or click on an existing page in the page to open up the page editor.

View Your Page

On public pages you can copy the URL after going to a page and share it with anybody, they don't even have to be part of the Sonoran CMS community!

To add sections to your web page, simply drag and drop your desired section type in from the left hand side. The following section types are available to use:

Element Type
Description

Text

The text section includes a rich editor for including blocks of text. In this editor, you are able to set font sizes, bold, italic, underline, strike-through, and more!

Image

Image sections allow you to insert one image into your page, just paste a link to the image in the text box.

Image Carousel

Allows you to insert multiple images in the space of one, automatically cycling between them.

Video

The video section can be used to insert YouTube links into your custom page, just paste a regular YouTube link (or a shortened one) into the text box.

Forum Category

Forum Category sections allow you to have a section to display all associated posts to the selected forum category.

Button

Button sections allow you to put individual buttons on your page that can be directed to an external page, custom form, or custom page.

Button Group

Button Group sections allow you to have a group of buttons together on your page that can be directed to an external page, custom form, or custom page.

Card

Allows you to add and customize "cards" which can be configured to display information on members or characters as well as links.

Information Block

Information Block sections allow you to add multiple blocks to provide information for, these can be configured to grab "Total Community Members", "Total Department Members" or "Custom". "Custom" allows for customizable text.

Gallery

Gallery sections are the first element for the gallery system, this allows you to show all posts in the gallery category.

HTML

Basic Information

From the website builder's toolbar you can change the page's title, path slug, and privacy setting. Additionally, you're able to add new sections, and change the preview size of the editor to visualize different size settings.

The device preview feature allows you to choose from a list of devices, or set your own custom resolution to give you further control over designing your community's website with mobile responsiveness in mind!

Section-Specific Styling

Sections are containers for elements that exist within a webpage. You can add multiple sections and resize / move them however you'd like.

You can customize the margin and background styling of specific sections.

Margin refers to the space outside an section. It can be used to create space between sections on a page or to push elements away from the edges of the page. In your page editor, you can change margin options for different areas, such as top, bottom, left and right.

You can also dynamically resize and position sections by clicking any of the boxes around the edges and dragging them to your desired position.

There is also a button at the top of the section that allows you to click and drag to move the section:

Element Sizes, Alignment and Background

You can also control the size of individual elements using the same method above, and you can click and drag to move any element wherever you'd like.

Elements will also snap to center lines within their respective section to assist with positioning.

In the top right corner of the button element above, you can see an orange lock icon. This means that this element is locked to the section its in. To move an element to another section, you can click this button to unlock the element, drag it to the section you desire, and then re-lock it.

Buttons

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.

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.

Privatized Pages

Only Private Pages will have customizable permissions in the Department Editor

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.

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

Default / Landing Page

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.

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 home button, this will turn it orange and set it as the landing page.

Custom Page Paths

Custom Pages can now have a custom path to the page, this path will append to the Sonoran CMS URL. If you're using a custom domain it'll detect that and provide the proper URL.

Page SEO

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.

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.

Custom Domain

Toolbar

HTML Elements Limits

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.

Once your page is created and saved, you can or copy the URL to access it.

If you know HTML you can further customize your page by directly adding HTML code. To edit the HTML you must click on the element and input your HTML into the text box for. Please not you are .

Additionally, there are third party sites such as 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.

Sonoran CMS allows you to display your community website !

Sonoran CMS allows you to with buttons to link your users to whatever your community needs.

HEY META
on your own domain
customize the top toolbar
add it to the toolbar
limited to certain element types
Sonoran CMS - Custom Pages
Sonoran CMS - Page Editor
Sonoran CMS - Copy Page URL
Sonoran CMS - Webpage Toolbar
Sonoran CMS - Webpage Toolbar - Device Preview
Sonoran CMS - Website Builder - Edit Section Margins
Sonoran CMS - Website Builder - Resize Section
Sonoran CMS - Website Builder - Move Section
Sonoran CMS - Website Builder - Resize & Reposition Element
Sonoran CMS - Website Builder - Button Editor
Sonoran CMS - Website Builder - Button Group Targets
Sonoran CMS - Visibility Button
Sonoran CMS - Open Rank Selector
Sonoran CMS - Select Rank to View Page
Sonoran CMS Custom Page as Dashboard Page
Sonoran CMS - Set Homepage
Sonoran CMS - Page URL Slug
Sonoran CMS - SEO Panel
Sonoran CMS - SEO Discord Embed