The Crossbar page builder allows your club webmasters to easily design pages on your website without any coding.
Pages are broken down into sections. These sections are comprised of columns. And in each of those columns you can add elements.
Sections
To add a section to the page, use the ADD SECTION panel at the bottom. There you will find six different layouts to add to your page. All of these layouts are responsive, which means that on a mobile device they will stack on top of each other as opposed to a side by side format.
Here is an example of an empty three-column section. The controls for the section are to the right. You can move them up/and down using the arrows. You can clone using the double-square icon. And you can remove the section by double-clicking on the trash can icon.
Elements
To add elements to your columns, simply click the ADD ELEMENT button at the bottom of the desired column. That button will present you with a list of element types to add.
Header - Larger text with options to include a divider. | Text - A rich text editor with functionality such as bold, text highlighting, lists and links. | Link - A standalone link that can optionally be displayed as a button. |
Image: Upload an image to display on your page. | Document: Upload a document that your users can download. | Video: Embed a YouTube or a Vimeo video into your page. |
Table: Upload a CSV to display a table within your page. | Contact: Add a person to a page including their name, email and phone. Picture optional. | Code: Allows you to paste in custom HTML code. |
Add your Element
Once you select an element to add, you'll be presented with a form to populate that is different for each element. Simply enter all of your information and then click ADD.
Editing & Moving your Element
Once you have an element on the page, move your mouse over the element. This will expose your element controls. There you can click the edit icon to edit and you can double-click the trash icon to delete. You can also hold down on the element to drag it to any other column in any section.
Saving a Page
Remember to always save your page!
The SAVE button will display on the floating bar at the bottom of the page. Your edits will not be saved unless you click the SAVE button. From here you can also mark the page as published so it shows up in your navigation.
Details
Clicking the DETAILS button allows you to rename your page or move it to a different section of the navigation.
SEO
If you are an SEO-conscious club, you can set your meta tags from here. This section also allows you to enter custom script tags to display in the header for the page.