LOGIN

Jackrabbit CMS Help Documentation

Getting Started

What is Jackrabbit?
Jackrabbit is a CMS crafted by Scared Rabbit for use on websites we develop. Its purpose is not to change the overall style of the website (We've put in a lot of work to make each website look great already!) but to allow you to make changes to the content. Everything from photos, text, events, galleries, videos, and more can easily be changed with Jackrabbit. These help documents will guide you through how to use Jackrabbit version 3.0.0.

CMS = Content Management System
Jackrabbit Layout
Jackrabbit CMS has a three column layout. In the first column, you will find the toolbars showing detail information about the current page, editing tools, and Search Engine Optimization options. The middle column contains the editor, and the final column contains a list of every page on your website. Next, we will dive in and learn more details about each area.
Quick Start
SETTINGS
Before you work on your pages, it's a good idea to click "Manage" in the Menu Bar, and then "Website Settings". Go through each setting category, and ensure that the information is listed correctly. Some areas like SEO Data can have a big impact on how easily people get to your website.

SETTING UP PAGES
Often, Scared Rabbit will set up your pages for you in advance. If you need to add a page, click the plus symbol. Once added, you can now click the new page to set it up. There are four possible types of pages:

Normal Page - A regular page where you may add custom content

External Link - Links to a website other than your own

Document - Links directly to a specific document

Navigation Only - Will show up in your website's navigation, but is not clickable. These are usually used as drop-down headers.

Pages can't be changed to a different type later, so make sure you pick the correct one!

EDITING PAGES
Normal pages can be edited in a similar fashon to other text editors.
Use the "Insert" menu on the Menu Bar to add elements.

Use the toolbars on the left to modify text and elements that have been inserted.

Use the Add-Ons button at the top right to add special content areas like galleries, staff members, calendars, etc.

Make sure you save the file under File -> Save (Cmd + S) once finished.

Pages

Creating a Page
Often, Scared Rabbit will set up your pages for you in advance. If you need to add a page, click the plus symbol within the page list. Note that if you have groups of subpages, there will be plus symbols to add directly to a submenu. Once added, you can now click the new page to set it up. There are four possible types of pages:

Normal Page - A regular page where you may add custom content

External Link - Links to a website other than your own

Document - Links directly to a specific document

Navigation Only - Will show up in your website's navigation, but is not clickable. These are usually used as drop-down headers.

Pages can't be changed to a different type later, so make sure you pick the correct one!
Modifying a Page
Once on a page, take a look at the SEO panel found on the bottom right. Here, you may edit the following:

PAGE NAME
This is the name for this particular page. It shows up in your website's navigation menu.

PAGE BROWSER TITLE
This is the text that you'll find at the top of most internet browsers. If nothing is entered here, the website will automatically use what is entered in Manage / Website Settings / SEO Data / Site Title

PAGE DESCRIPTION
This is the description of this particular page which sometimes shows up in search engine results, or when you share this page on some websites. If nothing is entered here, the website will automatically use what is entered in Manage / Website Settings / SEO Data / Description

Always fill these out to help with your search engine ranking!
Deleting a Page
To delete a page, first make sure you are on the page you want to delete. Next, click File / Delete Page. A dialog will pop up to confirm that you want to delete.

Once a page is deleted, it's gone!
Close a Page
To close a page, click File / Close Page. A dialog will pop up if you have unsaved changes.

Don't forget to save before closing!
Backup and Restore a Page
BACKING UP PAGES
You may wish to back up a page from time to time. You can do this by visiting a page. Next, use the HTML view button (found between EDIT and LIVE near the top). Select all of the HTML, copy it, and paste it into a plain text editor. (Textedit for Mac, or Notepad for Windows.) Save this to your computer as a .txt file.

RESTORING A BACKED UP PAGE
To restore from a backup, create a new page, visit this new page, and select the Normal Page type. Next, click the HTML view button and paste in the code from your backup.

Editing

Text Formatting
Use the panel labeled "Text" to edit your page's text. To use most of the formatting tools here, you must first type some text, then select it, and finally click the button to apply formatting. Exceptions are the Horizontal Line, and Lists which insert elements.
  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Blockquote
  • H1 Largest Heading
  • H2 Second Largest Heading
  • H3 Third Largest Heading
  • Subscript
  • Superscript
  • Align text left
  • Align text center
  • Align text right
  • Align text justify
  • Numbered List
  • Bulleted List
  • Add Link
  • Remove Link
  • Horizontal Line
  • Remove Formatting
Adding Documents
Jackrabbit allows for you to easily add links to download documents within your text. Follow these steps to insert a document link:
  1. Click within your page where you want the document link to appear.
  2. Click the 'Insert' menu, and then 'Link to Document'.
  3. Use the file uploader to select the document you'd like to upload.
  4. Add a title for the document.
  5. Click Upload
Allowed File Types:
You may upload: .doc .docx .pdf .xls .txt .rtf .zip

If you need to use a file type that is not allowed, put it in a zip folder first, and then upload it.

File Size: Try to ensure your files are as small as possible. Max file size depends on your hosting situation. If the file is too large, it may fail to upload.

If you're wanting to put a large quantity of files on a page, it's best to use the Document List add-on instead.
Adding Links
You can add links via two methods:
  • Select text, and use the link button in the "Text" panel. Use this option to add a link to text that already exists.
  • Click within your text where you'd like a new link to appear, and use the Insert menu to add a 'Link to Webpage'.

MODIFYING LINKS
To view & modify link details, simply click within the link. This should activate the Link panel. This will give you options to edit the link parameters.
Adding Tables
ADDING
  • To add a table to a page, first click where you would like the table to appear.
  • Next, click the Insert menu, and mouse down to the Table option.
  • A menu will open with squares that represent table cells. Hover your mouse over the squares to select what size of table you want to insert. The bottom of this menu will show you the count of rows and columns you have currently selected.
  • Once you have the right amount of rows & columns (don't worry, you can add and remove them later), click the mouse to insert your table.

EDITING YOUR TABLE
You can edit your table by clicking the 'Table' panel on the left. Next, click on one of the cells in your table. Use the buttons in the Table panel for the following functions (in order of left to right).

  • Insert a row before the currently selected cell.
  • Insert a row after the currently selected cell.
  • Insert a column before the currently selected cell.
  • Insert a column after the currently selected cell.
  • Remove the entire table
  • Remove the row the currently selected cell is within.
  • Remove the column the currently selected cell is within.
  • Add a table header
  • Remove the table's header
STYLE TYPE
You may select the table's style type:
  • Invisible Mode: No borders or backgrounds
  • Normal Mode: Preset borders & backgrounds to show the table structure clearly.
Adding Images
ADDING
  • To add an image to a page, first click where you would like the image to appear.
  • Next, click the Insert menu, and 'Image'.
  • Use the file select to find the image on your computer to upload. Also add a photo description before clicking Upload.
EDITING YOUR IMAGE
You can edit your table by clicking the image which should activate the 'Img' panel. Use the buttons to align or remove your images. From left to right, the buttons are as follows:
  • Align photo left & wrap text around it
  • Align photo right & wrap text around it
  • Center photo. Text stops above and resumes below photo
  • Put photo inline with text.
  • Remove photo
MAX SIZE
By default, the photo will appear at full size or 100% of the page's width. (Whichever comes first.) You may set a new max-size using the Max Size input. This will ensure the photo will never be larger than the size you specify. It may, however get sized smaller to fit when viewed on a mobile device. 

You can enter pixel sizes, or percentages.

PHOTO DESCRIPTION
Enter a brief description here. Although these aren't visible anywhere, they help with search engine friendlyness and screen readers.

OPTIONAL LINK
You may also optionally add a link to your image so clicking will direct the user somewhere.
Adding Embedded Content
Embedded elements include things like YouTube videos, Google Maps, etc.

ADDING
  • To add an embedded element to a page, first click where you would like it to appear.
  • Next, click the Insert menu, and 'Embed Code'.
  • Paste your embed code into the next prompt.
EDITING YOUR EMBEDDED ELEMENT
You can edit your embedded element by clicking the element which should activate the 'Embed' panel.

REMOVING
Click the trash can icon to remove the element.

MAX SIZE
Use this to set the maximum size of the iframe. It may appear smaller on mobile devices than the size you specify.

ASPECT RATIO
If you notice the size doesn't seem quite correct, like black bars appearing on the sides or top & bottom of a video, try changing the aspect ratio with the buttons provided.
HTML Editing
Some advanced users may wish to edit the HTML directly. To do this, click the HTML button near the top of the page, between EDIT and LIVE. Entering this mode will automatically format the code, and remove some illegal tokens.

Only users knowledgable in HTML should use this feature.
Miscellaneous Editing
Some websites will have items that need to be editable, but do not fit anywhere within the Jackrabbit Content Management system. If they are page specific, you will likely find them in the list of add-ons at the top of the page. If they apply to the entire website, or are present on every page, you may find these in the "Manage" menu.

Add-Ons

What are Add-Ons?
Add-ons are a powerful new feature of Jackrabbit CMS. Essentially, they specially formatted content areas that appear above or below your page content. Addons are managed seperately for adding, removing, editing, and sorting.

ADDING
  • Important: if you see "Not Saved" at the top of your page, go ahead and save it first.
  • To apply an Add-on, click the '+ ADD-ONS' button on the top right.
  • A menu will open with all available add-on types. You may need to scroll right if needed.
  • Click the add-on you want to use. You will then be taken to a page to manage that add-on.
  • Click the 'Done' button to return to the editor.
SORTING
Most Add-ons can be sorted using the drag icon on the right of each entry. Simply, click and drag the add-on up or down.
Galleries
Use this add-on to add a photo gallery section to a page. You can add multiple galleries within this add-on, each with images within.
Video Gallery
Use this add-on to add a video gallery section to a page. This is limited to Youtube videos at this time. Copy the Youtube video's Share url (Not embed code) and paste that in when adding a video.
Staff
Use this add-on to add a staff section to a page. You may add multiple staff members within this addon. Each Staff member can have an image, name, title, email, phone, cell, and bio. (Each is optional)
Accordion
Use this add-on to add an accordion section to a page. This add-on shows a list of individual text lines. Clicking on one of the text lines will reveal additional text below it. This is typically used for FAQ sections.
Forms
Use this add-on to add a form section to a page.

NAME
Give your form a name (such as Signup Form, etc.)

RECIPIENT EMAIL(S)
This is where you will list email addresses that the form results should be sent to. If you add multiple addresses, seperate them with a comma.

THANK YOU MESSSAGE
After a user submits the form, they will be taken to a new page that displays whatever text you enter here. Usually something like "Thanks! We'll get back to you in 2 business days".

FORM ELEMENTS
This is where you will actually build the form. The form element types are as follows:
  • Single Line Text
  • Multi Line Text
  • Single Checkbox (used for opting in to something)
  • Checkbox Group (used for selecting one or more of several options)
  • Radio Button Group (used for selecting only one from several options)
  • Select Menu (a drop-down list where the user can select one from several options)
  • Date
  • Form Heading (used to seperate different parts of a form)
Each element also has a name which is displayed along with it. You may also select whether the element is required to be filled out or not.
Logos
Use this add-on to display a horizontal group of logos on your page.
Slideshow
Use this add-on to display slideshow of images on your page.
Calendar
Use this add-on to display calendar of events on your page.
Document List
Use this add-on to display a scrollable list of documents on your page.
Event List
Use this add-on to display a text listing of events on your page.
News List
Use this add-on to display a text listing of news on your page.
Sidebar Text
Some website designs have a sidebar where text can be placed. If you have this design feature, you'll see this add-on on every page. It will not be sortable or deleteable.

SEO

Making Your Website SEO Friendly
To ensure your website is SEO friendly, make sure that you have done the following:
  • Always fill out descriptions on photos.
  • Vist Manage/Website Settings/SEO and fill out each entry.
  • Fill out the SEO panel on every individual page and be mindful of the suggested character count.
  • Remember to write content that has words people may use to search for your website.
  • Update the website from time to time to keep it fresh.

Tutorials

Embedding a Youtube Video
  1. First go to the Youtube video you would like to embed and click the "Share" tab below.
     
  2. Click the embed tab and copy the whole line to your clipboard.
     
  3. Then go to your Jackrabbit CMS, navigate to the page you want the video on, and put your cursor where you want the video to display

  4. A dialogue box appears, paste the embed code from youtube into this box and hit OK
     
  5. Adjust the Aspect ratio and other attributes how you see fit and then save the changes at file->save

  6. You're embedded Youtube video is now live! Be sure to check the display on mobile.