Share It Circles Settings


Share It - Circle Setup

  • Count: (number) The number of circles
    • Default: 4circles
    • Min Value: 1circles
    • Max Value: 100circles
  • Fan: (number) The spacing between the circles
    • Default: 180º
    • Min Value: 90º
    • Max Value: 360º

  • Big Circle: (number) The size of the trigger circle
    • Default: 68px
    • Min Value: 50px
    • Max Value: 1000px
  • Small Circle: (number) The size of the small circles
    • Default: 35px
    • Min Value: 20px
    • Max Value: 1000px
  • Spacing: (number) The spacing between the circles
    • Default: 10px
    • Min Value: 0px
    • Max Value: 100px

Share It - Circle Styles

  • Background: (color) The color of the buttons
    • Allows Opacity: true
  • Color Gradient?: (checkbox) Style the circle backgrounds with a gradient
    • Default: false
  • Tiled Image?: (checkbox) Add a tiled image to the background
    • Default: false
  • Tile: (image) The image used for button background
    • Enable: When Tiled Image? is set to true
    • Default:
  • Hover Shadow?: (checkbox) Add a shadow on hover
    • Default: false
  • Hover Shadow: (color) The color of shadow when buttons are hovered over.
    • Enable: When Hover Shadow? is set to true
    • Allows Opacity: true
  • Border?: (checkbox) Add a border to the circles
    • Default: false
  • Border: (color) The color of border
    • Enable: When Border? is set to true
    • Allows Opacity: true

Share It - Icon Styles

  • Big Icon: (select) The icon for the main button
    • Default:
    • Possible Values:
      • Anchor
      • Bookmark
      • Check
      • Eye Open
      • Link
      • Plus
      • Share
      • Share (alt)
      • None
      • Custom Icon
      • Custom Text
  • Info: FA4 icon names can be found at http://fontawesome.io/icons/
  • Icon Name: (input) The custom icon class for main button. This class must be a valid Font Awesome icon class - http://fortawesome.github.io/Font-Awesome/icons
    • Enable: When Big Icon is set to custom
    • Default: fa-heart icon-heart
  • Big Icon: (number) The size of the icons
    • Default: 36px
    • Min Value: 0px
    • Max Value: 100px
  • Info: Double click the text in the big circle to edit the text.

  • Small Icon: (number) The size of the icons
    • Default: 24px
    • Min Value: 0px
    • Max Value: 100px
  • Icons: (color) The default color of the icons
    • Allows Opacity: true
  • Icon Hover: (color) The default color of the icons on hover
    • Allows Opacity: true
  • Colorize Social Icons?: (checkbox) Style the supported social icons with their default color scheme.
    • Default: true
  • Text Shadow: (select) Add a text shadow to the icons
    • Default: White
    • Possible Values:
      • Black
      • White
      • None

Share It - Circle Animation

  • Animation: (select) The easing effect for the flying out animations
    • Default: Bounce
    • Possible Values:
      • EaseOut
      • Bounce
      • Custom
  • Custom Easing: (input) Define custom CSS easing effects. Test out cool easing combinations at http://cubic-bezier.com
    • Enable: When Animation is set to custom
    • Default: cubic-bezier(0.250, 0.460, 0.450, 0.940)
  • Direction: (select) The position of the small circles
    • Default: Up (3.5)
    • Possible Values:
      • Up (3.5)
      • Down (6.75)
      • Left (2.0)
      • Right (5.0)
      • Custom
  • Offset: (slider) The position around the circle
    • Enable: When Direction is set to custom
    • Default: 5rad
    • Min Value: 0rad
    • Max Value: 7rad
  • Close Timeout: (slider) The amount of time in seconds before the circles will automatically reset.
    • Default: 5s
    • Min Value: 1s
    • Max Value: 60s
  • Speed: (slider) The animation speed
    • Default: 300ms
    • Min Value: 0ms
    • Max Value: 600ms
  • Trigger on Hover?: (checkbox) Trigger the share circles to open on hover as well as click
    • Default: true
  • Stay Open?: (checkbox) Once Share it is opened, don’t close it.
    • Default: false
  • Open on Load?: (checkbox) Open Share It on page load
    • Default: false
  • Open Delay: (slider) The amount of time until Share It is opened.
    • Enable: When Open on Load? is set to true
    • Default: 0s
    • Min Value: 0s
    • Max Value: 60s