1.0 The Dashboard

1.1 Site Actions Screen:

1.2 Menu

The bar across the top of the system is where you can access all the features involved in the of the sites themselves. The Menu is available at all times. From here you can access all the items that are available on the site dashboard as well as make changes to your personal information.

Site Actions
The Site Action dropdown shows you all of the general actions that you can utilize when managing your website. From uploading documents, managing images, creating templates, and simply editing your site content this is the first place you should look when you want to make any changes you your website. All of the available options here are also mirrored on the main site dashboard screen.

Personal
The Personal dropdown is located where you see your name written in the upper right hand corner of the system. When you mouse over it, you will be able to change your password, and log out.

1.3 Buttons

Edit Site
The Edit Site button is the main place you will go to actually make changes to your website. Click this button whenever you want to edit text, images, documents, media, etc on your website. The actual site editing is explained in section 2.0 Editing a Site.

Site Pages
When you click on Open Site Map you will be able to browse through all of the pages in your site by links. Here you are able to clone pages, create new pages and folders, and delete pages from the sitemap if they are no longer active. Most of this functionality is also available in the Site Map Pullout located at all times on the far left of your screen and opened by clicking on the small gray rectangle. Explanations for the majority of the Site Map use is explained in section 5.0 Managing Templates.

Manage Images
The Manage Images button opens up the Image Manager. From here you can upload (individually or in batch) images that you would like to have available for use with your site. You can create new folders as well to better organize the images that you are adding to the system. It is important to note that you do not have to upload images you want to work with ahead of time if you don't want to. You can change images on the fly from the Edit Site screen. This just gives you the option to manage images you want ahead of time. Greater detail on image management is explained in section 3.0 Managing Images.

Manage Documents
If you are looking to upload PDF's, MP3's, AVI's, basically anything that isn't an image, clicking on the Manage Documents button is the place to go. This will bring up the Document Manager which allows you to upload these files to your website for use. It is very similar to the Image Manager allowing for you to upload files, create new folders, and manage your documents. Full explanation of how to use the Document Manager can be found in section 4.0 Managing Documents.

Manage Templates
If you want to create, delete, or edit templates the Manage Templates button is the place to click. This button allows for managing of templates, it is not where you go to actually create new pages from templates. To find all about templates check out section 5.0 Managing Templates.

Manage Navigation
Edit your sites navigation in this area - be sure to copy your new page name that you have created in the templates section to create link for the navigation.

1.4 Quick Links

The Quick Links section is a list of handy shortcuts to help stream line your workflow. Lots of times you might want to edit the same page repeatedly, or you might want to quickly return to an edit you were making. You can find links to those pages here.

Recent Drafts
This section shows recent drafts that have been started and saved without going to publish.

Recently Published Pages
This section shows all the pages that have had changes published recently. This is a really handy way of getting to the pages you change often efficiently.

Login to CMS

2.0 Editing a Site

2.1 Site Editing Screen:

2.2 Navigating Your Site

Please note: The most full proof way of editing anything on your site is via the grey edit bubble that will appear near editable content.

The first step to editing your website, is learning how to get around to all the different pages in it. Navigating your site with this system is just like navigating your site in your web browser. Making adding new pages, browsing old pages, and updating current pages a breeze. In case you do have some questions, all the ways to navigate your site are include below.

Internal Navigation
The simplest way to get around in the system is to simply use your websites Internal Navigation. Click on the page you would like to edit (i.e. About), the system will browse to that page and display it with the editable regions highlighted. You have full use of your browsers back and forward buttons as well, if you want to go back to the previous page you were on.

Please note:
Sites with multiple javascript elements on the homepage such as sliding galleries may appear differently in the editor. For these elements to be editable the motion script has to be disabled occasionally. Fear not these elements, once published, will regain their dynamic javascript motion.

Site Map
Another option is to use the Site Map Pullout on the left side of your web browser. In the vertical middle of the page you will see a gray rectangle, clicking on this will open up the Site Map Pullout and allow you to click through all of your pages and folders. There are many benefits to using the Site Map Pullout, as it can be a much faster way to reach pages that are buried in sub navigation. Also the Site Map Pullout has the ability to create new pages from templates, and delete old pages that are no longer in use. In depth information on this can be found in section 5.0 Managing Templates.

