Pricing Table

Description and Code

The pricing table shortcode is useful for different packaged offerings. Here's an example of the shortcode in code view:

[pricing_table_component type="1" header_background_color="" header_text_color="" featured_header_background_color="" featured_header_text_color="" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""]
[pricing_column title="Standard" featured="no"][pricing_price currency="$" currency_position="left" price="15.55" time=" / mo"][/pricing_price][pricing_row]Feature 1[/pricing_row][pricing_footer]Signup[/pricing_footer][/pricing_column][pricing_column title="Standard" featured="no"][pricing_price currency="$" currency_position="left" price="15.55" time=" / mo"][/pricing_price][pricing_row]Feature 2[/pricing_row][pricing_footer]Signup[/pricing_footer][/pricing_column]
[/pricing_table_component]

Parameters

Pricing table container - [ pricing_table_component ]

• type
  • set the predefined layout of the pricing table
  • Possible values - 1, 2, 3

• header_background_color
  • defines the header background color of table columns for layout 1 and 3
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• header_text_color
  • defines the header text color of table columns
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• featured_header_background_color
  • defines the header background color of table columns set as featured for layout 3
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• featured_header_text_color
  • defines the header text color of table columns set as featured for layout 3
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• animation_type
  • set the animation type of the component
  • Possible values - none, bounce, fade, flash, shake, slide

• animation_direction
  • set the animation direction of the component
  • Possible values - down, left, right, up

• animation_speed
  • set the animation speed of the component
  • Possible values - in seconds like 0.1, 1, 5.3 etc.

• class
  • custom class for CSS of component
  • Possible values - string - like custom-element-class

• id
  • custom ID for CSS of component
  • Possible values - string - like custom-element-id

Pricing table column - [ pricing_column ]

• title
  • defines the header text of table column
  • Possible values - string - like Standard, Featured etc.

• featured
  • set the column to have featured style for layout 3
  • Possible values - yes or no

Pricing table price - [ pricing_price ]

• currency
  • defines the pricing column currency
  • Possible values - string - like $, £ etc.

• currency_position
  • set the currency position of the pricing column
  • Possible values - left or right

• price
  • set the price value of the pricing column
  • Possible values - number - like 15.55, 10, 99, etc.

• time
  • set the pricing time/period
  • Possible values - string - like one time, 1 month, Free, etc.

Basic Examples

Type 1

Type 2

Type 3

Animated Examples