Pricing List

Pricing List

Pricing list, as name suggests, is used to display prices. A normal but creatively customization UI Block displays prices with some text. With image and animation effects, we have also provided different kinds of pre-built designs to use.

Pro tip
Don’t price for numbers, price for people. People don’t always act rationally !

Configuration for Pricing List

Pricing list contains pricing name and price, or you can add image too just for reference. Nothing else.

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

The Pricing List block comes in three different styles. You can create a standard layout using a customized style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Pricing List 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 List after “/” sign, eg.“/Pricing List”, 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

Layout

Style

Select your preferred layout for pricing list here. We have provided three of them with different UI options.

Alignment

Alignment of component into left, centre or right direction.

Box Align (Style-2)

Alignment of pricing text along with price can be set here.

Hover Effect (Style-2)

Set animation effect on hover here.

Content

Title

Title text for price.

Tag

Tag for the price, eg. Spicy, Sweet, Two Scoops, XL, etc.

Price

You can set the price.

Description

A description text for price, elaborate product in your words.

Image

Custom Image

You’ll be asked to choose and upload image, and after uploading image basic styling option for image would be displayed there.

Image Size

Set the image size options.

Image Shape

With this option, you can set none, rounded, circle, and custom shape of the image.

Upload Mask Image

You’ll be asked to choose and upload mask image.

2. Style

The Style tab is used for customizing the appearance of all the Pricing List 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

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 / image to the text.

Padding

Put-in some inner space to an element.

Line

Line (Border)

Draw a line (Border) between price and price text, show the relation.

Tag

Typography

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

Tag Space

With this option, you can set content space for the tag.

Text Color

A color picker to assign suitable color to the text.

Background

Apply suitable background like color/ gradient / image to the text.

Border Radius

Set the radius curve of the element’s corner.

Padding

Put-in some inner space to an element.

Price

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 / image to the text.

Border Radius

Set the radius curve of the element’s corner.

Padding

Put-in some inner space to an element.

Description

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 / image to the text.

Border Radius

Set the radius curve of the element’s corner.

Padding

Put-in some inner space to an element.

Image

Minimum Width

Set minimum width of image from here.

Maximum Width

Set maximum width of image from here.

Right Space

An input to set spacing between image and content.

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.

Box Shadow

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

Background Options

Background

Apply suitable background like color/ gradient 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.

Box Shadow

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

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

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.