Social Networks Shortcode

Last Updated on

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.

In this article


Displaying Social Networks Shortcode

To add the social networks shortcode:

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

Social networks shortcode - visual composer screen

3
In 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

4
When 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

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

Social networks shortcode - add social networks

6
Click 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
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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket