Getting Started

Getting up and running with TreesCMS is a breeze! Let's take a bird's eye view of everything you need to get started on your soon-to-be-world-renowned website! There is a lot you can do with TreesCMS. In this guide we'll get you started with the most important information.

Login

First things first.  To begin working on your site you need to log into the Administration area. To log into your site, simply add "/account/login/" after your domain name in your browser's address bar (e.g. http://www.mywebsite.com/account/login/). On the login screen enter your Username and Password then click the login button.

All Powerful Toolbar

Once you've logged in you'll see the magical toolbar at the top of your screen. You can get to anywhere and do anything from the toolbar.  The toolbar will always be visible while you are logged in.

Let's take a quick look at each part of the toolbar.

Clicking on the TreesCMS logo will take you to the main Administration area.  From here, you can configure settings, create login accounts, create pages and blog posts and manage calendars. Powerful developer tools are also available here.

Clicking on the monitor icon takes you to your live website. From here you can navigate your site and view published content. When viewing your site in live website mode you'll see your site the way your visitors will (with one exception - you can see disabled pages, visitors cannot).

Clicking the edit icon takes you into Edit Mode. In Edit Mode you can add Components to pages, edit page content, and publish pages when they are ready for prime time. You'll likely spend most of your time in Edit Mode working on page content.

 

Depending on what you are doing and which settings are enabled, you may also see other buttons on the toolbar.

Page Settings

This button appears whenever you are viewing your live website or in Edit Mode.  It allows you to manage page settings such as the Heading, HTML Page Title, URL, Facebook Open Graph and more.

Publish

Once you've made changes to a page, the publish button becomes enabled in red. When there is nothing to publish, the publish button is disabled (greyed out). Changes are not made live until they have been published.

Revert

If you've made changes to a page and decide you don't want to publish, but would rather revert back to where you were before you started making changes, click the revert button. The revert button is disabled (greyed out) when no changes have been made and there is no need to revert.

Preview

This button only appears in Edit Mode and turns off the dotted outlines around zones and components. It also disabled the hover affect that displays the component toolbars. Preview allows you to see your changes as they will appear once they are published. When preview is on, the button becomes green.

Edit is Complete

If publish security settings for page edits have been enabled this button appears because page changes cannot be published until they have been marked as complete. Clicking this button indicates the edits are complete and ready for publish. Once clicked the button turns green an no other edits are allowed until either the page has been published or edit complete has been disabled by clicking it again (turning it back to grey).

Approve for Publish

If publish security settings for approval have been enabled this button appears because a page cannot be published until it has been approved for publish. Once clicked the button turns green and the publish button becomes active.

If publish security for both page edits and approval have been enabled, both "edit is complete" and "approve for publish" must be clicked before the publish button will be enabled.

There's one more part of the toolbar, way over on the right. You'll see your Username and can update your profile information or logout of TreesCMS.

Dashboard

When you first log into TreeCMS you are taken to the Dashboard. From the Dashboard you can update TreesCMS to the latest version with a click of a button. The Dashboard will indicate when an update is available. You can also sign up for email notifications when updates are released. Any pages you are working on that have not yet been published are also listed as a quick reminder of what you are working on.

You can get back to the Dashboard from anywhere by clicking on the Trees logo then Dashboard in the left menu.

Settings

One of the first things you'll want to do is review your Settings. Here are a few of the most important settings.

Email Settings

Settings > General

Your email settings are required for forms on your site to work properly. You may need to check with your Email Administrator for the proper settings for your mail server. The To Address is the default email address all forms will be sent to.

Update Notifications

Settings > General

You'll want to be sure you're getting the update notifications when an update to TreesCMS is releases. Enter your name and email address.

Analytics

Settings > Webmaster Tools

If you'd like to track activity on your website with tools such as Google Analytics, you'll want to enter your tracking code under Settings > Webmaster Tools.

Create Administrative Users

Managing a website is a big job and you may want others to help.  You can create as many administrative logins as needed. There are three types of administrators: Publisher, Editor and Reviewer.

Publisher

A Publisher can do anything, including manage other logins.  This of a Publisher as a Master Administrator. Only a publisher can manage logins, publish content or delete pages.

Editor

An Editor can do pretty much everything a Publisher can except publish content, delete pages or manage administrators.

Reviewer

A Reviewer cannot make any changes nor do they have access to the Trees menu.  They are only able to toggle back and forth between the live website and Edit mode - so they can review updates prior to being published. If publish security for approval is on, a Review must click the "approve for publish" button before a Publisher is able to publish the change.

Working with Menus: Creating Pages

