Table of Contents
To add dual action we need dual button
1. How to add Dual Button Block? #
To add the Dual Button Block in your Gutenberg editor first click on (+) icon then in the search box type “Dual Button” and you will see the “Dual Button” block.
After inserting the “Dual Button” block you will get the default look like below. Now you need to change the preset and other settings.
2. General Settings #
The General settings tab has the Preset option and counter settings number settings option. The General settings panel properties are as follows.
- Presets: From our pre-defined presets you can select which style you like.
- Button One: You can add button text and button URL. Also can enable the button icon with the icon position left or right.
- Button Two: You can add button text and button URL. Also can enable the button icon with the icon position left or right.
- Buttons: You can set the buttons link property to open new window, add no follow, Buttons alignment, width, button Gap and icon with icon position.
- Connector: You can enable two buttons connector, Connector type text or icon and connector size.
3. Style Settings #
From the Styles settings tab, you can set all possible styles typography, color, padding, background, and other style settings.
- Typography: Set Buttons typography like font family, font size, font weight, line height and padding
- Buton One: You can set button Test Color, Text hover color, Icon color, hover icon color.
- Button One => Background: You can set normal or hover background color also can set gradient style background.
- Button One => Border: You can set normal and hover border style and border-radius.
- Button One => BoxShadow: You can set the box-shadow for normal and hover styles.
- Buton Two: You can set the button Test Color, Text hover color, Icon color, hover icon color.
- Button Two => Background: You can set normal or hover background color also can set gradient style background.
- Button Two => Border: You can set normal and hover border style and border-radius.
- Button Two => BoxShadow: You can set the box-shadow for normal and hover styles.
The Connector style settings are as follows. #
- Typography: Set Connector typography like font family, font size, font weight, line height and padding.
- Background Color: you can set the background color.
- Text/ Icon Color: you can set the txt or icon color.
- Border: You can set the border style, border color, border width and border radius radius.
4. Advanced Settings #
From the advanced settings tab, you can control the Margin, and hover effect style.
- Margin: Set the margin of the buttons
- Hover Effect: Set the hover effect of the buttons
- Icon Hover Effect: You can set the icon hover effect from left to right or right to left and others
- Transition: You can set the transaction time of the hover effect.
5. Final Outcome #
Here is the final outcome of the Dual Button Block
