How to use the Static Social Count block by Zoloblocks

  • BdThemes
  • How to use the Static Social Count block by Zoloblocks

Table Of Contents

How to use the Static Social Count block by Zoloblocks

This documentation provides comprehensive insights into the Social Count Block developed by Zoloblocks.

Adding a block to the editor

search and insert - BdThemes
  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 Count block name.
  3. Then select the appear blocks ( with zoloblocks logo T.R corner).
  4. After Drag and Drop it on the page.
list view and controls - BdThemes

After Inserting the blocks, Follow this.

  • Click on the Document Overviewer button and the Blocks list view will appear.
  • Here appears the Social Count block.
  • After on the right side, Click on the Block. Then the Static Social Count details appear.
  • Here shows all the control tabs( BasicStyleExtra ) 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

general - BdThemes

Set the presets for the social count,

  1. Presets: Select the presets for the social count. Ready made styles are available for it.

Grid Section

Go to Basic > Grid

Grid - BdThemes

Customize the grid section,

  1. Column: Set the column for the grids.
  2. Gap: Set the gap between the items.

Social Profiles Section

Go to Basic > Social Profiles

Add social profiles Item

Social profiles add item - BdThemes
  1. Click on the “ + ” icon to add new social profiles items. Add as many you need.

Eid Social Profiles Items

Content
Social profiles 2 content - BdThemes
  1. Select any Item and click on the ” ^ ” icon and it will toggle and open the items to customize.
  2. Label: Set label for the social profiles.
  3. Select Icon: Select the icon from the icon library.
  4. Link: Set the link for the items.
Social profiles 3 content - BdThemes
  1. Counter: Set the counter number to display.
  2. Meta: Set the Meta for the items.
Style
Normal Style
sp style normal - BdThemes
  1. Background: Set the background for the item.
  2. Color: Set the color for Icon.
  3. Background: Set the background for the icon.
  4. Border: Set the border color.
sp style normal 2 - BdThemes
  1. Color: Set the color for the Counter.
  2. Color: Set the color for the Meta.
Hover Style

The changes will appear on mouse hover,

sp style hover - BdThemes
  1. Background: Set the background for the item.
  2. Color: Set the color for Icon.
  3. Background: Set the background for the icon.
  4. Border: Set the border color.
sp style hover 2 - BdThemes
  1. Color: Set the color for the Counter.
  2. Color: Set the color for the Meta.

Remove Social Profile Items

social profiles delete item - BdThemes
  1. Hover over the social profiles items and the ” Bin ” icon will appear, Click on it and remove the item.

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.

Items Section

Go to Style > Items

Normal Tab for Items

items normal - BdThemes

Make the items section style by following,

  1. Background: Set the background for the items.
  2. Border: Set the border for the items.
  3. Border Radius: Make the border radius for the items.
items normal 2 - BdThemes
  1. Padding: Set the padding for the items.
  2. Box Shadow: Make the box shadow.

Hover Tab for Items

items hover - BdThemes

Make changes for the items for mouse hover over,

  1. Background: Set the background color for the hover items.
  2. Border Color: Make the border color.
  3. Box Shadow: Make box shadow for the items.

Icon Section

Go to Style > Icon

Normal State for Icon

Icon normal - BdThemes

Make the Icon stylish by following,

  1. Color: Set the color for the icon.
  2. Background: Set the background for the icon.
  3. Border: Set the border for it.
  4. Border Radius: Make the border radius.
Icon normal 2 - BdThemes
  1. Padding: Set the padding for the icon.
  2. Size: Set the Icon size.
  3. Spacing: Set the space for the Icon.

Hover State for Icon

Icon hover - BdThemes
  1. Hover Color: Set the hover color for the icon.
  2. Background: Set the background for the icon.
  3. Hover Border Color: Set the hover border color.

Counter Section

Go to Style > Counter

Normal State for Counter

counter normal - BdThemes
  1. Typography: Set the typography for the counter.
  2. Color: Set the color for the counter.
  3. Bottom Spacing: Set the bottom spacing from counter.

Hover State for Counter

counter hover - BdThemes
  1. Color: Set the color for the counter.

Meta Section

Go to Style > Meta

Normal State for Meta

meta normal - BdThemes
  1. Typography: Set the typography for the meta.
  2. Color: Set the color for the meta.

Hover State for Meta

meta hover - BdThemes
  1. Color: Set the color for the Meta

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 is coming soon!
Please visit the demo page for examples.

Thanks for staying with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge