Social Sharing Element

Last Update: March 30, 2024

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

View Element Demo Page!

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.

You can configure your Social Sharing Box in the General Tab and style it in the Design tab. The Extras tab has also been added, which offers 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

Heading		Description
Social Sharing		Select social network you want to be displayed in the social share box.
Layout		Choose if social sharing box items should be stacked and full width, or if they should be floated.
Show Tagline		Choose to show or hide tagline.
Tagline Heading Size		Choose HTML tag of the tagline heading, either div or the heading tag, h1-h6.
Tagline		The title tagline that will display.
Sharing Title		The 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 Link		The link that will be shared. Leave empty to use URL of current post.
Sharing Description		The 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 Position		Choose the display position for tooltips. Choose default for Global Options selection.
Pinterest Sharing Image		Choose an image to share on pinterest.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky Visibility		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		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		In pixels or percentage, ex: 10px or 10%.
Padding		In pixels or percentage, ex: 10px or 10%.
Background Color		Controls the background color.
Border Size		Controls the border size of the social sharing box. In pixels or percentage, ex: 10px or 10%.
Border Color		Controls the border color of the social sharing box.
Border Radius		Controls the border radius. Enter values including any valid CSS unit, ex: 10px.
Tagline Typography		Controls the tagline typography
Tagline Color		Controls the text color.
Tagline Alignment		Select the Social Sharing Box alignment.
Social Icon Alignment		Select the Social Icon alignment.
Boxed Social Icons		Controls if each social icon is displayed in a small box.
Social Icon Box Radius		Choose the radius of the boxed icons. In pixels (px), ex: 1px, or "round".
Social Icon Size		Controls the size of the icons. Enter value including any valid CSS unit, ex: 16px.
Social Icons 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. Choose default for Global Option selection.
Social Icon Custom Colors		Specify the color of social icons. Use \| to set the color for the individual icons.
Social Icon Box Colors		Specify the box color of social icons. Use \| to set the box color for the individual icons.
Social Icon Box Padding		In pixels or percentage, ex: 10px or 10%.
Social Icon Custom Taglines		Specify the tagline of social icons. Use \| to set the taglines for the individual icons.
Icon Tagline Position		Choose the display position for icon tagline.
Icon Tagline Font Size		Controls the size of the icon tagline text. Enter value including any valid CSS unit, ex: 16px.
Social Icon Tagline Color		Controls the link color of the social sharing tagline.
Social Icon Separator Border Size		Controls the border size of the social icon separator.
Social Icon Separator Border Color		Controls the border color of the social icon separator.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

How To Use The Social Sharing Element
Element Options