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 to 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 were 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 LayoutUse Hover Effects must be enabled to make use of this setting.
Icon hover color
Select an icon hover color. Design and LayoutUse Hover Effects must be enabled to make use of this setting.
Background hover color
Select an icon background hover 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 icon hover effects. When enabled the following additional settings will be available when editing each network:
- Icon hover color
- Background hover color
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.