Pricing Tables

Pricing tables shortcode helps you to insert styled pricing tables in different styles in your content.

Style: Select one of eight pre-defined styles for your pricing table

Button Icon: Icon to display on the button in pricing table.

Click on “Save changes”. After that, click on “+” symbol in your added Pricing table element to start inserting pricing columns

Step 2. Inserting One Column

Select “Pricing table column” to insert a new column to your pricing table:

Top Choice: if you wish to set a marker label to your pricing column, you can write a short text here like “NEW!”

Highlighted: choose this option if you wish that this column will be highlighted / emphasized

Column width: here you can set the width of your column – should it be wider for 3 columns in the row or narrower for 4 columns in the row

Top Choice Color: set the font color for your „top choice“ text label

Top Choice Background: set the background color for your „top choice“ text label

Click on “Save changes” to insert your pricing column

Step 3. Inserting Column’s Content

Now you can start filling your pricing column with content. To do this click on “+” symbol in your added pricing column and select the content element you wish to add.

Column’s Header

With this element you can define content and its style for the header of the pricing column:

Column title: Type in the title of your pricing column

Column subtitle: Type in subtitle of your pricing column. Pls note: this subtitle works not for all styles; in few styles it is hidden

Price background color: Choose a background color for your price in header area

Price backgroun image: Or, alternatively, here you can choose a background image for your price in pricing column’s header area

Currency: Type in the currency symbol to be show

Price: Enter the price to be shownTime period: Enter the period of time for the price, i.e. “per month”

Styles: Here you can choose, if you wish to use default styles for title, subtitle, price and time period or if you wish to customize it’s colors:

Column’s Row

After adding a column’s header with title, price etc. you can additionally add different rows with descriptions

To add new row with column’s description, click on „+“ below tzhe header you have already added

and choose „Column’s Row“

After that you get a WYSIWYG editor, where you can start typing your decription. After saving, youcan clone this row several time in order to get additional rows with the same content – the easiest way to populate your column’s row:

Column’s Footer

And finally you would probably want to add a footer area to your pricing column with some button. In order to do this, choose following element:

You will get a settings dialog, where you can customize the look of your pricing column’s button (see description above in section „Button“ )

Column’s Extra Title

Sometimes it is useful to use some additional titles in your pricing row, for example:

To do this, use „Column’s extra title“ element,

fill it with content and move it on the position in your pricing column, where you wish to have it.