Social Sharing Element

Last Update: February 16, 2023

Have you ever wanted to share a web page, blog post, WooCommerce product, portfolio item or other piece of interesting content with your friends and colleagues? Avada already has an integrated Social Sharing Box (found at Avada > Options > Social Media > Social Sharing), but for even more control, we also have the Social Sharing Element! This Element was updated and renamed in Avada 7.2 from the Sharing Box Element to the Social Sharing Element, and now can be used in even more ways than before.

This handy Element can be placed wherever you want on a page, post, custom post type, or even in a Layout, and allows you to totally customize the look, color, appearance, links, and description of the link, to any piece of your content. Read on to find out more about this practical and versatile Social Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Social Sharing Element

The Social Sharing Element is a simple way to add a social media sharing box anywhere in your content. You can also use this Element effectively in Avada Layouts.

To start, add the element into your desired column.

The available options for this Element were greatly expanded with Avada 7.2. Basically, you can now configure your Social Sharing Box in the General Tab, and style it in the Design tab. The Extras tab has also been added, which offer Element animation on load.

Check below for details on all the available element options.

Element Options

Note: The Default setting will use the global settings assigned for this element at Avada > Options > Avada Builder Elements > Social Sharing. 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
Social SharingSelect social network you want to be displayed in the social share box. Leave empty for default value of facebook|twitter|linkedin|whatsapp|email.
LayoutChoose if social sharing box items should be stacked and full width, or if they should be floated.
Show TaglineChoose to show or hide tagline.
Tagline Heading SizeChoose HTML tag of the tagline heading, either div or the heading tag, h1-h6.
TaglineThe title tagline that will display.
Sharing TitleThe post title that will be shared. Leave empty to use title of current post. NOTE: Some of the social networks will ignore this option and will instead auto pull the post title based on the shared link.
Sharing LinkThe link that will be shared. Leave empty to use URL of current post.
Sharing DescriptionThe description that will be shared. Leave empty to use excerpt of current post. NOTE: Some of the social networks do not offer description in their sharing options and others might ignore it and will instead auto pull the post excerpt based on the shared link.
Social Icon Tooltip PositionChoose the display position for tooltips. Choose default for Global Options selection. Default currently set to Top.
Pinterest Sharing ImageChoose an image to share on pinterest.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
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
MarginIn pixels or percentage, ex: 10px or 10%.
PaddingIn pixels or percentage, ex: 10px or 10%. Leave empty for default value of 1.25em, 1.25em, 1.25em, 1.25em.
Background ColorControls the background color. Leave empty for default value of Avada Green. Reset to default.Using default value.
Border SizeControls the border size of the social sharing box. In pixels or percentage, ex: 10px or 10%.
Border ColorControls the border color of the social sharing box.
Border RadiusControls the border radius. Enter values including any valid CSS unit, ex: 10px.
Tagline TypographyControls the tagline typography
Tagline ColorControls the text color. Leave empty for default value of White. Reset to default.Using default value.
Tagline AlignmentSelect the Social Sharing Box alignment.
Social Icon AlignmentSelect the Social Icon alignment.
Boxed Social IconsControls if each social icon is displayed in a small box. Default currently set to No.
Social Icon Box RadiusChoose the radius of the boxed icons. In pixels (px), ex: 1px, or "round". Leave empty for default value of 4px.
Social Icon SizeControls the size of the icons. Enter value including any valid CSS unit, ex: 16px. Leave empty for default value of 16px.
Social Icons Color TypeCustom 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. Choose default for Global Option selection. Default currently set to Custom Colors.
Social Icon Custom ColorsSpecify the color of social icons. Use | to set the color for the individual icons. Leave empty for default value of White.
Social Icon Box ColorsSpecify the box color of social icons. Use | to set the box color for the individual icons. Leave empty for default value of Soft Dark Gray.
Social Icon Box PaddingIn pixels or percentage, ex: 10px or 10%.
Social Icon Custom TaglinesSpecify the tagline of social icons. Use | to set the taglines for the individual icons.
Icon Tagline PositionChoose the display position for icon tagline.
Icon Tagline Font SizeControls the size of the icon tagline text. Enter value including any valid CSS unit, ex: 16px.
Social Icon Tagline ColorControls the link color of the social sharing tagline. Leave empty for default value of Dark.
Social Icon Separator Border SizeControls the border size of the social icon separator.
Social Icon Separator Border ColorControls the border color of the social icon separator. Leave empty for default value of Soft Dark Gray.

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. Default currently set to Top Of Element Hits Bottom Of Viewport.