Comment on page
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.
- 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.By default, you'll get icons for social media platforms like- Facebook, Twitter, Linkedin, and Youtube.
.png?alt=media&token=b1a3e9b4-c889-4f78-a96b-71d95010ab33)
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.
.png?alt=media&token=d0723ab8-bb41-4a43-963f-3d60ecc334f5)
Switch to the 'Content' tab to configure the block.
- 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.
.png?alt=media&token=f655dc49-3530-44f1-8e97-c7b329c9bbc7)
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.
.png?alt=media&token=5609248d-8e92-4927-9680-70d02d1fff1d)
Horizontal Padding - Adjust the horizontal padding of the social share button.
Vertical Padding - Adjust the vertical padding of the social share button.
.png?alt=media&token=8c2abe6b-46f1-4b9a-85f5-bea6530e1ca8)
- 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.
.png?alt=media&token=0bed1b9c-7fc5-4c60-a795-44fa13be30fe)
- 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.
.png?alt=media&token=318fefd6-9883-4257-b363-6a528f8f76a0)
Under the Advanced Tab, padding , margin, border settings and default advanced settings for the Social Share block are available.
- 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.
.png?alt=media&token=82663e2a-b24c-4ccd-8f7f-f78f7777c967)
- 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.
.png?alt=media&token=a08a8541-1f81-4eb8-a2e1-e0f412304351)
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.
.png?alt=media&token=20c1c9ed-e9a9-4335-b464-3f1825ad7e91)
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.
.png?alt=media&token=fa646c4d-3633-4019-9dea-2e501db04596)
Advanced
Z-index - Adjust the z-index property value for the social share buttons container.
.png?alt=media&token=bf735841-76c1-43bb-bd22-c0b70c6228dd)
Last modified 2yr ago