KNOWLEDGE CENTER

 

 



 

 

 

 

 

         

 Adding a Menu

 

 

 

 

 

 

A Menu helps a visitor see how your site is organized. 

 

Webtreepro automatically revamps the Menu

 as you add pages or new sections to a site. 

 

Your Menus will grow and shrink when you add or delete pages. 

      

  

Because the Menu is actually a piece of Content,

you can also manage which page or pages it appears on. 

 

In fact, you can literally create different Menus

 throughout your site if needed.

 

 

 

 

 

 

 

 

  1.    To add a Menu, you'll want to start at the Home page of your site, or at the top level page of a section.  Go to the gray panel to the left

         of your screen, and click  Add Content.  Then, select Menu.

 

 

 

 

   2.   Then, click Next   to go to the Placement tab.

   3.   Choose the desired Placement.  Usually, the Menu is placed on every page. See below.

 

 

   4.   Now at the bottom of the screen, choose the Panel Location where you would like the Menu to appear on each page.  Some of the

          templates seen above 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.

          Click Next   to go to the Details tab. 

 

         

 

Details; Common Properties

 

 The Details screen with its two tabs comes up, shown below.

 

 

 

   5.   In the Common Properties tab, you will set up your Menu, starting with List Type.  From the dropdown, choose Horizontal,

          Vertical Left, or Vertical Right.

 

      • If you choose Vertical Left, your Menu will situated to the left in your panel.

 

      • If you choose Vertical Right, your Menu will be situated to the right of your panel.  

 

      • If you choose Horizontal, the Menu will be listed left to right across the panel.

 

   6.   Chose the Padding Above and the Padding Below in pixels.  The padding will give the Menu an attractive spacing around it.

 

   7.   Now, select the Visible Levels.  The Visible Levels control is where you determine how much or little the main Menu

          should reveal:

      • Show only the first level will let the visitor see only the Top Level pages.

 

      • Show up to... will let the visitor see a number of levels, up to 5, of your choice.  As the visitor does a rollover, each level

                     will pop up.

 

      • Show all levels will list all the levels in your site.  As the visitor does a rollover, each sub-level will pop up.

 

      • Show Home page on the Menu means the Menu will always include your Home page.

 

    

 

 

Details; Styles:

 

   Webtreepro offers you the option of individualizing your main Menu to change its mouse-over and click characteristics,

as well as see how many levels can be revealed on mouse-over.

 

  

 

   1.   Border Color gives you the opportunity to choose a color for the top and bottom border of the Menu list.  You may enter a hex color

         code or click on the square to choose a color from the color palette.  If you don't choose a color, the border will be invisible.

 

   2.   Common Style sets the titles of the Menu 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.

   3.   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 Font Settings window.  (The preview box in the example, below, is showing  Comic 

        Sans MS font.)  Click OK     to save.

 

   4.   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 white.

 

   5.   Background Color:  You can choose a color to be in the background of the Menu.  If you don't choose a color, the background

         will be the same color as the page (Transparent). 

   6.   If you are not going to select anything more on this page, click Next   to save, or click Cancel  to exit without

         saving. You will be taken to the Publish Dates page.  Follow each of the Menu wizard tabs, and click Finish , to exit the

         wizard, and return to your working page.  The Menu will be in place.

 

  Font Settings

 

In the 1st green row, shown below, is an example of a Horizontal Menu.

The Font color is in default (white) which doesn't show up very well.  So, it will need to be edited.

 

 

 

 

 

 

 

 

 

 

To change the Menu's Font color, go to it, and make a right click . 

The Menu Properties flyout comes up, seen above. 

 

(If you don't know where the Menu was first created,

click Info and look for "Page Origin." 

 For more information see the bottom of this page)

 

To change any of the "Styles" choices you made earlier,

click on Properties which will take you back to the Menu wizard.

Choose the Details tab, then, the Style tab, and make your changes.

 

 

 

      • To read more about editing a Menu, go to the page Edit or Delete a Menu, or click here.

          

    

 

Rollover Style: 

       

 

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

 

  1.   If selected, the Rollover Style will cause the text of the Menu to change when a visitor mouses over it. 

   2.   Font Style:   Click the Font button  to bring up the Font Settings window below  The 3 dropdowns will let you choose a different

          Font, Font Style, or Font Size to give to the list titles, all of which can be seen in the preview box. (The preview box is showing the

          Comic Sans MS font.)  Click OK    to save, and return to the Style tab.

 

      • Font Color:  You can choose a different color to give to the list titles by clicking on the square to see the color palette, or by entering the hex color code.  The default will be black.

 

      • Background Color:  You can choose a different color to give to the background of the Menu.  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 Menu wizard tabs, and click Finish , to exit the wizard, and return to your working page.  The 

                    Menu will be in place.

      •  Or click Cancel    to exit without saving. 

 

 

           

 

Active Style:

 

 

Active Style example

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 is to the immediate left. The title that is in red indicates the page you are on,and it will always be in red as you move from page to page. 

 

      • 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 titles, all of which can be seen in the preview box. (The preview box is showing the "Comic Sans MS" font.)   Click OK   to save, and return to the Style tab.

 

      • Font Color:  You can choose a different color to the list titles 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 Menu.  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 Next    to save, or click Cancel   to

          exit without saving.  You will be taken to the Publish Dates page. Follow the Menu wizard tabs to the Publishing tab. Click

         Finish , and your Menu will be in place.

 

      • To see if your Menu is set the way you want it to be, you must be in Published Mode, or click on Date Preview located in the gray panel to your left.

 

Note: 

As with all newly added Content, the Menu will be located at the bottom of the selected panel.  You may want to move it elsewhere.  If so, do a right click inside the Menu, and the  "Menu Details" window appears, seen below.

 

Click "Move to..." and another flyout appears.  Make a selection.  In order to move the Menu to its perfect location, this process may need to be repeated. 

  

                                                                                           

 

 

 

 

 

 

 

 

 

  

 

        
 

   Save Style:   

  

If you make selections that are likely to be used again, Webtreepro has provided you with a time saving tool.  

Find the Load Style and Save Style buttons located in the upper right corner of the Styles screen. 

These convenient buttons will make your future list-making tasks quick and easy.  Here's how.

 

 

 

 

   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, and 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.

 

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

 

   2.    The above box 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. 

 

 

 

   

    

 

 

    
 

                    

Edit or Delete a Menu