Adding Content Well Portlets

You can also add portlets to the main content area. Not only do content well portlets allow static and dynamically updated content (i.e. from a Collection, News, Events, or even an RSS feed), but they can be positioned alongside each other as well as above or below the normal content. With some planning, they can greatly enhance your site layout.

Note - You must have the 'can manage' permission in order to add or edit portlets.  If you don't see the green "Add, edit or remove a portlet..." links, then you don't have the 'can manage' permissions.  Please contact your site manager or webhelp@med.unc.edu for assistance.

Before you start adding content well portlets you must first understand what a portlet region and a portlet well are.

Portlet Regions

There are 6 content well locations on any given page where portlets may be added. In the screenshot below, reference label 3 through 8.  You can click on the image for a larger view.  Even though it is not always encouraged, you can add as many portlets as you like to any portlet region. 

Columns and Portlet Locations
Click for a larger image

Portlets in the Header Area

  • Allows you to place content above all three columns of a page.  It will be placed just below a sites horizontal navigation and above the breadcrumbs.
  • Reference label 3 in the image above.
  • We discourage the placement of too much content in this portlet.  The bulk of a pages content should be placed on the page itself or in one of the content well portlets located below the page title.
  • This area is best used to display graphical things such as banners and alerts (e.g. weather alerts).

Portlets Above the Content

  • You can add portlets above the normal content of a page.  Any portlet(s) added here will appear above the page title and description and will be contained between the first and third columns.
  • Reference label 4 in the image above.

Portlets Below the Content Title

  • Portlets added here will be located directly below the page title and will be contained between the first and third columns.
  • Reference label 5 in the image above.

Portlets Below the Content

  • Portlets added here will far after any page content and will be contained between the first and third columns.
  • Reference label 6 in the image above.

Portlets in the Footer

  • You can add portlets to the footer (not to be confused with the Site Footer) which will expand the width of all three columns.  It is located below the columns and above the site footer.
  • Reference label 7 in the image above.

Portlet Wells

Within each portlet region there are six Portlet Wells, labeled A through F. Portlet wells serve to give you control over the positioning of portlets in relation to each other within the region you're adding them to. If you add more than one portlet to a single portlet well, they'll stack vertically.  Basically, you can add one or as many portlets as you like to any portlet well, and the portlets will fill the space determined by that portlet well.

Standard Positioning

portlet-wells.gif

Portlet Well A

Portlets placed within portlet well A will take up 100% of the total width.

Portlet Well B

Portlets placed within portlet well B are constrained to 50% of the total width, and are floated to the LEFT.

Portlet Well C

Portlets placed within portlet well C are constrained to 50% of the total width, and are floated to the RIGHT.

Portlet Well D

Portlets placed within portlet well D are constrained to 33% (a third) of the total width, and are floated to the LEFT.

Portlet Well E

Portlets placed within portlet well E are constrained to 33% (a third) of the total width, and are floated in the CENTER.

Portlet Well F

Portlets placed within portlet well F are constrained to 33% (a third) of the total width, and are floated to the RIGHT.

The simplest idea is that you can have a row with one (A), two (B & C), or three (D, E & F) columns across—with as many portlets as you need vertically in each "column", or portlet well.

warning Warning: You'll find that if you don't use an entire horizontal row as described above, blank space will usually take the space of unused, adjacent portlet wells. Page content (body content, etc) will not wrap into those areas.

[top]

Bonus Positioning

There may be cases when you'd like a row of portlets to be followed by another row that has less portlet wells, instead of more, as the standard positioning scheme dictates. This is now possible through the use of specific portlet well combinations that trigger one of three alternative schemes.

2 Above, 1 Below

2-above-1-below.png

Achieve the "2 Above, 1 Below" layout by using only portlet wells B, C, & D together.

3 Above, 1 Below

3-above-1-below.png

Achieve the "3 Above, 1 Below" layout by using only portlet wells B, C, D & E together.

3 Above, 2 Below

3-above-2-below.png

Achieve the "3 Above, 1 Below" layout by using only portlet wells A, B, C, E & F together (no D).

 

Adding Content Well Portlets

  1. Navigate to the location in the site where you want the portlet to be located.  If you want the portlet to appear throughout the site, it must be added at the root of your site (the folder that contains the entire site).
  2. Click the "Add, edit, or remove a portlet..." link of the portlet region that you want the portlet added to. 
  3. You will be taken to a portlet management page that will allow you add content to any of the wells of that portlet region.

    Content Well Portlet Management Screen
    Click for a Larger View
     
  4. Choose a well to add content to.
  5. Select a portlet type from the Add portlet... drop-down menu.  For a description of each portlet type as well as information about individual settings, see Portlet Types
  6. Define any settings the portlet may have and click Save.
  7. Add any additional portlets that you want.
  8. Click the Return link to return to the page or folder on which the portlet(s) were added.  You should see you new portlets.  However, due to browser cache issues you may need to refresh the browser window if the portlets don't appear.  Simply hold down the Shift key on your keyboard and click the Refresh/Reload button in the browser.  This action will purge your local browser cache and give you the most recent copy of the page in question.

    Content Well Portlet Return Link
    Click for a Larger View
     

Examples

1.  Several sites use content well portlets to lay out content on their sites home page.

Home Page - Genetics
Click for a larger view
     
Home Page - Pediatrics
Click for a larger view
     
Home Page - AHS
Click for a larger view

 

2.  Content well portlets are useful for organizing a long list of link.

MD Program Links
Click for a larger view