• Menu
  • Skip to right header navigation
  • Skip to main content
  • Skip to primary sidebar

Before Header

Why Genesis is the Foundation of Any Smart WordPress Design ↴

Flagship Content

Web design tutorials for service business owners.

  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page
  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page

Pricing Tables

These are the settings for the Atomic Blocks’s Pricing Tables block.

You are here: Home / Atomic Blocks Tutorials / 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

The whole pricing table is selected.
A single pricing column, inside a pricing table, is selected.
A single block, inside a single pricing column, inside a pricing table, is selected.

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.

Font size, padding, background color and text color settings.

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

To select the whole pricing table hover your pointer over the far left hand side of the screen.

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 to customize the text and settings.

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

Customizing the product feature 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.

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Get Premium WordPress ThemesChoose Your Theme

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Get Genesis Framework & StudioPress Themes free.Free themes with hosting

High Quality Hosting

Filed Under: Atomic Blocks Tutorials

Previous Post: « Notice Block
Next Post: Share Buttons »

Site Footer

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Copyright © 2023 · Mai Law Pro on Genesis Framework · WordPress · Log in