The Pricing block presents a clear overview of your prices and packages. There are three types of Pricing block:
- A pricing package block with prominent price indicators and a list of items – for example the services or products included in the package.
- A pricing package list or price list for individual items, showing the contents of a package or a short description of a product or service on one line.
- A list of products or services in columns, with the option to separate them by age, purpose or other criteria.
This block also offers exclusive layouts with distinctive features and decorations that require Sitebuilder Large.
Adding a Pricing block
- Choose where you want the block and click Add Block (+).
- In the Blocks library, go to the Price section to see the ready-made layouts.
- Click the block that suits your site – it’s added to the page automatically.
Customising the block settings
Hover over the block and click the Block settings icon. The menu has two tabs: Layout and Appearance.
In the Layout tab you can switch layouts and choose which elements appear – remove the blue tick next to an element to hide it.
In the Appearance tab you can change:
- Block style: the block’s colour scheme.
- Block spacing: the space above and below the block.
- Content layout: the number of items per row.
- Content style: add a border or shadow to make elements stand out.
Note: the controls available may vary depending on the layout. Click Save when done, and undo any action with Undo in the top bar or Ctrl+Z (Cmd+Z on Mac).
Editing text in the Pricing block
Click a text container and start typing to replace the demo content, or paste in text from elsewhere. You can format the text however you like.
Editing buttons
Click a button and start typing to replace its text. To add a link, hover over the button to activate the Edit link dialog, click the link icon and choose the click action you want.
Duplicating the Pricing block
To show more pricing options, you can duplicate the whole block or individual elements:
- Hover over the block and click the Duplicate icon in the control panel – an identical block is inserted below.
To duplicate a single price element within a price list:
- Hover over the element to activate its controls.
- Click the Duplicate icon.
- The new price element is inserted below, automatically spaced to keep the layout clean.
Removing pricing options
Hover over the white area of any pricing package element or price row to activate its controls, then click the Delete icon. The element is removed from the Pricing block.
Moving elements within the block
- Hover over the element to activate its controls and click the Move icon.
- Drag the element to another position within the block – a yellow line shows where it will be placed.
- The block’s layout adjusts automatically to keep your site looking clean.
Note: elements can only be moved within the block – you can’t move Pricing block elements into another block on the page.