Website Builder
Create your own community website!
Sonoran CMS - Custom Pages
To add website pages to your community, navigate to
Administration Panel -> Customization -> Website Builder
Sonoran CMS - Page EditorOnce your page is created and saved, a dropdown will appear on the dashboard showing all community pages. In this dropdown, you can select the page you want to open it up
Sonoran CMS - Home Page
All pages are public, 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 start editing a page, either add a new page or edit an existing page in the page editing admin menu.
Sonoran CMS - Page Editor
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. |
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. |
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. |
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. |
Forum | Forum Category sections allow you to have a section to display all associated posts to the selected forum category. |
Gallery | Gallery sections are the first element for the gallery system, this allows you to show all posts in the gallery category. |
Through these inputs you can change the page's title, path slug, and privacy setting. As well you're able to add new sections and change the preview size of the editor to visualize different size settings.
With recent updates to the Custom Page Editor you're now able to customize the margin, padding, gutter, alignment and background styling of sections.
Padding: Padding refers to the space between an element's content and its border. It can be used to increase the visual space around a section, or to create separation between sections on a page. In your page editor, you can change padding options for different areas, such as top, bottom, left and right.
Margin: 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.
Horizontal alignment: Horizontal alignment refers to the positioning of a section horizontally within the page. It can be used to center a section or align it to the left or right side of its container. In the page editor, we offer horizontal alignment options such as "start", "center", "end", "around", "between", and "evenly" to allow users to adjust the horizontal alignment of their section.
Vertical alignment: Vertical alignment refers to the positioning of an section vertically within the page. It can be used to align an element to the top, middle, or bottom of its container. In the page editor, we offer vertical alignment options such as "top", "middle", or "bottom" to allow users to adjust the vertical alignment of their section.
Gutters: Gutters refer to the space between elements in a section. They can be used to create visual separation between elements or to adjust the overall layout of a page.
It's important to note that the use of padding, margin, and alignment can greatly affect the design and layout of a page, so it's important to use them thoughtfully and consistently throughout your design. I hope this explanation helps your users better understand these concepts.
Using the three align buttons, different size settings and background options you are able to control the styling of said element.
These three size options; Desktop, Tablet, and Mobile are all different widths your element can have while being under those specific screen size conditions. You can preview how the size changes depending on settings by exiting the element edit modal and switch between the preview size selector above in blue.
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.
Sonoran CMS - Custom Page Editor - Demoing Buttons
Sonoran CMS allows you to customize the top toolbar with buttons to link your users to whatever your community needs.
Sonoran CMS - Toolbar Customization
To customize your community's toolbar head over to the Administrative Panel > Customization > Website Builder. From there you can add buttons, dropdowns and community image with various options. Each button and drop down option has a label and link associated with it, with these set they will be displayed to all community users. Header Design will let you customize the group alignment, background color and admin cog setting. Make sure you click Save before leaving this page.
Sonoran CMS allows you to easily organize the order in which your page sections are listed.
To sort page sections simply drag and drop the sections in the Custom Page Editor.
Pages can now be privatized and require permissions to view, now when editing a page you can change whether or not the page is private. This will then provide permissions for the page within the Department Editor.
Only Private Pages will show in the Department Editor.
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.
Sonoran CMS Custom Page as Dashboard Page
To set a Custom Page as your Dashboard / Landing Page, navigate to the Custom Page Editor. Create a new page or choose between an existing page, once you have the page in mind press the grey home button, this will set it as the landing page.
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.
HTML elements get sanitized before they're saved, displayed or manipulated. There's several HTML tags that are stripped and now allowed, below is the list of allowed HTML tags:
[
"address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
"h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
"dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
"ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
"em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
"small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
"col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "iframe",
"img"
]
Last modified 7d ago