Pricing Table Block Tutorial

Intro

If you are running an online store, having a Premium Pricing Table Block for Gutenberg becomes extremely vital for selling your products/services online. From web hosting companies selling monthly plans, to sales/discounts offered by ecommerce marketplace, a nice visual representation of price chart is imperative to generate sales.

With Pricing Block for Gutenberg, you now have the option to add a multitude of features to customize, and highlight a price point that you want customers to buy.

But before downloading it, give it a go from this link here. You will see how easy and fun it is to use this table.

First things first, take a glimpse at the Key Features:

Key Features

The Pricing Table Premium Gutenberg Block has all the features you would need to draw a nice price table without the requirement of coding. You also do not need to hire any designer to get a great looking table. Here are all features summarized:

  • Display Options
  • Title
  • Price
  • Features
  • Description
  • Button
  • Badge
  • Table
Pricing Table Block Options.

1. Display Options

Display Options for Pricing Table Block varies depending upon the options that you enable/disable. For example, if Features is disabled, you will not see its options, and vice versa. While it totally depends which option you enable, however we will be covering all of them in this tutorial. Take a look below at all options available:

  • Title
  • Price
  • Features
  • Description
  • Button
  • Badge

2. Title Options

All options for changing the Font, Colors and Text Shadow are available within this drop-down menu for Title:

  • Font
  • Colors
  • Text Shadow
  • Spacings

Font

To adjust Font settings, you can change the style, such as Heading, Font Size and Styling. You can also decide whether you want the Title as all Uppercase or not. Here are all settings:

  • Heading
  • Font Size (PX)
  • Font Weight
  • Style
    • Normal
    • Italic
  • Uppercase
  • Letter Spacing (PX)
  • Line Height (PX)

Colors

You can change the Text and Background color of Premium Pricing Table Block for Gutenberg by selecting a color of your choice. Or, you can also select from a wide range of pre-defined colors:

  • Text Color
  • Background Color
Color options

Text Shadow

You have the option of applying Shadows to the Title Text. Select from a pre-defined range of colors or choose one of your own. You can also choose shadow orientation and change blur settings:

  • Shadow Color
  • Blur
  • Horizontal
  • Vertical

Spacings

Spacings for Premium Pricing Table Block allows you to adjust the margins on top, and bottom. This is important particularly when you want space, in line with your website design. Furthermore, you can also change the padding too. Here are all options:

  • Margin Top (PX)
  • Margin Bottom (PX)
  • Padding (PX)

3. Price Options

This is the most important option for a pricing table as it defines the conversion rates for your website. How you show prices, whether discounted or not, and the color scheme, size, all have a big psychological impact on your potential customers. You have all options to edit from.

If you want to show original price as slashed, type in the price, or leave this area as blank. To change currency settings, you can type in a currency of your choice. Under Price segment, write the price. For Divider and Duration, enter how would you like your price to be displayed, such as weekly, monthly, yearly, etc.

Here are all options:

  • Slashed Price
  • Currency
  • Price
  • Divider
  • Duration

Element to Style

Under this option, you can select any element of the Pricing table to customize its styling. All you need to do is select any Element from the drop down menu, and adjust settings for its size, alignment and color. Here are all options:

  • Element
    • Slashed Price
    • Currency
    • Price
    • Divider
    • Duration
  • Font Size (PX)
  • Font Weight
  • Vertical Align
    • Top
    • Middle
    • Bottom
  • Text Color

Spacings

The Spacings option allows you to adjust the upper, and lower spacing depending on your website design so that you can design a Premium Pricing Table with maximum conversion rates.

You can also change the container color, which is the background color for the Price segment. Here are all options:

  • Container Margins Top (PX)
  • Container Margins Bottom (PX)
  • Container Padding (PX)
  • Container Background Color

4. Features Options

Right under Price Option, you will be able to add product characteristics/features that you are selling. This could be shown in a multitude of ways depending upon how you want the viewers to see it.

The Features Options shows all features related to the Features section of the table. To change how your list items are viewed, simply click on the drop-down menu and select any one of the following:

  • List Style
    • None
    • Check Mark
    • Filled Circle
    • Outline Circle
    • Square
  • Font
  • Colors
  • Spacings

