KNOWLEDGE CENTER

 

 



 

 

 

 

 

 

   

Creating a Dropdown Link List

 

 

 

 

 

This page is all about creating a Dropdown Link List.

 

If you have come to this page without first seeing "Adding Link Lists,"

you will be skipping some necessary information.

To go to that page, click here.

         

To add a Dropdown Link List you'll want to start on the page that is

the Top Level page, or the first page of a section.

 

 

 

 

 

 

   Let's do a quick review of the first steps in creating a Link List.     

 

   1.   Click the Add Content button that is in the gray panel in the upper left of your screen.  Webtreepro will bring up Add Content.  Scroll down to select Link List.

 

   2.   Now, at the Placement screen, select "This page and any page beneath it."  At the bottom of the screen, choose the panel where you want the Link List to appear.

 

   3.   Click Next    to go to the Details page, seen below.  For more information about this page, go to the page Adding Link Lists, or click here.   

 

 

    
 

   Common Properties tab:

 

   Now, you are ready to select the Common Properties tab of the Details screen that is seen below. 

 

   This is the tab where you choose your Link List to appear as a dropdown.  

 

A Dropdown Link List will reveal the list when the visitor uses the dropdown arrow.

 

   Do not click "Next" as it will take you to the Published Dates page of the Link List wizard.

 

You may want to continue the Details section and move to the Styles tab.

 

 

 

   Select Dropdown.

 

   1.   When the Dropdown is chosen, all other choices except Alignment are removed because those choices do not apply to a Dropdown List.

 

   2.    Alignment offers you a choice of how the link's title will be horizontally positioned within the panel.

 

      • "Left" places the Title at the left edge of the panel.
      • "Right" places the Title at the right edge of the panel.
      • Center places the Title between the left and right edge of the panel.

         
 

   Styles tab:

 

   Now, you are ready to click on the Styles tab for Dropdown Lists, which is right next to the Common Properties tab. 

Once there, you will set up the appearance of your list.     

   Do not click "Next" as it will take you to the Publish Dates page of the Link List wizard.

    

A portion of the Dropdown Styles Screen

 

 

    For a Dropdown Link List, there are only three choices needed to be made:

      • 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 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).

 

 

 

   Below left is an example of a Dropdown Link List .  The Font color is light green and the background color has been set to yellow. 

As you can see, the Font doesn't show up very well.  So, it will need to be edited.

 

         

                                                                                                 Sample Link List 1             Link List flyout                Sample Link List 2

 

   To change the font color or the Style of the Link List, go to the list and right click.  The Link List Details flyout comes up, seen in the center. 

To change any of the Styles choices you made earlier, click on Properties which will take you back to the Link List wizard.

   Choose the Details tab, then the Style tab and make your changes.  The newly edited Link List is on the right.

 

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

 

        
 

         4.   When you have made all the selections needed on the Dropdown Styles screen, click Next    to save.  You will be taken to the Publish Dates page.   

                Follow each of the Link List wizard tabs, and click Finish ,  to exit the wizard, and return to your working page.  The Dropdown Link List will be in place.  

 

          5.   Or, click Cancel  to exit without saving. 

 

Note: 
You will be able to test the Dropdown Link List only when you are in Published mode, or you can click on Date Preview located in the gray panel to the left of your screen.
 

 

 

 

      

  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.   When you have made all your selections on theStyles page, click the Save Style button .  (See screen segment below.)

 

 

 

 

 

 

It will bring up the Save a style window.

 

 

 

 

    2.   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.  

    

      • For more information, see the page Link List-Load and Save a Style, or click here.