Pricing Table

Pricing Table

Pricing Table is a card which shows the price and features of the service or product.

It plays an important role for each company that offers a product or a service, they are challenge for both usability and design standpoint perspective. Design must be simple but at the same time there should be clarity between features and prices of different products and services.

Pro tip
Put a buy now button right below the pricing and don’t give a time to user to even think about the purchase.

Configuration for Pricing Table

Wherever money is involved, definitely you have to adapt and shape the design in order to achieve the primary goal of purchase. Go with “Less is More” approach.

How to use the Pricing Table Block of The Plus Addons For Gutenberg

The Pricing Table block comes in three different layouts. You can create a pleasant-looking layout using a customized style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Pricing Table into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Pricing Table after “/” sign, eg.“/Pricing Table”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Style

Layout

Select your preferred layout for Pricing Table here.

Title Area

Title Layout

Select title layout style from this drop down.

Title

Drop a suitable title for pricing table in here.

Sub Title

Drop a suitable sub title for pricing table in here.

Icon Type

Icon type is a selection of whether you want an icon or image or not.

Select Icon

You can select the icon.

Upload Image

You can upload the image.

Image Size

You can set the image size.

Price Area

Price Layout

Select price layout style from this drop down.

Prefix Text

Add a prefix text for the price. Mostly it’s a currency symbol.

Price Amount

Drop a price for the product / service in here.

Postfix Text

Add a prefix text for the price. Mostly it’s a unit counts.

Previous Price

Display Previous Price

Want to have a sale ? Pricing can be managed here.

Prefix Text

Add a prefix text for the price. Mostly it’s a currency symbol.

Price Amount

Drop a price for the product / service in here.

Postfix Text

Add a prefix text for the price. Mostly it’s a unit counts.

Content Area

Content Type

A brief description about the product / service and it’s features.

Layout

Select a layout for content.

Content

You can set the content with the tag.

Stylish list

You can see the repeater field options.

Layout

Select a layout for the stylish list’s content.

Features

Select a layout for the stylish list’s content.

List Description

You can see repeater field options.

Select Icon

You can select the icon.

Tool-tip ⭐

A tool-tip/ help text on list item hover.

Content Type⭐

The content type is a selection of whether you want a text or not.

Description ⭐

You can set the tool tip’s description.

Typography ⭐

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the tool-tip text.

Read More Toggle

Read More Toggle

Show read more button after some number of list items.

List Open Default

Show this much list item as a preview and others will be displayed on read more click.

Expand Section Title

Text for expanding button.

Shrink Section Title

Text for collapsing button.

Button

Style

Select your preferred layout for button here.

Button Text

An input to add the title text for the button.

Button Link

A destination page URL for button when clicked.

Icon Type

Icon type is a selection of whether you want an icon or image or not.

Select Icon

On selection of Icon in previous drop down, you’ll be displayed whole list of icons provided by the Font Awesome icon library. If you have purchased license for pro plan and activation has been done then you’ll able to use pro icons too.

Icon Position

You can set an icon position whether you want it before the content or after the content.

Icon Spacing

Set spacing from the left or right edge for content.

Icon Size

You can set the icon size.

Call To Action

Content

A call to action content, to display terms & conditions or any extra text related to pricing.

Ribbon

Display Ribbon

Ribbon is a decorative binding in a both physical and digital worlds. Show the best plan out there for the customers using ribbon.

Layout

Choose a style for ribbon element.

Ribbon Text

Paste an interactive text for the ribbon.

2. Style

The Style tab is used for customizing the appearance of all the Pricing Table Block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title Area

Title Typography

Assign size, weight, spacing and much more to fonts.

Title Color

A color picker to assign suitable color to the title text.

Subtitle Typography

Assign size, weight, spacing and much more to fonts.

Subtitle Color

A color picker to assign suitable color to the subtitle text.

Previous Price

Typography

Assign size, weight, spacing and much more to fonts.

Alignment

Alignment of text into top, middle, bottom.

Price Color

A color picker to assign suitable color to the previous price text.

Price Area

Price Typography

Assign size, weight, spacing and much more to fonts.

Price Color

A color picker to assign suitable color to the price text.

Postfix Typography

Assign size, weight, spacing and much more to fonts.

Postfix Color

A color picker to assign suitable color to the postfix price text.

Content Area

Typography

Assign size, weight, spacing and much more to fonts.

List Icon Size

You can set the list icon size.

Alignment

Alignment of text into left, center, right.

Text Color

A color picker to assign suitable color to the text.

Icon Color

A color picker to assign suitable color to the icon.

List Between Space

You can set the space between stylish list fields.

Toggle Typography

Assign size, weight, spacing and much more to fonts.

Toggle Color

A color picker to assign suitable color to the toggle button.

Top Indent

Space between list items and read more button.

Content Background

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Tooltip Options

Interactive

make tool-tip interactive.

Position

Set tool-tip box around the icon anywhere by selecting here.

Theme

A font & background color mixture for tool-tip theme.

Width

Set Tool-tip width.

Offset & Distance

Set the tool-tip’s position by combining these two parameters.

Arrow

Want arrow pointing to the target or not.

Triggers

Want tool-tip on hover or on click.

Animation

Select animation type for tool-tip.

Duration In

Select amount of time from blank to tool-tip animation. Tool-tip will be Visible.

Duration Out

Select amount of time from tool-tip to blank animation. Tool-tip will be Hidden.

Arrow Color

A color picker to assign suitable color to the arrow.

Tool-tip Padding

Put-in some inner space to an element.

Border

Draw a border around the tool-tip and give width and color to it.

Border Radius

Set the radius curve of the tool-tip’s corner.

Background

Apply suitable background like color/ gradient to the tool-tip.

Box Shadow

Give Box/Text/Drop shadow effect and color to the tool-tip.

Button

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the text.

Button Above Space

An input to set the spacing between content top and button.

Button Bottom Space

An input to set the spacing between content bottom and button.

Padding

Put-in some inner space to an element.

Box Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Call To Action(CTA)

Typography

Assign size, weight, spacing and much more to fonts.

Text Color

A color picker to assign suitable color to the text.

Ribbon

Typography

Assign size, weight, spacing and much more to fonts.

Text Color

A color picker to assign suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border Radius

Set the radius curve of the element’s corner.

Background Options

Padding

Put-in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background Hover Animation

Select animation type for background.

Background

Apply suitable background like color/ gradient to an element.

Overlay Background Color

A color picker to assign suitable overlay background color to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Extra Options

Scale Zoom

With this option, you can set the transform CSS scale property for zoom in or zoom out.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.