Training

CV Designs Client Training

          Adobe InContext Editing is a tool included with the hosted Business Catalyst Platform that enables you and your web clients to make simple content changes (update text, images, links and module content) within a web browser. To change a web page, you can log into their site's Admin Console, navigate to the page and then use InContext Editing to make any changes you want. The editing options are simple and elegant, and using you requires no knowledge of HTML code or other software, because the functionality is built into the online interface (see Figure 1).


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

Choose the option to invoke the InContext Editing interface.

Figure 6. Choose the option to invoke the InContext Editing interface.

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

If you don't want to see this message in the future, check the option in the lower left corner.

Figure 7. If you don't want to see this message in the future, check the option in the lower left corner.

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. You 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).

Figure 8. Hover over a link and click Follow Link to navigate to another page.

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

Editing text content

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

You 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).

Click the Text button to display the tools related to formatting text.

Figure 9. Click the Text button to display the tools related to formatting text.

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

 Use the menus to select styles, font faces, and font sizes; click the buttons to add text formatting, such as bold, italic, or underline.

Figure 10. Use the menus to select styles, font faces, and font sizes; click the buttons to add text formatting, such as bold, italic, or underline.

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

 If you want to remove the existing formatting on the selected text, click Clear all formatting.

Figure 11. If you want to remove the existing formatting on the selected text, click Clear all formatting.

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.

Inserting images

If you have the permission to edit pages and the editable region has been configured to enable Image editing functionality, you 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).

Click the Images button (picture icon) to see the image formatting options.

Figure 12. Click the Images button (picture icon) to see the image formatting options.

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

 To insert an image on the Internet, enter its URL in the provided field.

Figure 13. To insert an image on the Internet, enter its URL in the provided field.

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 you post their images on an image-sharing site, such as Flickr orPhotobucket, and then copy the URL of the uploaded file and paste it into the field. Alternatively, you can upload the image files for you in advance (using the File Manager, Dreamweaver, or an FTP program) and then instruct you 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).

Navigate to select the image and click Insert.

Figure 14. Navigate to select the image and click Insert.

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 you 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 you). To delete the selected image, click the Delete button (see Figure 15).

 To insert a different image, click the Change button and browse to select the desired image file.

Figure 15. To insert a different image, click the Change button and browse to select the desired image file.

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

To reset the image's dimensions, click the Original Size button.

Figure 16. To reset the image's dimensions, click the Original Size button.

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

The values that have been subtracted from the original image size are displayed as negative values inside the parenthesis.

Figure 17. The values that have been subtracted from the original image size are displayed as negative values inside the parenthesis.

8.        Since bitmap images become degraded if you are scaled larger than their original size, instruct you 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.

Working with links

Adding links is another basic feature. InContext Editing enables you to add links to text and images, if you have the permissions to edit web pages and the editable regions are configured to enable link editing functionality. You 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).

 Click the Link button to see the link menu options.

Figure 18. Click the Link button to see the link menu options.

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

 If you choose one of the My Site options, you can browse to select the file the same way you navigated to select an image file in the previous section.

Figure 19. If you choose one of the My Site options, you can browse to select the file the same way you navigated to select an image file in the previous section.

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

Enter the email address, and then click Insert Link.

Figure 20. Enter the email address, and then click Insert Link.

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

 Click the Change button to choose a different link, or click Remove Link to delete the link entirely

Figure 21. Click the Change button to choose a different link, or click Remove Link to delete the link entirely

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

Choosing the New window option is like setting the target of the link to "_blank."

Figure 22. Choosing the New window option is like setting the target of the link to "_blank."

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.

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

 Click the button on the left to undo the last change; click the button on the right to redo the change that was recently undone.

Figure 32. Click the button on the left to undo the last change; click the button on the right to redo the change that was recently undone.

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


image

ABOUT THE AUTHOR

Lover, Fighter, Wild Bull Rider and Web Designer


Comments (0)

Leave a Comment

Captcha Image

Search

Popular Photos

 

Our Skills

Adobe Business Catalyst Web Development ( 90% )
CMS Integration ( 87% )
eCommerce Implementation ( 82% )
Email Marketing ( 96% )
Responsive Design ( 99% )
Branding & Visual Identity ( 80% )
SEO Optmization ( 90% )

Testimonials

Featured Products