This widget allows you to add a group of icons to a page. These icons can be linked to pages, documents or external websites. Typically this widget is used by the theme designer to add a row of icons at the top of your site to social media sites, or other special tools you wish to make available.
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
- Select the Icon Group widget.
- Click on the green + Icon 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;
- Link - Select a page or file that you would like to link to or enter the URL for a external link.
- 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.
- Display Text - Text that you would like listed near the icon.
- Alternative Title/Label - Does not display but should be used for ADA compliance. Helps assistive technology understand how the icon should be used (e.g. Visit our Facebook Page).
- Repeat the previous step until you have completed building your icon group.
- Additional fields can be found in the Settings tab, changing these is optional and not necessary for the function of the widget, but they will allow you to customize the widget further to your liking. The fields and their descriptions are listed below;
- Format - Select the format of the icon group, either Inline (horizontal) or Stacked (vertical). If Stacked is selected, all other settings are ignored.
- Shape - Choose the shape of the active area of the icon. The options available are Default, Square, Rounded and Round.
- Size - Select the size of the icon. The sizes available are small, medium, large, x-large and xx-large.
- Color - Lets you pick the color of the icon from the following options; Default, White, Primary, Secondary, Tertiary, Accent, Gray, Dark and Social Brand.
- Background Color - Select the background color from the following; Default, White, Primary, Secondary, Tertiary, Accent, Gray, Dark and Social Brand. *
- Border - A colored border can be placed around the icon if needed. The color choices are Default, White, Primary, Secondary, Tertiary, Accent, Gray, Dark and Social Brand. *
- Alignment - Allows you to pick the alignment of the icon from left, center and right. By default the alignment is left
- When you are finished, click on the green Create button and your Icon Group 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.
* Keep ADA compliance in mind when choosing colors. All text should have a stark contrast over background colors so that visually impaired site visitors can more easily use your website.