Address Bar
Just like with your web browsers Address Bar, you can enter the exact URL to the page you would like to edit. This may not take advantage of all the pretty features, but it sure does get the job done quickly! The address bar is the only way to get to pages that haven't been added to the navigation or sitemap. For example if you are testing out a whole new section of your site, this would let you put in the exact URL and get to just that page.

2.3 Editing Text

Editing text is part of the core functionality in the management system. When you navigate to a page you would like to make text changes on, you will see small grey edit callouts. These callouts indicate that the element they are hovering over can be edited. When it is a text element you will see a small paper and pencil icon in the callout. Click on the callout you would like to edit and it will load up a window containing a What You See is What You Get (WYSIWYG) editor.

The WYSIWYG editor provides you with all the tools you need to create well-formed text. You're no doubt familiar with the majority of the buttons in the editor from use of word processing programs in the past.

Once you have made a change, click the preview button at the lower left of the editor. This will show you a preview in the system of what your website will look like with you changes made. Your website has not been updated yet.

One of the most important parts of editing text is making sure you have the correct style selected. This style has been pre-determined by Andrew Hogg Design and it is crucial to maintaining the aesthetic of your site that the intro - heading and body copy text styles are maintained consistently throughout the site. Once in the editor select text and notice how the two style selector changes (see below).

2.4 Changing Images

The process for changing images starts out very similar to Editing Text, only the green callouts have a small image preview icon in them. Clicking on an image you want to edit loads up the Image Manager.

The Image Manager lets you upload a new image or choose from images you have already uploaded to the system. Once you have selected an image, the Zoom Crop window will load up letting you crop that image to fit perfectly in the place of the image that already existed. This way you never have any stretching or distortion, and your website always looks crisp.

After you click preview. This will show you a preview in the system of what your website will look like with your image changes made. Your website has not been updated yet.

If you have decided you like what you see, you can mouse over the Page Actions button in the preview window, publish the changes immediately or save a draft that can be published or edited further at a later date.

Power User Tip: If you want to place an image in line with text, there is a button in the WYSIWYG editor with a small green tree on it. This button lets you place an image directly into your website. Click on the button and you can type in a URL, or you can load up the Image Manager by clicking on the "Browse" button to the left of the "Image URL" field. Once you have an image selected click the Insert button, and proceed to make edits with the WYSIWYG editor.

2.5 Editing Links

Editing Links starts out very similar to Editing Text, only the green callouts have a small link icon in them. Clicking on an image you want to edit loads up a link editor box.

Text Links
Once the editor box loads up you can change the display text of the link by editing the "Text" field. You can change the URL it links to by typing in a URL in the "URL" field. If you want to link to a Document or Image in your respective system libraries click either the "Document" or "Image Button" once you have selected the appropriate file click the preview button to see the update.

Image Links
Once the editor box loads up you can change the image of the link by clicking the "Change Image" button. You can change the URL it links to by typing in a URL in the "URL" field. If you want to link to a Document or Image in your respective system libraries click either the "Document" or "Image Button" once you have selected the appropriate file click the preview button to see the update.

After you click preview. This will show you a preview in the system of what your website will look like with your link changes made. Your website has not been updated yet.

If you have decided you like what you see, you can mouse over the Page Actions button in the preview window, publish the changes immediately or save a draft that can be published or edited further at a later date.

2.6 Optional Features

These are features that the system offers that aren't considered a core feature and may or may not be enabled.

SEO
If this is enabled you will see a red bulls eye with the label SEO in the website preview window. When you click on this it will open up a small window that gives you this specific pages Meta information, which will help to target website search results.

The Page Title field is where you would put the current pages title (i.e. Contact Us)

The Page Keywords field is where you can place words that you would want search engines to associate this page in your website with. (i.e. communication, contact, phone number)

The Page Descriptions field is where you can put a more descriptive sentence about this page (i.e. Please use this information to contact us anytime using the following methods.)

Content History

If Content History is enabled you will see a button that says "Content History" in the Page Tools drop down. When you click on this button a pullout will open from the left side of the preview screen. This will contain a list of drafts and published changes you have ever created with the system on the page you are editing.

Published pages are numbered by whole numbers; drafts are the numbers after the decimal point. For instance History 6.8 would be the 8th draft on the 6th publish.

When you click on a saved record it will load the way the page looked at that time into the preview window. You can then publish the older (or newer) version to your website. This will create a new history record starting from that point on.

