Widget Overview: Icon Section Widget

The "Icon Section" Widget combines a Headline, optional Text and an Icon of your choice within one single widget, along with various styling options.  These widgets are a great way to create "bulleted" lists or visual "boxes" of information on your page (Great for SEO 🙌) 

To add an Icon Section to your page - simply open the Widgets menu from your left hand navigation (looks like the + symbol) and DRAG it to the page where you'd like it to appear. 

Once the widget is on the page - you can click once anywhere within the widget to make the popup Toolbar for this widget appear. 

Click the pink "Edit Icon" button within the toolbar to select which Icon you'd like to set for this individual Icon Section Widget.  You can scroll down the menu of icons to search from hundreds of different icons - or you can try to "search" for an icon by it's "icon name" (note - not all icons are "named" intuitively) 

After you have selected your icon - again use the Icon Widget's popup Toolbar to select the "Styling" of your Icon Widget (use the "paintbrush" icon within the Toolbar to bring up the "Syling" window) 

The Styling window for the Icon Widget has several different options (see below) 

-Styling Layout

There are three different "layouts" for the Icon Widget as shown in the three boxes at the top of the Styling window.  We'll call them:  

1) Left "Wrap" Styling Layout,  

2) Center "Top" Styling Layout and 

3) Left "Column" Styling Layout. 

*Take some time to check out the three options to see which will work best for you! 

(NOTE: The Icon Section's Title "Heading" will pull from the "H4" Tag that you have set in your text styling in Global Styling. The Icon Section's "Description" will pull from the "Paragraph" font you have set in your Global Text Styling.  If you would like to change this - highlight over the text - click on the wand icon in the menu and select another Heading Tag there).

-Show Icon Description

This option can be toggled "on" or "off" by checking this option.  Un-checking this option will remove the text below the "heading" that is a part of your Icon Widget. 

-Icon Color

Color of your Icon  (note - the color of the HEADING and TEXT within your Icon widget is separate and will be determined by the Text Widget popup Toolbar.  Simply highlight the words within your icon widget to have THIS toolbar popup.)

-Background Color

The entire Icon Section can have a "background color" set. 

-Padding Size

This determines the amount of space around the icon/words within your Icon Section Widget

-Shadow

Allows you to set a "shadow effect" for the Icon Section widget as a whole. 

A NOTE ABOUT ICON SECTION WIDGET ALIGNMENT

While you can "Align" your Icon Section widget to the "Left" or to the "Center" using the "Alignment" icon in the popup Toolbar (see image below) - this will simply align the entire widget within the space it is occupying.  (ie: within the Column the widget is in) 

Note that It will NOT align the icon and words within the widget itself.  The icon and words of the widget will always remain "left justified" (except if "Center Top Layout Styling" has been chosen). 

You CAN stretch the widget's width (using the pink handles on the right hand side of the widget) which will impact the way "Left" or "Center" Alignment looks within the space.