BigTree Basic Page Creation and Editing Guide Table of Contents

Introduction Logging In Creating a Page

Creating The Page Navigation Template

Saving and Previewing Editing Content

Adding a Link To an External Page To an Internal Page

Adding Images Adding A Table Adding a Photo Gallery Inserting a Footer Callout Inserting Sidelets Linking to a File

Deleting a Page Final Notes

Stay Organized Breadcrumbs The Admin Bar

Conclusion

Introduction BigTree is CMS software. CMS stands for Content Management System. It allows users to add and edit pages (ie: manage content) without them needing to learn any web code or handle any geeky database stuff. The CMS does all the techy stuff for you. Other CMS’s you may have heard of include Wordpress, Movable Type, TypePad, and Joomla. Technically, sites like Tumblr or Blogger are CMS’s. BigTree is useful because it can give many users all access to specific sections of the website.

Logging In Go to the URL http://www.depauw.edu/admin and login with the information you were given. If you do not know, you probably have not been given access.

Creating a Page

Go to the Overview tab to find the pages you have access to edit. Click the Orange “Edit” link to the right of the area you’d like to edit.

To add a page of content, first make sure that you are in the right place. To add a page, click the button “Add New Page to [______]”. Except the blank will be the name of your area on the website. You can create child pages (also called sub-pages), by selecting an already existing page, and then clicking the “Add New Page To ___” button.

After Clicking this button, you will see the following:

Navigation The Navigation Title is the text that will appear in the left column navigation area of the website.

If I were to use “Hunter’s Sandbox” as the navigation title, on the website, it would look like

this the URL Route is what will appear in the URL bar. It is best to leave blank, and let the system auto-generate it for you. In this case, it turned “Hunter’s Sandbox” into “hunters-sandbox”. You should probably never need to change this yourself.

The Publish Date is the date the page will become visible to the public. Leaving it blank will make it publish instantly. This is probably what you want to do. The Visible in Navigation checkbox determines if there will be a link to the page in the navigation bar of the site. You may or may not want this checked, depending on the situation. If this is unchecked, the site will still be accessible by directly linking to the URL. Next, click “Next Step” or click on the “Template” tab.

Template

