Pricing Tables

Adding a simple pricing table to your site is easy using the AB Pricing block.

There are enough styling options to make very clean, smart and professional pricing tables. But to do that you’ll have to work out how all of the AB Pricing block options work and have a good eye for design.

See Examples

The container and nested blocks

Each pricing table is made from…

• One main pricing table block.
• Up to 4 pricing columns inside the pricing table.
• Several blocks nested inside every pricing column.

Drill down

To find a setting inside your pricing table you have to drill down to the level you need.

Pricing Table > Pricing Column > Individual Text or Content block.

The images below show what I mean

Common settings

There are a lot of settings and options available in the pricing table block. But some settings are available in almost all of the different blocks.

There are five blocks or rows in each column of the pricing table.

The blocks (or rows) are…

• Price Title
• Price Subtitle Description
• Product Price
• Product Features
• Product Button

As you click through each block or row in each price column you’ll see that most rows have the same settings for…

• Font Size
• Padding
• Background Color for each row or block
• Text color

There are many other settings available in the pricing table but these four pop up again and again for almost every block.

Settings that affect the whole pricing table

1.) Choose a width: Align Center, Wide Width or Full Width.
2.) You can have up to 6 price columns. I have 2 here.
3.) The pricing columns gap is the gutter or space between the columns.
4.) Advanced: every block has an advanced CSS class option. Useful if you understand CSS.

Settings that affect a single pricing column in the pricing table

5.) Align this column’s content left, center or right.
6.) Padding, most of the time you don’t need to add extra padding.
7.) Border is the thin black border around each column.
8.) Border radius adds rounded corners to the border.
9.) Border color changes the color of the thin black border.
10.) Background color affects the whole column. You can also apply a background color to the individual rows of any pricing column.

Styling individual rows of individual pricing columns

Select any row of any column in the pricing table to add your own text or change the settings. For instance if you select the…

Product Price row

11.) You can show or hide the currency symbol. Type a £ sign in this box if you charge in UK pounds.
12.) You can change the size of the large text in the middle. You can’t change the size of the currency symbol or pricing duration /mo.
13.) To change the text from /mo to /yearly, just type in the box.

The product features list

• First select the product feature section. Then highlight each row of text and type your own text.
• To add more rows of text, place your cursor at the end of a row and press enter.
• The list border style is a bottom border, you can have none, solid, dotted or dashed.
• To make the bottom border thicker increase the list border width. You can also change the border color.

The Product Button

Each pricing column has a button. You can change the color, size and shape of the button. You can make the link open in a new window if you wish. And you can change the background color of the row or block containing the button. All blocks have the Advanced tab that enables you to add CSS classes to target that specific block.

Settings available for the Product Button

14.) Open the link in a new window (toggle on or off)
15.) Button size: small, medium, large and extra large.
16.) Button shape: square,rounded square and circular.
17.) Button color: choose the background color of the button.
18.) Button text color: color of the text on the button.
19.) Color Settings > Background Color: color of the row or block containing the button.