Commonly Used Terms

Keyword	Description
Sitesmith	Front end user experience that user interact with to make design selections.
Siteforge	Backend tool that takes the selections within Sitesmith and builds the website.
Content Editor (Side Panel)	As you make additions/changes in the Content Editor (Side Panel), you will see the changes happening in the Site View Pane.
Site View Pane
Site View Pane Tool Bar	With this tool bar you can update colors, change images, move elements, select variables, updating padding, take a snapshot to save the layout, and navigate between the homepage, listing page, and detail page.
Element
Variable
Continue Button (aka Save Button)	This is aka the “Save” button, it will save the content/selections made as you continue through the process. Make sure to click Continue at every opportunity so you save your work as you move through the different selections.
Notes	Anytime that you see a “Notes” field within the Content Editor (Side Panel) you will be able to add a note for that selection. The goal is to take a note on something that you are not able to accomplish within the experience and it will save that note into Salesforce for the Front End Development team to complete the request. You can include URLs so that you can give the FED a image or a example from a URL of what you are referencing.
Layout

iCC Setup

iCC Account Creation

First we will need to ensure that we have everything setup within iCC before we can start a Sitesmith experience.

The client account has been added
The client lot(s) have all been added
The dev domain has been added into the domain screen
The account node has been added into the CMS

iCC Dealer Detail Setup

Enable registrations
- By enabling registrations this allow us to display the same Types in Sitesmith to be selected to display on the types bar.
- We should enable all the basic RV Types in Sitesmith. The more types we have enabled, the easier it will be to add/remove types within Sitesmith. For example, if the dealer currently does not have motorhomes as a RV Type on their website, but in the onboarding call they say
Enable brands/models

Access Sitesmith

You will access Sitesmith from iCC. It does not matter what account you are in, you can access Sitesmith from Website > Sitesmith menu item.

Agreement Basics

Agreement Basics is the connection between iCC, CMS, and Sitesmith. This connection allows us to save Sitesmith experiences as we go through the design process, tells Siteforge where to place the site when a user clicks the submit button.

Within the Agreement Basic screen you will

Select an Account - This selection connects the account within iCC for the purposes of data, saving, and site building via Siteforge.
- NOTE: This is a type a head field so you can start typing in the account you are looking for verse using a drop down menu
Select a Domain - This selection connects the domain within the account for the purposes of data, saving, and site building via Siteforge.
- Note: This is a type a head field so you can start typing in the domain you are looking for verse using a drop down menu
Select the Package Type - This selection will allow different functionalities to be available within the Sitesmith tool. Depending on which package gets selected will depend on what choices a user will have within the Sitesmith experience.
- Note: This is based on the agreement that the dealer signed, please be sure to select the correct package at this time, as this will be saved once selected and the continue button has been clicked. Once you have saved a package you cannot change the package selection without restarting
- Selections
  - Silver (Fewer website elements are available to select)
  - Gold (Both Gold and Platinum have all website element selections available including Silver Package options)
  - Platinum(Both Gold and Platinum have all website element selections available including Silver Package options)
Package Content - The goal of this feature is to help enable more functionality in Sitesmith when specific pick options or package details are selected within the sales process. This will allow us to automate some of the setup of features when selected via the package content.
- Note: This has not been fully built, but tow guide selection is available and does allow the tow guide element to be selected within Sitesmith when checked.

Site Design Process

Before getting started, if the client has a current website, you will want to ensure that website is open on another screen so that you can review their current site and capture details that you need from their current website, and apply it in Sitesmith.

During the Site Design process, you will start by utilizing the Content Editor (Side Panel) to start building out some of the design, but as you get into the look of the site, you will will want to align the elements you will want to use before continuing to use the Content Editor (Side Panel). By following the process you will save your time from added unnecessary content into an element that you may not use.

Below is the recommendation of the process that you should follow when utilizing the Site Design functionality.

Site Layout

In the Site Layout, we start by selecting some of the basic elements that will be consistent through on all pages throughout the website. First you will select a starter layout that will give you a starting point. With so many elements available on the homepage, rather than displaying all elements as soon as you start a Sitesmith experience, we are providing a starting point so you don’t have to remove so many elements you don’t need.

You will also get to upload the dealer logo, select a header style, select a footer style, add the operating hours and social media icons.

Starter Layout

Goal: Select a layout that will most closely match what site design you would like to complete. You don’t have to stick with this layout, it just gives you a starting point so you don’t have to remove so many elements on the homepage.

Additional Details

Here we allow you to select a starting layout, because of all the different elements on the homepage, it was getting cumbersome to have to remove multiple elements to get to the layout that you want to start with. This is just a starting point and the layout can be fully customized through out the process.

