Training your clients to update their sites with InContext Editing

Additional Requirements

Business Catalyst free Partner account

• Learn more

InContext Editing is a browser-based editing interface that makes it easy for users with access to the Admin Console to edit their site content, with no coding experience required. In this article, you'll learn how to teach your clients how to use it. You'll also get recommendations for recording video trainings.

The InContext Editing interface includes tools to format text, insert images and add links. It also maintains a connection to the Admin Console so that clients with the required permissions can update module content and related items, such as updating confirmation pages and email messages sent to visitors after submitting a form, ordering a product, subscribing to a newsletter, or other similar interactions.

When a user with the necessary permissions clicks a module to edit it, the corresponding section of the Admin Console is displayed. The code is not accessible and the controls are designed to enable non-technical users to make minor changes to the site. For this reason, it is not possible to add or edit the HTML, CSS or JavaScript code using InContext Editing. It also should not be considered a robust administrative area, because you cannot create or insert modules, web forms or Web Apps. You cannot create new web pages or Secure Zones. These types of complex actions and configurations must be performed in the Admin Console.

Keep in mind that you have complete control over the editable regions on each page of the site. By default, all of the <div> containers and table cells are editable. However, you can control that by setting at least one <div> container or table cell as editable (by hand-coding or using Dreamweaver); if you specifically set one region, the other containers on the page are disabled, unless you specifically set them to be editable too.

By specifying the formatting options (in the code or by updating the settings in the Property inspector in Dreamweaver), you can also define which editing tools are available to your clients when they log in to InContext Editing.

To learn more about controlling the regions that are editable and setting the specific tools that your clients can use, see Optimizing online businesses with InContext Editing.

By setting permissions (via the creation of roles, and then adding users to those roles), you can define which types of content your clients can edit. For example, it is a common practice to allow clients to edit specific web pages, but not edit templates (because a single change to a template can affect the display of an entire site). Depending on the client, you may also choose to not allow them to add or edit module content. It's important to evaluate the skill level of your clients and balance that by only enabling the editing capabilities that your clients are comfortable performing. It is often helpful to start with a small set of permissions, which can be expanded over time if desired. Always err on the side of providing too few rather than too many permissions to ensure that the site content is not compromised.

To get instructions on creating roles and assigning permissions to control the types of content that your clients can edit, see InContext Editing for Business Catalyst administrators.

Before your clients can access the InContext Editing interface, you must first add them as users in the system so that they can log into the Admin Console. InContext Editing is invoked through the main menu of the Admin Console, and it requires that your clients be logged in so that the appropriate permissions can be applied.

To add a new user to the Admin Console, follow these steps:

1. Choose Admin > Manage Users (see Figure 1).

2. In the sidebar, click the option to Create a new user (see Figure 2).

3. The User Details page appears. Enter your client's information into the fields. Use a generic, easy to remember password (so that they can log in and reset it to a password they choose). Check the option to Allow access to Admin (because this is the setting that allows them to log into the Admin Console). Do not enable the email now; later you can set that up when you upgrade the site. If you'd like the system to send the login details to your client (recommended), then also check the option to Email details to user (see Figure 3).

4. Click Next. Use the interface to add the user to the applicable roles by clicking the right-pointing arrow button to move the desired role(s) from the left pane to the right pane (see Figure 4).

5. If you haven't yet created the role that specifies the permissions that your client can access, you can return to this area later to add them. Click Next.
6. Use this interface to hide the menu items that you do not want displayed when your client logs into the Admin Console. The menu items will not simply be disabled; they will be completely hidden. This strategy makes the Admin Console easier to navigate, because it focuses your clients on the specific features that they'll use. For example, if you do not want them to use the Admin menu, deselect the Admin option. Click the plus (+) icons to expand each section, and hide the individual menu items in each area (see Figure 5).

7. Click Save to create the new user account. If you selected the option to Email details to user in the first screen, your client will receive the email that contains their user name and password, with instructions to log into their Admin Console. Otherwise, you can provide this information to your client via email or at your next meeting.

Once your client has the credentials to log into the Admin Console, they can view the site's pages with the InContext Editing interface and make the desired changes. They'll use these steps to launch InContext Editing:

1. Choose Website > InContext Editing > InContext Editing (see Figure 6).

2. The introduction screen appears. Click Start Editing (see Figure 7).

