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.
3In the Add Element pop-up screen, search for Social Networks and click on it to be added to the page.
4When the shortcode is added, a new pop-up screen called Social Networks Setting will open that allows you to configure the shortcode settings.
5Add your social network URL addresses in the appropriate settings. More settings are explained in the next sections.
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.
| Setting | Description |
|---|---|
| Size | Defines the size of the icon. Options include: Small, Medium, Large, X Large and XX Large |
| Style | Defines the style of the icons. Options include: Rounded, Circle, Simple, Simple Rounded, Square Pointed Corner and Square Rounded Corner. |
| Margin | Defines the distance between icons. This margin will be applied to all directions. |
| Icons Color | Sets the color of the icons. |
| Icons Hover Color | Sets the hover color of the icons for when a mouse hovers the icon. |
| Icons Align | Alignment 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.
