Responsive Gutenberg Addons
Responsive Gutenberg Blocks Library
Search…
⌃K

Pricing List

Pricing List Block allows you to add an attractive price list. You can add names, images, descriptions, and prices for particular menu items.

How To Add The Pricing List Block

  1. 1.
    Open a page or a post and click on the plus icon to add a new block and look for the Pricing List or you can search for it if it doesn’t pop up quickly for you.
  2. 2.
    By default, you'll get the below design-

How To Configure The Pricing List Block

To configure the content of your Pricing List, switch to the ‘Content’ tab.

General

  • Number of Items: Choose the number of items to display in the block.
  • Columns: Choose the number of columns for the price list.

Image

  • Image Settings: You can add images to the price list items individually.
  • Image Position: You can choose where you want to place the image- top, left, or right of the content.
  • Image Size: Image size Full, Thumbnail, Medium, Large can be selected.
  • Width: Set width of image from 0-500 px.

How To Style The Pricing List Block

Switch to the ‘Style’ tab to customize every element of the Pricing List block.

Separator

  • Separator Style: You can select the style of the separator as solid, dotted, dashed, double, etc.
  • Separator Width(%): You can set the width of the separator in percentage from here.
  • Separator Thickness: You can choose the thickness of the separator in pixels.
  • Separator Color: Choose a color for the separator.

Color Settings

  • Title Color: You can choose a color for the price list title from here.
  • Content Color: You can choose a color for the price list content from here.
  • Price Color: You can choose a color for the price from here.

Spacing

The Spacing tab offers options to customize the spacing for Row Gap, Column Gap, Title Bottom Margin as well as the top, bottom, left & right padding.

Typography

Under the typography section, you can set typography options such as font family, font size, font weight & line height for the Title, Description & Price.