3. The home page of your site appears, surrounded by the InContext Editing interface. Your client can click inside any of the editable regions (areas with dashed line borders) and use the editing tools. After clicking in an editable region, the borders for that area become solid. They can format text, insert images, add links, or update more complex content, like forms and modules (depending on their permissions and the formatting option settings applied to the editable regions).
4. To jump through the site to edit linked pages, hover your cursor over a link and then click the Follow Link box that appears (see Figure 8).

If a page is not linked (an orphan page) you can access it by editing the URL in the browser's address bar, replacing the text after the equal sign with the file name of the page.

For example, edit the bold text in the URL below:

http://my-site.businesscatalyst.com/Admin/Editing.aspx#page=%2Fhome

with the orphaned page's name:

http://my-site.businesscatalyst.com/Admin/Editing.aspx#page=promotion.html

Text editing is the most basic feature included with InContext Editing. If you want your clients to edit their site content, you'll grant them permissions to edit web pages and then configure the editable regions in the pages to allow the formatting options for text that you want them to use. For example, you can enable specific CSS styles that they can access in the Online Editor Settings in the Partner Portal, and then configure the editable region to allow CSS style formatting. That way, your clients can highlight some text on a page and use the Style menu to select the style they'd like to apply. For more information on specifying CSS styles available to your clients, see Optimizing online businesses with InContext Editing. If you'd prefer that they do not apply any CSS styles, simply disable the CSS styles feature for the editable regions on the page.

Your clients will follow these general steps when editing text.

1. After logging into the InContext Editing interface, click inside an editable region to select it.
2. The selected area indicates that it is in focus by changing the surrounding border from a dashed line to a solid line.
3. To add more text, begin typing in the desired location or copy the text from another document and press Control-V (Windows) or Command-V (Mac) to paste it in the location where the cursor is positioned. To remove text, highlight the text and press Control-X (Windows) or Command-X (Mac) to delete it.
4. To format the text, use the available formatting options in the InContext Editing interface. Click the Text button in the upper left corner to see the text formatting options displayed (see Figure 9).

5. While the text functionality is selected, the contextual menu along the top of the window updates to show the options for text formatting. Depending on the settings applied to the selected editable region, some of these options may be disabled (see Figure 10).

6. The More menu in the top right corner offers additional functionality. You can set the selected text as a paragraph, or as an H1, H2, H3, H4, H5 or H6 header. You can also set the text color and the background color of the selected text (see Figure 11).

7. After making the desired changes, click the Save or Save and Publish buttons as described in the section "Publishing changes to the live site" below.

If your clients have the permission to edit pages and the editable region has been configured to enable Image editing functionality, they can add and edit images using the following steps:

1. After logging into the InContext Editing interface, click inside an editable region, to select it.
2. To work with images, use the available formatting options in the InContext Editing interface. Click the Image button in the upper left corner to see the image formatting options displayed (see Figure 12).

3. While the image option is selected, the contextual menu along the top displays the options for inserting and formatting images. To insert a new image, choose its location (The Internet, My Computer, or My Site) and then click Insert Media (see Figure 13).

Note: Images uploaded using the My Computer option are placed at the root level of the site. There's no way to preset the upload location. For this reason, you may recommend that your clients post their images on an image-sharing site, such as Flickr or Photobucket, and then copy the URL of the uploaded file and paste it into the field. Alternatively, you can upload the image files for them in advance (using the File Manager, Dreamweaver, or an FTP program) and then instruct them to choose the My Site location and browse to select the images from the site's images folder.

4. When you use the My Computer or My Site option, the interface provides the ability to browse to select the desired file (see Figure 14).

5. After you've inserted a new image, the menu items update to display new features to change the dimensions of the image. The constrain proportions option is enabled by default so that you can enter a numeric value in either the width or height field, and the other dimension will update automatically. However, you can click the lock button to disconnect the height and width to edit them independently. (This is not recommended, as it causes the images to look stretched—it's best to resize the images in an image editing program before inserting them). To delete the selected image, click the Delete button (see Figure 15).

6. The More menu in the top right corner offers additional image formatting functionality. You can set the tooltip that appears when the visitor hovers over an image. You can also set the alignment, spacing and border width of the selected image (see Figure 16).

