Adding a Breadcrumb to Your Website

Here's an example of a Breadcrumb

   To add a Breadcrumb, you will want to start at a Top Level page, or maybe the first page of your site. 

Go to the gray panel to the left of your screen and click Add Content. 

   1.   The Add Content wizard will bring up a list of content options.  Select Breadcrumb from the Content Type screen.

   2.   Click Next      to show the Placement screen.

   3.    Now, at the Placement screen, seen below, select Every page if it is going to be seen throughout the site, or This page and any

           page beneath it, if it's going to be for just one section of your site.  At the bottom, choose the panel where you want the

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

   4.   Click Next    and the Details screen comes up, seen below.  This is where you set up the appearance

          of the Breadcrumb.

 Details:

   1.   Padding Above and Padding Below offers you the ability to place a space around the Breadcrumb in pixels.

   2.   Base Text allows you to create a "Home Base," and will name the page where your website started. Or perhaps you'd like the text to

         show where the visitor is currently.

   3.   To the right is Click Here.  This is used to make a link to another page in your site, or a page that is outside your site.

   4.   Separator gives you the option to choose a symbol that will separate your Breadcrumb listings.  The dropdown offers choices, but if

          you rather customize a separator, choose "Custom" that's listed in the dropdown.  You can enter your own choice of a separator up

          to 2 characters, such as >>.

   5.   You may also choose a color for your Separator, by entering in the hex color code number, or by clicking in the square and choosing

          a color from the palette.  If you don't choose a color, the default automatically chooses black.

 Common Style: 

   Underneath the Separator is the Common Style section.  It sets the links 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.

   1.   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 "Tahoma"

         font.)  

• Click OK    to save, and return to the Style tab.
• Click Clear    to start your selection process over.

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

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

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

   4.   If you are not going to select anything more on this page, click Next   to save.

   5.   It will take you to the Content Publish Dates screen where you will set Start and Stop dates. To review Publish Dates, click here.

   6.  Click Next    .  It will take you to the Content Visibility screen where you can choose who is allowed to see the Article. To

         review Content Visibility, click here.

   7.  Click Next    .   It will take you to the Content Publishing screen. This tab is for Parent sites to choose the Child site

         restrictions, if any.  To review Content Publishing, click here.

   8.   Click Finish  , and your Breadcrumb will be in place.

   9.   Or click Cancel   to exit without saving.

   Rollover Style:

   Underneath Common Style is the Rollover Style.  If selected, this will cause the text to change when a visitor mouses over

   a  link.   If not specified, the rollover style will take up the defaults specified in your original skin design.

   1.   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. (The preview

         box is showing the "Tahoma" font.)  

• Click OK    to save, and return to the Style tab. 
• Click Clear  to start your selection process over.

   2.   Font Color:  You can choose a different color to give to the text of the Breadcrumb list by clicking on the square to see

         the color palette, or by entering the hex color code. Default will be black.

    3.     Background Color:  You can choose a different color to give to the background of the Breadcrumb list.  If not chosen, the

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

    4.     If you are not going to select anything more on this page, click Next   to save.

    5.      It will take you to the Content Publish Dates screen where you will set Start and Stop dates. To review Publish Dates, click here.

    6.     Click Next    .  It will take you to the Content Visibility screen where you can choose who is allowed to see the

            Article. To review Content Visibility, click here.

   7.     Click Next    .   It will take you to the Content Publishing screen. This tab is for Parent sites to choose the Child site

            restrictions, if any.  To review Content Publishing, click here.

   8.     Click Finish  , and your Breadcrumb will be in place.

   9.     Or click Cancel   to exit without saving.

   Active Style:

   Underneath the Rollover Style there is the Active Style.  It will show the visitors where they are in relation to the other sections.

   1.   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 Breadcrumb list, all of which can be seen in the preview box. (The preview box is showing the

         "Tahoma" font.) 

• Click OK   to save, and return to theStyle tab. 
• Click Clear   to start your selection process over.

   2.   Font Color:  You can choose a color for the font by clicking on the square to see the color palette, or by entering the hex color code.

   3.   Background Color:  You can choose a different color for the background of the Breadcrumb list.  If you don't choose a background

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

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

   5.   It will take you to the Content Publish Dates screen where you will set Start and Stop dates. To review Publish Dates, click here.

   6.   Click Next    .  It will take you to the Content Visibility screen where you can choose who is allowed to see the Article. To

         review Content Visibility, click here.

   7.   Click Next    .   It will take you to the Content Publishing screen. This tab is for Parent sites to choose the Child site

         restrictions, if any.  To review Content Publishing, click here.

   8.    Click Finish  , and your Breadcrumb will be in place.

   9.    Or click Cancel   to exit without saving.

Note:    When new Content is added to a panel that already has Content placed in it, the new Content will always appear at the bottom of the selected panel, where you might not want it to stay.  To move the new Content, make a right click in the new Content.  A quick edit flyout will appear and offer the options to Move the Content.    The choices offered are:  Up, Down, Move Last.  These choices can be used in the current panel.  Other choices offer to move the new Content to panels outside  the current panel, such as, to the Main panel, the Header, the Footer, or to the Menu panel.