The Frontis Icon Box block lets you add boxes with icons, titles, and text to your site. It’s great for showing off services, features, or benefits on your website.

Adding Frontis Icon Box Block 

To insert the Icon Box block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display.

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

After inserting the Icon 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

• Preset Style: The preset style refers to a pre-designed Icon Box section. You can easily customize it with a simple click. We offer five presets for you to choose from.
• Icon/Image: This feature lets you change the icon, icon position (top, right, left, bottom), alignment (left, center, right) according to your needs.

• Title: You can easily set the title’s alignment (left, right, or center) and choose a tag such as h1–h6, paragraph, or span—whichever works best for your layout. To customize the heading text in this area, simply add any text in the heading section that will show in the icon box title.
• Description: The description is a short text that explains the feature clearly. You can add any text here, and that will be shown in the Icon box description. Enable the “Show Description” toggle to show the alignment and subheading customization option.

• Button: This section allows you to add a button and customize the Alignment, button text. To show the button, simply enable the show icon toggle. Here, you can change or customize the icon and icon position.

style section

List gap: You can customize the list gap as you wish, but you must leave a value in it; otherwise, this feature won’t work properly.

Icon section

• Icon color: The icon color section lets you customize the icon color and background color. You can customize the icon color as you wish
• Icon Size: This feature lets you customize the icon size. You can customize the icon size as you wish.
• Background color: The background color feature allows you to change the background color.
• Padding: Padding adds space inside the element, around the content. You can also adjust padding individually on each side. Click on the Link icon and add or reduce the padding on any side you want.
• Margin: Margin controls the space outside the element, helping to adjust its position on the canvas. You can add a margin to all sides or just one. Use the Link icon to manage each side separately.
• Icon Border: You can also add a border and customize the border style, border color, stroke, and radius of the Icon here.
• Box shadow: The box shadow is usually used to create the shadow around the element. It has four values: Horizontal offset (X), Vertical offset (Y), Blur, and Spread. You can also change the text shadow color from here.

Style > Image Sectoin

• Width and height: Here, you can adjust the width and height of the image.
• Border: In this section, you can add a border to the image area and adjust the border color, border size, and border radius. If you don’t want a border, simply select the “None” option.

Title section: This feature lets you customize the typography and typography color. You can also add a margin here.

Description section: Customize the text style and color to match your design. It’s also possible to add a margin around the description for better spacing.

Background Color: To change the background color of the Feature List, select the section and choose either a solid or gradient color.

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 value on any side you want.

Border and Shadow: Here, you can place a border around the entire area and adjust the border color and border radius. It also allows you to apply a box shadow to the Feature List.

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 you can adjust the border color and border radius using this option. This option allows you to apply a box shadow to the countdown block.

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.