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-
%20(1).png?alt=media&token=0765e8b5-af6c-49d0-a81b-deb4a0c75df0)
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.
%20(1).png?alt=media&token=b1dfa81a-9ce4-427a-a4bc-80c8c4939cb9)
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.
%20(1).png?alt=media&token=edc7b2d2-d99c-418c-ad3b-6be2c205dced)
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.
%20(1).png?alt=media&token=a7c1c70d-084f-44b1-b1c0-dc8ac884ac6c)
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.
%20(1).png?alt=media&token=510a5ba2-ca42-40c8-8ad6-5314170313a3)
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.
%20(1).png?alt=media&token=6bf2920e-af4d-40ab-9d16-8bf94556aa09)
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.
%20(1).png?alt=media&token=1734c040-4963-48d6-a0ec-67a2b2a223c6)
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.
.png?alt=media&token=d176fe38-f90d-48dc-894d-dfa1e418d8ba)
Color Settings #
Under the Colors tab, color options are available for Text, Title, Price Prefix, Price, Price Suffix, Sub Price & Features.