7. Another way your client can adjust the inserted image's dimensions is to drag the handles that appear while the image is selected. Click and drag one of the four corner handles to resize the image and constrain its proportions. As the image is resized, a gray box displays the new height and width in pixels (see Figure 17).

8. Since bitmap images become degraded if they are scaled larger than their original size, instruct your clients to scale images smaller only, rather than increasing their dimensions. Ideally, all images should be resized and optimized prior to being inserted.
9. After inserting and formatting images, click the Save or Save and Publish buttons as described in the section below titled Publishing changes to the live site.

Adding links is another basic feature. InContext Editing enables your clients to add links to text and images, if they have the permissions to edit web pages and the editable regions are configured to enable link editing functionality. Your clients will follow these steps to add and edit links:

1. After logging into the InContext Editing interface, click inside an editable region to select text or image content.
2. To add and edit links, click the Link button in the upper left corner to see the link options displayed (see Figure 18).

3. The contextual menu displays the options for adding links. To insert a new link, choose its location (External Web Page, Document from My Site, Page in My Site, or E-mail Address). Document from My Site refers to linking a text file, such as a PDF or Word document, and Page in My Site refers to linking an HTML page. Either browse to select the linked item or enter the URL to an external web page in the provided field and then click Insert Link (see Figure 19).

4. The E-mail Address option invokes a special field that lets you add a link that, when clicked, will invoke the visitor's email client and prepopulate the To field. To add an email address link, enter the email address in the E-mail field (see Figure 20).

5. After inserting a link, the interface updates with options to change or remove the link you just inserted (see Figure 21).

6. The More menu in the top right corner offers additional link options. You can set the link to open in the same browser window (the default setting) or open in a new browser window. You can also set the tooltip that appears when the visitor hovers their cursor over the linked element (see Figure 22).

7. After editing the links, click the Save or Save and Publish buttons as described in the section below titled Publishing changes to the live site.

The InContext Editing feature is closely integrated with the Admin Console. The system can be configured to let your clients select editing tasks based on module content and update the data in the corresponding page of the Admin Console (in a new browser window). In most cases, you'll want to avoid having your clients edit or delete the modules themselves, but if they are savvy enough, you can train them to perform very specific tasks, such as adding a new announcement or a new blog post.

For example, if your clients have permission to edit forms (and the form is placed inside an editable region), your clients can select the Edit List option to update the recipient list of a form that subscribes visitors to a monthly newsletter (see Figure 23).

Depending on your client's browser settings, a new tab or new window will open with the corresponding page in the Admin Console (see Figure 24).

If your client is very technical and spends a lot of time maintaining their site, they may find that InContext Editing is easier to use, compared to navigating to the relevant page in the Admin Console manually. InContext Editing literally matches up the features of their live site with the section of the Admin Console where they can manage it.

If your clients have a good understanding of the site options and you trust them to tread lightly as they use InContext Editing, you can grant them permissions to edit the system messages and auto-reply emails that are associated with web forms. For example, if a web form's parent container is set as editable and your client has the required permissions, they can edit the form, its fields, the email message that is sent, or the confirmation page that is displayed to the visitor after successfully submitting the form (see Figure 25).

The relevant section of the Admin Console opens in a new browser window so that your clients can edit the confirmation message that will be displayed (see Figure 26).

It's up to you to set your clients' permissions on a per-module basis when you create their roles. You can enable specific capabilities for each module by adding the applicable tasks to a role. For example, you can enable your clients to add and view the announcements, but not delete or edit the announcements to minimize the chance of data loss (see Figure 27).

If you've set their permissions to make these types of complex site updates, it's especially important to log into the site as your client (using their credentials) to see the options that are available to them. Depending on their understanding of web design and terminology, you can train them to work with the editing tools with the understanding that they should not make changes to the form fields, module configurations, shopping cartsor other critical site elements. As they become more experienced, you can reset their permissions to allow them to access and edit modules, as long as they focus on tasks such as updating the system messages and auto-reply content that are sent to visitors after interacting with modules on the site.

Clients (or your web team members) that are more familiar with the inner workings of the site may be given a higher level of permissions to edit the content of specific modules. Although it is not a common practice, you could enable your clients to edit Dynamic Menus so that they can update the menu items themselves (see Figure 28).

