Social Links Element

16/12/2021

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.

View Element Demo Page!

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’.

868,490 Businesses Trust Avada

Get Avada

868,490 Businesses Trust Avada

Get Avada

868,490 Businesses Trust Avada

Get Avada

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.
Teams Link – Insert your custom Microsoft Teams link.
Telegram Link – Insert your custom Telegram 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 Icon – 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.

View The Options Screen

Design Tab

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.
Margin – Enter values including any valid CSS unit, ex: 4%. Leave empty for default values. NB. This option now has responsive options, so that the alignment can be independently controlled for large, medium and small screens.
Tooltip Position – Choose the display position for tooltips.
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 Style – Choose to get boxed icons.
Boxed Social Icons – Choose to get boxed icons.
Box Border Size – Controls the border size. In pixels or percentage, ex: 10px or 10%. Leave empty for default values.
Box Border Radius – Choose the border radius of the boxed icons. In pixels (px), ex: 1px, or “round”. Leave empty for default value.
Color Type – Select the color type for social icons. Choose from Default, Custom Colors, or Brand Colors.
Custom Colors
Regular Options
Icon Color – Specify the color of social icons. Leave empty for default value.
Background Color – Specify the box background color of social icons. Leave empty for default value.
Border Color – Specify the border color of social icons. Leave empty for default value.
Hover Options
Icon Color – Specify the color of social icons on hover. Leave empty for default value.
Background Color – Specify the box background color of social icons on hover. Leave empty for default value.
Border Color – Specify the border color of social icons on hover. Leave empty for default value.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

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.
NB. These social icon global options control both the Social Link Element and the Person Element.

Margins – Controls the margins around the element.
Social Links Icons Tooltip Position – Controls the tooltip position of the social links icons.
Icons Font Size – Controls the font size for the icons.
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.
Icons Color – Controls the color of the custom icons.
Icons Hover Color – Controls the hover color of the custom icons.
Boxed Style – Turn on to have the icon displayed in a small box. Turn off to have the icon displayed with no box.
Boxed Padding – Enter value including any valid CSS unit, ex: 8px.
Box Background – Select a custom social icon box color.
Box Hover Background – Select a custom social icon box color on hover.
Box Border Size – Controls the borders size of social icon box.
Box Radius – Box radius for the social icons. Enter value including any valid CSS unit, ex: 4px.
Border Color – Controls the borders color of social icon box.
Border Hover Color – Controls the borders color of social icon box on hover.