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:
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.