Login to CMS

3.0 Managing Images

3.1 Image Management Screen:

3.2 Image Manager

The Image Manager is where you go to handle your image needs in the system. This powerful tool allows you to store, organize, edit, and insert any images that you want to use on your website. It has a myriad of features to help with your websites visual presence.

Uploading a New Image
To get started with the Image Manager click the "Manage Images" button from either your Site Dashboard or the Site Actions drop down list in the menu. Once the window has popped click the button labeled "Upload New Image" in the upper left of the Image Manager. Browse to the image or images on your computer you would like to upload and click OK (or Select on a Mac).

That's it you will see a progress bar show up on the screen and your images will be added to the Image Manager.

Editing Image Details
If you want to edit the details of an image that you have uploaded into the system, all you have to do is mouse over an image and click the "Edit" button. From here you can edit the "Image Name" and the "Description". In more advanced integrations these are used to get the Image details into galleries.

3.3 Folders

Folders are used to keep your images organized. If you have ever used folders on a computer in the past, you will find this very similar. To create a new folder you first click on the "Folder" link next to "Create New" in the upper left hand corner of the Image Manager. This will bring up a box where you will type in the folder name. Click the "Create" button to complete the creation of the new folder. You will now see the folder you created added to the list of folders on the left side of the Image Manager. If you click on the folder name you will enter the folder. Once inside you can add images to this folder just like you did in the Uploading a New Image section above.

To remove a folder click on the red "X" next to the folder name. This will remove both the folder and the images contained within. If you accidentally delete the folder or images, they will remain on your website if they have already been included in a past published page. You will need to upload the images you deleted again if you want to use them in the future.

3.4 Optional Features

Folder Publishing
If you have a dynamic gallery that uses the Folder Publishing feature, this is how you update your website. When you are in the folder that the gallery is based on, there is a green text button in the Image Manager navigation that says "Publish Gallery" clicking on this will update your photo gallery with whatever images are contained within the folder. Think of this as syncing your gallery. If you add a new image and publish, that image will be added to your gallery. If you remove an image, and publish that image will be removed from you gallery. Depending on the extent of your gallery integration it is also going to be important to keep your Image Details up to date as well.

Image Optimization
When the Image Optimization feature is enabled, you can do extensive image editing and manipulation right in the system. To use this feature, mouse over the image you want to optimize and click "Optimize' your picture will now be pulled into a full on editing suite that allows you to create effects and fix errors in your images.

Once you have made your changes click the "Done" button on the left toolbar. Then click the "Save" button. This will overwrite your original image. This new image is now good to go and can be used right from the Image Manager on your website.

Login to CMS

4.0 Managing Documents

4.1 Document Management Screen:

4.2 Document Manager

To access the Document Manager click on the Manage Documents button on the dashboard. This will load up the Document Manager. From here you can upload and manage files that you would like to have access to on your website. For example these could be PDF's, Music, or Video files. Once they have been added to the Document Manager you will have full access to them for linking within your website.

Uploading a Document
Uploading documents is very similar to uploading an Image. Click on the "Upload a New Document" button. Browse to the file you would like to upload, and then click "OK" (or "Select" on a Mac) to upload the file. After the loader finishes, the file will now be available for use on your website. Folders work the same as they do in the Image Editor.

Editing Document Details
Editing Document details is functionally for cosmetic use. It allows you to give your own name for a file, instead of being forced to use the actual filename. To change the details, mouse over the file, click the EDIT button, change the "Document Name", and then click the SAVE button. You are all set. While the filename itself hasn't changed, the way you see it in the System is now cleaner and more effective for easy sorting, by your own personal preferences.

4.3 Using Documents

Once you have uploaded a file you are ready to use it in your website. Click on an editable element in the systems editor. Highlight the text you would like to make as a link and click the "Make Link" button in the WYSIWYG toolbar. Click on the browse icon to the right of the LINK URL section, this will load up the Document Manager. Click the document that you want to link too. Click the "Insert" button, and then publish your changes to commit the file linkage to your website.

Login to CMS

5.0 Managing Templates

5.1 Template Management Screen:

5.2 Template Manager

To manage templates click on the Manage Template button from the site dashboard or the Site Tools drop down. From here you have all the tolls you need to deal with templating in the system.

