Social Links Element

07/10/2019

The Social Links Element allows you to add social media links anywhere in your content. The Social Links Element is loaded with options that allow you to easily customize them. Choose boxed or unboxed, border radius, icon color globally or individually, box color globally or individually, hover tooltip position and more. Read below to discover more about this useful social media element.

View more examples!

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 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Social Links’ element and click it to 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’ to insert the element into the page. Preview the page to view the Social Links, and remember you can come back into the element to fine tune it.

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 in your Theme Options > Fusion Builder Elements > Social Links Element section. 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.

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

  • Blogger Link – Insert your custom Blogger link.

  • Deviantart Link – Insert your custom Deviantart 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.

  • Google+ Link – Insert your custom Google+ 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.

  • Tumblr Link – Insert your custom Tumblr link.

  • Twitter Link – Insert your custom Twitter link.

  • Vimeo Link – Insert your custom Vimeo link.

  • VK Link – Insert your custom VK 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.

  • Show Custom Social Icons – Show the custom social icons as specified in Theme Options. Options are Yes, or No.

  • Alignment – Select the icon’s alignment. Choose from Text Flow, Left, Center, or Right.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Social Links Element

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.

View The Options Screen

Social Links Element Parameters

Copy to Clipboard
    • icons_boxed – Choose from default, yes, or no. Enable or disable boxed icons.
    • icons_boxed_radius – Accepts a pixel value. For example, 1px. Sets the border radius.
    • color_type – Choose from default, custom or brand. Choose custom to use custom social icon colors, or choose brand to automatically use the social icon brand colors.
    • icon_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s custom colors. Separate colors with a vertical line ( #AA0000|#00AA00 ). Leave Blank for Theme Options selection.
    • box_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s custom box colors. Separate colors with a vertical line ( #AA0000|#00AA00 ). Leave Blank for Theme Options selection.
    • tooltip_placement – Choose from default, left, right, top, or bottom. Sets the tooltip’s position relative to the social icon.
    • various social links – The custom URL path to various social media profiles. For example, http://www.facebook.com/johndoe.
    • email – The email address. For example, johndoe@example.com.
    • show_custom – Choose from yes, or no. Show or hide custom social icons. Learn more here.

    • alignment – Choose from default, left, center, or right. Sets the icon’s alignment.
    • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

    • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.