posted this on July 10, 2013 11:21 AM
The website builder is unique because it allows you to pull content from your portal to a public facing website with little to no coding experience. To access this ‘Website’ module, select it along your portal’s left-hand toolbar. If you do not see this module, read this article on how to enable it. The website builder is broken into five different sections. See below for an explanation of the capabilities available within each tab.
This tab allows you to define, create, and edit each page on your website. To create a new page, locate this option in the top right of the interface. To the right of each page, you are provided it’s Quick URL (which can be used to link to the page) and several tools, including the edit, clone, and delete options.To make changes to a particular page, click on the edit (pencil) button. This will jump you into the CK editor used to customize each page of the website. The most important option within the editor is 'OS Modules,' because it allows you to pull content created within the application onto your public website. For example, if you choose to place your calendar on the website, any events you create within the app and set to ‘public’ will automatically populate to the website calendar. Locate this option in the top left of the editor and select it to view your available options.If at anytime you wanted to preview a page, click the icon under the ‘View’ column on the 'Pages' list. You can also utilize the ‘View Your Website’ button, which appears on every tab within the website builder.
This tab is a section used exclusively for images you plan to use on your website.
This is where your website’s stylesheet (CSS) and any other files you want to use on your website are stored. You can customize the stylesheet to make formatting changes by clicking the edit button. We suggest gaining a thorough understanding of CSS before making changes to this file. It’s easy to make a mistake that can break your site. All website resets must be handled by a member of the OrgSync staff and you will lose all content in the process.
This tab is broken into three separate text documents: the meta/head, header, and footer. The meta/head is used to communicate with browsers and search engines. It includes things like website title, description, keywords, and the favicon. Nothing you do here will actually affect the layout of the site.The header is used most often to define the navigation bar. Adding a new page does not automatically create a clickable link on the header. This has to be done manually within the code. See the following screenshot. The red box outlines the section of the code used to create each header link. To create a new link, simply copy and paste one of these lines of code. It’s important to change the pieces underlined in blue and green. The blue indicates the page name while the green indicates the name that will appear on the link.The footer typically represents what appears at the bottom of each page on your website. This is often used for a disclaimer, contact information, or even further navigation.
This tab allows you to change your website’s URL and re-order your officers (if you are utilizing the officers module on one of your pages). The first portion of the URL is uneditable and determined by your umbrella. If you would like to redirect an existing website to your OrgSync page, this must be handled through the hosting company. This process is not handled in OrgSync.
If you're interested in learning more regarding the principles behind HTML and CSS, we've compiled a short list of useful external resources below which will empower you to make the most of your website building experience.