Pricing Table Block

The pricing table Gutenberg block allows you to create a table with pricing information for different products or services.

1. How to add Pricing Table Block? #

To add the Pricing Table Block in your Gutenberg editor first click on (+) icon then in the search box type “Pricing Table Block” and you will see the “Pricing Table” block.

After inserting the “Pricing Table” block you will get the default look like below. Now you need to change the preset and other settings.

2. General Settings #

The General settings tab has the preset option and Title, description and button text and URL options. The General settings panel properties are as follows.

• Presets: From our pre-defined presets you can select which style you like.
• General: You can set title text enable description and content alignment.
• Icon/ Image: You can add an icon/ image or not

• Pricing: Set original price and Sale price with currency, currency position, unit and separator.

• Features: Set a common icon for all features lists, Set alignment then can add an individual feature list with an individual icon.

• Button: You can enable the button to make it link, set the button text and button URL also link property with the button icon.
• Barge: You can enable badge with some pre-defined style and can set badge text and badge position.

3. Style Settings #

From the Styles settings tab, you can set all possible styles like typography, color, margin, background and other style settings.

• Header: You can set Header Background Color, Padding, Margin, Title Typography and color also Description Typography, color and margin.

Price Style as follows #

• Price: You can set price Typography, price color, currency Typography and currency position. Also set price wrap margin
• Original Price: You can set the Original price of Typography like font family, size, line height also color and margin.
• Unit: You can set Unit Typography like Font Family, size, line height also color and margin.
• Discount Message: You can set the Discount Message Typography like Font Family, Font Size, and line height. Also, background color and margin.

Feature styles are as follows

• Typography: You can set Font Family, Font Size, Font weight and Line Height.
• Item to Item Gap: You can set Item to Item spacing.
• Icon: Can set the icon color, icon size, icon gap also wrapper margin, and padding.

Button Style #

• Typography: You can set Button Typography like Font Family, Font Size, Font Weight and line height.
• Text Color: You can set the Text color and Text hover color.
• Padding: Set button padding
• Button Wrap Margin: You can set the button Wrap margin
• Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
• Border: You can set the default border or hover border with different border styles and also can set border-radius.
• BoxShadow: You can set box shadow for normal and hover styles.

Badge Style #

• Typography: You can set Button Typography like Font Family, Font Size, Font Weight and line height.
• Text Color: You can set the Text color and Text hover color.
• Background: Set flat background color or gradient color.