Pricing Table – Responsive Blocks

Showcase responsive pricing tables with a comparison of features and your various membership options. It allows adding item names, images, descriptions, and prices.

How To Add The Pricing Table Block

1. 1.Open a page or a post and click on the plus icon to add a new block and look for the Pricing Table or you can search for it if it doesn’t pop up quickly for you.
2. 2.By default, you’ll get the below design-

How To Configure The Pricing Table Block

To configure the content of your Pricing Table, switch to the ‘Content’ tab.

General

• Number of Pricing Tables: Increase or decrease the number of tables to display.
• Gutter: Set space between the blocks with this setting.
• Alignment: You can choose alignment for content in the block.
• Image: Hide or Display the image.
• Title: Hide or Display the title.
• Price Prefix: Hide or Display prefix of the price.
• Price: Hide or Display the price.
• Price Suffix: Hide or Display the suffix of the price.
• Sub Price: Hide or Display the sub-price.
• Features: Hide or Display the features of the block.
• Button: Hide or Display the button in the block.

Image

• Image Shape: Select the style of image as square, circle, or normal.
• Image Size: Select a size for the image as full, medium, large, or thumbnail.
• Image Width: Select the width for the image.

Button Settings

• Open in a new tab: Choose to open the link in a new tab.
• Horizontal Padding: Set padding to increase the width of the button.
• Vertical Padding: Set padding to increase the height of the button.
• Border Settings: Choose border styles such as border radius, border width, border color for the button under this section.
• You can also choose normal and hover color settings for text color & background color/gradient for the button.

Column Background

You can choose a background type for tables from here. You can select an image, color, or gradient as the background from here.

How To Style The Pricing Table Block

Switch to the ‘Style’ tab to customize every element of the Pricing Table block.

Typography

Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Title, Price, Sub Price, Features, and CTA.

Border

• Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
• Border Width: Set a width for the border from here.
• Border Color: You can give color to the border from here.
• Border Radius: You can give border-radius to the box from here.
• Box Shadow: You can give box shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.

Spacing

The Spacing tab offers options to customize the Block Spacing, Column Spacing, and bottom margins for Title, Price, Sub price, Button, & Features.

• Block Spacing: You can set top, bottom, left & right padding for pricing table block from here.
• Column Spacing: You can set top, bottom, left & right padding for individual columns from here.

Color Settings

Under the Colors tab, color options are available for Text, Title, Price Prefix, Price, Price Suffix, Sub Price & Features.