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 preview.

Site Preview

Site Preview Tool Bar

With this tool bar you can update colors, change images, move sections, select variables, updating padding, take a snapshot to save the layout, and navigate between the homepage, listing page, and detail page.

Site Section

This is the different features site sections that you can add to the homepage. You cannot use a section more than once on the homepage and you don’t have to use all sections on a website. You want to find the best combination of sections that makes the homepage look good and flow properly.

Variant

Variant is a style options within a specific section. Clients have a choice of what the section looks like. Some sections only have one style choice, while others have multiple styles to them. You can only access the Variant when using the Variant tool within an section.

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. No matter what Continue button you click, it will save the work you have done thus far.

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.

Icon

Details

Action

The paint can icon tool will allow you to apply a color to the background of certain sections. Once you have click the paint can icon tool at the top The paint can icon will display on or in the sections 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 section 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 sections, backgrounds, and banners. Once you have click the image icon tool at the top, the image icon will display on or in the sections 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 section 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 section 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 sections icon allows you take actions with the section and change out the different styles (variants) for that section.

Actions you can take within the variant selector tool:

• Change Variant - allows you to select the way the section looks on the homepage, some sections have more variants than others.

• Insert Section - allows you to insert an section that may not be displayed yet. If you click the insert section and you do not see any available sections, that means you have all available sections displayed on the homepage. When you select an section to be inserted, it will place the section below the section that you selected the icon on. When you insert a section, that section 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 section up or down the homepage.

• Remove section - allows you to remove a section from the homepage. If you remove the section it will be removed from the Content Editor (Side Panel) as well.

The spacing icon will allow you to adjust the padding of certain sections. Not all sections have the ability to adjust the padding, so you will need to click the icon to see which sections 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 section and the bottom of the other to bring two sections 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 section within the Site site preview will open the Content Editor (Side Panel) to the the section you clicked on so that you can quickly navigate where you need to take an action within the Content Editor. Sometimes the section 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).