Help Desk/Training/Website Builder

Website Builder Walkthrough

Support Team
posted this on July 10, 2013 11:21 AM

Every portal comes standard with a website builder, public URL, and website hosting to help increase online visibility. Your website is easy to setup and updates automatically as you add content in OrgSync. To access the website builder, select 'Website' along your portal’s left-hand toolbar. If you do not see this module, read this article on how to enable it. This article includes a video training as well as a complete breakdown of the sections that constitute the website builder.

2014-04-04_1557.png


Pages

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.Student_Gov_t_Website_Builder-9.jpgTo 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.Student_Gov_t_Editing_a_Content_Page.jpgIf 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.


Images

This tab is a section used exclusively for images you plan to use on your website.Student_Gov_t_Website_Builder-10.jpg


Files/CSS

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.Student_Gov_t_Website_Builder-11.jpg


Template Elements

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.Student_Gov_t_Website_Builder-12.jpgThe 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.Student-Gov_t-Updating-the-Header-2.jpgThe 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.


Settings

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.Student_Gov_t_Website_Builder-13.jpg


Additional Resources

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.

 
Topic is closed for comments