S1 and S2 will be available for a Silver Package dealer
S1, S2, G1, and G2 will be available for a Gold Package dealer
S1, S2, G1, G2, and P1 will be available for a Platinum Package dealer

Future: This layout selection is the first iteration of a new direction that we will be moving forward with. Where we will have demo sites and layouts for the sales team to present during the sales process and select which layout the client likes best.

Take Action:

Select the Layout you want to start with
Click Continue

Logo

Goal: To capture the dealers logo from their current website and upload it into Sitesmith, this will provide starting colors to the website and display the dealers logo in Sitesmith.

Additional Details

Be sure that you have the dealers current website open.

On the dealers current website you will want to right click on the dealer logo (PC user) to save the image, and you will save it to a folder on your computer.

Once you have the dealer logo saved. In Sitesmith, you will click on the plus symbol, it will open a folder on your computer to select which image you would like to upload. Select the dealers logo that you saved.

Note: The logo size cannot exceed 100k, so you will need to resize the image if it is larger than 100k. This can easily be done with any image tool such as Snagit Editor.

Once you upload the logo, Sitesmith will automatically pull the colors from the dealers logo and apply them to the website and save them in the color selection to adjust a little later in the process.

Take Action:

Save the dealers logo on your computer
Upload the logo
Take any necessary notes for FED
Click Continue

Header

Goal: To select a header style that will closely represent what they dealer may have or would want based on the design guide. We want to start with something that matches their current site, and we can always show the client additional header choices within the onboarding meeting if they want to see something different.

Additional Details

Currently there are 2 selection for the Silver Package dealers and 3 additional selection for Gold and Platinum Package dealers for a total of 5 for the higher package dealers.

Logo Top - Where the logo is positions on the top bar
Logo Float - Where the logo is position between the two bars
Logo Center - Where the logo is positioned in the center of the header
Bottom Clear - Where the logo is positioned to float between the two bars, but the navigation bar is transparent to show the hero background image.
Full Clear - Where the logo is positioned to float and the full header is transparent to show the hero background image.

Depending on the style, colors, size, and shape of the dealers logo will help determine the best header style to use.

Sometimes the dealers logo may look a little small, that can always be adjusted by the Design/FED team once the site is built. A note can be taken to make adjustments as needed or to add any additional logos, content, or dealer information into the header.

Take Action:

Select which header style will best match what the dealer wants for their website
Take any necessary notes for FED
Click Continue.

Tool Tip: If the dealer has any additional logos, sayings, or dealer information that needs to be included in the header. A note will need to be added for FED to apply those additions to the header.

Design

Goal: To select a footer style that will closely represent what they dealer may have or would want based on the design guide. We want to start with something that matches their current site, and we can always show the client additional footer choices within the onboarding meeting if they want to see something different.

Additional Details

Currently there are 6 selection of footer styles. All styles will have default content and labels that most dealers will want to include in their footer. We have a Quick Links/Navigation area, Locations display, Hours display, and Social Icon display. Depending on the footer style, other footer layouts will be available

No Logo - standard labels - this will only display 1 lot location
Logo-l-iso - standard labels with the addition of the logo - this will only display 1 lot location
Social Bar 1 - Will have the standard labels with the addition of the logo and a social media bar at the top of the footer - this will only display 1 lot location
Social Bar 2 - Will have the standard labels, addition of the logo, a place to display badges/awards/etc., and a social media bar at the top of the footer with different social media icon styles - this will only display 1 lot location
Logo-r-sm - Will have the standard labels, smaller logo, and a place for badges/awards/etc. - this will only display 1 lot location
Badge Bar - Will have the standard labels, a bar for affiliations/organizations/awards/etc. - this will display multiple locations if the dealer wants multiples listed in the footer.

Take Action:

Select which footer style will best match what the dealer wants for their website
Take any necessary notes for FED
Click Continue.

Tool Tip: If the dealer has any additional logos, badges, locations, or dealer information that needs to be included in the footer. A note will need to be added for FED to apply those additions to the footer.

Quick Links

Goal: Typically you want to align the Quick Links with the main navigation items. Not every case you can get it exactly the same, but we want to get it close to a website user can access links that they find in the navigation bar at the bottom of the site as well.

Additional Details

Within the Quick Links, we want to ensure that we have a label for the user to click on, and a URL where that text label will navigate to when clicked.

In this control, you have the ability to move and reorder the items by click and holding the double line to the left of the label and dragging it to the spot that you want it to display.

The red trashcan with the x will allow you to remove any label and link

