How to use Social Links blocks by Zoloblocks

This documentation provides comprehensive insights into the Social Links 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 Links,

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 Profiles

Go to Basic > Social Profiles

Add new social profiles

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

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

Remove Social Profiles

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

Edit Content of Social Profiles

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

5. Title: Set the title for the profile item.
6. Select Icon: Set the social Icon.
7. Link: Set the link.
8. Open in new tab: Enable the switcher to open content in the tab.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects 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 links text.
2. Gap: Set the gap between the icon and the text.
3. Border Radius: Set the border radius for the corner edges rounded.
4. Padding: Set the inner space of the social links as single items.

Color Type > Original

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

Color Type > Custom

5. Color Type: Set the color type for the Custom, There will appear several options to customize.

Normal State of Custom

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

Hover State of Custom

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

Note: All the changes will apply to all of the social links individually.

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 for being with us!