List Style

To change how product features are shown, simply click on the drop-down menu and select any one of the following:

  • None
  • Check Mark
  • Filled Circle
  • Outline Circle
  • Square

Font

Using the Font settings, you can easily change the size, weight, style and spacing of the way product features are displayed. Here are all the options that you can adjust:

  • Font Size (PX)
  • Font Weight
  • Style
    • Normal
    • Italic
  • Uppercase
  • Letter Spacing (PX)
  • Lined Height (PX)

Colors

You can even choose the colors of the font used in product features as well as the background color. To do it, simply select a color from pre-defined range or choose one of your own style:

  • List items Color
  • Background Color

Spacings

Use Spacings to leverage the whitespace on the top and bottom of the Features list. It is up to you to change it, depending upon the overall website design, look and feel:

  • Margin Top (PX)
  • Margin Bottom (PX)
  • Padding (PX)

5. Description Options

Product descriptions are important and hence, in Premium Pricing Table Block for Gutenberg, we are giving you the power to add content helpful for SEO and website traffic. But even more important is how the descriptions are displayed, and this is where customization options come in. Here are all options that you can adjust:

  • Font
  • Colors
  • Spacings

Font

Font Settings for Product Description are important to add a strong visual effect for your potential buyer. Leverage the size, weight, style and spacing options to show how Description can be displayed. Here are all options at your disposal:

  • Font Size (PX)
  • Font Weight
  • Style
    • Normal
    • Italic
  • Uppercase
  • Letter Spacing (PX)
  • Lined Height (PX)

Colors

You can even choose the colors of the font used in product features as well as the background color. To do it, simply select a color from pre-defined range or choose one of your own style:

  • Text Color
  • Background Color

Spacings

Spacings allows you to increase or decrease the amount of whitespace on the top and bottom of a container text. You can also change the padding of the container text. Here are the options that you can adjust:

  • Margin Top (PX)
  • Margin Bottom (PX)
  • Padding (PX)

6. Button Options

Under Button options, you can find all settings for styling. You can change Button colors for a specific animation. With a myriad of options, you have a number of settings that can be adjusted. Have a look at them below:

  • Typography
  • Colors
  • Border
  • Spacings

Typography

Under Typography, you can change any setting related to Fonts for Button Text within Gutenberg’s Pricing Block. These are:

  • Font Size (PX)
  • Font Weight
  • Style
    • Normal
    • Italic
  • Uppercase
  • Letter Spacing (PX)
  • Lined Height (PX)

Colors

With a wide range of pre-defined colors, alongside the option of allowing you to choose your own, you can change different colors for your Premium Button Block for Gutenberg to give the desired animated effects for your button as follows:

  • Text Color
  • Text Hover Color
  • Background Color
  • Background Hover Color

Border

Just like any other Premium Block, the Button Block for Gutenberg has an option to change the type of Border and its specific radius. In this particular case, it will change the border type and radius of the button that you can adjust to match with your website design.

  • Border Type
    • None
    • Solid
    • Double
    • Dashed
    • Dotted
    • Groove

Spacings

Spacings option allows you to increase or decrease spacing and padding of Button in between the Price and Descriptions features of Gutenberg’s Premium Button Block:

  • Width (%)
  • Margin Top (PX)
  • Margin Bottom (PX)
  • Padding (TX)
  • Open link in a new tab
Spacings Options.

7. Table Options

You can change Background Color, Border Type and Box Shadow under Table options for Gutenberg’s Premium Button Block.

  • Background Color
  • Border
    • None
    • Solid
    • Doubled
    • Dotted
    • Dashed
    • Groove
  • Radius
  • Box Shadow
Table Options.

Box Shadow

You can not only set Shadows for individual elements in Premium Button Block for Gutenberg, but also for the entire Table, in other words, the complete Button Block. This allows you for further customization to better blend in with your website design. Here are all options:

  • Shadow Color
  • Horizontal
  • Vertical
  • Blur
  • Position
    • Inset
    • Outline
Box Shadow options

Spacings

Last but not the least, the Spacings option gives you the flexibility to change the spacings for the entire Block as shown below.

Spacings option.
Close Menu