Social Settings Widget

The Social widget allows you to add one or more social media icons to the section grid or as a "child" element to a "parent" widget container such as a Carousel or Grid widget. 


The Social widget has two menus (see Fig 1 below).

Fig 1

Icons menu

The Icons menu for the Social widget contains one multi-function feature (see Fig 2 below).

Fig 2

  • There are three social icon blocks initially shown. They have been set by default to:
    1. Facebook
    2. Twitter
    3. LinkedIn  

       Each block is made up of four control features:

  • The "Three-horizontal-lines" icon at the far left allows you to drag an icon by left-clicking and holding your cursor on it so you can set a different order for how the icons will appear. 
  • Clicking on the social icon itself will bring up a modal popup of various icon designs you can choose. See Fig 3 below. Clicking on a specific social icon will insert it in place of the original social icon. 

Fig 3


  • An input field where you can insert the URL link to your social media account.
  • An "X" to the far right that when clicked deletes the social icon and its URL.
  • The wide "Add" button that allows you to add another social icon at the bottom of the stack. The added icon will be the same as the last icon in the stack prior to clicking the button by default.

Style menu

The Style menu for the Social widget conforms to the general Style menu as described in this article: Style Menu Article, but also contains three additional features as described below.

  • The Icon Size feature (see Fig 4 below) is used to increase or decrease the sizes of the social icons as a group (but not their container). Note: The maximum icon size is limited to the current size of its container. Enlarging the icons beyond the current size of the container will cause the icons to "spill out" of the container. 

Fig 4

  • The Icon Gap feature (see Fig 5 below) allows you to change the gap between the icons up to a calculated value based on the current size of the container. If the gap value is increased beyond this current size, the icons will "spill out" of the container. 

Fig 5


  • The wide "Add" button (as noted above) that allows you to add another social icon at the bottom of the stack. The added icon will be the same as the last icon in the stack prior to clicking the button by default. See Fig 6 below.

Fig 6