This documentation provides comprehensive insights into the Social Share Blocks developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Social Links block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. After on the right side, Click on the Block. Then the advanced icon box details appear.
3. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

In this section, you can set the layout for the Social Share,

1. Presets: It’s a predefined design, Select any of them.
2. Type: Select the type of Social Links ( No Icon, Icon & Text, Only Icon ).

Layout Section

Go to Basic > Layout

Layout Flex

This section provides options to control the Layout,

1. Layout Type: Two types of layout ( Flex and Grid ) Here select the Flex.
2. Columns Gap: Set the column gaps.

Grid Layout

1. Layout Type: Select the layout Grid.
2. Column Number: Set the column number
3. Row Gap: Set the Gap between the Rows.
4. Column Gap: Set the gap between the columns.

Social Media

Go to Basic > Social Media

Add new social Media

1. Click on the plus icon to add a new social media item.

2. Then appears a new item. It shows the default items.

Remove Social Media

3. Click on the Bin icon to remove the relevant item.

Edit Content of Social Media

4. Click any social profile item and it will appear in the content editing area.

5. Select Media: There are several media, and you can select any of them. (e.g.: Facebook, Twitter, WhatsApp..)
6. Custom Label: Set the custom label for the selected media.
7. Link: Set the link for social items.

8. Open in new tab: Enable the switcher to open content in the tab.
9. HAS TAG: Set the #tag. Hashtags help users find and engage with posts on specific topics or themes by clicking on or searching for the hashtagged term.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Social Icons

Go to Style > Social Icons

This section provides controls to customize the social icons,

1. Typography: Set the typography for the social icons text.
2. Icon Size: Set the size for the icon.
3. Icon-Text-Gap: Set the gap between the icon and text.

4. Border: Set the border for social media.
5. Border Radius: Set the border radius for the corner edges rounded.
6. Padding: Set the inner space of the social links to single items.

Color Type > Original

7. Color Type: Set the color type of the Original. It will show the original color of the icon items.

Color Type > Custom

7. Color Type: Set the color type of the Custom. There will be several options to customize.

Normal State of Custom

8. Color: Set the Color of the text.
9. Background: Set the background color for items.
10. Box Shadow: Set box shadow for the items.

Hover State of Custom

11. Color: Set the color for the text.
12. Background: Set the background for the Items.
13. Border Color: Set border color.
14. Box Shadow: Set the box shadow for the items.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial Coming Soon! Check the demo page.

Thanks in advance.