The Info Box feature in Frontis lets you add a box with an icon or image, a title, some text, and a button. It’s great for showing important info like services, features, or offers in a clean and eye-catching way.

Adding Frontis Info Box Block 

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

The Frontis menu bar interface will appear for you. Search for Frontis Info Box in the search box or select it from the menu bar.

After inserting the Frontis Info Box 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 (Basic, Style, Extra).

Basic section

• Presets Style: Presets Style means pre-designed styles for the Info box section. There are five options to choose from. Each one can be quickly applied and customized with just a click.
• Title: This feature allows you to add a Title to your info box. You may customize the Heading Tag (H1-H6, P, and Span) and Heading Alignment (Left, Center, and Right) here.
• Description: The Description Switcher lets you show or hide a description on your page. Just turn it on, and a box will appear where you can add your text. You can also change the text alignment from here.
• Button: Use the Button Switcher to show or hide a button. Add your text, adjust alignment, and optionally include an icon with customizable style and placement.

Style section

Image/ Icon: This feature lets you customize the icon size, icon color, background color, background height, and width.

• 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: This function lets you add the Border and customize the Border style, Border color, Border stroke, and Border radius of the button.

Title: The title section lets you customize the Typography, Text color, Padding, Margin, Border, Border style, Border color, and Border radius of the title.

Description: This section allows you to customize the Typography, Text color, Padding, and Margin of the description.

Button: In this section, you can customize the button’s typography, colors, padding, and margin. You can also add a border and adjust the border’s style, color, thickness, and radius for a more refined look.

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 also allows you to apply a box shadow to the  Info Box.

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.