Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

Table Of Contents

How to use Advance Icon Box blocks by Zoloblocks

This documentation provides comprehensive insights into the Advance Icon Box 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 Advanced Icon Box blocks 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( 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

This section provides the controls of the Advanced Icon Box,

  1. Presets: It’s a predefined design, Select any of them.
  2. Show Icon: Enable it to show the icon.
  3. Show Heading: Enable this for showing the Heading.
  4. Show Description: Enable this to show the description of the Advance Icon box.
  1. Show Button Icon: Enable this switcher to show the button icon.
  2. Use Link as Global: Disable this switcher will only work with the Read More button link.
  3. Content Alignment: Set alignment of the Content ( Left, Center, Right ).
  1. Use Link as Global: Enable this, will make the whole content a button. Can click anywhere in the content area.

Now it’s working as a button, You can see the text underline which referes as a link.

Content Section

Go to Basic > Content

In this section, Provides controls to set the content,

  1. Icon Type: Select any ( Image or Icon), Here Icon Selected.
  2. Select Icon: Select Icon from the Icon library.
  3. Title: Set the Title for this content.
  1. Description: Set the description for the Advanced icon box.
  2. Button Text: Set the label for the button.
  3. Button URL: Set the URL for the button.
  4. Open in new tab: Enable this switcher will open a new tab.

Button Icon

Go to Basic > Button Icon

This section will provide the options for icons,

  1. Select Icon: Select the icon from the Icon library for this button.
  2. Position: Set the position ( Left, Right, Up, Down ) of the Icon.

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.

Item Section

Go to Style > Item

This section provides the control of an item,

  1. Border: Set the border for the Item.
  2. Border Radius: Make border corner egdes rounded.
  3. Margin: Set Outter spacing for Item.
  4. Padding: Set the inner space of item.

Normal State of Item

  1. Background: Set the background for the Item in normal state.
  2. Box Shadow: Set the Box shadow of the item in normal state.

Hover State of Item

  1. Background: Set the Background of item for the hover state.
  2. Box Shadow: Set the Box Shadow of item for the hover state.

Icon Section

Go to Style > Icon

In this section, you can set the Icon more stylish by following the controls,

  1. Icon Size: Set the size of the Icon.
  2. Border: Set the border radius.
  3. Border Radius: Set the border corner edges rounded.
  4. Margin: Set the margin of icon for outter space.
  5. Padding: Set the inner space for item.

Normal State of Icon

  1. Color: Set the color of Icon.
  2. Background: Set the backround of Icon.
  3. Box Shadow: Make the shadow of the Box.

Hover State of Icon

  1. Color: Set the icon color for hover state.
  2. Background: Set the background for hover state.
  3. Box Shadow: Make the shadow of the icon box for hover state.

Title Section

Go to Style > Title

In this section, You can set the Title stylish by following it.

  1. Title Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
  2. Typography: Set the typography for the Title.
  3. Margin: Set the margin of the Title.
  4. Text Shadow: It makes the shadow for Title.

Normal State of Title

  1. Color: Set the color of Title.
  1. Color: Set the color of Title for hover state.

Description Section

Go to Style > Description

This section proives control to customize the Descriptions.

  1. Typogrphy: Set the Typography for the description.
  2. Magin: Set margin of the description.
  1. Color: Set the color for description.
  1. Color: Set the Description color for hover state.

Button Section

Go to Style > Button

In the button section, you can make the button more stylish by using,

  1. Typography: Set the typography of the button.
  2. Border: Set the border of button.
  3. Border Radius: Make the border corner edges rounded.
  4. Margin: Set margin for outter of button.
  5. Padding: Set padding of the button for inner space.

Normal State of Button

  1. Color: Set the color for the button.
  2. Background: Set the background for the button.
  3. Box Shadow: Set box shadow of button.

Hover State of Button

  1. Color: Set the color of the button for hover state.
  2. Background: Set the background for hover state.
  3. Box Shadow: Set the box shadow for hover state.

Button Icon Section

Go to Style > Button Icon

This section provides controls of button icon.

  1. Icon Size: Set the icon size.
  2. Gap: Make space between of text and button.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Details Coming Soon!

Video Assist

Video Tutorial Coming Soon!

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.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge