The Pricing Table block in Frontis helps you show different plans with prices and features in a clear layout.

Adding Frontis Pricing Table Block 

To insert the Pricing Table 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  Pricing Table block in the search box or select it from the menu bar.

After inserting the  Pricing Table 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

Display top section: To add the top section, simply enable the “Display Top Section” switcher, and the top text section will appear. Add any text that will be shown at the top of the pricing table.

• Icon: The settings allow you to disable or change the icon, according to your needs.

• Title: The settings allow you to add a title in the pricing table. Add text in the title box, which will be shown as a title in the pricing table.
• Subtitle: To add a subtitle, enable the “show subtitle” toggle. A subtitle box will appear. Add any text here that will show as a subtitle

General > Price 

• Price: The price in the pricing table lets you set and display the cost of each plan or package.
• Sale price: To add a sale price, enable the “Sale Price” button and add a value in it.
• Currency: This section lets you add a currency icon for your pricing table.

• Currency Position: This feature lets you customize the position of the currency icon.
• Separator: In this section, you can customise the separator according to your work needs.
• Period: Here, you can set a duration for each plan or package.
• Text switcher: To add text in the pricing table, enable the “Text Switcher.” 

Features: Enable the “Show Feature” and “Show Icon” toggles to show the feature in the pricing table. You can add a title or icon to each feature item. To add a feature, click on the Add feature button. To remove the feature item, click on the trash icon.

Button: Enable the button switcher to show the button in the pricing table. 

• Button text: You can add any text here, and that will be shown in the button text description.
• Icon: This feature lets you show or hide the icon. Here, you can change the icon or icon position (left or right).

Style section

Style > Top Section

• 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.
• Border:  This section lets you add the Border and customize the Border style, Border color, Border stroke, and Border radius of the counter number.
• Background Color: This feature lets you change the color of your Background.

• Typography: You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
• Text Color: This feature lets you change the color of your top section text. 
• 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.

Style > Header

• Background Color: This feature lets you change the color of your Background.
• 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.
•  Border:  This section lets you add the Border and customize the Border style, Border color, Border stroke, and Border radius of the counter number.

Style >Icon

• Position: This feature lets you customize the position of the icon. Simply enable the “Position” switch and customize the position (top or left) according to your needs.
• Icon Size: Here you can customise the icon size as you need.
• Background Color and Size: This feature lets you change the icon’s background color and also adjust the icon’s size.
• Background Color: This feature lets you change the color of your Background.
• Border:  This section lets you add the Border and customize the Border style, Border color, Border stroke, and Border radius of the counter number.

Title: You can easily set the title’s alignment (left, right, or center) and pick a tag like H1–H6, paragraph, or span, whatever works for your layout. You can also customize the typography.

Subtitle: Here you can change the HTML tag like H1–H6, paragraph, or span, and customize the typography.

Style > Price

• Alignment: This feature allows you to change the alignment of the price section to Left, Center, and Right.
• Typography: Here,  you can change the normal price, sale price, currency, and period typography. You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
• Text Color: This feature lets you change the normal price, sale price, currency, and period typography 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 on any side you want.

Style > Price Text

• Typography: You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here
• Text Color: This feature lets you change the price after text color. 
• Background Color: This feature lets you change the background color of the “Price After Text” section.
• 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.
• Border:  This section lets you add the Border and customize the Border style, Border color, Border stroke, and Border radius of the counter number.

Style > Feature

• Alignment: This feature allows you to change the alignment of the feature section to Left, Center, and Right.
• Feature Icon Color: This section allows you to change the icon color, customize the icon size and typography, and adjust item padding, margin, and borders.
• 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.
• Feature after text: Here you can customize the typography and text color. 

Style >Button

• Alignment: This feature allows you to change the alignment of the button section to Left, Center, and Right.
• Button Width: Here, you can customize the button width according to your needs.
• Background Color: This feature lets you change the background of the button.
• 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 section lets you add the Border and customize the Border style, Border color, Border stroke, and Border radius of the counter number.
• Icon: This feature lets you customize the icon color, icon size, and icon spacing according to your work needs.

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 pricing table block.

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

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