There is no page limit in TreesCMS.  Nor is there any limit to the number of drop-down levels on any menu. And TreesCMS is unique in that there is no limit to the number of menu systems you can build - you are not limited to just the primary menu.

Here we'll show you how to work with your primary menu - but all the steps are the same for any menu you create.

First, click on Menu then click on Manage next to Primary.  The is the "menu tree" that is primary navigation for your website.

When adding a menu item to the menu tree, you are adding a visible tab or drop-down item to your menu. A menu tab or can be a page, a folder, or a link to another page or file. Each time you add a menu item you decide whether it is a page or something else.  Let's add a page.

Click on the Add Menu Item button. Type in your Menu Item Name.  This is the text that will be on the menu tab visitors click.  Next, click on Page to make this menu item a page.

A New page is just that, a brand new page that doesn't exist yet.  A Page Template is a pre-configured page that already has a layout selected and possibly several components already placed and configured on the page. Click on New.

Next, select a Layout.  Your Designer may have created special Layouts for you to choose from.  Or, you can select from one of the Layouts that comes with TreesCMS.

Now type in your Page Heading - and notice the magic!  The fields for the URL, HTML Page Title and Open Graph Title are automatically completed for you. This is because most of the time your Page Heading is going to already be key word rich and very descriptive of your page content.  However, you can edit any of those fields as needed to fine tune any SEO needs.

The are several other fields and settings below the HTML Page Title that are optional. But we do recommend adding the META Description and Keywords. If you'd like, you can upload a Facebook Open Graph image for the page as well.

When everything is ready, click Create in the top right. Your menu item is created and the Add Menu Item panel remains open. This is to allow you to quickly add more menu items.  When done, click Close in the top right.

After closing the Add Menu Item panel you're back at the primary menu tree.  You'll find your new page down at the bottom. Notice the page icon next to your new menu item is greyed out like this:    This indicates the page is not enabled yet, and visitors won't see the menu item in your menu. This gives you time to work on content. When you're ready to enable the page, right mouse click on the menu item and select enable. The icon will turn blue  to indicated it has been enabled and is available for visitors to view.

Page settings can be updated at any time by right-clicking on a menu item and selecting Edit Menu Item. Or, when viewing the live website or in Edit Mode, click the Page Settings icon in the toolbar.

You can now click-hold and drag your menu item anywhere on the menu tree and release. As you drag a menu item around other menu items you'll see one of two green indicators.

A solid green triangle indicates that if you release the mouse button the menu item you are dragging will become a child item to the one with the green triangle.  In this example, we're dragging the menu item Getting Started onto the menu item for Support until we see the green triangle.  When we release the mouse button Getting Started is now a child page of Support.

A green arrow indicates that if you release the mouse button the menu item you are dragging will become a sibling on the same level as the item with the green arrow. You can drop the menu item either above or below another menu item. In this example, we're dragging the menu item Getting Started above Support until we see the green arrow. When we release the mouse button Getting Started is now a sibling of Support right above it.

Any time a menu item is moved on the menu tree, all menus are automatically updated on your website. Also, if moving a menu item results in a new URL, a 301 redirect is automatically created for you. For example, if you had a Staff page in the root position of your menu the URL would likely be /staff/. If you moved that menu item to be a child of About, your new URL would likely be /about/staff/. Anyone with a bookmark to /staff/ will automatically be redirected to /about/staff/, and all page rank from /staff/ will be passed on to /about/staff/.

Adding Page Content

Once you've got a page it's time to add some content! When your Designer created your layouts, they set certain areas on a page to be component zones.  This is simply a place on a page where a component can be added, such as a Content Block. You'll see a green button like this on any empty zone:

Clicking that button will open the component catalog where you can choose which components to add to your page. There are several components to choose from, but the most common will be the Content Block. Click on the Content Block to select it, then click Add Component in the top right. Once you've added the content block, your zone will look like this:

The text "Content Block is empty" and the dotted outline only appear while in Edit Mode. Hover over the Content Block or zone to reveal the component toolbar and add component button, like this:

To add more components to this zone, just click the green button with the + sign on the top right of the zone when you hover.

To edit the Content Block, click the red Edit button.

With a Content Block you can add text, upload images and create links to pages or documents - and a lot more. There is even a built-in image editor for cropping, resizing and adding text to images.

Once you are happy with your content, click the Save button a the top right.

Now you'll see your content on your page, and the publish button in the upper toolbar will be red. This indicates you've made a change to the page that will not be live until you publish. You'll see the publish button any time you are looking at the live site or when in Edit Mode.

When you've edited a page that already had content, you can click back and forth between live website view and Edit mode to compare the current page with the changes you've made. Once satisfied, click the publish button to make your changes live.