Add attractive call to action buttons within a block with the Gutenberg Multi Buttons block. Using this multi buttons block you can add many buttons to your content.
How To Add The Multi Buttons Block
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Multi Buttons or you can search for it if it doesnโt pop up quickly for you.
- 2.By default, you’ll get two buttons.
%20(1).png?alt=media&token=6ab36b10-b582-44ed-9e15-7df82c8efe74)
How To Configure Parent Block
General
Under the General tab, you can select the button alignment as left, right, or center. Stack on – Choose the breakpoint on which the buttons will stack.
%20(1).png?alt=media&token=91de41c9-8a26-4384-a260-aefd5639ce7f)
How To Configure Child Block
Button Settings
Inherit from theme – Enabling this option will apply the styles of the theme to the button.
Open link in new tab – Here you will get the option to open the link in a new tab.
Hover Effect: Select the effect as lift, scale, lift & scale, scale more, and lift & scale more. You will see this effect when you bring the cursor on the button.
%20(1).png?alt=media&token=0e530d8b-d5ff-406c-a3a8-b72e4e4e0e19)
How To Style The Multi Buttons Block
Switch to the โStyleโ tab to customize every element of the Multi Button block.
If you have enabled the ‘Inherit from theme‘ option, you’ll not see style settings like ‘Color Settings’, ‘Background’, ‘Border’, ‘Button Typography’, and ‘Box Shadow’.
Color Settings – Under this tab, color options are available for Text and Border. You can also choose the color as transparent. You can set the opacity of the text color.
%20(1).png?alt=media&token=6cb5acb1-f684-401d-8702-b4531000b1f5)
Background – Select background type from here. This dropdown has two options:
- 1.Color
- 2.Gradient
%20(1).png?alt=media&token=b8a7bd03-386e-4cf6-b8be-65f8d9a41025)
Border: The following settings are available in the border panel – Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it
Thickness – You can set the thickness of the border from here.
Rounded Corners – You can give border-radius to the buttons from here.
%20(1).png?alt=media&token=3bae3c7f-81b9-43a7-838b-ce85baa75f89)
Spacing
Spacing tab offer options to customize the button padding and margin separately for Vertical and Horizontal. You can set different spacing for mobile and tablet view.
%20(1).png?alt=media&token=c080f7ac-d6dc-477c-bea9-aeea6d819742)
Icon Settings
Select an icon to display on the button from here.
Select Position: You can display the icon after or before the text.
Icon Size – Increase or decrease the size of the icon from here.
Icon Spacing – Increase or decrease the spacing between icon and text from here.
Icon Color – Choose a color for the icon from here.
Icon Hover Color – Choose a color for the icon when an icon is hovered.
%20(1).png?alt=media&token=2b0f70cb-46de-4409-acb1-3d4b850dcbed)
Button Typography
Under this tab, options for font family, font size, font weight and line-height are available for Button.
%20(1).png?alt=media&token=f756aaed-0364-44bd-adc3-fe2f3c7326f3)
Box Shadow
You can give a box shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
