Skip to content

Social Share

The Social Share module adds a row or column of share buttons to your page. Each button opens the share dialog of one network for the page or post it sits on. It shares that page's link and title.

Add the Social Share module

Add a section

  1. Open your page and click Enable Visual Builder.
  2. Click Add New Section, then choose a row layout.

Add the module

  1. Click the plus icon to add a new module.
  2. Search for "Social Share" and select it.

Add buttons

Each button is a child module named Sharing Item. Click Add New Item to add another button. For each Sharing Item:

  • Network Type: X, Facebook, Messenger, Pinterest, LinkedIn, WhatsApp, Viber, Tumblr, Reddit, Email, VK or Telegram. The default is X.
  • Facebook App ID: Required for Messenger sharing. Create an app in the Facebook developer dashboard.
  • Share Text: The label on the button. If empty, it shows the network name followed by "Share".

Email opens the visitor's mail app with the page title as the subject and the link in the message. The other networks open the share page of that network.

Content

Settings

  • Placement: Horizontal or Vertical. The default is Horizontal.
  • Layout: Classic or Modern. The default is Modern. Classic is a flat button. Modern shows an icon block next to a label.
  • Display Type: Block or Inline Block. This controls how vertical buttons fill the width.
  • Show Icon: On by default.
  • Show Icon Arrow: Shows an arrow shape on the icon block in the Modern layout.
  • Icon Placement: Left, Center or Right.
  • Content Alignment: Left, Center or Right. It applies to the Classic layout.
  • Show Share Text: On by default.
  • Buttons Per Row: The number of buttons per row in the horizontal placement.
  • Buttons Alignment: Left, Center or Right. The default is Left.
  • Button Spacing: The space between buttons. The default is 5px.

Design

The Design tab has these groups: Button, Button Background, Button Border & Shadow, Icon, Icon Border & Shadow and Share Text.

  • Button: Button padding.
  • Icon: Icon Spacing Gap, Arrow Color, Color, Size, Wrapper Height, Wrapper Width, Background Color and Padding. Wrapper Height and Wrapper Width apply to the icon block in the Modern layout.

Each Sharing Item also has its own Icon, Icon Border & Shadow, Button and Share Text groups, so you can style one button differently.