Jim Tibbe Content Management System April 2017

CMS User Guide V2

CONTENTS{right-click and “update table” to automatically create and update the information here}

Pod Styles......................................................................................................................... 2Specialty Pods...........................................................................................................2

Functions.......................................................................................................................... 4Contact....................................................................................................................... 5

Modules............................................................................................................................ 5Categories.................................................................................................................. 5Floor plans................................................................................................................. 6Floor plan options.....................................................................................................7Form Builder..............................................................................................................7Homes & Neighborhoods..........................................................................................7Community Map.......................................................................................................11Schools/School Districts........................................................................................12Staff........................................................................................................................... 12

Images............................................................................................................................. 12Website Promotions......................................................................................................13

PLEASE NOTE: If any point you need to see your progress on a page click on “view page” in the upper right. This action opens the tab and allows you to see how the page is coming together from a visitor’s perspective.

Pod Styles

Pod styles (primarily intended for 'regular' pods) can be applied to an entire pod to make use of predetermined site-appropriate formatting. Pod styles allow the admin to quickly add styling to their content by selecting an option (or combination) from a simple menu.

Specialty Pods

In order to expand the formatting available to admins, the CMS may also allow a number of specialty pods. The specialty pods are generally only used on "static pages," pages that don't change frequently unlike Model Homes, Available Homes, and Neighborhoods - all of which have special modules to enter their specific content.

View styled samples of formatted specialty pods: https://jimtibbehomes.com/rules-formatting/pods#tipDownTarget_574 you must be logged into the CMS admin in order to view this page.

Tip-downs or Tipdowns – Allow you to collapse sections of content and users can then expand it with the press of a simple button.

1. Select “Tipdown” from Pod Type list2. Add Header title 3. “Save & Close”4. Select “Regular” from Pod Type to add the content for the tip-down5. Add content 6. “Save & Close”7. Repeat this pattern for as many tip-downs as you need

Columns – Used to vary the display of a page's content. Column pods can be used to divide the page into a number of bite-sized areas for easier readability. Each column's content varying (appropriately) from section to section in order to provide visual interest for the user.

Though it is personal preference whether columns are used on the site, we especially recommend them on sites with extra wide page layouts. The following steps will show you how to add columns to a page:

1. Select “Column” from the Pod Type list

2. Adjust width of column 1 and 2 or add a column as necessary. There is a 2% spacing default between columns.

3. Once columns are set up, select “Regular” from Pod Type to add the content for the column.

4. Add content 5. “Save & Close”6. Repeat this pattern for as many columns as you need

Accordions – essentially tip-down pods that are grouped and work together; only one can be open at any given time. If desired, one section (any one of them) can be automatically opened on page load.

1. Select “Accordion” from Pod Type list2. Add Header title 3. “Save & Close”4. Select “Regular” from Pod Type to add the content for the tip-down5. Add content 6. “Save & Close”7. Repeat this pattern for as many accordions as you need

Tabs – Used for grouping related content sections together. They can be Horizontal (adjacent to each other across the top) or Vertical (stacked along the left side).

1. Select “Tabbed” from the Pod Type list2. Type, “Horizontal” or “Vertical”3. “Save & Close”4. Select a “Tipdown” pod5. Add a header6. “Save & Close”7. Select “Regular” from Pod Type to add the content for the tip-down8. Add content 9. “Save & Close”10. Repeat this pattern for as many tabs as you need

Table – Another way to organize data is by using a table pod.

1. Select “Table” from the Pod Type list 2. Add a title, header style and # of header rows3. Include Table data4. Select Alternate row colors and Style first column5. “Save & Close”

Functions

Functions are specialized features of the site that allow for certain actions to occur. Though each site build in this CMS carries basic functions, there are a number of specific functions to the Jim Tibbe website.

Contact

This content houses contact information for a particular home or neighborhood.

In most cases this content is entered into a Homes or neighborhood module "home contact" area which already contains styling to keep the look/feel of this section consistent without adding columns or any special spacing.

1. Select “Function” from the Pod Type list2. Scroll down to “Staff”3. Select “Display Contact Staff Function” from

the Pod Type list4. In the header add title, e.g. Sales and

Information5. Select Staff by finding name in dropdown6. “Save & Close”

This is what the result of the function looks like on the front-end of the website:

Modules

The following content helps you add content to specific portions of the site. The next few pages will walk the admin through the steps to use each Module.

Categories

Categories help tag images in the inspiration gallery. To set up a new category following these steps:

1. Locate the "Inspiration Gallery" on the right side of the page - https://jimtibbehomes.com/admin/special/categories

2. Choose where the category should belong – e.g. under Rooms, Bedrooms, Bathrooms, Featured Areas, Materials & Treatments, or Exterior.3. Click on the green "+Child" button.4. Fill in the name, the URL will be auto-generated.5. Click on the blue "Save Category" button.

