Pricing List

Pricing list, as name suggests, is used to display prices. A normal but creatively customisation UI widget 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.

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

After placing the widget 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

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.

2. Style

The Style tab is used for customising the appearance of all the Pricing List widget components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. 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

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

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.

Background Options

Background

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

Box Shadow

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

3. Advanced

Advanced Tab Options are common across all the widgets. 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?