Posted on June 26, 2009|by: Janis Hall| 9 Comments

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 Example

Buttons Example

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.

Untitled

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

newwork

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

CEWPedit

 

5.      In the Properties box (displayed on the right hand side of your screen), click on the Rich Text Editor button.

CEWP RT

 

6.      In the HTML Editor box that appears, click the Insert Image icon.HTMLbutton

HTML Editor box

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.

Edit Image Properties

8.      In the HTML Editor window, click the image (that you just added to your CEWP) to select it.

HTMLEditor dialogue

9.      Use the Insert Hyperlink icon in the toolbar to map a destination path.

inserthyperlinkbutton

10.  Either browse to a location within your site collection, or type (or paste) in a path.

select URL

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.

Chrome

14.  Click OK at the bottom of the Web Part Properties box.

15. Click Exit Edit Mode.

You now have a new button- Congratulations!

Happy ‘SharePointing’

Filed in: Our Culture, Technology, Tips & Tricks

8 Comments

  1. kathy Trent
    February 27, 2012 at 5:52 pm

    Love this simple way to add navigations buttons. I need to make the buttons highlight when hovered over like the ones you have below for photos on flickr. Can you tell me how to accomplish this?

  2. Ali
    June 2, 2015 at 5:24 am

    After step 7, When I Click on the image, the Hyperlink icon becomes disabled and I cannot link the image to the URL.
    Any ideas why this happens please?

  3. August 7, 2015 at 3:56 pm

    You know I love your blog!!!

  4. DC
    December 3, 2015 at 9:24 am

    I searched for HOURS about how to accomplish this and your solution was by far the simplest and most clearly explained. THANK YOU!

  5. tom
    February 10, 2016 at 8:02 am

    Hi Janis,

    Iam using sp 2010 – and I only have content editor – and there is no rich text editor option.

    Do you know if what you did is possible in sp2010?

    Thank you.

  6. tom
    February 12, 2016 at 8:09 am

    Hi, thank you for that.

    How can we change one web part content using button?

    I have a lost with 3 views- user would like to be able to switch view using a button.

    Is it possible?

  7. Toni
    September 9, 2016 at 6:03 am

    Hi
    I’m having a similar problem as Tom, in that when I click modify shared web part the content editor with the option for rtf doesn’t come up (just appearance, layout and advanced). Is this due to the version being used, and is there a way around it?
    Thanks

  8. Sara
    September 13, 2016 at 10:34 am

    Hi,

    Thank you for your post, it explained the matter very clearly.

    There is something that I still didn’t understand:

    ” (…) to provide direct access a new list item form.”

    How could I get the URL that creates a new list item from a form? Does it work also for creating new document library instances from template?

    Thank you!

One Trackback +

  1. […] previously published a tutorial detailing how to create a button to add items or documents to a list in SharePoint 2007. Since this […]

Your email is kept private. Required fields are marked *

*
*