Pricing Block

Pricing blocks present a clear breakdown of your prices and packages. There are three types of pricing blocks available:

• A pricing packages block with prominent price indicators and a list of items such as services or products included in the package.
• A pricing package or individual items pricing list which displays the contents of the pricing package or the brief description of the product or service in a line of text.
• A list of products or services as columns, with a possibility to separate them based on age, purpose, or other criteria.

Adding the block

Here’s how to add a Pricing block:

1. Choose a location where you want to add a pricing block and click on the Add Block + button.
2. In the Block Library, navigate to the Pricing section in the left-hand menu and click on a block that fits your business requirements.

3. Click on the block and it will be automatically inserted into the page.

Customizing the Pricing block with package options

1. Hover over a page element to bring up the dialog box.
2. Click on the “gear” Block settings icon and the Block settings menu will be activated.

You can change the following settings:

Block title: Uncheck if you don’t want to show the block title. This is useful if you want to stack several blocks on top of each other.

Package icon: Uncheck if you don’t want to show icons in the price list.

Package description: Uncheck if you don’t want to include a text description of the pricing.

Package button: Each pricing option can have its own button. Uncheck to remove.

Primary and Secondary buttons: Choose which ones you want to show in the block.

 Once you are done customizing the Block settings, click Save to confirm the changes.

Customizing the block appearance

Go to Block settings > Appearance.

 

You can modify the following settings:

Block style: Choose the color scheme of this block (light or dark)

Content layout: Choose the number of items in a row (3 or 4 items)

Content style: Customize the style of content in this block

•  Add border
• Add shadow

Once you are done customizing these options, click Save and continue editing.

Editing the text in title and subtitle

To replace the demo text with your own text in the block title, simply click on any line anywhere on the page and start typing. You can also paste the text from a text editor you are using.

Editing pricing buttons

You can modify the text in each line’s button by clicking on the button and typing in it.

Editing the Primary and Secondary buttons

You can edit the text in the button by hovering over it and starting to type your own text on top of the button.

Need more Pricing options on your page?

If you would like to display more pricing options, you can easily duplicate any of the block elements. Here’s how you can do that:

1. Hover over any block element you want to duplicate and click on the Duplicate icon.
2. The identical block element will be inserted below the original one.

Now you can modify this new pricing element according to your business needs.

You can also duplicate a pricing element column in the Pricing block with price lists. Here’s how you can do it:

1. Hover over the block you wish to duplicate to activate the control panel.  Click on the Duplicate icon.

2. The new line with prices will be inserted below. The price list will be spaced automatically to preserve the clean look and feel of your site.

Deleting pricing options

You can remove any pricing package elements or individual pricing lines in the Pricing block. Simply hover over any element to trigger the appearance of the dialog box and click on the Delete icon.

 The line will be removed from the Pricing block.

Moving block elements around the block

You can move pricing columns in any way that meets your website goals. To move the column element:

1. Hover over the column to bring up the dialog box, and click on the Move icon. The Move Element rectangle will appear.

2. Drag the element and drop it on another spot inside the block. The yellow marker line will show where the block will fit.
3. The layout of the block will be adjusted automatically to preserve the clean look and feel of your website.

Note: you cannot move pricing lines or columns to another block on the page.

Once you are done customizing the block, click Publish to make changes live.