To add any additional Quick Links you can click the Add Quicklink button and a new label and link will display.

Take Action:

Align the Quick Links with the main navigation bar, and reorder when necessary
Click Continue.

Tool Tip: You don’t need to always add/remove Quick Links, you can just rename the labels and keep the default URL since the URL will align best with our system.

Operating Hours

Goal: Here is where you can add the dealership hours that are typically displayed within the footer and the contact us page.

Additional Details

This section is a html editor so you can layout the hours by typing in, adding lines so if a dealer wants to separate out sales, service, parts, etc. you have the ability to add groups of hours with spacing between.

If more custom styling or multiple hours need to be added per location, a note will need to be taken for FED to complete.

Take Action:

Type in the dealership hours how they currently have them displayed
Take any necessary notes for FED
Click Continue.

Social Media

Goal: Here is where you can add what social media icons that the dealer as available.

Additional Details

By checking the box for the social media icon that the dealer wants to display it will automatically add the social media icon in the footer depending on which footer style you selected.

You will need to make sure you copy and paste the dealers social media url so that the icon is going to the correct website.

We have added the primary social media icons that are utilized by most dealers. For any that are not available in Sitesmith, you will need to take a note for the FED team to add the icon and link to the correct page.

Take Action:

Check the box for which social media icon the dealer wants to display
Copy and paste the URL of their social media page into Sitesmith
Take any necessary notes for FED
Click Continue.

Sitesmith does more than allow us to design the homepage of the site, it also can help us by creating the secondary pages that the FED team will need to have within the CMS to help them move over the content from the dealers current website to the new website we are developing for them.

We want to first align the navigation to match what the dealer currently has so that we ensure that we have all pages that the dealer has on their current site by aligning the main navigation items and all the drop downs that come from the main navigation items. (Dealer doesn’t have a current site, that is fine, we have a default navigation bar setup to help us drive the conversation during the onboarding call)

Once we have the navigation set how we need it, we will then go into select pages to ensure that every navigation item has a link to the page it should. We have many default pages that are available to be selected, and custom pages can be added to cover those pages we don’t have by default.

Both of these process are extremely important that we take the time to get these right. The navigation bar and moving over content are very big deals to clients. So we want to put them at ease that we have identified the navigation items, created the pages to move over the content, and we will be moving over their content.

Goal: Here is where you will ensure that the navigation has all the main navigation items displayed how the dealer currently has it, and that we have added all the proper drop downs.

Additional Details

When starting with the Pages and Navigation section. You will want to make sure your Navigation bar is fully set how you want it to be before moving on to the Site Pages section.

First you will want to start by getting all the base navigation items labeled correctly before working on any drop down menu items. Some base navigation items might not have a drop down, so we want to make sure that the main navigation item has a based URL added. You can reuse any of the base item by renaming the label to what the dealer currently has on their website vs having to add new base items.

In the case where there is a base navigation item that does have a drop down. We do not want to add a URL to the base navigation item, we want to ensure all the pages within the drop down have the correct label and URL linking to the correct page. You will want to add a drop down menu item for the base navigation as well. (Example: If you have Financing as a base navigation item, and it has a drop down for Value My Trade and Consign My RV, you will want to also add a drop down menu item of Financing so the main financing page has a link to it as well since we do not want to link from the base navigation item.)

In the navigation menu, you will always have a standard setup to start, and you will need to adjust by adding/removing menu items.

Actions you will take within Navigation:

Labels - this is what displays on thew website for users to click.
URL - this is the page that will display when the user clicks a label. You will be able to select from default URLs we already have, or by typing in the page name. Page name structures should always start with a forward slash, and it should have hyphens in between words. (example: /page-name)
- this button will allow you to select a default page from a drop down menu so that you do not have to type in a page name. You should always look for a default page before adding your own custom page.
- If a standard page is not available, you will need to create a page by typing in the URL field
Red Trashcan - will allow you to remove a menu item. If you remove the Base Item it will remove all drop down menu items within it.
Add Button - will allow you to add a base item or a drop down item.

Take Action:

Add the main navigation items and label and order appropriately
Add the drop downs items and label, add URL, and order appropriately
Take any necessary notes for FED
Click Continue.

STOP! - Here is where you will pause from working with the Content Editor (Side Panel) and start configuring the layout of the homepage in the Site View Pane by utilizing the Site View Pane tool bar. You want to get all the elements you want to display on the homepage added prior to going back to the Content Editor (Side Panel).

As you select/remove elements on the homepage, the Content Editor (Side Panel) will automatically adjust to match the elements that you have selected to be on the homepage.

Site View Pane Tool Bar

