---

Adding a Section List

1. Navigate to the page that represents the Top level page of the section.
2. Click the Add Content button. Webtreepro presents the Add Content Wizard.
3. Select Section Lists from the Content Type screen and click  .

1. In the Placement tab, select This page and any page beneath it.
2. Choose the panel in which the content will be displayed. Click  .

Using the Common Properties control on the Details tab, setup how you want the Section List to appear.

1. List Type:
   1. Horizontal— will spread the links across the panel (Left to Right margin)
   2. Vertical—the links will be stacked vertically
2. Alignment:
   1. Left—aligned on the left margin of the panel
   2. Center—aligned and centered from the center of the panel
   3. Right—aligned on the right margin of the panel
3. Padding Above:—this setting is in pixels (px) and allows for additional space above the section list
4. Padding Below:—this setting is in pixels (px) and allows for additional space below the section list
5. Spacing between items:—for vertical lists only, this setting is in pixels (px) and sets the spacing between each link in the section list
6. Separator and text space:—for vertical lists only, this setting is in pixels (px) and sets the spacing between  the text of each link and the separator
7. # Items per line:—for horizontal lists only, this setting sets the maximum number of links per line in the panel
8. Width:—for horizontal lists only, this setting sets the width of the section list in pixels (px)
9. Show Current page—in the section list will display the name of the page a visitor is on, as well as the page(s) below it.
10. Always load sections from this page—means the selections will NOT change as a visitor dives deeper into the site.  If you wish to have the section list change as you get deeper into the site, you will want to leave this box unchecked.

Using the Styles control on the Details tab, setup how you want the Section List to appear. 

1. Separator
   1. Select Separator
   2. Enter Separator
   3. Separator Color
2. Border
   1. Border size:  (default is none) lets you select from Thin, Medium and Thick border using the color selected for border color.  This border will appear as a border surrounding the links.
   2. Border color (default is transparent) lets you choose or enter a hex code for your borderBackground color (default is transparent) allows you to put a colored background behind the entire section list links but not the title.
3. Common Style—assigns behavior to the links in a natural state (non-rollover, non-active).  If not specified, the common style will take up the defaults that are used for all links as specified in your original skin design.
   1. Font Style:—assigns a different font, attribute (bold, italic, underline) or size
   2. Font Color:—assigns a different color
   3. Background Color—assigns a different color for the background of the link list
4. Rollover Style—assigns behavior to the links when a visitor mouses over a link.  If not specified, the rollover style will take up the defaults that are specified in your original skin design.
   1. Font Style:—assigns a different font, attribute (bold, italic, underline) or size to the rollover link
   2. Font Color:—assigns a different color to the rollover link
   3. Background Color—assigns a different color for the background of the rollover link
5. Active Style—assigns behavior to the link associated with the page being presented to the visitor.  If not specified, the active style will take up the defaults that are specified in your original skin design.
   1. Font Style:—assigns a different font, attribute (bold, italic, underline) or size to the active link
   2. Font Color:—assigns a different color to the active link
   3. Background Color—assigns a different color for the background of the active link
6. Load Style—use this as a convenient way to apply a set of styles that have been previously used on the site
7. Save Style—use this as a convenient way to save a set of styles for later use
8. Click and complete the rest of the Add Content Wizard as normal (Publish Dates, Visibility and Publishing screens).  A section list will be added to the designated page(s).

Quick Video Link>>Working with Section Lists