How to use the Advanced Button block by Zoloblocks

  • BdThemes
  • How to use the Advanced Button block by Zoloblocks

Table Of Contents

How to use the Advanced Button block by Zoloblocks

This documentation provides comprehensive insights into the Advanced Button Blocks developed by Zoloblocks.

Adding a block to the editor

search and insert 9 - 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 Advanced Button 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. Here appears the Advanced Button block.
  3. After on the right side, Click on the Block. Then the Post Grid details appear.
  4. 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

general new 1 - BdThemes

In this section, you can make changes to a button layout.

  1. Styles: Click on the styles and the pre-made button styles will appear. you can select any of them.
  2. Button Alignment: Make the button align by following the icons ( Left, Center, Right, and Justify).

Content Section

Go to Basic > Content

content new - BdThemes

Follow this section to set button text and links, Which helps to navigate.

  1. Text: Enter the text of the button.
  2. URL: Set the URL of the button.
  3. Switcher: Activate the switcher ” Open in new tab “. which allows you to open a new tab.
Content icon status new - BdThemes

Now select any Icon Status ( No Icon, Icon & Text, and Icon only ).

  1. Icon & Text: Here select the icon & text which will show the Icon as we as text.
  2. Select Icon: Select the icon from the Icon Library of your preference by clicking on it.
  3. Position: It refers to the position of the icon. Select any of them ( Left, Right, Up, and Down).
content icon status new 2 - BdThemes
  1. Icon Size: Set the size of your icon that you prefer.
  2. Gap: Make space between the Text and 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.

Button Section

Go to Style > Button

button new - BdThemes

In the button section, we will make changes to this button.

  1. Typography: Refers to the style and appearance of text. Set the button typography.
  2. Border: Set the Border of the button.
  3. Border Radius: Make the border edges rounded.
  4. Padding: Make the inner space of the button. Unlink it and set four dimensions of Padding ( Top, Right, Bottom, Left).

Normal State Button Styling

button normal new - BdThemes

Set the button stylishly in the Normal state.

  1. Text Color: Set the text color for the button.
  2. Background: Make the Background of a button by following this.
button normal new 1 - BdThemes
  1. Box Shadow: Set button shadow.

Hover State Button Styling

button hover new - BdThemes
  1. Text Color: Set the text color for the button.
  2. Background: Make the Background of a button by following this.
button hover new 2 - BdThemes
  1. Box Shadow: Set button shadow.

Icon Section

Go to Style > Icon

icon new - BdThemes

In this section, we will make the icon stylish by following it.

  1. Border: Set Border for the Icon.
  2. Border Radius: Make the corner Round, Set by following this.
  3. Padding: Make the inner space of the button icon.

Normal State Icon Styling

icon normal new - BdThemes

Here you will get two states to change the button icon visible.

  1. Color: It refers to the Icon Color. Set Color.
  2. Background: It refers to the background of the icon. Set the color of it.
icon normal new 1 - BdThemes
  1. Box Shadow: Set the box shadow of the icon.

Hover State Icon Styling

icon hover new - BdThemes

You can set the Icon stylish on Hover State. Make changes that will be visible on Mouse Hovering.

  1. Color: Set the Color for the Icon.
  2. Background: Set the background of the Icon.
icon hover new 2 - BdThemes
  1. Box Shadow: Set the box shadow of the icon.

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 for learning more.

Check the demo page.

Thanks for being 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