As you can see from these examples, InContext Editing offers a great deal of editing power, and it's up to you to decide what level of control to allow each user. By taking a phased approach, you can start out by enabling only a few permissions, such as editing the text and links in web pages. Over time, as your clients become more familiar with their site, you can teach them to perform more complex tasks and grant them additional permissions so that they can take ownership of more areas of site management.

Generally speaking, you should not grant your clients the ability to add, edit or delete templates. A template may affect the design of hundreds of pages in a site, and it is best to reserve that editing capability for yourself or trusted web designers that work on your team. Editing templates is serious business: a single edit can change the appearance of an entire site. For this reason, it is highly recommended that you restrict your clients from deleting or editing the templates used in their site. However, if you wish to do so, take care to explain the consequences so that they proceed with caution. Also, create backup copies of your templates on a local drive, in case the templates are broken and you need to republish them.

If you trust a single team member to edit the site templates, create a separate role that includes permissions to add, delete, edit and view templates, and only add the one team member to the role. (Users added to multiple roles can perform any task listed in the combined permissions of all the roles they are assigned).

When a user logs into InContext Editing with the permissions to do so, they can edit the content in the template editable regions based on the formatting options that are enabled (see Figure 29).

The permissions you set in the roles that are assigned to your clients are based on the type of content, and it is not possible to enable editability of some templates and not others. The permissions are listed simply as add, delete, edit, and view templates; the permissions you enable for your clients are applied for all templates.

However, if a site uses one main (default) template for the majority of the site's pages, and then uses several other subtemplates for individual pages that your clients want to control, you can add a single editable region in an area that contains no content in the default template, effectively making all the other div containers and table cells uneditable. By controlling the editability of the one template you do not want your clients to change, you can then grant them permissions to edit templates, knowing they can't update the one that would affect most of the site.

To learn more about controlling which regions are editable, see the section titled "Setting pages and templates as uneditable" in Optimizing online businesses with InContext Editing.

The InContext Editing interface is browser-based. One of the first things you'll want to tell your client is that they will lose all their changes (both in InContext Editing and the Admin Console) if they quit the browser or navigate away from the current page before saving.

Additionally, the interface offers the ability to revert back to the former state of the page if your client doesn't want to publish the changes made during an editing session. Since the options allow for this flexibility, reassure your clients that they can work on pages and are not committing the changes to the live site until they specifically publish them.

Follow these steps to publish a page after editing it:

1. Scroll to the bottom right corner of the screen. Three buttons are displayed (see Figure 30).

2. Click Save and Publish to push the changes live on the remote server.
3. To preserve the changes you've made so far (without pushing the updated page live), click Save. Later, when your client returns or logs back into the page in InContext Editing, the updates on the Working Copy will still be there. The interface indicates if the page has been edited and is not in sync with the live site by listing the page's status in the lower right corner (see Figure 31).

4. If the page does not format as expected, or if your client wants to revert and discard the changes made during the editing session, click Discard. The Working file is now back in sync with the page that is displayed on the live site.

Note: If your client closes the browser window without clicking any of these three buttons, the recent changes will be discarded. This is also true if the browser crashes during the editing session, so it is advisable to click Save after every successful editing milestone is achieved, even if the user is not ready to publish the updated page.

Undoing the most recent change

InContext Editing includes an undo feature, similar to the concept of pressing Control-Z (Windows) or Command-Z (Mac). It also includes a redo feature, similar to pressing Control-Y (Windows) or Command-Y (Mac), to redo a change that was previously undone.

These buttons are located immediately to the right of the Text, Image, and Link buttons in the far left corner (see Figure 32).

Training your clients to use these strategies to undo and discard the recent changes will help them feel more confident about making site changes. Once they are familiar with the editing interface, they'll know how to back out of a page if they do not want to save or publish the changes that they've made to their site.

After reviewing the features outlined in this article, it's time to prepare the training for your clients on using InContext Editing. As you begin, consider each client's level of technical knowledge and customize the training sessions and materials to fit. For example, if your client is a technical person with some word processing experience, you may find that spending a half an hour together reviewing the InContext Editing interface and providing the InContext Editing cheat sheet is enough to get your client up to speed.

Other clients prefer to watch video trainings as they update the site. They may open the video in a new browser window and play it to watch the steps as they are about to perform them. In these cases, you have many different options. You can watch the Upgrading a trial site video on Adobe.tv to learn more about setting up users, adding roles, and configuring InContext Editing in a general way; you can also create your own training videos by taking screencasts as you use InContext Editing on your client's own site. Some clients prefer a personalized video because the site content looks more familiar and the training focuses on the features that you've enabled for them.

