KNOWLEDGE CENTER


	Admin Terms and Definitions Edit Mode Site Administration Edit Organization Site Add a Child Site Assigning Groups to Child Sites Edit or Delete an Exisiting Child Site Site Login Roles Add a New Role Copy Role Edit or Delete an Existing Role Users Adding a New User Edit or Delete an Existing User User Login Reset Password Permissions Types of Permissions Advanced Permissions Page Level Advanced Permissions SEO Center Meta Tag-Google Create A Google Account Add Site to Webmaster Tools Submit a Sitemap Keyword Research Styles Control Panel Styles Control Panel, Color Palette Styles Control Panel, Fonts Styles Control Panel, Headings Style Control Panel, Tables Styles Control Panel, Links and Other Options Page Management Page Template Add a New Page Page Attributes Page Location Page Publish Dates Page Appearance Page Visibility Page Publishing Copy a Page Date Preview of a Page Edit or Delete Page Pushed Page Behavior Taking Precautions Before Deleting a Page Content Management Add Content Content Type Articles Add an Article Add Adwords Conversion Codes Insert a Flash Add HTML Add a Hyperlink or Bookmark Images Tables Add a Video Adding a Breadcrumb Edit or Delete a Breadcrumb Adding Facebook Comments Edit or Delete a Facebook Comment Box Add a Facebook Like Button Edit or Delete a Facebook Like Button Form Basics Form Building, Step One Let's Build a Form; Common Properties Let's Build a Form, Styles Form Example Edit or Delete a Form Form Tools Link File Link List Adding Link Lists Adding Vertical Link Lists Adding Horizontal Link Lists Adding Dropdown Link Lists Link List-Load and Save a Style Edit or Delete a Link List Page and or Article Login Element Login Example Edit or Delete a Login Add a Menu Edit or Delete a Menu Create Slide Shows Creating a New Slide Show Folder Edit or Delete a Slide Show Thumbnail Slide Show Edit or Delete a Thumbnail Slide Show RSS Reader Edit or Delete a RSS Reader Scrolling Text Edit or Delete Scrolling Text Section Lists, Expanding and Contracting Lists Adding a Vertical Section List Adding a Horizontal Section List Section Lists In Action Edit or Delete a Section List Framed Content Edit or Delete Framed Content Google Analytics Acquiring a Google Analytics Tracking Code Add Google Analytics to a Website Edit or Delete a Google Analytics Google Maps Edit or Delete a Google Map Store Locator Edit or Delete a Store Locator Text Accordion Edit or Delete a Text Accordion Content Placement Content Details Content Publish Dates Content Visibility Content Publishing Basics Tools Editing Icons Page Toolbar Details of the Page Toolbar Text Editor Toolbar Details of the Text Editor Text Formatting Toolbar Details of Text Formatting Paragraph, Indent, bullets Details of Paragraphs, etc Other Editing and Content Options Toolbar Details of Spell Check Insert a Horizontal Line or Colored Line Form Building Toolbar The Library How to Search Through the Library Article Storage or Retrieving from the Library Edit or Delete Article in Library Image Storage in Library Edit Images in Library File Storage in Library Edit Files in Library Reports Form Submissions Link Checker Usage FAQ Answers to Questions About Editing Answers to Questions About Files Answers to Questions About Forms Answers to Questions About HTML Answers to Questions About Images Answers to Questions About Links and Menus Answers to Questions About User Privileges Answers to Miscellaneous Questions Videos Let Us Introduce Ourselves Add a Page Add Content The Basics of Building Tables Tables-Create Columns Tables-Callout Boxes Scheduling & Sharing Content Edit Shared Content New Library Search Engine Verify and Sitemap Submit Section List Element SEO Center

Adding a Vertical Section List

The following are the steps for creating a Vertical Section List.

Section Lists allow visitors to see pages

that are placed under the top level page.

To add a Section List you'll want to start on the page that is the top level page, or the first page of your site.

To create a Vertical Section List,

go to the gray Administration panel

to the left of your screen

and select "Add Content."

Scroll down and select

Section Lists

from the Content Type list.

Click Next to go to Placement.

1. Now, at the Placement screen, select This page and any page beneath it. At the bottom of the page, choose the panel

where you want the Section List to appear. Some of the templates seen below may or may not be the same template

selection you have available for your use. The needs of individual websites vary. Webtreepro offers different selections

to meet your website's particular needs.

To review Content Placement, click here.

Vertical List; Common Properties:

2. Click Next to go to the Details screen.

At the Common Properties tab of Details, set the Section List to appear as a Vertical List. See below.

3. Alignment:

Left will have the list fixed on the left margin of the panel.

Center will have the list centered in the middle of the panel.
Right will have the list fixed on the right margin of the panel.

4. Padding Above: This setting is in pixels (px) and allows for additional space above the Section List.

5. Padding Below: This setting is in pixels (px) and allows for additional space below the Section List.

6. Spacing between items: The setting is in pixels (px) and gives extra spacing between each link in the Section List.

7. Separator and text space: The setting is in pixels (px) and sets the spacing between each title of the list and the separator.

8. Show Current page: The Section List will display the name of the page a visitor is on, as well as the pages below it.

9. Always load sections from this page: This means the Section List will NOT change as a visitor goes deeper into the site.

