Sharing Box Element

07/10/2019

Ever wanted to share a webpage, blog post, portfolio item or piece of interesting content with your friends and colleagues? Avada already has an integrated Sharing Box, but we also have the Sharing Box Element! This handy Element can be placed wherever you want on the page, and allows you to totally customise 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 Element.

View more examples!

How To Use The Sharing Box Element

The Sharing Box Element is a simple way to add a social media sharing box anywhere in your content.

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 ‘Sharing Box’ element and click it to bring up its options window. before you get started, it’s a good idea to check out the Sharing Box Element Demo page, where you can see lots of examples of how you can style this element.

Step 4 – The available options are largely styling ones. Start with a personal Tagline for the box, and set the background and text color of the box. The next three field are the content that will be shared. You can set a title, the actual link, and a description. The remaining options are to do with the styling of the Social media icons that will display on the box. The actual icons that show is determined by what you have turned on in the theme options, under Avada > Theme Options > Social Media > Social Sharing Box. Here you can select the sharing options that will be visible, both in the integrated sharing box and the Sharing Box Element.

Step 5 – Once you have finished configuring the options, click ‘Save’ to insert the element into the page. Preview the page to view the Blog element output, and remember you can comes 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 > Sharing Box 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.

  • Tagline – The title tagline that will display on the Sharing Box.

  • Tagline Color – Controls the text color. Leave blank for theme option selection.

  • Background Color – Controls the background color of the Sharing Box.

  • Title – The post title that will be shared.

  • Link to Share – The link that will be shared.

  • Description – The description that will be shared.

  • 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 – Choose if the Social Icons have 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 – Select the display position for tooltips. Choose from Default, Top, Bottom, Left, or Right.

  • Choose Image to Share on Pinterest – You can upload an image for sharing 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.

  • 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

As there is also the integrated sharing boxes for blog posts, the Sharing Box Element has its Global Options, not in the Fusion Builder Elements tab, but instead on the Social Media tab in Theme Options: Avada > Theme Options > Social Media > Social Sharing Box. Most of these can be overridden in the element options, but a few of them are truly global and have no local overrides. These would include the Sharing Box Icon Font Size, and the Sharing Box Icons Boxed Padding, as well as the  Sharing Box links section. There are also options in the Theme Options to enable or disable the Sharing Box by default, on Blog Posts, Portfolio Single Posts, and Event Single Posts.

  • Sharing Box Tagline – Insert a tagline for the social sharing boxes.

  • Sharing Box Tagline Text Color – Controls the color of the tagline text in the social sharing boxes.

  • Sharing Box Background Color – Controls the background color of the social sharing boxes.

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

  • Sharing Box Icons Tooltip Position – Controls the tooltip position of the social icons in the social sharing boxes. Choose from Top, Right, Bottom, Left or None.

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

  • Sharing Box Icons Boxed – Controls if each social icon is displayed in a small box.

  • Sharing Box Icon Boxed Radius – Controls the box radius of the social icon box. Enter value including any valid CSS unit, ex: 4px.

  • Sharing Box Icons Boxed Padding – Controls the interior padding of the social icon box. Enter value including any valid CSS unit, ex: 8px.

  • Facebook – Turn on to display Facebook in the social share box.

  • Twitter – Turn on to display Twitter in the social share box.

  • Reddit – Turn on to display Reddit in the social share box.

  • LinkedIn – Turn on to display LinkedIn in the social share box.

  • WhatsApp – Turn on to display WhatsApp in the social share box.

  • Google+ – Turn on to display Google+ in the social share box.

  • Tumblr – Turn on to display Tumblr in the social share box.

  • Pinterest – Turn on to display Pinterest in the social share box.

  • VK – Turn on to display VK in the social share box.

  • Email – Turn on to display Email in the social share box.

View The Options Screen

Sharing Box Element Parameters

Copy to Clipboard
    • tagline – The tagline text. For example, Share This Story, Choose Your Platform!
    • tagline_color – Accepts a hexcode ( #000000 ). Sets the tagline color.
    • backgroundcolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background’s color.
    • title – The custom title that will be shared. For example, My Blog Post.
    • link – The URL path that will be shared. For example, http://www.example.com/.
    • description – The description text that will be shared.
    • icons_boxed – Choose from default, yes, or no. Enable or disable icon’s background.
    • icons_boxed_radius – Accepts a pixel value. For example, 4px. Sets the social icon’s background 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 ).
    • box_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s custom background colors. Separate colors with a vertical line ( #AA0000|#00AA00 ).
    • tooltip_placement – Choose from default, left, right, top, or bottom. Sets the tooltip’s position relative to the social icon.
    • pinterest_image – The URL path of the image that will be shared on Pinterest. For example, http://www.sample.com/image.jpg.
    • 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.