You can use Adobe Captivate to create videos of your screen as you interact with the interface. Alternatively, you can use a free solution, such as Jing or Camtasia by TechSmith, to record your screen. It's helpful to start from the very beginning, to show your client how to log in and invoke InContext Editing from the Admin Console. Then proceed through the features that they'll use most often so that they can watch the video again if they forget how a feature works.

If your client is enthusiastic, but nontechnical, try sitting with them as they make their first updates to the site. Many users are ready to learn, but appreciate the guidance as they start working with new functionality, until they feel more comfortable publishing changes to the live site and have a better understanding of how the editing system works.

Less is often more when it comes to teaching new users. Don't give them too much information up front, because they can become overwhelmed and frustrated. Depending on the site's needs, you may choose to set the editable regions for text editing only, so that your clients can add, delete, and edit the content without worrying about updating images, links, and module content for now. Later, when they feel more confident, you can enable more features.

Blogs also enable your clients to post content on their site without requiring any HTML coding experience. Using the Blog layouts, you can customize the appearance of the home page of a blog and the individual posts with CSS styles. Your clients can fill out a form interface to add new blog content from within the Admin Console. Comments can be enabled or disabled as desired to encourage visitor participation or publish stand-alone messages from the business. See the knowledgebase article titled Publish a blog post for more details about setting up a blog.

Another way to allow your client to update content without worrying about the formatting of the site is through modules. For example, you can configure the Announcement module, insert it on a page, and apply a template to update the page's appearance. Then you can teach your clients to add new announcements to the site within the Admin Console. To learn more about working with the Announcements module, see Displaying announcements on pages with the Announcements module.

Web Apps are another feature in Business Catalyst that enables your client to submit a form and populate a section of the site with new custom content. By building Web Apps, you are specifying a set of fields that form a piece of web content (such as defining a recipe as a set of fields that display its title, list of ingredients, cooking instructions, serving suggestions and nutritional information). When your client adds new Web App items, the content is formatted by the CSS styles and templates applied to the page where the Web App resides. To get more information about building Web Apps, see Working with the Web Apps module to create custom content types.

Using the InContext Editing cheat sheet

Download the sample files provided at the beginning of this article and save the ZIP file to your desktop. Uncompress it and open the incontext_editing folder to find the PNG and PDF files inside. You can distribute this content to your client in the following ways:

• Print the PDF file and give your clients a hard copy to post near their workstation.
• Insert the PNG file in a page of training materials, and then send your client the link.
• Send an email with the PDF file attached so that your clients can print or view it.
• Create a video screencast of the video using the PNG file as one of the elements you capture as you explain the process of working with the InContext Editing interface.

Note: In order to view PDF files, your clients must have Adobe Reader (free) or Adobe Acrobat installed on their machine. If they need to download the software, send them to the following link to download Adobe Reader from Adobe.com.

If you decide to disable some of the features, you may also choose to edit the PNG file using an image editing program, such as Fireworks or Photoshop. You can remove the areas of the interface from the cheat sheet that your client will not be using to simplify the interface items. Features that are set as inactive will simply be grayed out in the interface and are not selectable. Additionally, if your client does not have permissions to update certain types of content (such as templates) then the <div> containers and table cells that are normally set as editable by default for these types of files will be uneditable when your client logs into use InContext Editing.

Finally, remember that you can create multiple roles to define specific permissions for specific sets of users, so you could enable more complex editing features for one client and restrict another client just to editing and adding text on the same site. The system automatically associates the enabled permissions for each user based on the email address they use to log in.

Where to go from here

If you'd like more details about setting up InContext Editing for your clients, see InContext Editing for Business Catalyst administrators.

To learn more about how to configure InContext Editing to control precisely which elements that your clients can edit and which features they can access, read Optimizing online businesses with InContext Editing.

To get more information about working with Business Catalyst, be sure to visit the Business Catalyst Developer Center, where you'll find helpful articles, tips, and sample projects.

Also, check out the following Business Catalyst knowledgebase articles:

• Defining InContext Editing editable regions using Dreamweaver
• Defining InContext Editing editable regions using any code editor
• Migrating an existing site with InContext Editing to the Business Catalyst Platform