The social networks widget allows you to display your social network links as icons in a widget area/sidebar. It displays a clickable icon for each social network link.
In this article, we’ll explain how to display social network links through the social network widget in the Jupiter WordPress theme.
Displaying Social Network Links
In order to display social network links in a widget area/sidebar, you’ll need to add the JP – Social Networks widget to a widget area/sidebar, and then configure its settings.
To add the widget:
| Settings | Description |
|---|---|
| Title | Displays a title at the top of the widget. If left empty, it won’t show anything at the top of the social network links. |
| Icon Alt Title | Sets the title attribute of the icons. When you hover over them, it will be displayed. |
| Choose Sites | Select the social network links you need to display. |
| URL | Sets the URL of the each selected social network link. The full URL with http(s):// needs to be set. For example, https://twitter.com/artbees_design |
Configuring the Styling
The Size, Align, Style, Color, and Icons Margin settings allow you to configure social icons styling and layout.
| Settings | Description |
|---|---|
| Size | Defines the icons’ size (Large, Medium, Small) |
| Align | Defines the icons’ position (Left, Center, Right) |
| Style | Defines the icons’ background and border styles (Circle, Rounded, Simple, Simple Outline, Square Pointed, Square Rounded) |
| Color | Defines the icons’ color (Light, Dark, Custom). If you select Custom, you can choose the color for the icon, hover, border, background, and hover background. |
| Icons Margin (px) | Defines the margin between the icons, for example, 20. There is no need to add px to the margin value. |
Adding Custom Social Network Links
Beside existing social network links that you can select in the Choose Sites dropdown list, you can also add custom social networks by specifying a number in the “How many custom icons to add?” setting. For each number you set, three setting fields will be added.
[image]
| Setting | Description |
|---|---|
| Custom 1 Name | Defines name of a custom social network link. |
| Custom 1 URL | Defines the full URL of a custom social network link. |
| Custom 1 Icon | Defines an image source for the icon. You’ll need to add a URL to the image on your server. For example: http://yoursite.com/wp-content/uploads/2017/01/custom-social-icon.jpg |
