The  Dual-Button block in Frontis lets you add two buttons side by side in one section. You can customize each button’s text, style, link, and appearance to guide users toward different actions.

Adding Frontis Dual Button Block 

To insert the Frontis Dual Button block, go to the page or post where you wish to add the Frontis Dual Button.. Then click on the + (plus) icon located at the top of the left side of the screen.

The Frontis menu bar interface will appear. Search for Frontis Dual Button in the search box or select it from the menu bar.

After inserting the dual button blocks, follow the steps below;

• Click on the Document Overview button, and you will be able to see the blocks list view on the right side.
• Click on the block; all the control tabs will show here (General, Style, Advanced).

Basic section

• Presets Style: The presets style refers to a pre-created dual button section in this context.. You can modify or personalize the dual button with a simple click. We offer five presets. You can choose any one of them.
• Text: Whatever you type in the Text section will appear as the button label on your site.
• URL: The URL feature in the Dual-Button block allows you to set a specific link for each button. 
• Text: Whatever you type in the Text section will appear as the button label on your site.
• Icon: The settings allow you to disable the icon, change the icon, icon position, and hide the button text according to your needs.
• Connector: This section provides a toggle to show or hide the connector. When the toggle is enabled, a text field will appear where you can enter the connector text. The text you enter will be displayed as the button connector on your site.

Style section

Style > Buttons

• Width: The width feature lets you customize your button’s width according to your work needs. 
• Directions: This feature gives you two options to align your button vertically and horizontally; you can choose any of them according to your work needs.
• Typography: In this section, you can change the button’s font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
• Padding: Padding lets you add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.
• Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.
• Gap: You can customise the gap between two buttons according to your work demands.

Buttons One and Two: In this section, you can change the button text color and background color. You can add a border and customize its color, style, thickness, and radius here.

Connector: You can customize the connector size, typography, text color, and background color in this section. You can also add a border and customize its color, style, thickness, and radius.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible:- The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area and adjust the border color and border radius. This option allows you to apply a box shadow to the dual button.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches allow you to show or hide the section on various devices.

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.