Social Links Element

Last Update: March 12, 2024

The Social Links Element allows you to add social media links anywhere in your content. The Element is loaded with options that allow you to easily customize your Social Media icons. Read below to discover more about this useful social media element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Social Links Element

The Social Links Element is a quick and easy way to add your own social media links anywhere on your site.

To start, add the element into your desired column, and configure the Social Links Element to your liking. There are styling options for the icons, including the ability to use either branded or custom colors for icons, and then, once you have styled the icons the way you like, there are fields to add your own profile links for every major Social Media platform. You can also add an email icon, and any custom social icons specified in the Global Options.

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Social Links. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Blogger LinkInsert your custom Blogger link.
Deviantart LinkInsert your custom Deviantart link.
Discord LinkInsert your custom Discord link.
Digg LinkInsert your custom Digg link.
Dribbble LinkInsert your custom Dribbble link.
Dropbox LinkInsert your custom Dropbox link.
Facebook LinkInsert your custom Facebook link.
Flickr LinkInsert your custom Flickr link.
Forrst LinkInsert your custom Forrst link.
Instagram LinkInsert your custom Instagram link.
LinkedIn LinkInsert your custom LinkedIn link.
Myspace LinkInsert your custom Myspace link.
PayPal LinkInsert your custom PayPal link.
Pinterest LinkInsert your custom Pinterest link.
Reddit LinkInsert your custom Reddit link.
RSS LinkInsert your custom RSS link.
Skype LinkInsert your custom Skype link.
Snapchat LinkInsert your custom Snapchat link.
SoundCloud LinkInsert your custom SoundCloud link.
Spotify LinkInsert your custom Spotify link.
Teams LinkInsert your custom Microsoft Teams link.
Telegram LinkInsert your custom Telegram link.
Tiktok LinkInsert your custom Tiktok link.
Tumblr LinkInsert your custom Tumblr link.
Twitch LinkInsert your custom Twitch link.
X LinkInsert your custom X link.
Vimeo LinkInsert your custom Vimeo link.
VK LinkInsert your custom VK link.
WeChat LinkInsert your custom WeChat link.
WhatsApp LinkInsert your custom WhatsApp link.
Xing LinkInsert your custom Xing link.
Yahoo LinkInsert your custom Yahoo link.
Yelp LinkInsert your custom Yelp link.
Youtube LinkInsert your custom Youtube link.
Email AddressInsert an email address to display the email icon.
Phone NumberInsert a phone number to display the phone icon.
Show Custom Social IconsShow the custom social icons specified in Global Options.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
AlignmentSelect the icon's alignment.
MarginEnter values including any valid CSS unit, ex: 4%.
Tooltip PositionChoose the display position for tooltips.
Font SizeControls the font size for the social icons. Enter value including CSS unit (px, em, rem), ex: 10px
Boxed StyleChoose to get boxed icons.
Boxed PaddingControls the padding of boxed icons.
Box Border SizeControls the border size. In pixels or percentage, ex: 10px or 10%.
Box Border RadiusChoose the border radius of the boxed icons. In pixels (px), ex: 1px, or "round".
Color TypeChoose the color type of social icons. Brand colors will use the exact brand color of each network for the icons or boxes.
Icon ColorSpecify the color of social icons.
Background ColorSpecify the box background color of social icons.
Border ColorSpecify the border color of social icons.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.