Pricing block

  • 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.

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. Click on the block and it will be automatically inserted into the page.

Customizing the Pricing block with lists

  1. Insert the block as described at the beginning of this article.
  2. Hover over a page element to bring up the dialog box.
  3. Click on the “gear” Settings icon and the Block settings menu will appear.

Managing_various__Pricing__blocks_01__purple_.pngYou can change the following settings:

  • Block secondary titlecheck the box to display the line of text above the main title. To remove, uncheck the box.
  • Block title: check the box to display the main text. To remove, uncheck the box.
  • Block subtitle: check the box to display the block of text below the main title. To remove, uncheck the box.
  • Pricing icon: check the box to display the icon that symbolizes the package. To remove, uncheck the box. You can replace the icon by hovering over it and choosing the new icon from the Icon Library. Here’s how you can replace icons.
  • Pricing list: check the box to display the list below the price. To remove, uncheck the box. You can also remove each individual line of text.
  • Pricing button: check the box to display the button in each column of the Pricing blocks. To remove the button, uncheck the box.
  • Primary and Secondary buttons: check the box to display each of these buttons. To remove any of them, uncheck the box.

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

Customizing the Pricing block with line descriptions

Insert the block with the horizontally aligned package or product descriptions as described above. Hover over any element or empty space to bring up the dialog box.

Click on the “gear” Settings icon and the Block settings menu will appear.

Managing_various__Pricing__blocks_02__purple_.png

You can change the following settings:

  • Block secondary titlecheck the box to display the line of text above the main title. To remove, uncheck the box.
  • Block title: check the box to display the main text. To remove, uncheck the box.
  • Block subtitle: check the box to display the block of text below the main title. To remove, uncheck the box.
  • Pricing button: check the box to display the button in each column of the Pricing blocks. To remove the button, uncheck the box.
  • Primary and Secondary buttons: check the box to display each of these buttons. To remove any of them, uncheck the box.

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

Editing the Pricing list block

You can choose a block with a list of your products or services with corresponding prices. You can divide the lists by any criteria you choose fit and change the headings of these lists accordingly.

  1. Insert the block with the horizontally aligned package or product descriptions as described at the beginning of this article.
  2. Hover over any element or empty space to bring up the dialog box.
  3. Click on the “gear” Settings icon and the Block settings menu will appear. 

Managing_various__Pricing__blocks_03__purple_.png

You can modify the following settings:

  • Block secondary titlecheck the box to display the line of text above the main title. To remove, uncheck the box.
  • Block title: check the box to display the main text. To remove, uncheck the box.
  • Block subtitle: check the box to display the block of text below the main title. To remove, uncheck the box.
  • Secondary button: check the box to display this button. To remove it, uncheck the box.

Editing the text in title, subtitle and pricing details

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. The button’s link can lead to the payment page.

 

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.

To add the destination to the button, hover over the button to trigger the appearance of the dialog box. Click on the “chain link” Link icon and choose the page where this button leads to, an email address, or an external URL.

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.

Managing_various__Pricing__blocks_04__purple_.png

2. The identical block element will be inserted below the original line.

Managing_various__Pricing__blocks_05__purple_.png

Now you can modify this new line according to your business plan.

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 trigger the dialog box.  Click on Duplicate icon.
  2. The new column 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. Simply hover over any element to trigger the appearance of the dialog box and click on the Delete icon.

Managing_various__Pricing__blocks_06__purple_.png

 The line will be removed from the Pricing block. 

Moving block elements across the page

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.
  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. 

Was this article helpful?
0 out of 0 found this helpful