To activate a new category to use in the inspiration gallery:

1. Go to https://jimtibbehomes.com/admin/assets/images in the admin.2. Scroll to the bottom of the page.3. Click inside the content box and begin typing the newly created name of the category. The results will begin to auto fill and narrow down. (this happens at the top of the content box.)4. Once you locate your category click on it.5. Click on the blue "Save" button. You can now start using the new category as an image tag.

Floor plans In order to add a new home or floor plan option you will first need to establish a floor plan.

1. Set up a floor plan first

https://jimtibbehomes.com/admin/special/floorplans.2. Fill in the form with a name – the URL will be auto generated.3. You have to add a description.4. Select “Floorplan Series” from the dropdown – Condo, Landmark or Woodland5. Optional – add a Virtual Tour URL6. Upload a Feature image, if you are reusing an image that is already in the asset library select

“Use Existing Asset” and start typing in the name of the file – it will autocomplete.7. “Update Asset” to save image8. Use the same steps to load a new or reuse a brochure asset.9. Click “Save” button once the form is filled out

Next…

10. Fill in "Basic" tab and add additional elevation images, to the proper tab.

Floor plan options

After setting up the basic floor plan you’ll need to set up floor plan variations. These are the additional floor plan layouts and options, these actually house the floor plan drawings of each level of the home. https://jimtibbehomes.com/admin/special/floorplans/options

1. Select a “Floorplan” from the dropdown (you just set this up in the previous section)2. Add square footage, note via the

checkbox if it’s “Enhanced,” there is currently only one floor plan with that designation.

3. Optional – note features4. Choose a type from the drop down5. Fill in the number of bedrooms and baths

from the dropdowns6. Upload floor plans (jpgs) – Main, Upper

floor (if applicable), Basement (if applicable)

7. “Save”

Form Builder This website has one form called the Contact Us.

1. To edit click on blue pencil icon https://jimtibbehomes.com/admin/special/forms2. To modify email recipient or change settings click on "Form Settings" tab3. Click "Save”4. If you need modifications to the form itself, please contact ddm to assist.

If you would like to pull a .CSV file of people who contacted Jim Tibbe via the form click on the blue “Export Submissions as CSV” button in the upper right. The name of the file will be “contact-us”

Homes & Neighborhoods

To add a home: Go to “Homes” under Modules1. Click on the green “+ Add New” button in the upper right 2. Once your basic information screen pops up enter the following information (skip Location

and Url):a. Status defaults to “Available,” adjust this from the dropdownb. Pricec. Square Footage

d. Type (select from drop down)e. Bedroomsf. Bathsg. Floor Plan (select from drop down)h. School (select from drop down)i. Neighborhood (select fro drop down if applicable)j. Add a featured imagesk. If this is a model home add Model home hours and click “this is a model home”

checkbox3. Click “Save”4. Go to the Location tab 5. Ignore “Name”6. Add home information:

a. Address/ Extra Address (if applicable)b. Cityc. Stated. Zipe. Once the marker is added to the map click it to wherever the home should appear

7. Click “Save” (Latitude and Longitude set automatically based on address info.)8. Go to the Content tab9. Fill in Home Overview content:

a. Click on the little green button b. Select “Regular” from the drop down

c. Add your content – you can format it with header sizes or bold or underline.

d. Scroll to the bottom of the pod and click e. “Save & Close”

10. Fill in Home Contacts:a. Click on the little green button

b. Select “Function” from the drop down

c. From the “Choose a function” drop down select “Display Contact Staff” d. From the “Select Staff” drop down choose one name

e. Select all applicable names for Sales and Information or Condo Sales, If you have a name for each you’ll need to set up two Staff – Display Contact Staff functions

f. Click “Save & Close”

To add a neighborhood: Go to “Neighborhoods” under Modules1. Click on the button in the upper right2. Fill in the Name (the Url should auto generate)3. Please note: “Active” is the default, if you aren’t ready to display the neighborhood make sure

this is unchecked and saved.4. Add a short 1-2 sentence description for the neighborhood 5. Ignore “Location” but add “School” from the drop down6. Select an Image this will be the featured image for that neighborhood7. Select a “Site Map Image” 8. Select “Save”

9. Go to the Location tab 10. Add Name11. Address (cross roads)12. City13. State

14. Zip15. Latitude and Longitude will auto populate. (If your Google map is blank, refresh the page and

it should populate – Beta can get quirky sometimes.)16. Select “Save”

The following steps are identical to adding a new home; I’ve repeated them here for quick reference.

1. Go to the Content tab2. Fill in Neighborhood Overview content:

a. Click on the little green button b. Select “Regular” from the drop down

c. Add your content – you can format it with header sizes or bold or underline.

d. Scroll to the bottom of the pod and click e. “Save & Close”

3. Fill in Home Contacts:a. Click on the little green button b. Select “Function” from the drop down

