Social Share Buttons

Content Controls

Buttons

In this section, the controls allow for the customization and management of social sharing buttons. Users can define which social networks are available and set custom labels for a personalized touch. Additionally, responsiveness settings enable adjustments to how button text displays on different devices.

  • Buttons – Manage the array of social share buttons and define their properties.
    • Network – Choose which social network each button corresponds to from a dropdown list of options.
    • Custom Label – Assign a custom text label to each social share button for clarity or branding purposes.
  • Responsive – Adjust how your buttons behave on various devices.
    • Button Text – Edit the text displayed on the buttons to ensure they look great on any screen size.

Share

The controls in this section are focused on the sharing functionality. You can specify the URL that will be shared, add custom text to accompany the share, and choose how these elements are presented to the user. Note that some options only become available based on your selections to provide a more streamlined experience.

  • URL – Select the source of the URL that will be shared when a user clicks the share button.
  • Custom URL – Enter a specific URL to be shared; this option is only accessible when “URL” is set to “custom_url”.
  • Text – Choose the default text that will accompany the shared URL.
  • Custom Text – Provide your own text to accompany the shared URL; available only when “Text” is set to “custom_text”.

Design Controls

Style

This section provides controls to refine the overall look of your buttons. You can dictate how they display and, with certain conditions met, further style them beyond their basic appearance. These options give you the flexibility to ensure your buttons align with your site’s design aesthetic.

  • Display – Choose the default display mode for your buttons.
  • Style – Further stylize your buttons with additional design options, which are only available when “Display” is not set to “icon”.

Button

Here, you can fine-tune the individual elements of your buttons. Adjust the size of the icons, the padding around them, and choose color schemes that match your branding. There’s also a focus on border customization, allowing for a distinct and cohesive button design.

  • Icon Size – Set the scale of the icons within your buttons to ensure visibility and balance.
  • Padding – Control the space around the button content to align with your design needs.
  • Colors – Dive into the color palette for your buttons.
    • Icon – Pick a color for your button icons to make them stand out or blend in.
    • Background – Select a background color for your buttons for maximum impact.
    • Border – Choose a border color to frame your buttons effectively.
  • Border – Customize the button borders for a unique look.
    • Style – Choose from a variety of border styles to match your site’s theme.
    • Radius – Adjust the border radius for your buttons, available when a custom style is selected.

Position

Positioning controls allow for the strategic placement of your buttons on the page. Whether you want them fixed, floating, or aligned in a particular way, these settings provide the tools necessary to place your buttons exactly where you want them.

  • Placement – Decide where on the page your buttons will reside.
  • Floating Position – Specify the floating position of your buttons, an option that’s enabled when “Placement” is set to “floating”.
  • Alignment – Set the alignment for your buttons, ensuring they’re in harmony with your page layout.

Spacing

The ‘Spacing’ controls help you to fine-tune the layout of your Social Share Buttons, allowing for a clean and balanced look. You can adjust the vertical margins of the entire button container as well as the space between individual buttons for precise alignment and aesthetic appeal.

  • Container – Manage the vertical spacing around the button container for a tidy appearance.
    • Margin Top – Increase or decrease the space above your button container to fit your design needs.
    • Margin Bottom – Adjust the space below your button container to ensure visual harmony with surrounding elements.
  • Between Buttons – Define the space between buttons to prevent clutter and maintain a clear, organized look.