Social Media Buttons Widget

Customizable buttons which link to all your social media profiles.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Social Media Buttons Widget.

The Social Media Buttons Widget is ready to be used anywhere:

Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.

Settings

Once the Social Media Buttons widget has been inserted into your theme widget area or page/post using Page Builder, hover over it and click the Edit link to begin. You’ll find the following fields available:

Title
Enter a widget title if you’d like ti display one.

Networks

Use the Add button to add as many social networks as you need. On the right of each item you’ll find three icons. The down arrow opens the item, the page icon duplicates the item and the cross icon deletes the item.

Select network
Use the drop down menu to select the social network to be added.

URL
Enter the URL for your social network profile page. Use the full URL, for example if SiteOrigin was adding Twitter as a network, we’d use https://twitter.com/SiteOrigin.

Icon title
Enter a link title to be used. This title won’t be visible, it refers to the link title attribute.

Icon color
Select an icon color.

Background color
Select an icon background color.

Design and Layout

Open in a new window
Enable to open social network links in a new window.

Button theme
Select the design theme to be used. Choose between atom, flat or wire.

Use hover effects
Enable to use effects when the social network icon is hovered.

Rounding
Select the icon rounding to be used. Choose between none, slightly rounded, very rounded or completely rounded.

Padding
Select the level of padding to be used. Choose between low, medium, high or very high.

Align
Select the overall widget alignment. Choose between left, right, center or justify.

Mobile align
Select the overall widget alignment on mobile resolutions. Choose between left, right, center or justify. This resolution can be set at PluginsSiteOrigin Widgets, locate the Social Media Buttons widget and click the Settings button.

Margin
Select the margin between each social network icon. Choose between low, medium, high or very high.

Custom Networks

This section is available as part of SiteOrigin Premium.

Use this section to create your own social network icons. Start by clicking the Add button to add a new network. On the right of each item you’ll find three icons. The down arrow opens the item, the page icon duplicates the item and the cross icon deletes the item.

Name
Enter a name for your social network.

URL
Enter the URL for your social network.

Icon title
Enter a link title to be used. This title won’t be visible, it refers to the link title attribute.

Icon
Choose the icon to be used.

Icon color
Select the icon color to be used.

Icon image
If you’d prefer to use an image for your icon, use the Choose Media button to select one from your media library or use the Image Search button.