Social Sharing Element
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.
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.
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. Choose Social Sharing from the Elements List. Before you get started, it’s a good idea to check out the Social Sharing Element Demo page, where you can see examples of how you can style this element.
Step 4. The available options for this Element have been greatly expanded with Avada 7.2. Watch the video for a full rundown of the Element and all the options, or check below for details on all the available options. 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.
Step 5. Once you have finished configuring the options, save your page.
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 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 Tab
- Social Sharing – Select social network you want to be displayed in the social share box. Leave empty for the default gloabl options.
- 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 – 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 – Select the display position for tooltips. Choose from Default, Top, Bottom, Left, or Right.
- 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 – (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 – Add a class to the wrapping HTML element.
CSS ID – Add an ID to the wrapping HTML element.
Design Tab
- Margin – In pixels or percentage, ex: 10px or 10%.
- Padding – In pixels or percentage, ex: 10px or 10%.
Background Color – Controls the background color of the Sharing Box.
- 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.
Tagline Color – This controls the text color of the title tagline that will display on the Sharing Box.
- Tagline Alignment – Select the Social Sharing Box alignment. Choose from Flex Start, Center, or Flex End.
Social Icon Alignment – Select the Social Icon alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly.
Boxed Social Icons – Choose the color type of social icons. Brand colors will use the exact brand color of each network for the icons or boxes. Choose from Default, Yes, or No.
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 icon tagline text. Enter value including any valid CSS unit, ex: 16px. Leave empty for default value.
Social Icons Color Type – Choose to get boxed icons. Choose default for theme option selection. Choose from Default, Custom Colors, or Brand Colors.
Social Icon Custom Colors – Specify the color of social icons. Use | to set the color for the individual icons. Leave empty for default value.
Social Icon Custom Box Colors – Specify the box color of social icons. Use | to set the box color for the individual icons. Leave empty for default value.
- 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. Leave empty for default value.
Social Icon Tagline Hover Color – Controls the link hover color of the social sharing tagline. Leave empty for default value.
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. Leave empty for default value.
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 5.
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.
Global Options
As there is also the integrated sharing boxes for blog and portfolio posts, the Social Sharing Element has its Global Options, not in the Avada Builder Elements tab, but instead on the Social Media tab at Avada > Options > Social Media > Social Sharing. There are also options to enable or disable the Social Sharing Box by default, on Blog Posts, Portfolio Single Posts, and Event Single Posts.
Social Sharing Tagline – Insert a tagline for the social sharing boxes.
Social Sharing Tagline Text Color – Controls the color of the tagline text in the social sharing boxes.
Social Sharing Background Color – Controls the background color of the social sharing boxes.
Social Sharing – Select the social networks you want to be displayed in the social share box.
Social Sharing Icon Font Size – Controls the font size of the social icons in the social sharing boxes. Enter value including CSS unit (px, em, rem), ex: 16px.
Social Sharing Icons Tooltip Position – Controls the tooltip position of the social icons in the social sharing boxes. Choose from Top, Right, Bottom, Left or None.
Social Sharing 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 Sharing Icon Color – Controls the color of the social icons in the social sharing boxes. This color will be used for all social icons.
Social Sharing Icons Boxed – Controls if each social icon is displayed in a small box.
Social Sharing Icon Box Color – Controls the color of the social icon box.
Social Sharing Icon Boxed Radius – Controls the box radius of the social icon box. Enter value including any valid CSS unit, ex: 4px.
Social Sharing Icons Boxed Padding – Controls the interior padding of the social icon box. Enter value including any valid CSS unit, ex: 8px.
