Used to create a button that has a drop-down menu on a page. A higher-level designer will use it in the outer templates that govern the website. Typical publishers will rarely use it.
How do I add this widget to a page?
- Click Edit Page
- Click either + Content or the Settings icon (down-facing arrow) which will be located to the right of Edit where you will need to select either Insert before or Insert after
- Choose the Button Dropdown widget
- Click on the Settings tab to create the primary button. The fields and their descriptions are listed below;
- Text - The text of the main button that has the drop-down menu
- Link - Specify the button destination. This will create a split button drop-down if one is entered. We recommend if the link is going to a document or an external website that the target be changed to New Window
- Target - Specify where to open the button link.
- Style - Choose the style of the button. The options available are; Default and Link Only
- Size - Select the size of the button from the default size up to Large.
- Color - Select the color of the button from the following options; Primary, Secondary, Tertiary, Accent, Info, Gray, Light Gray, Dark Gray, and Dark
- Icon - Pick from a selection of icons if you want one to be displayed.
- Alignment - Allows you to pick the alignment of the button from left, center and right. By default. the alignment is left
- Full Width - Should the button fill the complete width of the container. The default is off.
- Caret - Enable the caret to indict a drop-down. Note: the caret is always visible on split button drop-downs. The default is on.
- Title - If you want text to be displayed in the tooltip when the button is rolled over, enter it into this field.
Tip - It is best to keep the text inside a button as short as possible. Anything that goes over ten or fifteen words is probably too long. Simple statements are best.
- To add items to the drop-down menu of the button click on Items and then on the green + Item button in the upper-right-hand corner and choose the icon you would like to use from a list of available icons. Additional fields that need to be filled out include;
- Text - Text that you would like listed on the button.
- Icon - Pick from a selection of icons if you want one to be displayed
- Link - Select a page or file that you would like to link to or enter the URL for an external link.
Note - It is also possible to have a link send an email or dial a phone number when clicked on. Both will try to open the appropriate program, on a visitor's computer if one is available, to handle the request. If one is not available nothing will happen.- If you like to use the link as a Contact Us enter mailto: followed by the email address into this field. So to send to stevej@domain.com you would enter mailto:stevej@domain.com into the link field.
- To have the link dial a phone number enter tel: followed by the phone number into this field. So to dial 1-513-222-3333 you would enter tel:15132223333 into the link field.
- If you like to use the link as a Contact Us enter mailto: followed by the email address into this field. So to send to stevej@domain.com you would enter mailto:stevej@domain.com into the link field.
- Target - Select the target from either the current window or new window. We recommend that any files or external links be opened in a New Window.
- Repeat the previous step until you have completed building your icon group.
- When you are finished, click on the green Create button and your Button Dropdown widget will show up on the page.
- Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.
Recommendation - To get an actual "button" look, a color other than none needs to be picked in the "Color" field.