New Template
To create a new template from scratch click on the "New Template" button. Give your template a name, in the Template Name field. Next click on the Code tab, and copy and paste the code for your template here. Click the "Save Template" button and you're all done.

You can remove any template at any time by clicking the delete button next to the template. This will NOT delete any pages already created from this template.

Clone Page
To create a new template based upon a page that is already in your website, click on the Clone Page button. This will bring up a list of pages already included in your sites Site Map. Click on the page you would like to clone, and then click the "OK" button. You will see a new template is now created and titled after the page you cloned. If you would like to give it a more descriptive title you can click on the EDIT button next to it, and give it a new name, and even make changes to the code.

NOTE: This method is for cloning static pages. It flattens any page includes and dynamic content. If you are unsure about which method to use, or if you have page includes choose the Clone FTP Target option outlined below instead.

Clone FTP Target
Using this method you will actually create a template based on the raw source code of the file you choose. Instead of taking the rendered HTML from the sitemap, it will take the raw code including any dynamic content and page includes from the FTP Source.

Click on the Clone FTP Target button. This will bring up a list of pages on your websites ftp. Click on the file you would like to clone, and then click the "OK" button. You will see a new template is now created and titled after the page you cloned. If you would like to give it a more descriptive title you can click on the EDIT button next to it, and give it a new name, and even make changes to the code.

NOTE: This is the preferred method for creating new templates.

5.3 Page Creation from a Template

Using Site Map Screen
Click on the "Open Site Map" button on the dashboard. This brings you to the Site Map home screen. From here you can create new pages on your website based on templates you have created. Page will be created in the folder that is currently opened to at the time of creation.

Click on the "Create New Page" button. A Create New Page dialog box will appear. Type in the file name you would like your new page to have. It's important to remember that the file extension does matter here, so make sure you know if you want to create a .html, .php, etc file before moving forward. Proper file names have no spaces, are all-lowercase, and have the extension at the end of them.

CORRECT: greenbikes.html

INCORRECT: Green Bikes

Select the template you would like to base your file off of, from the "Page Template" drop down. Click the "Create" button and you are all set. The new page will automatically load up and be ready for editing. It is also immediately available on your website.

Using Site Map Pullout
Open the Site Map Pullout, available at all times by clicking the small rectangle on the far left of the interface. Click the "Page" button next to the Create New in the top of it. A Create New Page dialog box will appear. Type in the file name you would like your new page to have. It's important to remember that the file extension does matter here, so make sure you know if you want to create a .html, .php, etc file before moving forward. Proper file names have no spaces, are all-lowercase, and have the extension at the end of them.

CORRECT: greenbikes.html

INCORRECT: Green Bikes

Select the template you would like to base your file off of, from the "Page Template" drop down. Click the "Create" button and you are all set. The new page will automatically load up and be ready for editing. It is also immediately available on your website.

Login to CMS

6.0 Managing Navigation

6.1 Managing Navigation Screen:

6.2 Navigation Manager

To manage navigation click on the manage navigation button from the site dashboard or the Site Tools drop down.

In most cases we would have set up your navigation as apart of the development of your site, and this would show up in the manage navigation screen.

You can add or delete any individual nav item, but we may lock you out from editing the primary navigation and only allow you too edit the sub navigation. This will depend on your website requirements.

Adding a new primary nav
To create a new primary nav on your website, click on the "Add New Item" button. This will bring up Edit Navigation Item box, add a name under Title, add the page name you created in Site Pages ( using 5.3 Page Creation from a Template ) under URL (example: about-us.html) or use the "page selector" to link the page to the new nav item.

Page Selector

Deleting primary nav
To delete a primary nav item click the "red minus symbol"

Adding a new secondary nav
To create a new secondary nav on your website, rollover with your cursor the primary nav you would like to add a secondary nav item to. This will display a "green plus symbol" or a "red minus symbol" next to the primary nav. Click the green plus symbol to add a secondary nav, this will bring up "Edit Navigation Item box", add a name under Title. Add the page name you created in "Site Pages" ( using 5.3 Page Creation from a Template ) under URL (example: about-us.html) or use the "page selector" to link the page to the new nav item.

Deleting secondary nav
To delete a secondary nav item click the "red minus symbol"

Save and Publish
Once you have finished adding/deleting items in the navigation manager, click "Save" button and then the "Publish" button.

Login to CMS