Social Links Element
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.
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.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Locate the ‘Social Links’ element and click it to add it to the page and bring up its options window.
Step 4. 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 the 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 Theme Options.
Step 5. Once you have finished configuring the options, click ‘Save’.
Element Options
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab
Blogger Link – Insert your custom Blogger link.
Deviantart Link – Insert your custom Deviantart link.
Discord Link – Insert your custom Discord link.
Digg Link – Insert your custom Digg link.
Dribbble Link – Insert your custom Dribbble link.
Dropbox Link – Insert your custom Dropbox link.
Facebook Link – Insert your custom Facebook link.
Flickr Link – Insert your custom Flickr link.
Forrst Link – Insert your custom Forrst link.
Instagram Link – Insert your custom Instagram link.
LinkedIn Link – Insert your custom LinkedIn link.
Myspace Link – Insert your custom Myspace link.
PayPal Link – Insert your custom PayPal link.
Pinterest Link – Insert your custom Pinterest link.
Reddit Link – Insert your custom Reddit link.
RSS Link – Insert your custom RSS link.
Skype Link – Insert your custom Skype link.
SoundCloud Link – Insert your custom SoundCloud link.
Spotify Link – Insert your custom Spotify link.
Tiktok Link – Insert your custom Tiktok link.
Tumblr Link – Insert your custom Tumblr link.
Twitch Link – Insert your custom Twitch link.
Twitter Link – Insert your custom Twitter link.
Vimeo Link – Insert your custom Vimeo link.
VK Link – Insert your custom VK link.
WeChat Link – Insert your custom WeChat link.
WhatsApp Link – Insert your custom WhatsApp link.
Xing Link – Insert your custom Xing link.
Yahoo Link – Insert your custom Yahoo link.
Yelp Link – Insert your custom Yelp link.
YouTube Link – Insert your custom YouTube link.
Email Address – Insert an email address to display the email icon.
Phone Number – Insert a phone number to display the phone icon.
Show Custom Social Icons – Show the custom social icons as specified in Theme Options. Options are Yes, or No.
Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). Choose 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 Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
Design Tab
Social Icons Font Size – Controls the font size for the social icons. Enter value including CSS unit (px, em, rem), ex: 10px Leave empty for default value.
Boxed Social Icons – Choose to get boxed icons.
Social Icon Box Radius – Choose the radius of the boxed icons. In pixels (px), ex: 1px, or “round”.
Social Icons Color Type – Select the color type for social icons. Choose from Default, Custom Colors, or Brand Colors.
Social Icon Custom Colors – Specify the color of social icons.
Social Icon Custom Box Colors – Specify the box color of social icons.
Social Icon Tooltip Position – Choose the display position for tooltips. Options are Default, Top, Bottom, Left, Right, and None.
- Alignment – Select the icon’s alignment. Choose from Text Flow, Left, Center, or Right. NB. This option now has responsive options, so that the alignment can be independently controlled for large, medium and small screens.
Global Options
Location: Avada > Options > Avada Builder Elements > Social Links
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
Social Links Icons Font Size – Controls the font size for the social link icons. Enter value including CSS unit (px, em, rem), ex: 16px.
Social Links Icon Color Type – Custom colors allow you to choose a color for icons and boxes. Brand colors will use the exact brand color of each network for the icons or boxes.
Social Links Custom Icons Color – Controls the color of the custom icons.
Social Links Icons Boxed – Turn on to have the icon displayed in a small box. Turn off to have the icon displayed with no box.
Social Links Icons Custom Box Color – Select a custom social icon box color.
Social Links Icons Boxed Radius – Box radius for the social icons. Enter value including any valid CSS unit, ex: 4px.
Social Links Icons Boxed Padding – Enter value including any valid CSS unit, ex: 8px.
Social Links Icons Tooltip Position – Controls the tooltip position of the social links icons. Choose from Top, Right, Bottom, Left, or None.
