To see the updated tutorial for SharePoint 2013 or 2016, click here.
Ok… so you’ve done it, you’ve dared to click the ‘Add Web Part’ button and have ‘ooohhed’ and ‘ahhhed’ at the enormous list of available Web Parts. Of course, each Web Part provides its own special function that can lend support to how content is displayed on your site. Through trial and error I have spent time learning functionality of available Web Parts. Over time– and with some creative application 😉 –I have also learned alternate uses to some of the commonly used ones. Probably my favorite, or at least the one I use most often, is the Content Editor Web Part (CEWP). I use this Web Part for a variety of different things such as for the creation of site banners and as a broadcast tool, which I’ll write about in my next blog. I also use the CEWP to create navigational buttons:
Buttons are another way we can provide intuitive navigation for our site users.
Situations where use of buttons may be appropriate:
- To provide easy access to other related SharePoint sites (that may be several clicks away). For example, when implementing sites, you may choose to add a help button that links to a Technical FAQ Wiki.
- To provide navigation in a Web Part Page (WPP). Unless we access the code and ‘unblock’ the Quick Launch bar we don’t get that navigational tool in a Web Part Page. Using breadcrumbs to navigate out of a WPP can also be confusing to novice SharePoint users, because the breadcrumbs (of course) map to the library holding this file. Because of this, whenever I create a WPP I like to give users a ‘home’ button to give them easy access back to where they came from.
- To provide links into specific list and library views. Remember when you change views in a list or library, the URL also changes. You can use that path to provide users a link directly to a filtered view– for example, to provide a view of items that have been recently added –or to provide direct access a new list item form.
- To provide access to an external site or a network directory. If you have an address for it, you can link to it (it doesn’t have to be another SharePoint site).
The point is to provide your site users with navigation that is intuitive and easy to use. Buttons certainly fit the bill on both criteria. Ok, have I sparked your interest yet? The below steps will demonstrate how you use a CEWP to add a button to your page:
*Note: To create a button using the CEWP, you’ll need to begin by uploading the graphic you want to use as a button, to a SharePoint library. The steps below assume that you have already taken this action. * A friendly reminder, make sure those accessing the site displaying the button, have at least ‘read’ access to the image file.
To create a button using a CEWP:
1. On the site where you wish to add the button, click Site Actions then Edit Page.
2. Click Add a Web Part.
3. Select and add a Content Editor Web Part (displayed under the Miscellaneous category).
4. To configure your new Web Part, click on the Edit drop-down and select the option Modify Shared Web Part.
5. In the Properties box (displayed on the right hand side of your screen), click on the Rich Text Editor button.
6. In the HTML Editor box that appears, click the Insert Image icon.
7. In the Edit Image Properties window enter the path to the image, or use the browse button to navigate to, select, and add the image.
8. In the HTML Editor window, click the image (that you just added to your CEWP) to select it.
9. Use the Insert Hyperlink icon in the toolbar to map a destination path.
10. Either browse to a location within your site collection, or type (or paste) in a path.
11. Click OK to accept the path.
12. Click OK again to exit the HTML Editor window.
13. Turn off the chrome (you probably don’t want a title for your button), by expanding the Appearance section of the Web Part Properties box, and change Chrome Type to None.
14. Click OK at the bottom of the Web Part Properties box.
15. Click Exit Edit Mode.
You now have a new button- Congratulations!