Pricing Tables

Inserting a Pricing Table

Pricing tables are a great way of showing priced packages, options or services. Choose between two, three, four or five column pricing tables.

Step 1: Switch To Backend Editor

To insert a pricing table, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Pricing Table

Click "Pricing Tables" in the Visual Composer Modal to insert pricing tables, for example:

Pricing Table Settings
Step 3: Edit Table Settings

Once the pricing table element has been inserted click the Edit Link(pen icon) of the pricing table wrapper, for example:

Pricing Table Settings

Here is an overview of available tabs options:

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Table Size

    Determines whether the pricing table should be small, medium, large or extra large in size.

  • Border Style

    Determines whether the table should have sharp corners or rounded corners.

  • Pricing Column Outer Padding

    Determines the table column outer padding.

  • Pricing Column Section Top Padding

    Determines the top padding of the header, price, options, and footer sections of the table column.

  • Pricing Column Section Bottom Padding

    Determines the bottom padding of the header, price, options, and footer sections of the table column.

  • Color Options

    Table Border Color
    Title Background Color
    Title Font Color
    Price Background Color
    Price Font Color

  • Price Interval Opacity

    Determines the opacity of the pricing table interval, entered as a decimal from 0.1-1.

Step 4: Add Content

Once you have edited the parent table parent settings, click the Edit Link(pen icon) of the pricing table panel you wish to edit, for example:

Pricing Table Add Content

Here is an overview of available panel content options:

  • Table Title

    Sets the column title

  • Price

    Determines whether the pricing table should have a price section.

  • Currency

    Determines whether a currency should be shown.

  • Interval

    Determines whether the price is charged at an interval.

  • Options

    This is where you list the table options as an unordered list or just as text.

  • Callout

    Wether the table should be highlighted. If selected, you'll be able to set individual colors for the callout column.

  • Button

    Wether the table should have a button.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Callout Color Options

    Title Background Color
    Title Font Color
    Price Background Color
    Price Font Color
    Options Background Color
    Options Font Color

  • Price Interval Opacity

    Determines the opacity of the pricing table interval, entered as a decimal from 0.1-1.

  • Button Size

    Determines whether button should be small, medium, large or extra large in size.

  • Button Style

    Whether button should have sharp corners, rounded corners, or be pill shaped.

  • Color Options

    Background Color
    Background Color hover
    Border color
    Border color hover
    Label Color
    Label Color Hover
    Drop Shadow

Can't find what you're looking for? Submit a request in our forum.