The most important thing at this step is the Page Title. The page title is what will appear at the very top of the Web Browser (the browsers tabs, in a taskbar. It also will be visible during search results. Feel free to keep this descriptive and specific. There is no reason to say “Depauw” or “Depauw’s”, as “ - DePauw University” will appear in all of the titles no matter what.

The Page Type or Module Template will almost always be the page type “Content”, and it is selected by default. The different layouts are different designs to the website - different visual ways of presenting the content. If you do not know what to select, choose “Content”, this is the default look, and it’s best to have pages look consistent across the site, so only change if you know you should be.

Scroll down and click “Next Step”. See “Editing Content” at the bottom of this document to learn how to add and edit content. The last tab is SEO

This tab can be ignored for the most part, it involves techy things that are not terribly important.

Saving and Previewing At the bottom of the page there are three buttons: “Save”, “Save & Preview”, and “Save & Publish”

These three buttons are present no matter what tab you are on when editing a page. Remember that you can switch between tabs (Navigation, Template, Content, SEO) without losing saved data. However, if you navigate away from the page (the URL changes or you refresh), changes will be lost. To save changes, click “Save & Publish”. BigTree has a two-step system for making changes live on the page. Saving and publishing. If you save, then the database will store your information - you won’t lose it if the page closes. It won’t yet be live on the website (visitors won’t see changes). For that to happen you need to publish it. The reason it takes two steps is for multiple people to work and edit one document. Publishing would be like approving other user’s changes. For your edit’s to be visible by a visitor, click Save and Publish. Seeing the changes

Clicking on the link at the top of the edit page, as highlighted above, will open the page in a new browser tab. A good way to work would be to open this link, then go back and make changes. Save and publish them, and then go over to the tab from that link, refresh it (the circular arrow or the f5 key on your keyboard), and look over the changes. You have a tab for editing, and a tab for viewing the results.

Editing Content The “Content” Tab is the most important tab - It is where content is added! The Page header is a large text that should title the content below. The introduction, which is optional will appear

as italicized text. And finally, the content, which is where the actually “stuff” (text, images, etc) goes.

. The content uses a WYSIWYG (What You See Is What You Get) Rich Text Editor. Many other sites use this, like Google Docs, Moodle, Wordpress and more. It looks like this:

Many of the controls should look familiar. Bold, block quote, justification, lists, indenting, images, links and more can all be done with this editor, and it should feel at least a little familiar. There are some tricky parts to it.

Adding a Link

To an External Page To add a link to an external page, highlight some text that you want to be a link, then click the icon that looks like a link in a chain.

Then, type in the URL of the external website (in this case “http://wgre.org”) in the box that says URL. It is considered good practice to include a Title, which should be just a title of the web page being linked to. The title is not strictly necessary, but nerdy things like search engines like having them.

Finally, just click “Add Link” and the text should now be blue and underlined.

To an Internal Page An Internal page is one that is (also) located on DePauw’s website. You can add a link to it just like adding an external link, if you know the URL, but an easier method exists. First, do the same steps as adding an external link. This time, instead of typing a URL, search for a page on Depauw’s site. I will search for the library home page.

Finding it, and clicking on it, you see that a URL and Title have been inserted automatically. Now, just click on “Add Link” to add the link to the page. NOTE: Those numbers in the URL are called the IP address, and act the same as the domain name (http://www.depauw.edu/)). The link will still work fine!

Adding Images There are multiple ways to add images. The easiest would be to upload it, by clicking “Upload New Resource” from the right sidebar.

NOTE: Be careful! If you want to upload a photo you have taken, you will probably need to re-size it. Photos directly from a camera are usually several thousand pixels wide, and one usually only needs a few hundred pixels for the image to show up. This will also help having the page load faster, as the website visitor will not need to download the massive image to his own computer. NOTE: You cannot delete anything if you uploaded the wrong content. Another way to add an image is if the image already exists on DePauw's website or servers. To add an image that exists in DePauw’s Photo Database, click on the camera icon in the

editor. From here, simply search for and select the image in the pop-up that appears.

Adding A Table To add a table, click the “Add/Edit Table” icon:

From here, choose how many rows and columns you want, and then (most likely) you will want to set the width to 100%

This will make the table stretch to fit across the width of the page, which is something we usually want. From here, tables editing controls work the same way as in your normal WYSWIG editor (such as Microosoft Word). A few notes on tables.

● The controls look like this:

● The controls will become active (not greyed out) if you click inside of (put cursor in) the

table in the editor. ● The widths of each column will change as you type things into it. Don’t worry about that,

it will go back to normal as you put text in each cell. ● If you hover your mouse over any Icon, a tooltip will pop up telling you what that control

does. To make a particular table have a special header (see image below), do the following. The header is purely a visual effect, and will make any row, cell, or column have a gold highlighted background. This is particularly useful for headers, to visually distinguish it from the data they describe below. Table without Header

Table with header

First, highlight the cells you want to be header cells

Next, click the following icon:

In the pop-up that appears, change the Cell Type to “Header”.

Now, in the editor, the text is bold and center’d to indicate that it is a header. Previewing it, one will see that that table cell has a gold background.

Adding a Photo Gallery Adding a Photo Gallery is very easy. Below the editor, there is a section that has information for the Photo Gallery

The title will appear by the gallery, and the Position (top or bottom) will determine where, relative to the content, the gallery where go. Upload an image just like you normally would. After selecting one photo (clicking “choose file”), it will appear in “Pending Upload”. Here I have added three images.

Clicking on “Save & Publish” Will upload the photos. Note: Remember not to upload massive photos (IE: directly from a camera. Resize them to be smaller in a program such as Photoshop, Apple Preview, or Microsoft Paint). You can re-order the photos by clicking and dragging them around. Clicking on an image will let you delete it or change the caption.

Here is the image gallery positioned above the content:

And here is the gallery positioned

below:

Note that the Image Gallery Title is only visible when the gallery is on bottom. That is because when it is on top, the gallery becomes the main focus of the page, and the page title more than likely acts as a title to the gallery. It is not shown to prevent redundancy. Note, I have deleted the photo gallery (by deleting all of the images) in the example images.

Inserting a Footer Callout A footer callout is a special section at the bottom of a page that brings attention to other related pages, or websites. For example, Depauw’s Student Life page contains a callout to DePauw Student Government.

Adding one to a page is very similar to adding an image gallery. Simple upload an image, and fill in the title and description. There is one special step, and that is cropping the image. Because the callout displays images of a specific size, it wants you to crop your image to that size. Think of this step as similar to cropping your facebook profile picture. This page will appear after you click “Save & Publish”, if necessary.

Once you have it how you want it, click Save Here is how one callout looks, at the bottom of the page.

If I add another callout, or two others, It will appear differently. Depauw’s Student Life page (see above) has 2 callouts. Here is what that looks like:

And here is what three callouts look like:

There are not many reasons to have more than 2 callouts on a page, and 1 or 2 callouts looks much prettier than 3 or more. Try to only have 1-2 callouts per page.

Inserting Sidelets Sidelets are another way to organize information on the page. They are stylized chunks of data that appear on the, well, side. Sidelets exist for all kinds of information, and the best way to discover them is to play around with it. One of the most common sidelets is the “Email/Request Information” slidelet, which places a link to an email address. To add a sidelet, click the “Add Sidelet button” on the sidebar of the page content editor.

Now, in the drop-down box in the bottom right, we are going to select “Email/Request Information”.

From here, all we need to do is enter are email address. I am going to change the Alternate Button Text to read “Contact us” instead of “Request Information”, which is the boring default. I just click save to add it to the page.

Note: Remove a sidelet by clicking the red X next to it in the sidebar of the editor, as seen above. On the page, it looks like this:

There are many different sidelets for different types of information, such as news or important dates to know.

Linking to a File Lets say you have a PDF of a schedule, or some other important document that a visitor may need to download, and you want to put a download link to it on your page. This is easy! The first step is to upload the resource (in our case, a PDF file). The resource should appear below the upload link in the sidebar. Now all you need to do is drag and drop it into the text editor. If the resource is an image, it will embed directly as an image. Otherwise, it will include a link to the file

The text of the link will be the file name. This is not ideal, so lets change it. This is trickier than it sounds. I recommend putting the cursor inside of the link, typing out the text you want the link to be, and then deleting the rest of it. The reason this is difficult, is because if you backspace out the title, the editor will think you want to remove the link completely!

Deleting a Page Deleting a page is not as simple as it seems. The first step is to “archive” it. Only after a page is archived, can one delete it.

Click the blue folder icon to archive a page. Once a page is archived, you can delete it.

An archived page will not be visible on the site, but can be un-archived at a later date. Note: Deleted pages cannot be restored or retrieved. Be careful what you delete!

Final Notes

Stay Organized Any page can have any number of subpages. Generally, the idea is to have one “landing” or general overview page for a section, and a few subpages of that one. Further sub pages are as needed, but you want every “level” of the tree, so to speak, to make sense where it is. In other words, don’t just have a russian nesting doll of sub-pages and sub-pages.

Breadcrumbs At the top of the page, in the admin area, there is what web nerds like to call “Breadcrumbs”. If pages are like a tree of information, a breadcrumb is the path to the root/trunk of the tree. You can use this if you ever get lost, or need to navigate to a different page to edit.

The Admin Bar If you are logged into BigTree (All of what we have been doing has been inside of some web-based software called BigTree), when you go to a DePauw’s website, you will see a blue bar along the bottom.

Try navigating to a page you have access to editing, and click “edit page”. Many users find this an easier way of getting to the content they want to edit. It’s certainly worth knowing about and trying out.

Conclusion There are plenty of BigTree features that are not covered by this guide, but this should get you started with creating and editing pages. Feel free to play around and learn more about the software. Contact the Web team for additional help webteam@depauw.edu . Thanks!