Social Share

Social share block allows you to add modern social media icons for all popular networks and link them to the brand or personal accounts.

How To Add The Social Share Block #

1. 1.Open a page or a post and click on the plus icon to add a new block and look for the Social Share or you can search for it if it doesn’t pop up quickly for you.
2. 2.By default, you’ll get icons for social media platforms like- Facebook, Twitter, Linkedin, and Youtube.

How To Configure The Social Share Block #

To configure any social icon, click on it and a popup will appear to set Icon, URL, Label, etc.

• Search – Enter the name of the icon in the input field to search.
• Icon – Select and change the icon for the social share button.
• URL – Enter the target URL for the social share button.
• Label – Enter the text to be displayed as a label for the social share button.
• Open in new tab – Toggle button to open the target URL of the button in the same tab or new tab.
• Save – To save the Button UI settings and close the panel.
• Remove – To remove the selected social share button from the list.

Switch to the ‘Content’ tab to configure the block.

Share Buttons #

• Skin – Select the look of social share buttons as Default, Flat, Framed, Minimal, or Boxed Icon.
• Shape – Select the shape of the button as Square, Rounded, or Circle when the “Skin” type is selected as Flat, Framed, or Boxed Icon.
• Columns – Select the number of columns for social share buttons to be divided into.
• View – Select the view of the social share buttons as Icon & Text, Icon, or Text.
• Alignment – Select the alignment of the social share buttons as Left, Center, or Right aligned.

How To Style The Social Share Block #

Under the Style Tab, various style settings for Columns, Rows, Icon Size, Padding, Color and Label Typography for the Social Share block are available.

Columns Gap – Adjust the gap between the columns of social share buttons. Rows Gap – Adjust the gap between the rows of social share buttons. Icon Label Gap – Adjust the gap between the icon and label of the social share button. Icon Size – Adjust the size of the icon inside the social share button.

Padding #

Horizontal Padding – Adjust the horizontal padding of the social share button. Vertical Padding – Adjust the vertical padding of the social share button.

Color #

• Color – Select the color type for the social share button as ‘Official’ or ‘Custom’.
• Primary – Select the primary color for the social share button (not available for the color type selected as Official).
• Secondary – Select the secondary color for the social share button (not available for the color type selected as Official).
• Label – Select the label color for the social share button.

Label Typography #

• Font Family – Select the font family for the label of the social share button.
• Font Size – Adjust the font size for the label of the social share button.
• Font Weight – Select the font weight for the label of the social share button.
• Line Height – Adjust the line height for the label of the social share button.

Advanced #

Under the Advanced Tab, padding , margin, border settings and default advanced settings for the Social Share block are available.

Padding #

• Top – Adjust the top padding of the social share buttons container.
• Bottom – Adjust the bottom padding of the social share buttons container.
• Left – Adjust the left padding of the social share buttons container.
• Right – Adjust the right padding of the social share buttons container.

Margin #

• Top – Adjust the top margin of the social share buttons container.
• Bottom – Adjust the bottom margin of the social share buttons container.
• Left – Adjust the left margin of the social share buttons container.
• Right – Adjust the right margin of the social share buttons container.

Border Settings

• Border Style – Select the border style for the social share buttons container.
• Border Width – Adjust the border width for the social share buttons container.
• Border Radius – Adjust the border-radius for the social share buttons container.
• Border Color – Select the border color for the social share buttons container.
• Box Shadow – Adjust the box-shadow effect for the social share buttons container.

Background

• Background Color – Select the background color for the social share buttons container.
• Opacity – Adjust the opacity of the background color for the social share buttons container.

Advanced Z-index – Adjust the z-index property value for the social share buttons container.