First you will need to understand how to use the tool bar. Here are the icons or actions that you can take within the Site View Pane and what they allow you to do.

Icon

Details

Action

The paint can icon tool will allow you to apply a color to the background of certain elements. Once you have click the paint can icon tool at the top The paint can icon will display on or in the elements where you are able to change the color. If the paint can icon does not appear after you have clicked the paint tool icon at the top, that means that element does not have the ability to change the color.

The colors available are the 4 main colors within the theme selection in the Content Editor (Side Panel). Plus standard colors such as white, grey, charcoal, and black. The only colors that can be edited are the first 4 theme colors. When you change the theme colors, it will change the colors in this tool as well.

The image icon tool will allow you to apply images within certain elements, backgrounds, and banners. Once you have click the image icon tool at the top, the image icon will display on or in the elements where you are able to change an image. If the image icon does not appear after you have selected the paint tool icon at the top, that means that element does not have the ability to change the image.

Actions you can take within the image selector:

You can filter by tag to only see the images you want to view so you don’t have to scroll through all the available images. This is a type a head feature and most of the tags are a single word.
You can refresh the images. This is best used when you change variant within an element where the image size may be different. You can click Refresh Images to display the images that are sized for the variant that you have selected.
You can preview any image to see it as a larger image by clicking the box with an eye in the upper left corner of the image.
When you find an image you want to use, click the checkmark icon in the upper left of the image to select the image.
To remove the image you have selected, you will select the full image URL and delete the image URL.
You are able to use outside images by copying the image URL from the outside source (i.e. dealers current site) and paste that URL into the Image URL and it will display that exact image in Sitesmith. When the site builds, it will save that image as a new URL so we won’t loose that image. You are copying the image as is, so how ever big that image is from that outside source it will try to use that same size. You may have to resize the image and update the URL with the resized image to make it look proper.
You can apply an overlay on the image to make it darker or lighter or have no overlay to the image. When you apply the overlay the text color will automatically adjust if there is text overtop of the image.
Make sure to click Save after you have selected your image or added a image URL from an outside source.

This icon allows you take actions with the element and change out the different styles (variants) for that element.

Actions you can take within the variant selector tool:

Change Variant - allows you to select the way the element looks on the homepage, some elements have more variants than others.
Insert Section - allows you to insert an element that may not be displayed yet. If you click the insert section and you do not see any available elements, that means you have all available elements displayed on the homepage. When you select an element to be inserted, it will place the element below the element that you selected the icon on. When you insert a element, that element control will show up in the Content Editor (Side Panel) for you to add content.
Move Up and Move Down - allows you to reposition the element up or down the homepage.
Remove section - allows you to remove a element from the homepage. If you remove the element it will be removed from the Content Editor (Side Panel) as well.

The padding icon will allow you to adjust the padding of certain elements. Not all elements have the ability to adjust the padding, so you will need to click the icon to see which elements have the ability to adjust the padding.

You can adjust the Top Padding or the Bottom Padding.

Options are: Extra Small, Small, Medium, and Large.

When to use this? The best scenario is where you see a lot of blank space you want to reduce that blank space as much as possible. You don’t want to totally remove all padding, but you might want to bring things closer together to make them look better.

Sometimes you may need to adjust the top of one element and the bottom of the other to bring two elements closer together.

The Snapshot tool allows you to save multiple layouts and select from the layouts. This helps during the onboarding call with the client to be able to have a few different layouts that allows you to jump back and forth quickly so if the client wants to see a few different layouts we can switch back and forth quickly to show them the selections they are interested in.

Prior to getting on the call with the client you could design multiple options and save them in the snapshot so you can show them the options quickly by loading the different options for them on the call.

Actions you can take within the snapshot tool:

Save snapshot - you can save the layout how it is by clicking on the icon, within the pop up window you will want to name your snapshot with something that helps you remember the styling of this layout, and click Save.
Load snapshot - you can load the snapshot that you have saved by selecting the name and click Load.
You can delete saved snapshots from the load snapshot drop down. There is a red trashcan, click that to delete a saved snapshot.

This allows you to quickly toggle between the homepage, listing page, and detail page without having to click into the Content Editor (Side Panel)

Clicking any element within the Site View Pane will open the Content Editor (Side Panel) to the the element you clicked on so that you can quickly navigate where you need to take an action within the Content Editor. Sometimes the element may not have any action you can take in the Content Editor (Side Panel), but many times there are additional controls within Content Editor (Side Panel).

Table Of Contents

Commonly Used Terms

iCC Setup

iCC Account Creation

iCC Dealer Detail Setup

Access Sitesmith

Agreement Basics