​Web Parts

A web part is a chunk of code that you insert into your SharePoint page that does something. It's a component that adds some functionality to the page. For example, there are web parts for adding text, images, slide shows, tab layouts, displaying the contents of a list or library, colapsible panels, filtering a list, searches, and more. It slices, it dices, it makes julienne fries!!

1. How to Add a Web Part
2. How to Edit the Web Part Settings

How to add a web part

• Web part page: On your page locate the web part zone to which you want to add a web part and click on the “Add a Web Part” link in that zone.
  
   
• Article page: Click inside the page content area. In the Editing Tools ribbon menu that appears click on the insert tab and then select the Web Part button.
  
  

A “Web Parts” menu will pop down from the editing menu showing the different Web Parts you can add to the page. On the left side of the menu is a list of the different categories of web parts. On the right you see all the web parts in the category you've selected.

Once you've selected the web part you want, click the Add button to add it to the page.

Editing the Web Part Settings

For our example here we're going to use a content editor web part, that web part is used to add text to a web part zone. (You wouldn't use it on an article page since you can just type the text on the page, but I'm using it as my example here since it's a simple web part.)

Move your mouse over the title bar for the web part. A little triangle will appear on the right end of the bar, if you click on the triangle you'll get a drop-down menu with more options. Select "Edit Web Part".

The page will reload with a new panel in the upper right side of the page body where you can edit settings for the web part. If the the page you are on is very long and you are scrolled to the bottom you might not see the settings panel, you'll need to scroll to the top of the page. Settings are divided up by category in expandable sections, click on the + sign to expand the section.

Different web parts have different sections and settings depending on their function, but all have the appearance and layout sections that control the size, positioning, and look of the web part.

Appearan​ce Panel

Title - The title that appears in the bar above the web part, the same bar with the little fly-out menu from clicking on the triangle.

Height - Sets whether the web part should have a set height, or if it should scale to the height of the content in the web part.

Width - Sets whether the web part should have a set width, or if it should scale to the width of the content in the web part.

Chrome State - Not generally used. Setting the crome state to minimized will collapse the web part so that only the title is visible. You then use the fly-out menu to expand it, if you're logged in. If you're not logged in there's no way to expand it.

Chrome Type - Chrome here refers to the computing concept of user interface elements surrounding a window, this is what Chrome the browser is named after. Here chrome refers to the title bar above the web part and the box that surrounds the web part. In editing mode these are always visible, but in regular viewing mode you can set which of these interface elements display or don't display.

Layout​ ​Panel

Hidden - Checking this box will hide the web part from view when looking at the page. You'll be able to see the web part in editing mode, but it will have (Hidden) next to the title.

Direction - This sets the direction of the text in the web part. You only need to change this if you'll be writing in a right-to-left script like Arabic or Hebrew.

Zone - This sets what web part zone the web part appears in. If you need to move the web part to a different zone on the page you could change it here. Just above each zone is a small label that will say something like "left", "right", "center left", or "top", these names correspond to the choices in the select box for zone.

Zone Index - We can have multiple web parts in a single zone, the number in the Zone Index field determines the order of the web parts. If you need to reorder the web parts you'd do it by changing the number here.