Pricing block

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

A pricing package 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 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.

This block offers premium layouts with distinctive features and decorations that can elevate your site's visual appeal and functionality. Explore our premium blocks in our dedicated tutorial.

Here’s how to add a Pricing block:

Choose a location where you want to add a Price block and click the Add Block (+) Plus button.
In the Blocks library, navigate to the Price section and click it to see the pre-designed layout for this block type.
Click the block that fits your website strategy. It will be automatically added to the page.

Customizing block settings

You can customize the Pricing block with the help of its control pane. To activate it, hover over the block and then click the Block settings icon.

The block settings menu consists of two tabs: the Layout tab and the Appearance tab.

In the Layout tab, you can switch the block layout and choose which elements should be displayed in the block. To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to the element’s name.

In the Appearance tab, you can make the following changes:

Block style: Change the color scheme of the block.
Block spacing: Change the whitespaces on the top and bottom of the block.
Content layout: Choose the number of items in a row.
Content style: add a border or add a shadow to make the elements stand out on the page:

Note: Depending on the block layout you choose, you may have more or fewer controls in the Appearance tab.

Once you are done customizing block settings, click Save. You can reverse any action by clicking Undo on the Topbar or pressing Ctrl+Z (Command+Z on Mac) on your keyboard.

Read more about managing your blocks in our dedicated tutorial.

Editing text in the Pricing block

To edit the demo content in your Pricing block, click the text container and start typing your new text. Or you can copy and paste your existing content from your text editor.

You can format the text to your liking. To learn more, visit our Text editing and formatting tutorial.

Editing buttons

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

To add the link to the button, hover over the button to trigger the appearance of the Edit link dialog box. Click the link icon and choose the click action of your preference.

Learn how to assign various click actions to your buttons from this article.

Duplicating the Pricing block

If you want to display more pricing options, you can duplicate the whole block or some block elements.

Here’s how you can do this:

Hover over the block you want to duplicate, and then click the Duplicate icon on the control pane.
The identical block will be inserted below.

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

Hover over the block element you wish to duplicate to trigger its controls.
Click the Duplicate icon.
The new element with prices will be inserted below. It 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. Hover over the element's white space to trigger its controls' appearance and click the Delete icon.

The element will be removed from the Pricing block.

Moving block elements inside the block

You can move pricing elements inside the block. To move the column element, follow these instructions:

Hover over the element to bring up its controls, and click on the Move icon.
Drag the element and drop it on another spot inside the block. The yellow marker line will show where the block will fit.
The layout of the block will be adjusted automatically to preserve the clean look and feel of your website.

Note: The elements can be moved only inside the block. You cannot move Pricing block elements to another block on the page.