c. From the “Choose a function” drop down select “Display Contact Staff” (last function in the list)

d. From the “Select Staff” drop down choose the applicable names for that group “Sales and Info”

e. Click “Save & Close” f. Repeat this action if you have Condo sales or another selling group associated here.

If one set of contacts is for Condo sales only vs. another for new home sales you could add a “regular” content pod above these function pods and add “New Home Sales” “Condo Sales” to help indicate who is who.

Community MapNow that you added a community map to a neighborhood you can add homes or lots to the map. Please follow these steps:

1. Click on “Site Plan” tab 2. Click and drag a

transparent square over the lot you wish to populate.

3. Fill in the lot name4. From the “Lot Option”

select whether this is a “Lot/Condo for Sale” or choose an address of a home associated with this neighborhood.

5. In the gray box select “Empty Lot/Condo Status” – Lot for Sale, Condo for Sale, Reserved, Sold

6. Leave the “Popover Position” as top

7. “Save Site Map”8. Repeat these steps until all lots are set up for your community map.

Schools/School Districtshttps://jimtibbehomes.com/admin/special/schools To add a new school district follow these steps:

1. Add name (check the box if it’s active and should display on the website)2. Make sure to always include a Description, this will be featured on the website.3. “Save” no other fields need to be filled out.

Staffhttps://jimtibbehomes.com/admin/special/staff To add new staff members please follow these steps:

1. Fill out the form – First name, last name, email address, phone number.2. Choose Title/Realtor from dropdown3. Choose “Team/Group” from dropdown (this will display the staff person in the appropriate

area on the team page.)4. Click “Active” to display on the site and enable the name to be pulled for the “Staff – Display

Staff” function.5. “Save”

Images

The following information provides guidelines for image sizing, resolution, and general tips for image consistency.

Large full width banner images:

At least:1220px by 475px

Preferably:1440px by 475px;

Crop:Make sure the most important part is in the center of the image, both horizontally and vertically.

Available Homes Large Image:

At least: 1220px by 540px;

Crop ratio: 1.9333 (best for thumbnails)2.26 (best for large image)Also, make sure the most important part is in the center of the image, both horizontally and vertically.

Website Promotions There are three specific ways to promote information on the Jim Tibbe website. Below are the steps to update all three.

Homepage promotions – This promotional feature focuses solely on the homepage. To activate an admin will need to load an image and link the image to a particular page for the promotion or additional information. Here are the steps:

1. Log into the admin2. Go to Modules: Sliders3. Fill out title, text 4. Asset Type “Image”5. Click on “+Add New Image”

Link to desired promo pageRepeat this step for all promotional images and all regular non-promotional homepage slider images. You will still want to title the non-promotional images, but you won’t add text or a link to another page.

6. Go to the homepage and click to edit the “Display Slide Function” 7. Select slide(s) – this will include promotional slides as well as regular images to rotate

through8. Save and close

OPTIONAL – if there are no promotions running the “backstretch Image Function” can be reactivated. Clicking the “eye” icon will then hide the “Display Slider Function”.

On-page Promotions – There also the “page” promotions that can be added that look like the following screen shot. An admin can add those and they are already style consistently and appear only on the page the admin has put that pod on.

**PLEASE NOTE: in this example you are able to apply the promotion to the Model page because it has not filter navigation, this is not possible on Available Homes tab nor the neighborhoods tab – the promotional box would appear AFTER all the homes.**

1. Log into the admin2. Go to Promotions module (the same one we use for the Global promotions, which we explain

below.)3. Click on “+ Add New”4. Fill out fields – Title will appear in the red bar. Description is text in the box, e.g. Easter

Hours/ Holiday hours informational details. Don’t forget to set the “Begin” and “End” dates. Select the color for the header.

5. Make sure to UNCLICK “is Global, otherwise this item will appear as the Global Promotion on each page of the website. Only run ONE Global promotion at a time.

6. Save

7. Find the page that should house the on-page promotion8. Add a “regular pod” – in this case we are adding this promotional pod to the Model Homes

section.

9. Make sure to select the promotion from your fill-in field (you created the promotion in the Promotions Module)

10. Add the word “container” to the CSS class so it displays correctly on the page.

11. Save and close

Global Promotions (Promotional Banner) - The flag on the website is considered a “global” promotion. In this case the text cannot be changed, but an admin can change which page it links to. Admins should only have one global promotion active at a time. It shows up in this location on ALL pages of the site for as long as it’s active. An admin does not have to add a function pod for these anywhere on the site, just set the “global” flag on the promotion in the module for it to show up in this location. Here is how:

1. Log into the admin2. Go to Promotions module3. Fill out fields - An admin can now fill in the Title and a few words for the Description. Please

check the length of the description so it looks good visually.

4. Make sure ”Is Global” check box is checked5. Save