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.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.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.