The social networks shortcode allows you to display your social network profiles on your page.

In this article, we will explain how to display social networks and configure their styles.

Displaying Social Networks Shortcode

To add the social networks shortcode:

1Add or edit an existing page.
2In the Visual Composer section, click on the + button.

Social networks shortcode - visual composer screen

3In the Add Element pop-up screen, search for Social Networks and click on it to be added to the page.

Social networks shortcode - add element

4When the shortcode is added, a new pop-up screen called Social Networks Setting will open that allows you to configure the shortcode settings.

Social networks shortcode - Social networks settings

5Add your social network URL addresses in the appropriate settings. More settings are explained in the next sections.

Social networks shortcode - add social networks

6Click on Save Changes and publish or update the page to check the result.

Configuring the Styling

There are a few settings related to styling in the Social Networks Settings pop-up. Configure them as required.

SettingDescription

SizeDefines the size of the icon. Options include: Small, Medium, Large, X Large and XX Large
StyleDefines the style of the icons. Options include: Rounded, Circle, Simple, Simple Rounded, Square Pointed Corner and Square Rounded Corner.
MarginDefines the distance between icons. This margin will be applied to all directions.
Icons ColorSets the color of the icons.
Icons Hover ColorSets the hover color of the icons for when a mouse hovers the icon.
Icons AlignAlignment of the icon. Options include: Left, Right or Center.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.