Quick Links Portlet

All department landing pages should have Quick Links. Some divisions and other landing pages may have quick links, with the approval of the Site Administrator.

The four orange quick link buttons are created using the Department Quick Links portlet.

Quick Links Example

Adding the Department Quick Links portlet

To add a new portlet for quick links, turn on Design ModeIf you do not see the lower bar with portlets, make sure you click Enable drag & drop on the right side of the screen under the toolbar to expand the toolbar.

  • Click the Local Portlets tab at the bottom.
  • Click the Manatee tab (upper right).
  • Select the Department Quick Links portlet.

Quick Links Portlet in Toolbar

Drag the portlet down to a content region in the page below. It should go at the top of the page beneath the page title (and optionally beneath a 1-2 sentence introduction to the page).

If you just added the Department Quick Links portlet, you should now see the words Click here to edit inside the portlet area.

Editing the Department Quick Links portlet

Click the pencil in the black bar on the Department Quick Links portlet to edit.

Department Quick Links bar

This will take you to a new page where you can add or edit the quick link buttons.

 

Adding quick link buttons

You should always have four quick link buttons — no more, no less. This is to maintain consistency across the site.

If creating a new set of quick links, you will need to first add one and Save Draft/Publish before you can add the other three.

Add a quick link

Fill out the fields below:

  • Portlet Name - Select department quick links from the dropdown.
  • Quick Link Name - Enter the name you want to appear on the button. This will automatically appear in all caps on the published quick link button. The name should be short enough to fit on two lines (approx. 1-4 words).
  • Quick Link Icon Class - Enter the name of the icon you want to use. This should start with "fa-" (example: fa-car). View our recommended icons below. Make sure you don't accidentally include a space before the "fa" if copy and pasting in an icon name.
  • Quick Link URL - This generally should be the most popular pages in your department for your customers. The URL should start with "/" and be everything in the link following mymanatee.org or civiclive.com (something like /cms/One.aspx?portalId=).
    • If you paste the full URL (manatee.hosted.civiclive.com) this link will not work when the site goes live.

You can only add one button start with. You will be able to add the other three all at once after this.

Click Save Draft or Publish to add your first button.

  • Save Draft if you do not want the quick links to appear on the page yet. (Recommended if editing a page that is currently live, but unnecessary during pre-launch.)
    • When you are taken to the page, you will not see the button you just added, but you can still hover over the area to edit the Department Quick Links and add the others.
  • Publish if your page is not currently live or you are not worried about anyone seeing it. (This is fine during pre-launch in production mode, and you'll be able to see the button on the page.)

You will be taken to the page in Design Mode again. Click the pencil again on the portlet to add the next three buttons.

Add more quick links

Fill out the information for your next button and click Add Item. The fields will empty and the information for your button will move below. Repeat until all four buttons are added.

You should see edit and "x" delete buttons to edit or delete previously added buttons. You must click the Edit Item button to save your edits.

You can also rearrange the order of your links by dragging and dropping them. Click on the one you want to move, and hold down while dragging it to the place you want it to appear.

Once you have four quick links, click Publish and they should appear on your page (or Save Draft if you are still not ready for them to appear).

Be sure to test all the links to make sure they work.

 

Recommended Font Awesome Icons

Paste the "fa-icon-name" text into the Quick Link Icon Class field to populate your chosen icon in your quick link button.

    fa-address-card
    fa-ambulance
    fa-archive
    fa-bar-chart
    fa-bicycle
    fa-binoculars
     fa-blind
    fa-book
    fa-briefcase
     fa-building
     fa-bus
    fa-camera
    fa-car
    fa-check
     fa-child
    fa-clipboard
    fa-clock-o
    fa-comments
    fa-copy
    fa-desktop
      fa-dollar
    fa-drivers-license
    fa-edit
    fa-envelope
      fa-exclamation
    fa-file-text
    fa-flag
    fa-folder-open
    fa-group
    fa-home
    fa-hotel
    fa-institution
    fa-leaf
    fa-legal
    fa-life-saver
      fa-lightbulb-o
    fa-map
     fa-map-marker
    fa-medkit
    fa-money
    fa-mortar-board
    fa-newspaper-o
    fa-paw
    fa-phone
    fa-pie-chart
     fa-question
    fa-recycle
    fa-road
    fa-soccer-ball-o
     fa-tint
    fa-trash
    fa-tree
    fa-trophy
    fa-user
    fa-video-camera
    fa-warning
    fa-wheelchair

See all Font Awesome icons