If you want to have the Section List change as you move from page to page, you will want to leave this box unchecked.

Now, you are ready to click on the Vertical Styles tab, which is right next to the Common Properties tab, to set up the appearance of your Vertical Section List. Do not click "Next" as it will take you to the Publish Dates page of the Add Content wizard..

Vertical List; Styles

Select Separator: Click the dropdown arrow. Your choices are a dotted border, a solid border, or no border at all.
Separator Color can be chosen by clicking on the square to see the color palette, then click on a choice, or you can enter in the hex color code number. If you don't choose a color, the separator will be in black.
Border Size choices are None, Medium, Thick, or Thin.
Border colors can be chosen by entering a hex color code, or by clicking on the square to see the color palette to pick a color. If you don't choose a color, the border will be invisible (Transparent).

Common Style:

1. Common Style sets the titles of the list in a natural state (non-rollover, non-active). If not specified, the common style will

take up the defaults specified in your original skin design.

Font Style: Click the Font button . The 3 dropdowns will let you choose a Font, a Font Style and Font Size, all of which can be seen in the preview box at the bottom of the window. (The preview box in the example below, is showing "Comic Sans MS" font.)

Font Settings Window

Font Color: You can choose a color for your font by clicking the square to see the color palette, or by entering the hex color code. If you don't choose a color, the font will be in black.
Background Color: You can choose a color to be in the background of the list. If you don't choose a color, the background will be the same color as the page (Transparent).
If you are not going to select anything more on this page, click Next to save. You will be taken to the Publish Dates page. Follow each of the Add Content tabs, and click Finish , to exit the

Add Content wizard and return to your working page. The Section List will be in place.

Or, click Cancel to exit without saving anything.

Rollover Style:

Let's look at the dynamic "Styles" that Webtreepro offers you.

1. If selected, this will cause the text to change when a visitor mouses over a link. If not specified, the list will take up the

defaults specified in your original skin design.

Font Style: See the Font Settings window above. Click the Font button The 3 dropdowns will let you choose a different Font, Font Style, or Font Size to give to the list, all of which can be seen in the preview box. (The preview box is showing the "Comic Sans MS" font.)

Font Color: You can choose a different color to give to the font by clicking on the square to see the color palette, or by entering the hex color code. Default will be black.
Background Color: You can choose a different color to give to the background of the list. If not chosen, the background will be the same color as the page (Transparent).
If you are not going to select anything more on this page, click Next to save. You will be taken to the Publish Dates page. Follow each of the Add Content tabs, and click Finish , to exit the Add Content wizard, and return to your working page. The Section List will be in place.
Or, click Cancel to exit without saving anything.

Active Style:

1. Active Style shows the visitor where they are in relation to the entire site. An example

can be seen in the "List of Pages" in the left rail of your screen, when you are in

Edit Mode.

Another type of an Active Style text can be seen to the right. The title that is in red, indicates the page you are on, and it will always be in red as you move up or down no matter what page you are on.

Active Style example

Font Style: See the "Font Settings" window above. Click the Font button . The 3 dropdowns will let you choose a different Font, Font Style, or Font Size to give to the list, all of which can be seen in the preview box. (The preview box is showing the "Comic Sans MS" font.)
Font Color: You can choose a different color to give to the font of the list by clicking on the square to see the color palette, or by entering the hex color code.
Background Color: You can choose a different color for the background of the list. If you don't choose a background color, the background will be the same color as the page (Transparent).

2. When you have made all the selections needed on the Vertical Styles screen, click Next to save, or click

Cancel to exit without saving. You will be taken to the Publish Dates page. Follow each of the Add Content

tabs, and click Finish to exit the Add Content wizard, and return to your working page. The Section List will

be in place.

3. As with all newly added Content, the Section List will be located at the bottom of the selected panel. You may want to

move the Section List elsewhere. If so, do a right click inside the Section List, and the Section List Properties

window appears, seen below. Click "Move to..." and another flyout appears. Make a selection. In order to move

the Section List to its perfect location, this process may need to be repeated.

Note:

In the upper right corner of the Styles screen are the Load Style and Save Style buttons. Webtreepro offers you a quick and easy way to use a style that has been previously used on the site, or to save the styles you have just chosen.

Here are some helpful hints about Loading and Saving Styles:

If you have just created a Style, and want to save it to use later, follow these steps.

1. Click the radio button, New Style. Give your Style a name that will remind you of a specific Style,

and click to Save . This will put all of the choices you have just made under your

specific Style name. In the future, you can retrieve this Style, and use it again. This process will be

described in "Load Style" seen below.

2. If you want to replace an existing Style with new selections, click on "Existing Style" radio button.

3. Find the Style from the dropdown, click on its name.

4. Then, click Save , and your new selections will be saved under this existing

Style's name.

5. If you decide not to replace the old selections with your current Style choices, click

Close and you will exit without saving.

If you have a Style saved already, you can click on "Load Style" when you first come to the Styles tab. Use the dropdown to find the specific Style you have created, and click its name. It will automatically fill in all the choices you made when you first created the Style.

To load a Style that has been previously saved, select the Load Style button .

2. The box below will appear. Select an existing style from the drop-down list.

3. Click to load all your choices automatically.

4. Click if you decide not to select any previously saved style.

Need Help? Click here.

Home