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 Horizontal Section List

The following are the steps for creating a

Horizontal 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 section.

To create a Horizontal Section List,

go to the

gray Administrative panel

to the left of your screen,

and select "Add Content."

Scroll down and select

"Section Lists" from the

Content Type screen,

and click Next

to go to the Placement screen.

1. Now, at the Placement screen, select This page and any page beneath it. This will automatically include the top level page

and all the sub-pages. 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.

2. Click Next to go to the Details screen.

Horizontal List; Common Properties:

At the Common Properties tab of Details, set the Section List to appear as a Horizontal 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. # Items per line: The setting allows the website to evenly space the titles of the list within the panel.

7. Width: The setting is in pixels (px) and sets the width of the section list.

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 list titles 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.

Horizontal Styles:

Now, you are ready to go to the Horizontal Styles tab which is next to the Common Properties tab, and set up the appearance

of your Horizontal Section List. Don't click on the "Next" button because that will take you to the Publish Dates page of the

Add Content wizard.

1. Select Separator: The dropdown choices are bullets, pipes, custom, or to choose no separator at all. If you want to

have a customized separator, you can use up to 2 characters, such as >>.

2. Separator Color can be chosen by clicking on the square to see the color palette, or by entering in the hex color code.

If you don't choose a color, the separators will be in black.

3. Border Size choices are None, Medium, Thick,or Thin.

4. Border Colors can be chosen by entering a hex color code, or by clicking on the square to see the color palette. If you don't

choose a color, the Border will be invisible (Transparent).

Common Style:

1. Common Style sets the list in a natural state (non-rollover, non-active). If not specified, it will take up the defaults specified in

your original skin design.

Font Style: See the Font Settings window below. 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 window 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 for 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 go to the Publish Dates tab. 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 of the list 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 rollover link, all of which can be seen in the preview box.

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 to give to the Background of the list. If not chosen, the Background will have 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 example of an Active Style text is 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.
Font Color: You can choose a different color to the font of the list.
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 Styles screen, click Finish to save, and go 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 Horizontal 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 copy 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