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.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.By default, you’ll get the below design-
%20(1).png?alt=media&token=896158c4-9770-4623-8310-33737b6513a6)
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.
%20(1).png?alt=media&token=7dee4635-d87e-4ec8-90c4-95e3cf110973)
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.
%20(1).png?alt=media&token=16de1566-09d1-4d05-a2e7-e3ccbb4ad6f8)
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.
%20(1).png?alt=media&token=6d00641e-f7c0-446e-8829-27d3634ef95d)
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.
%20(1).png?alt=media&token=cb2baf30-eb72-4bcb-90cd-9cfa4efaefca)
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.
%20(1).png?alt=media&token=28510c32-bdf1-427a-81fc-3ec291c61f11)
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.