{"id":7841,"date":"2018-09-05T14:32:14","date_gmt":"2018-09-05T18:32:14","guid":{"rendered":"https:\/\/extension.umaine.edu\/plugged-in\/?page_id=7841"},"modified":"2019-09-03T10:24:03","modified_gmt":"2019-09-03T14:24:03","slug":"how-to-create-a-sidebar-on-a-page-using-various-widgets","status":"publish","type":"page","link":"https:\/\/extension.umaine.edu\/plugged-in\/technology-marketing-communications\/web\/tips-for-web-managers\/how-to-create-a-sidebar-on-a-page-using-various-widgets\/","title":{"rendered":"How to create a sidebar on a page using various Widgets"},"content":{"rendered":"

For an example, see the Knox-Lincoln Counties 4-H<\/a> page. The Knox-Lincoln Counties 4-H sidebar on the left of this page is comprised of several commonly used Widgets: Image, Navigation Menu, Text, and UMaine Call to Action.<\/p>\n

\"screenshot<\/a>For a sidebar to appear on a page, the appropriate template must be active. To do this, while developing a page, make sure that Page with sidebar <\/strong>(Widgets Required) is chosen in the pull-down menu as the Template in the Page Attributes<\/strong> box on the left of Page Edit view.<\/p>\n

Navigation Menu<\/strong><\/h3>\n

If using a Navigation Menu<\/strong> Widget in the sidebar, a Menu must be created. (see How to create a Navigation Menu<\/a> page).<\/p>\n

    \n
  1. Go to Appearance\/Widgets<\/strong> to create the Widgets that\u2019ll appear in the Page sidebar.
    \n    \"screenshot<\/a>\"screenshot<\/li>\n
  2. On the left-hand side are Available Widgets<\/strong> with instructions on how to activate the various Widgets available.
    \n    \"screenshot<\/a><\/li>\n
  3. To display a menu (for example) in the Widget, scroll down the page and find the box labeled Navigation Menu.<\/li>\n
  4. Once the button is selected, a pull-down menu will appear, select Page sidebar<\/strong>. This will appear on a page (if building a sidebar for a post, select Sidebar<\/strong>).<\/li>\n
  5. Once checkmark appears next to Page sidebar, press the Add Widget<\/strong> button. This will add a new Widget to the bottom of the right-hand side in the box Page sidebar.
    \n    \"screenshot<\/a><\/li>\n
  6. Add a title for the menu Widget and using the pull-down menu, select the menu (already built) that is to be used. Press the button Save<\/strong>.<\/li>\n
  7. In order for the Widget to appear on specific pages, press the Visibility<\/strong> button.<\/li>\n
  8. In the pull-down menu, –Select–<\/strong>, pull-down to Page<\/strong>. In the next pull-down window, choose the pages and check the Include children<\/strong> box if there are child pages, should the menu to appear on those pages as well.<\/li>\n
  9. To add other pages for the Widget to appear, press the plus<\/strong> sign (+) to the right. To delete a page or series of pages that have already been set, press the red X<\/strong> to the left (the words ‘Add’<\/strong> and ‘Delete’\u00a0<\/strong>may\u00a0<\/strong>appear rather than the +<\/strong> or X<\/strong> symbols)<\/li>\n
  10. Press Save button, again, once finished.
    \n    \"screenshot<\/a><\/li>\n<\/ol>\n

    Other Widgets commonly used:<\/p>\n

    Image<\/strong><\/h3>\n

    For the logo image at the top of the sidebar on the sample page Knox-Lincoln Counties 4-H page:<\/p>\n

      \n
    1. Choose Image<\/strong> Widget from the list on the left and place, similar to the Navigation Menu, in the Page sidebar.<\/li>\n
    2. Title is usually not necessary, leave blank.<\/li>\n
    3. Go to the Add Image<\/strong> button to browse media library or upload an appropriately sized graphic (ex. 300-400 pixels wide).<\/li>\n
    4. Press Save button.<\/li>\n
    5. Adjust Visibility button, as done on the Navigation Menu, to ensure Widget appears on pages where they are supposed to appear. Press Save again.
      \n      \"screenshot<\/a><\/li>\n<\/ol>\n

      Text<\/strong><\/h3>\n

      For the Follow\u00a0Knox-Lincoln Counties 4-H on Facebook Widget that appears below menu of the sidebar on the sample page Knox-Lincoln Counties 4-H page:<\/p>\n

        \n
      1. Choose Text<\/strong> Widget from the list on the left and place, similar to the Navigation Menu, in the Page sidebar.<\/li>\n
      2. Add a Title<\/strong>, in this instance:\u00a0Follow Knox-Lincoln Counties 4-H on Facebook.<\/li>\n
      3. Add text or images in the text window. Logos can be linked to other pages or external sites (ex. the Facebook logo has been linked to the appropriate Facebook page).<\/li>\n
      4. Press Save button.<\/li>\n
      5. Adjust Visibility button, as done on the Navigation Menu, to ensure Widget appears on pages where they are supposed to appear. Press Save again.
        \n        \"screenshot<\/a><\/li>\n<\/ol>\n

        UMaine Call to Action<\/strong><\/h3>\n

        For the Support Maine 4-H! Widget that appears below Facebook text\/logo of the sidebar on the sample page Knox-Lincoln Counties 4-H page:<\/p>\n

          \n
        1. Choose UMaine Call to Action<\/strong> Widget from the list on the left and place, similar to the Navigation Menu, in the Page sidebar.<\/li>\n
        2. Add a Headline Text<\/strong>, in this instance: Support Maine 4-H!<\/li>\n
        3. In the Call to Action URL<\/strong> field, add the complete URL to link.<\/li>\n
        4. Check the box for Show Button<\/strong>, if a button is to appear in the Widget.<\/li>\n
        5. Add text to the Button Text<\/strong> field, for the text that\u2019ll appear on button.<\/li>\n
        6. Press Save button.<\/li>\n
        7. Adjust Visibility button, as done on the Navigation Menu, to ensure Widget appears on pages where they are supposed to appear. Press Save button.
          \n          \"screenshot<\/a><\/li>\n<\/ol>\n

          Once complete, Widgets can be dropped-and-dragged to re-order.<\/p>\n

          If a Widget is no longer needed, it can either:<\/p>\n