How to use the Advance Button block by Zoloblocks

This documentation provides comprehensive insights into the Advance Button 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 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( 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 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

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.

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

4. Icon & Text: Here select the icon & text which will show the Icon as we as text.
5. Select Icon: Select the icon from the Icon Library of your preference by clicking on it.
6. Position: It refers to the position of the icon. Select any of them ( Left, Right, Up, and Down).

7. Icon Size: Set the size of your icon that you prefer.
8. 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

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

Set the button stylishly in the Normal state.

5. Text Color: Set the text color for the button.
6. Background: Make the Background of a button by following this.

7. Box Shadow: Set button shadow.

Hover State Button Styling

8. Text Color: Set the text color for the button.
9. Background: Make the Background of a button by following this.

10. Box Shadow: Set button shadow.

Icon Section

Go to Style > Icon

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

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

4. Color: It refers to the Icon Color. Set Color.
5. Background: It refers to the background of the icon. Set the color of it.

6. Box Shadow: Set the box shadow of the icon.

Hover State Icon Styling

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

7. Color: Set the Color for the Icon.
8. Background: Set the background of the Icon.

9. 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!